My account
Shopping cart
Knowledge base
Support


Using FlashVars with Accordion Tree Menu V3



1. The main usage of the Accordion Tree Menu V3 is for web pages development. Because of this you may need to embed the Accordion Tree Menu's swf file inside an html page. At some point you'll probably need your menu to display as expanded on a specific location or you may need to direct your user from a specific state of the swf file containing the menu to another one on anther browser window. All of those can be set using FlashVars.

2. First of all you'll need a Flash file containing the Accordion Tree Menu component, along with an xml file for it. If you need further reference in how to create a simple Accordion Tree Menu, please read the Create a simple Accordion Tree Menu tutorial.

3. We'll see first how you can set your menu to be displayed as expanded on a certain position. On the main time line you need 2 layers: one for the accordion menu component and one for the Action Script that we are going to add. This is how your stage should look:



4. Next we are going to use the Accordion Menu Tree method called expandItem. You can read more about methods and properties of the Accordion Tree Menu on the Documentation file.

5. On the Action Script layer write the following code :

myEventListener = new Object();
myEventListener.onDrawComplete = function(args):Void {
     accordionTreeMenu.expandItem("1.1");
}
accordionTreeMenu.addEventListener("onDrawComplete",myEventListener);


Make sure that you named the Accordion Tree Menu instance (in my case the instance name is accordionTreeMenu). The 1.1 string represents the position that I want my menu to be expanded

6. Test your movie. This is how the menu should be displayed :



7. Now let’s publish the fla file. Click File/Publish Settings and check the box for HTML format. Then publish your movie by pressing Publish button or from that menu File/Publish (Ctrl+F12). Your swf file should look expanded the same way as it was looking in stand alone state, only embedded on a browser.

8. Next we’ll use FlashVars to set the way the menu is expanded rather then inserting a fixed value (like 1.1 in the example above).We are going to set a parameter that is going to be loaded to the menu trough FlashVars from the html file . First let’s declare the parameter inside the fla file. This is how you new code should look like:

myEventListener = new Object();
// we must be sure that the menu is drawn before trying to expand its item
myEventListener.onDrawComplete = function(args) {
// we’re verifying first if there is a parameter sent by the html file
     if(_root.itemId) {
          accordionTreeMenu.expandItem(_root.itemId);
     }
}
accordionTreeMenu.addEventListener("onDrawComplete",myEventListener);


itemId – is the parameter which will receive the values from the HTML page through FlashVars.
If you test your movie again, you’ll notice that the menu will be collapsed.

9. Open your html file in a HTML editor (I’ve used Macromedia Dreamweaver) and insert the following highlighted code:

<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-2" />
          <title>my_menu</title>
     </head>
     <body bgcolor="#ffffff">
          <!--url's used in the movie-->
          <!--text used in the movie-->
          <!-- saved from url=(0013)about:internet -->
          <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="300" id="my_menu" align="middle">
               <param name="allowScriptAccess" value="sameDomain" />
               <param name="movie" value="my_menu.swf" />
               <param name="quality" value="high" />
               <param name="bgcolor" value="#ffffff" />
               <param name="FlashVars" value="itemId=1.1"/>
               <embed src="my_menu.swf" FlashVars="itemId=1.1" quality="high" bgcolor="#ffffff" width="400" height="300" name="my_menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
          </object>
     </body>
</html>


Save the html file in Dreamweaver. I’ve named the html file, index.html.

10. The swf file in your browser should look exactly like it did previously when we didn’t use FlashVars but the accordionTreeMenu.expandItem("1.1");. The difference is that in the previous case the browser would load a new copy of the swf file on every click overloading the browser cache and RAM memory, meanwhile with FlashVars the html code loads the same swf file (from cache) and it will send only the needed parameter to expand the desired item.

11. Now let’s use FlashVars to build a simple navigation system between multiple html pages. You can use the html page that you generated above to make two more copies of the index.html and rename them to about.html and contact.html. On the first page (index page) you need to remove the FlashVars parameter that is highlighted in the html code above. This is because we want the menu to be loaded in the browser with none of its submenus expanded.

12. Next you have to add the FlashVars parameter to the contact.html and about.html pages. Thus, when the user clicks on the Contact or About items of the menu loaded in the first html page (index.html), a new browser window will open containing the menu already expanded to the specific state (about us or contact us). This is how the html code should look like (about.html page):

<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-2" />
          <title>my_menu</title>
     </head>
     <body bgcolor="#ffffff">
          <!--url's used in the movie-->
          <!--text used in the movie-->
          <!-- saved from url=(0013)about:internet -->
          <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="300" id=" my_menu " align="middle">
               <param name="allowScriptAccess" value="sameDomain" />
               <param name="movie" value="my_menu.swf" />
               <param name="quality" value="high" />
               <param name="bgcolor" value="#ffffff" />
               <param name="FlashVars" value="itemId=2"/>
               <embed src=" my_menu.swf" FlashVars="itemId=2" quality="high" bgcolor="#ffffff" width="400" height="300" name=" my_menu " align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
          </object>
     </body>
</html>


13. For the contact page we’ll have the same html page, changing only the itemId parameter from 2 to 3 (that is the itemId of the Contact us item).

14. The only thing left to do is editing the xml file in the data node with the url’s for the contact and about pages like this :

<?xml version='1.0' encoding='UTF-8'?>
<component name='Accordion Tree Menu v3'>
     <data>
          <main childStyle="level1_style">
               <item title="Home" childStyle="level2_style">
                    <item title="Subtitle 1" childStyle="level3_style">
                         <item title="Subtitle 1" />
      ………….      ………….      ………….      ………….      ………….      ………….      ………….

               <item title="About us" childStyle="level2_style"   url="about.html" target="self">
                    <item title="Our Stuff" childStyle="level3_style">
                         <item title="Subtitle 1" />
      ………….      ………….      ………….      ………….      ………….      ………….      ………….

               <item title="Contact us" childStyle="level2_style" url="contact.html" target="self" >
                    <item title="Our Adress" childStyle="level3_style">
                         <item title="Subtitle 1" />
      ………….      ………….      ………….      ………….      ………….      ………….      ………….
               </item>
          </main>
     </data>
</component>


15. Open your first html page (index.html) and try clicking on Contact Us or About Us items. A new browser window should open with the Accordion Tree Menu expanded to that specific location.

Download the source files for this tutorial

Note! The source files are implemented with the trial version of the Accordion Tree Menu V3. In order to see how this works you need to include a full version which should be purchased and replaced inside the .fla file.