My account
Shopping cart
Knowledge base
Support


Embedding your flash movie in html code



1. The main usage of our products is for web pages development. Because of this you may need to embed your flash movie file inside an html page. Follow this tutorial in order to learn how to do it yourself.

2. First of all you'll need to create a flash movie file containing the component(s) you want to appear on your web page. I have used the Accordion Tree Menu in my flash file and the resulted flash movie file is test.swf. This flash movie file in my case will be placed in the same folder with the html files.

3. It is necessary to include a javascript file inside your html code.Download the AC_RunActiveContent.js file from Adobe's web page and select the location for it. I have placed it in the folder named "js". This folder is located in the same parent folder with my html files.

4. In the next steps I will create three html files and after they have been created I will include them in the configuration xml file.

5. The first html file is named team.html. Firstly I will include the AC_RunActiveContent.js file inside the head tag.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
    ………….      ………….      ………….      ………….      ………….      ………….      ………….
          <script type="text/javascript" src="js/AC_RunActiveContent.js"></script>
      ………….      ………….      ………….      ………….      ………….      ………….      ………….
     </head>
    ………….      ………….      ………….      ………….      ………….      ………….      ………….


6. Inside the body tag I will place a div tag and select an Id for it, in my case named flashcomponent1. The div tag will contain the javascript code that will embed the flash movie file in html code and an alternative section of code, which will be execute in case if your browser doesn't support javascript. You can design the appereance of your flash movie using the div's tag style attribute. I have set the size of it and its position. This is how your code should look like the following one:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>Embedding your flash movie file in html code</title>
          <script type="text/javascript" src="js/AC_RunActiveContent.js"></script>
     </head>
     <body bgcolor="#ffffff">
          <div id="flashcomponent1" style="position:absolute;left:0px;top:70px;width:150px;height:350px;">
               <script language="javascript">
                    if (AC_FL_RunContent == 0) {
                         alert("This page requires AC_RunActiveContent.js.");
                    } else {
                         AC_FL_RunContent(
                              'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
                              'width', '150',
                              'height', '350',
                              'src', 'test',
                              'quality', 'high',
                              'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
                              'align', 'left',
                              'play', 'true',
                              'loop', 'true',
                              'scale', 'showall',
                              'wmode', 'transparent',
                              'devicefont', 'false',
                              'id', 'test',
                              'bgcolor', '#000000',
                              'name', 'test',
                              'menu', 'true',
                              'allowFullScreen', 'false',
                              'allowScriptAccess','sameDomain',
                              'movie', 'test',
                              'salign', '',
                              'FlashVars', 'itemId=1.1.1'
                         ); //end AC code
                    }
               </script>
               <noscript>
                    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="150" height="350" id="test" align="left">
                         <param name="allowScriptAccess" value="sameDomain" />
                         <param name="allowFullScreen" value="false" />
                         <param name="movie" value="test.swf" />
                         <param name="quality" value="high" />
                         <param name="bgcolor" value="#000000" />
                         <param name="FlashVars" value="itemId=1.1.1" />
                         <embed src="test.swf" quality="high" bgcolor="#000000" FlashVars="itemId=1.1.1" width="150" height="350" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
                    </object>
               </noscript>
          </div>
      ………….      ………….      ………….      ………….      ………….      ………….      ………….
     </body>
</html>


7. I have added a parameter named FlashVars (marked in the text above) with value = "itemId=1.1.1". This will indicate the selected position in the tree hierarchy of the menu. This value has the role to set the Accordion Tree Menu to be displayed expanded in the selected position. In my flash file I have used the Accordion Tree Menu component and it has the accordionTreeMenu instance name. I will create here a new layer for the Action Script code. Your code should look like the following one:

myEventListener = new Object();


myEventListener.onDrawComplete = function(args) {
     if(_root.itemId) {
          accordionTreeMenu.tweening = false; // Optional - you can deactivate
                                              // the tweening property at first
                                              // load (menu is loaded with FlashVars)
          accordionTreeMenu.expandItem(_root.itemId);
          accordionTreeMenu.tweening = true;  // Optional - activates the tweening
                                              // property
    }
}
accordionTreeMenu.addEventListener("onDrawComplete",myEventListener);


8. After we have placed the above code inside the html file we can add other content to it, for example text, images, etc.

9. After I have attached my content to the team.html (some text and an image), the code looks like below:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>Embedding your swf file in html code</title>
          <script type="text/javascript" src="js/AC_RunActiveContent.js"></script>
     </head>
     <body bgcolor="#ffffff">
          <div id="flashcomponent1" style="position:absolute;left:0px;top:70px;width:150px;height:350px;">
               <script language="javascript">
                    if (AC_FL_RunContent == 0) {
                         alert("This page requires AC_RunActiveContent.js.");
                    } else {
                         AC_FL_RunContent(
                              'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
                              'width', '150',
                              'height', '350',
                              'src', 'test',
                              'quality', 'high',
                              'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
                              'align', 'left',
                              'play', 'true',
                              'loop', 'true',
                              'scale', 'showall',
                              'wmode', 'transparent',
                              'devicefont', 'false',
                              'id', 'test',
                              'bgcolor', '#000000',
                              'name', 'test',
                              'menu', 'true',
                              'allowFullScreen', 'false',
                              'allowScriptAccess','sameDomain',
                              'movie', 'test',
                              'salign', '',
                              'FlashVars', 'itemId=1.1.1'
                         ); //end AC code
                    }
               </script>
               <noscript>
                    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="150" height="350" id="test" align="left">
                         <param name="allowScriptAccess" value="sameDomain" />
                         <param name="allowFullScreen" value="false" />
                         <param name="movie" value="test.swf" />
                         <param name="quality" value="high" />
                         <param name="bgcolor" value="#000000" />
                         <param name="FlashVars" value="itemId=1.1.1" />
                         <embed src="test.swf" quality="high" bgcolor="#000000" FlashVars="itemId=1.1.1" width="150" height="350" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
                    </object>
               </noscript>
          </div>
          <br />
          <div style="padding-left:155px;width:440px;">
               <h2>Jumpeye Team</h2>
               <font style="color:4c4c4c;">With almost 40 employees and over 1000 customers, Jumpeye is one of the fastest growing companies in the online marketing business area. <br /><br />

               <img src="jumpeye_team.jpg" alt="Jumpeye Team" class="border" style="float: left; margin-right: 13px;">The development division is also divided in two large development departments: Digital Marketing (developing creative Digital Marketing Strategies) and Custom Web Development (developing Flash, Flex, HTML, PHP, JS, Ajax). <br /><br />

               Jumpeye key to success is a very young, dynamic and creative team which, by the end of 2006, proved that it really is one of the finest team in global marketing, communication, web design and computer programming. </font>
          </div>
     </body>
</html>


10. With the same method I have created another two html files named about_us.html and contact.html. Below you can see the xml code used to add url's to Accordion Tree Menu.

<component name="Accordion Tree Menu v3">
     <data>
          <main>
               <item title="Home">
                    <item title="Jumpeye">
                         <item title="Jumpeye Team" url="team.html" target="_self" />
                         <item title="Subtitle 1.2" />
                    </item>
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
                    <item title="Subtitle 4" />
                    <item title="Subtitle 5" />
                    <item title="Subtitle 6" />
               </item>

               <item title="About Us">
                    <item title="About Company" url="about_us.html" target="_self" />
                    <item title="Subtitle 2">
                         <item title="Subtitle 2.1 " />
                    </item>
                    <item title="Subtitle 3">
                         <item title="Subtitle 3.1" />
                         <item title="Subtitle 3.2">
                              <item title="Subtitle 3.2.1" />
                              <item title="Subtitle 3.2.2" />
                              <item title="Subtitle 3.2.3" />
                              <item title="Subtitle 3.2.4" />
                         </item>
                         <item title="Subtitle 3.3" />
                    </item>
                    <item title="Subtitle 4" />
               </item>

               <item title="Information">
                    <item title="Subtitle 1">
                         <item title="Subtitle 1.1" />
                         <item title="Subtitle 1.2" />
                    </item>
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
                    <item title="Subtitle 4" />
               </item>

               <item title="Contact Us" url="contact.html" target="_self" />
          </main>
     </data>
</component>


11. Here is how my html file looks like. Use Home->Jumpeye->Jumpeye Team, About Us->About Company or Contuct Us to see how it works.