Generating SWFObject HTML Code

This section provides a tutorial example on how to generate HTML code using SWFObject JavaScript library with the SWFObject generator to embed mp3player Flash in a Web page.

To learn how to use SWFObject Generator, let's try to generate the HTML code to embed mp3player:

1. Open index.html provided in SWFObject Generator in a Web browser.

2. Enter these values in the "SWFObject configuration" section:

SWFObject (.js): swfobject.js
Publishing method: Dynamic publishing
Detect Flash version: 9.0.0
Adobe Express Install: unchecked
HTML container id: myContainer

3. Click "more" in the "SWF definition" section, click "add" next to Flashvars, then enter these values:

Flash (.swf): player_mp3_maxi.swf
Dimension: 200x20
Flash content id: myFlash
Attributes - name: myMP3Player
Parameters - wmode: transparent
Flashvars - mp3 = Music_Sample.mp3
Flashvars - config = mp3player_config.txt

4. Enter these values in "HTML definition" section

HTML Template: XHTML 1.0 Strict
Character encoding: utf-8
Alternative content: mp3player is embedded here!

5. Click the "Generate" button. You will see the HTML code generated in the "Generated output" section:

<!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></title>
      <meta http-equiv="Content-Type"
         content="text/html; charset=utf-8" />
      <script type="text/javascript" src="swfobject.js"></script>
      <script type="text/javascript">
         var flashvars = {};
         flashvars.mp3 = "Music_Sample.mp3";
         flashvars.config = "mp3player_config.txt";
         var params = {};
         params.wmode = "transparent";
         var attributes = {};
         attributes.id = "myFlash";
         swfobject.embedSWF("player_mp3_maxi.swf", "myContainer",
            "200", "20", "9.0.0", false, flashvars, params,
            attributes);
      </script>
   </head>
   <body>
      <div id="myContainer">
         mp3player is embedded here!
      </div>
   </body>
</html>

Very nice, the generated HTML code is ready to be copied to your Web page!

Table of Contents

 About This Book

 Introduction of Adobe Flash

 Adobe Flash Player Plugin for Firefox

 Adobe Flash Player Plugin for Chrome

 Adobe Flash Player Plugin for Safari

 Adobe Flash Player ActiveX for IE

 Using "object" Elements for Flash Files

 Using "embed" Elements for Flash Files

 "mp3player" - MP3 Music Player

SWFObject - Hidding "object" behind JavaScript

 What Is SWFObject?

 Calling swfobject.embedSWF() Function

 embedSWF() Function and Arguments

 Calling embedSWF() with "flashvars"

 What is SWFObject HTML Code Generator?

Generating SWFObject HTML Code

 Flash Player Projector

 SWFTools - SWF File Manipulation Tools

 SWFC Script to Generate Flash SWF Files

 ActionScript Embedded in SWFC Script

 AS3Compile - ActionScript 3 Compiler

 Adobe Flex SDK 4

 SWF File Structure and Tags

 SWF File Processing Rules

 SWF Files for Video and Audio Streams

 Outdated Tutorials

 References

 Full Version in PDF/EPUB