SwfObject and Flex Builder 3

Hello,

today I’m writing a short tutorial, how you can integrate and deploy your swf files with the swfobject javascript library. In the first step we download the current swfobject library. Please open the url http://code.google.com/p/swfobject/downloads/list and download the swfobject zip archive “swfobject_2_2.zip”. Store the zip file on your C:/ drive. In the next step, we open the zip file and extract the content on the C:/ drive, too. Now you will see a new folder swfobject in your C:/ drive. Open your Flex project in the Flex Builder 3. You should see something like this:

Open the html-template folder. Delete the history folder. Delete the two files AC_OETags.js and playerProductInstall.swf. Copy the two files expressInstall.swf and swfobject.js from the C:/swfobject folder into the html-template folder.

Now you should see something like this:

Please replace the file index.template.html in the html-template folder with the new swfobject template file from here or insert the following HTML-Code.

<html>
  <head>
    <title>${title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
      html, body { height:100%; }
      body { margin:0; padding:0; overflow:hidden; }
    </style>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    swfobject.embedSWF("${swf}.swf", "${application}", "${width}", "${height}", "${version_major}.${version_minor}.${version_revision}", "expressInstall.swf");
    </script>
  </head>
  <body>
  <div id="${application}">
    <h1>Alternative content</h1>
    <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
  </div>
  </body>
</html>

Please select “Project” and “Clean…” from the menu bar. In the next dialog select “Clean projects selected below” and check only the Flex project where you’ve installed the swfobject files before.

Now, Flex Builder 3 updates the bin-debug folder with the content based on the new index.template.html content and the new swfobject library files.

You’ll find more information about the Flex Builder 3 template tokens here.

You can get the sample project files HelloSwfObject from here.

You’ll find some more examples in the SwfObject 2.2 Test Suite.

Dieser Beitrag wurde unter Tutorials abgelegt und mit , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>