Geekly Articles each Day
📜 ⬆️ ⬇️

Embedding Flash with SWFObject 2

The question of introducing Flash using markup to the appropriate standards arises quite often, while this problem has a fairly well-known solution - SWFObject. SWFObject 2 not only allows you to embed Flash dynamically, using JavaScript, but also statically, when standard markup is used for embedding, and JavaScript only fixes unsolvable problems using markup, while even if JavaScript is turned off, users will still see Flash.

Download the library and get more information on the SWFObject project page in Google Code.

What is a SWFObject?


SWFObject 2:


Why should you use SWFObject?



You can find a detailed justification for the use of SWFObject 2 in the Flash Embedding Cage Match article published on A List Apart [ http://www.alistapart.com/articles/flashembedcagematch/ ].
')

Why does SWFObject use javascript?


SWFObject 2 uses JavaScript primarily to overcome problems that are insurmountable with markup:


Which publishing method is preferred, static or dynamic?


SWFObject 2 allows you to embed Flash in two different ways:
  1. With the static publishing method, Flash and alternative content are injected using standard markup, and JavaScript is used to solve insurmountable problems with markup.
  2. The dynamic publishing method is based on the replacement of alternative Flash content with content in case there is a sufficiently new version of the Flash player and support for JavaScript.

Advantages of the static publishing method :
  1. Uses standard markup
  2. The mechanism for introducing Flash content does not depend on JavaScript, so Flash will be available to a much larger audience:

Advantages of the dynamic publishing method :
  1. Allows you to bypass the mechanisms for activating active content in Internet Explorer 6/7 and Opera 9+. Please note that Microsoft has released updates excluding the activation mechanism in Internet Explorer browsers [ http://www.swffix.org/devblog/?p=19 ]
  2. Well integrated into JavaScript applications.


Static Flash Publishing Method with SWFObject



Step 1: Embed Flash and Alternate Content with Standard Layout


SWFObject uses the nested object method (with conditional comments for Internet Explorer) [ http://www.alistapart.com/articles/flashembedcagematch/ ] this is the most optimal cross-browser markup that meets the standards and allows you to specify alternative content [ http: //www.swffix .org / testsuite / ]:
  <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en '>
   <head>
     <title> SWFObject - step 1 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
   </ head>
   <body>
     <div>

       <object classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" width = "780" height = "420">
         <param name = "movie" value = "myContent.swf" />

         <! - [if! IE]> ->
         <object type = "application / x-shockwave-flash" data = "myContent.swf" width = "780" height = "420">

         <! - <! [endif] ->
           <p> Alternative content </ p>
         <! - [if! IE]> ->
         </ object>
         <! - <! [endif] ->

       </ object>

     </ div>
   </ body>
 </ html>

Note: The method of nested objects requires duplication of the object declaration (the external object is intended for Internet Explorer and the internal object for other browsers), so if you need to define attributes or param for an object, then you need to duplicate them for the external and internal objects.
Required attributes:

Required param elements:

Note: We recommend not using the codebase attribute to specify the URL of the installation of Flash from Adobe servers, since this is contrary to the specification that restricts access to the domain of the current document. Instead, use alternative content with the message that the user can get the full version by installing the Flash plugin.

How to use HTML to configure Flash content?


You can use the optional attributes of the object element [ http://www.w3schools.com/tags/tag_object.asp ]:

You can use flash-specific param elements [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]:


Why do you need alternative content?


The object element may contain alternative content that will be displayed if Flash Player is not installed or not supported. Alternative content is available to search engines, so it can be a good tool when optimizing a site for search engines. Alternative content is needed if you want to make the site accessible to users not using plugins [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html ], well indexed by search engines [ http://www.adobe.com/ devnet / flash / articles / progressive_enhancement_04.html ] and unobtrusively showing users that they can see it in all its glory if they install the Flash plugin.

Step 2: Connecting the SWFObject Library


The SWFObject library consists of one external JavaScript file. The SWFObject code is executed immediately after it loads the file, DOM manipulations are performed after the DOM is loaded, in browsers that support it, such as IE, Firefox, Safari and Opera 9+, or onload in other cases:
  <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en '>
   <head>
     <title> SWFObject - step 2 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />

     <script type = "text / javascript" src = "swfobject.js"> </ script>

   </ head>
   <body>
     <div>
       <object classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" width = "780" height = "420">

         <param name = "movie" value = "myContent.swf" />
         <! - [if! IE]> ->
         <object type = "application / x-shockwave-flash" data = "myContent.swf" width = "780" height = "420">

         <! - <! [endif] ->
           <p> Alternative content </ p>
         <! - [if! IE]> ->
         </ object>
         <! - <! [endif] ->

       </ object>
     </ div>
   </ body>
 </ html>


Step 3: Register your Flash content and set parameters


First, add a unique id to the external element of the object defining the Flash content, then you need to call the swfobject.registerObject method with the following arguments:
  1. The first argument (string, required) id used in the markup.
  2. The second argument (String, required) is the required version of the Flash player. If an older version of the SWFObject Flash Player is installed, it is forced to display alternative content (DOM manipulations are performed). The version number of the Flash player usually contains four elements major.minor.release.build, SWFObject works only with the first 3 numbers, therefore both WIN 9.0,18,0 (IE) and Shockwave Flash 9 r18 (all other browsers ) will be converted to "9.0.18".
  3. The third argument (String, optional) is used to activate Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ] and must be equal to the URL of your express install SWF file. Express install displays the standard Flash plugin download dialog instead of Flash content, if the required plugin version is not installed. There is already a ready expressInstall.swf in the project archive. In addition, there are corresponding expressInstall.fla and AS files (in the SRC directory) in case you need to modify the existing one or create your own express install. Please note that express install only works once (at first execution), requires Flash Player version 6.0.65 or older on Win or Mac platforms, the minimum possible SWF size for its operation is 310x137px.


  <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en '>
   <head>
     <title> SWFObject - step 3 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
     <script type = "text / javascript" src = "swfobject.js"> </ script>

     <script type = "text / javascript">
     swfobject.registerObject ("myId", "9.0.0", "expressInstall.swf");
     </ script>

   </ head>

   <body>
     <div>

       <object id = "myId" classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" width = "780" height = "420">

         <param name = "movie" value = "myContent.swf" />
         <! - [if! IE]> ->
         <object type = "application / x-shockwave-flash" data = "myContent.swf" width = "780" height = "420">

         <! - <! [endif] ->
           <p> Alternative content </ p>
         <! - [if! IE]> ->
         </ object>
         <! - <! [endif] ->

       </ object>
     </ div>
   </ body>
 </ html>


Tips




Dynamic publishing method using SWFObject



Step 1: Create alternative content using standard markup


The dynamic publishing method follows the principles of progressive enhancement [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html ] and replaces alternative HTML content with Flash content in case there is sufficient support for JavaScript and Flash. When using the dynamic publishing method, you need to create an HTML container with alternative content and set an id for it:
  <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en '>
   <head>
     <title> SWFObject dynamic embed - step 1 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
   </ head>
   <body>

     <div id = "myContent">

       <p> Alternative content </ p>
     </ div>

   </ body>
 </ html>


Step 2: Connecting the SWFObject Library


The SWFObject library consists of one external JavaScript file. The SWFObject code is executed immediately after the file is loaded, DOM manipulations are performed after the DOM is loaded, in browsers that support it, such as IE, Firefox, Safari and Opera 9+, or on onload oriental cases:
  <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en '>
   <head>
     <title> SWFObject dynamic embed - step 2 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />

     <script type = "text / javascript" src = "swfobject.js"> </ script>

   </ head>
   <body>
     <div id = "myContent">
       <p> Alternative content </ p>
     </ div>

   </ body>
 </ html>


Step 3: Deploying SWF with JavaScript


swfobject.embedSWF (swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) this method has five mandatory and four optional parameters:
  1. wfUrl (string, required) URL of the SWF file
  2. id (String, mandatory) id of the HTML element (containing alternative content) to be replaced with Flash content
  3. width (string, required) swf width
  4. height (String, required) SWF height
  5. version (String, required) Flash player version required for this SWF (format: "major.minor.release")
  6. expressInstallSwfurl (String, optional) sets the URL of your express install SWF and activates the Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]. Please note that express install only works once (when first performed), requires Flash Player version 6.0.65 or a higher Win or Mac platform, the minimum possible SWF size is 310x137px.
  7. flashvars (String, optional) variables transmitted by Flash as pairs name: value
  8. params (String, optional) params elements nested in object as pairs name: value
  9. attributes (String, optional) attributes of the object element as pairs name: value

Note: You can omit the optional parameters, provided that this does not change the order of the parameters. If you do not want to use an optional parameter, but want to use the parameter following it, just set it to false. The flashvars, params and attributes parameters are JavaScript objects, you can skip them not only by the above method, but also by passing an empty object: {}.
  <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en '>
   <head>
     <title> SWFObject dynamic embed - step 3 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
     <script type = "text / javascript" src = "swfobject.js"> </ script>


     <script type = "text / javascript">
     swfobject.embedSWF ("myContent.swf", "myContent", "300", "120", "9.0.0");
     </ script>

   </ head>
   <body>
     <div id = "myContent">
       <p> Alternative content </ p>
     </ div>

   </ body>
 </ html>


Configuring Flash Content


You can use the optional attributes of the object element [ http://www.w3schools.com/tags/tag_object.asp ]:

You can use flash-specific param elements [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]:


How to use javascript objects to set variables, parameters and attributes?


You can create JavaScript objects using the object literal:
  <script type = "text / javascript">

 var flashvars = {};
 var params = {};
 var attributes = {};

 swfobject.embedSWF ("myContent.swf", "myContent", "300", "120", "9.0.0",
                    "expressInstall.swf", flashvars, params, attributes);

 </ script>

Name: value pairs can be added when creating an object (note: do not put a comma after the last name: value pair):
  <script type = "text / javascript">

 var flashvars = {
   name1: "hello",
   name2: "world",
   name3: "foobar"
 };
 var params = {
   menu: "false"
 };
 var attributes = {
   id: "myDynamicContent",
   name: "myDynamicContent"
 };

 swfobject.embedSWF ("myContent.swf", "myContent", "300", "120", "9.0.0",
                    "expressInstall.swf", flashvars, params, attributes);


 </ script>

Or after him:
  <script type = "text / javascript">

 var flashvars = {};
 flashvars.name1 = "hello";
 flashvars.name2 = "world";
 flashvars.name3 = "foobar";

 var params = {};
 params.menu = "false";

 var attributes = {};
 attributes.id = "myDynamicContent";
 attributes.name = "myDynamicContent";

 swfobject.embedSWF ("myContent.swf", "myContent", "300", "120", "9.0.0",
                    "expressInstall.swf", flashvars, params, attributes);


 </ script>

In one line it can be written like this:
  <script type = "text / javascript">

 swfobject.embedSWF ("myContent.swf", "myContent", "300", "120", "9.0.0",
                    "expressInstall.swf", {name1: "hello", name2: "world", name3: "foobar"},
                    {menu: "false"}, {id: "myDynamicContent", name: "myDynamicContent"});


 </ script>

If you do not want to use the optional argument, you can pass false or an empty object (Note: for SWFObject 2.1 you can also use null or 0):
  <script type = "text / javascript">

 var flashvars = false;
 var params = {};
 var attributes = {
   id: "myDynamicContent",
   name: "myDynamicContent"
 };

 swfobject.embedSWF ("myContent.swf", "myContent", "300", "120", "9.0.0",
                    "expressInstall.swf", flashvars, params, attributes);


 </ script>

The flashvars object is designed to simplify working with variables transmitted in Flash, if you wish, you can ignore it and send flashvars through the params object:
  <script type = "text / javascript">

 var flashvars = false;
 var params = {
   menu: "false",
   flashvars: "name1 = hello & name2 = world & name3 = foobar"
 };
 var attributes = {
   id: "myDynamicContent",
   name: "myDynamicContent"

 };

 swfobject.embedSWF ("myContent.swf", "myContent", "300", "120", "9.0.0",
                    "expressInstall.swf", flashvars, params, attributes);

 </ script>


Tips




Switching from SWFObject 1.5 to SWFObject 2


  1. SWFObject 2 has NO backward compatibility with SWFObject 1.5
  2. Preferably all the javascript code is in the head section.
  3. The library name is now lowercase: swfobject instead of SWFObject
  4. Methods are only available through the library (instead of the SWFObject instance in SWFObject 1.5)
  5. API is absolutely new: [ http://code.google.com/p/swfobject/wiki/api ]
  6. SWFObject 2 replaces the specified HTML block with alternative content completely, including the container element, in case there is sufficient support for Flash and JavaScript, while SWFObject 1.5 replaces only the contents of the specified container. If you do not explicitly specify the id attribute, the object element automatically inherits the id of the specified HTML container with alternative content.


Transition from UFO to SWFObject 2


  1. SWFObject 2 replaces the specified HTML block with alternative content, including the container element, in case there is sufficient support for Flash and JavaScript, while the UFO replaces only the content of the specified container. If you do not explicitly specify the id attribute, the object element automatically inherits the id of the specified HTML container with alternative content.
  2. setcontainercss is not in SWFObject 2, similar functionality is provided by the SWFObject JavaScript API: swfobject.createCSS (selStr, declStr) [ http://code.google.com/p/swfobject/wiki/api ]


Does SWFObject 2 support MIME type application / xhtml + xml?


SWFObject 2 does NOT support XML MIME types, it is a conscious decision.
There are several reasons why we do not support them:


Additions proposed in the comments:

Tools for Flash implementation in popular JS frameworks


jQuery - jQuery Flash Plugin
mootools - swiff

WMODE


A parameter worthy of special mention.
wmode can take values: window, opaque, transparent and determines the mode of displaying Flash on a web page.
window is the default; in this mode, flash uses a separate window (within the page). The main problem with this mode is that flash is displayed on top of any page elements, regardless of their z-order, which is often caused by flash drop-downs. menu and other troubles.
opaque - an opaque flash that does not overlap the elements of the page that it should not overlap.
transparent - a transparent flash, through which the background of the HTML page shines through, as in the previous case, does not overlap what it should not overlap, but in this mode there may be performance problems when using animation.
Unfortunately, wmode does not solve the problem of overlapping the flash movie with other elements in Linux, at least in FF3 does not exactly solve it.

Once again the link to the description of all parameters http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701&sliceId=1

Source of translation: Design For Masters

Source: https://habr.com/ru/post/31615/

More articles:


All Articles