Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts

    Best Method of Embedding Flash

    One of the most common issues with Flash is how to properly embed it into a website. While several methods are available, my preferred method is by using SWFObject. It will try to display Flash using the best method it can based on the browser ability and type. There are two versions, 1.5 and 2.0. 1.5 is a little bit simpler to use, but 2.0 is recommended for its extended abilities and will be explained here.

    There are two methods which you can use. They are called Static or Dynamic. From SWFObject:
    1. The static publishing method embeds both Flash content and alternative content using standards compliant markup, and uses JavaScript to resolve the issues that markup alone cannot solve
    2. The dynamic publishing method is based on marked up alternative content and uses JavaScript to replace this content with Flash content if the minimal Flash Player version is installed and enough JavaScript support is available (similar like previous versions of SWFObject and UFO)

    The advantages of the static publishing method are:
    1. The actual authoring of standards compliant markup is promoted
    2. The mechanism of embedding Flash content does not rely on a scripting language, so your Flash content can reach a significant bigger audience:
    o If you have the Flash plug-in installed, but have JavaScript disabled or a use a browser that doesn't support JavaScript, you will still be able to see your Flash content
    o Flash will now also run on a device like Sony PSP, which has very poor JavaScript support
    o Automated tools like RSS readers are able to pick up Flash content
    The advantages of the dynamic publishing method are:
    1. It avoids click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+. Please note that Microsoft is currently phasing out all active content from its Internet Explorer browsers [ http://www.swffix.org/devblog/?p=19 ]
    2. It integrates very well with scripted applications
    Basically, if you can, use the Static method. I will outline both below, but for more indepth information about which is better, read the documentation on the site below. I recommend the Static, unless you are planning to do some major scripting.

    Static method

    Code:
    <!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 Example</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("swfplaceholder", "9.0.0", "expressInstall.swf"); // First parameter: name of Object ID, Second parameter: Minimum Flash version, Third Parameter: 
        </script>
    
      </head>
      <body>
        <div>
    
          <object id="swfplaceholder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
    
            <param name="movie" value="swfFile.swf" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="swfFile.swf" width="780" height="420">
            <!--<![endif]-->
              <p>Alternative content</p>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
        </div>
      </body>
    </html>
    The bolded sections are key, and should be modified for your particular needs. Make sure the swfobject.js file is linked properly in the script tag. The JavaScript code is noted. Make sure the object ID matches the code in the swfobject.registerObject function. Change the width, height, and swfFile.swf names to fit your Flash document's size and name. Lastly, change the alternative content to something fitting for your site.

    There are more parameters you can add, just like <param name="wmode" value="transparent" /> which will make the Flash document have a transparent background. More complete information is on the SWFOjejct documentation.

    Dynamic method

    Code:
    <!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 Example</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">
    
    var flashvars = { // These are variables which are passed to the Flash document - they have to be already defined in the SWF
      buttonText: "Press Me Please",
      imageURL: "funnypicture.jpg" // Don't put anything after the last ", if you add more variables use a comma to separate entries but leave the last entry without one, same applies to the params and attributes
    };
    var params = { // Parameters for display
      menu: "false",
      wmode: "transparent" // a common request to make the 
    };
    var attributes = {
      id: "newID",
      name: "newID"
    };
    // 1 - Name of file to load, 2 - ID of DIV to replace with SWF, 3 - width, 4 - height, 5 - Minimum Flash version, 6 - Express Install (if not using then place false), 7-9 - sends the arrays
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
    
    </script>
    
      </head>
      <body>
        <div id="myContent">
          <p>Alternative content</p>
        </div>
      </body>
    </html>
    First we need to include the swfobject.js file. Then the flashvars, params, and attributes need to be set. There are numerous options for these, and checking the site for specific documentation would be better than rewriting it here. Then you will place the swfobject.embedSWF line, which is where the magic happens. It is notated what each of the parameters are, but make sure to adjust them all accordingly. If you don't have any variables to pass to Flash, then delete the flashvars array and remove it from the swfobject call. The same applies for params and attributes. They aren't required, but you cannot rearrange them. You can remove one, but can't place params before flashvars, etc.

    What is Express Install?
    In both cases there is an expressInstall.swf there. There is a file that comes with the SWFObject from Adobe which is intended to help people upgrade their Flash players if it doesn't meet the minimum requirement. If you choose to use it (there is no harm in using it, and it could be useful for people to easily upgrade), you should place it on your server and set the link to it where the "expressInstall.swf" is now. You can replace that part (including the quotes) with false if you choose not to use this ability.

    Download the Code

    V2.0 http://code.google.com/p/swfobject/

    V1.5 http://blog.deconcept.com/swfobject/ - Not described here

    Code Generator: http://www.swffix.org/swfobject/generator/

    This is a quick tutorial on how to place Flash onto your pages in a valid, proper manner. If you are using any other method, it might be working, but switching to SWFObject would make the code valid and more stable across browsers.

    Good luck.

  • #2
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hai

    I am Arul..
    Nice examples have been given...
    Thank you..

  • #3
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    It appears the link for the generator is no longer valid. It is now

    http://www.bobbyvandersluis.com/swfo...tor/index.html
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •