Howto Embed Flash Using JavaScript

Marketing

Howto Embed Flash Using JavaScript

Back in March of 2006 Tyler Hall wrote an entry titled, “The Internet Will End on April 11.” In it he wrote:

The changes to Internet Explorer will require web developers to completely rewrite the way they use embedded content across all of their websites. Once the update ships on April 11, websites which have not updated their code won’t display the content correctly until users manually click and activate each instance on the page individually, every time they view the page. Ouch.

The Internet didn’t end, but things did get uglier. When you view Flash content in IE6 or IE7 that has had the SWF movie encased inside an EMBED element, a wide border appears when you put the cursor over it. Tyler mentioned that the best way around this was to use JavaScript, but there wasn’t an elegant solution available at the time.

Fortunately, it didn’t take long for two solid JavaScript solutions to be created — SWFObject and Unobtrusive Flash Objects (UFO). Both solutions are easy to implement and function well in all browsers and operating systems. However, my favorite solution is UFO, because it has the simplest and quickest implementation of the two.

Unobtrusive Flash Objects (UFO)

  1. Download UFO
  2. Place a link to the JavaScript file in the HEAD area.

    <script type=”text/javascript” src=”ufo.js”></script>

  3. Set the parameters for the Flash movie after the JavaScript link. “ufoDemo” can be called whatever you want and will be referenced in the next step.

    <script type=”text/javascript”>
    var FO = { movie:”swf/myMovie.swf”, width:”300″, height:”120″,
    majorversion:”6″, build:”40″ };
    UFO.create(FO, “ufoDemo“);
    </script>

  4. Place the following HTML where you want the SWF to appear. The ID should match name you created in the previous step — in this case, it’s ufoDemo. You will also want to change the Replacement content text to reflect what you want users to see if they don’t have the Flash Player installed.

    <div id=”ufoDemo“>
    <p>Replacement content</p>
    </div>

The following parameters can be used to control the appearance and behavior of the Flash movie.

Parameters

UFO uses Macromedia’s Flash OBJECT and EMBED tag attributes as parameters. The following parameters are required:

  • movie
  • width
  • height
  • majorversion
  • build

The following parameters are optional:

  • id
  • name
  • swliveconnect
  • play
  • loop
  • menu
  • quality
  • scale
  • align
  • salign
  • wmode
  • bgcolor
  • base
  • flashvars
  • devicefont
  • allowscriptaccess
  • seamlesstabbing

UFO specific optional parameters:

  • xi:”true”
  • ximovie:”[URL of express install Flash movie]“
  • xiwidth:”[width of customized express install Flash movie]“
  • xiheight:”[height of customized express install Flash movie]“
  • xiurlcancel:”[URL of cancel page]“
  • xiurlfailed:”[URL of failed page]“
  • setcontainercss:”true”

More details and examples can be found on the Unobtrusive Flash Objects (UFO) Website.

Comments are closed on this post