Creating an application
The following procedure explains how to add the Accordion Tree Menu component to an application while authoring.
In this example, Accordion Tree Menu is used to create the navigation system for HTML-based web application.
To create an application with the Accordion Tree Menu component:
| 1. |
Set the Stage size to 120 x 580 pixels and specify "#89A7B1" as background color. For frame rate enter the value not less than 30 fps. |
| 2. |
Drag one Accordion Tree Menu component from the Components panel to the Stage and set its coordinates to (0, 0). |
| 3. |
In the Component inspector leave all parameters without changes (with default values). |
| 4. |
Set dimensions for the component instances to 120 x 580 pixels. |
| 5. |
Publish the Flash document with appropriate name — for example, "menu.swf". |
| 6. |
Using your favorite text editor, create a new document and enter the following code: |
| |
<?xml version="1.0" encoding="UTF-8"?>
<menu width="">
<properties>
<treeStructure state="close"/>
<itemHeight level1="20" level2="20"/>
<topLevelIcons enabled="false"/>
<dottedLine level2="true" level3="false"/>
<decoration height="2" rounded="none"/>
<leftMargin value="10"/>
<itemIndent level2="true" level3="false"/>
<itemSeparators level1="true" level2="false"/>
<tween duration="" easing="" method=""/>
<rolloverSound src="" volume=""/>
<clickSound src="" volume=""/>
<initialStateReturn enabled="true"/>
<selectedStateMode enabled="true"/>
<internalSelectionMode enabled="false"/>
</properties>
<style>
<mainBackground color="E8EEF0" alpha=""/>
<decorationBackground color="00202B" alpha=""/>
<topLevelBackground color="C5D4D9" alpha=""/>
<treeIcon color="" bgcolor=""/>
<dottedLine color=""/>
<separatorLine color1="004B64" color2=""/>
<rolloverBackgroundColor level1="C5D4D9" level2="C5D4D9"/>
<rolloverBackgroundAlpha level1="" level2="30"/>
<selectedBackgroundColor level2=""/>
<selectedBackgroundAlpha level2=""/>
<fontSize level1="13" level2="12" level3="11"/>
<fontFamily name="Verdana"/>
<fontColor level1="00202B" level2="00202B" level3="004B64"/>
<fontColorRollover level1="00202B" level2="00202B" level3="004B64"/>
<fontColorSelected level2="FF3300" level3="FF3300"/>
<fontWeight level1="" level2="" level3=""/>
<fontWeightRollover level1="" level2="" level3=""/>
<fontWeightSelected level2="" level3=""/>
<fontStyle level1="" level2="" level3=""/>
<textDecorationRollover level1="" level2="" level3=""/>
</style>
<items>
<item label="Austria" action="getUrl" url="destinations.php?index=0" target="" font_color="">
<item label="Vienna" action="getUrl" url="destinations.php?index=1" target="" font_color="">
<item label="Overview" action="getUrl" url="destinations.php?index=2" target="" font_color=""/>
<item label="Places to See" action="getUrl" url="destinations.php?index=3" target="" font_color=""/>
<item label="Money" action="getUrl" url="destinations.php?index=4" target="" font_color=""/>
<item label="Transport" action="getUrl" url="destinations.php?index=5" target="" font_color=""/>
<item label="Culture" action="getUrl" url="destinations.php?index=6" target="" font_color=""/>
</item>
.......................................
</item>
.......................................
</items>
</menu>
Note: In our case, the url attribute of item nodes refers to the same PHP-file — destinations.php. The index variable passed with GET method is used to make the necessary item of Accordion Tree Menu selected.
|
| |
This is your configuration XML document. Save the XML file in preferred location (for example, in the same directory as the SWF file that contains an Accordion Tree Menu component) and name it, for example, "menu.xml". |
| 7. |
Create a PHP file and place the following HTML code into it — to embed SWF file (in our case, menu.swf):
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="580" id="menu" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="menu.swf" />
<param name="FlashVars" value="xmlURL=menu.xml&selIndex=<?=$index;?>" />
<param name="quality" value="high" />
<param name="bgcolor" value="#89A7B1" />
<embed src="menu.swf" FlashVars="xmlURL=menu.xml&selIndex=<?=$index;?>" quality="high" bgcolor="#89A7B1" width="120" height="580" name="menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
Note: Accordion Tree Menu can accept two external variables: 1) xmlURL — the path to configuration XML file, 2) selIndex — the zero-based index of a menu item to be selected. In our case, selIndex is equal to the value of index variable passed with GET method in url.
|
| 8. |
Save the PHP file in preferred location (for example, in the same directory as the SWF file that contains an Accordion Tree Menu component) and name it "destinations.php". |
| 9. |
Open destinations.php in a web browser and test the behavior of the Accordion Tree Menu component. |
| 10. |
You can view the completed application here. |
In this example, Accordion Tree Menu is used to create the navigation system for Flash-based web application.
Before creating an application, download the following files required for this example and save it to your hard disk:
To create an application with the Accordion Tree Menu component:
| 1. |
Set the Stage size to 520 x 500 pixels and specify "#000000" as background color. For frame rate enter the value not less than 30 fps. |
| 2. |
Import the saved image file (car_bg.jpg) to the Stage by selecting File > Import > Import to Stage. Set the coordinates for the imported image to (0, 0). |
| 3. |
Drag one Accordion Tree Menu component from the Components panel to the Stage and set its coordinates to (20, 130). In the Property inspector, set the Instance Name value for the component instance to "atm". |
| 4. |
| In the Component inspector, do the following: |
For XML-file URL parameter, set: |
| "menu.xml" |
|
| |
Leave the other parameters without changes.
|
| 5. |
Set dimensions for the component instance to 100 x 200 pixels. |
| 6. |
Using the Text tool, create a dynamic text field on the Stage. With the text field selected, in the Property inspector, set the Variable value to "page_title". Create two more dynamic text fields and set the Variable value for them accordingly to "section_title" and "page_text". Set appropriate values for other text field properties. |
| 7. |
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code: |
| |
menuListener = new Object();
menuListener.onLoadXML = function(eventObj) {
page_title = "Overview";
page_text = "Description for this section...";
}
atm.addEventListener("onLoadXML", menuListener);
menuListener.click = function(eventObj) {
if (eventObj.data == 0) atm.setItemSelected(1);
if (eventObj.data == 5) atm.setItemSelected(6);
if (eventObj.data == 11) atm.setItemSelected(12);
if (eventObj.data == 14) atm.setItemSelected(15);
section_title = atm.getItemAt(atm.selectedIndex).label;
page_text = "Description for this section...";
}
atm.addEventListener("click", menuListener);
function pageTitle(topLevelIndex:Number):Void {
page_title = atm.getItemAt(topLevelIndex).label.substr(0,1) + atm.getItemAt(topLevelIndex).label.substr(1).toLowerCase();
}
|
| 8. |
Publish the Flash document with appropriate name — for example, "menu.swf". |
| 9. |
Using your favorite text editor, create a new document and enter the following code: |
| |
<?xml version="1.0" encoding="UTF-8"?>
<menu width="">
<properties>
<treeStructure state="static"/>
<itemHeight level1="22" level2="18"/>
<topLevelIcons enabled="true"/>
<dottedLine level2="false" level3="false"/>
<decoration height="3" none="none"/>
<leftMargin value=""/>
<itemIndent level2="false" level3=""/>
<itemSeparators level1="false" level2="false"/>
<tween duration="" easing="" method=""/>
<rolloverSound src="" volume=""/>
<clickSound src="beep.mp3" volume="70"/>
<initialStateReturn enabled="true"/>
<selectedStateMode enabled="true"/>
<internalSelectionMode enabled="true"/>
</properties>
<style>
<mainBackground color="" alpha=""/>
<decorationBackground color="FFFFFF" alpha="30"/>
<topLevelBackground color="FFFFFF" alpha="15"/>
<treeIcon color="" bgcolor=""/>
<dottedLine color=""/>
<separatorLine color1="FFFFFF" color2=""/>
<rolloverBackgroundColor level1="FFFFFF" level2=""/>
<rolloverBackgroundAlpha level1="15" level2=""/>
<selectedBackgroundColor level2=""/>
<selectedBackgroundAlpha level2=""/>
<fontSize level1="11" level2="10" level3=""/>
<fontFamily name="Tahoma"/>
<fontColor level1="CCCCCC" level2="CCCCCC" level3=""/>
<fontColorRollover level1="CCCCCC" level2="FFB13E" level3=""/>
<fontColorSelected level2="FFB13E" level3=""/>
<fontWeight level1="bold" level2="" level3=""/>
<fontWeightRollover level1="bold" level2="" level3=""/>
<fontWeightSelected level2="" level3=""/>
<fontStyle level1="" level2="" level3=""/>
<textDecorationRollover level1="" level2="" level3=""/>
</style>
<items>
<item label="FEATURES" action="pageTitle" url="0" target="" font_color="">
<item label="Exterior" action="pageTitle" url="0" target="" font_color=""/>
<item label="Interior" action="pageTitle" url="0" target="" font_color=""/>
<item label="Safety" action="pageTitle" url="0" target="" font_color=""/>
<item label="Price" action="pageTitle" url="0" target="" font_color=""/>
</item>
<item label="SPECS" action="pageTitle" url="5" target="" font_color="">
<item label="Mechanical" action="pageTitle" url="5" target="" font_color=""/>
<item label="Dimensions" action="pageTitle" url="5" target="" font_color=""/>
<item label="Capacities" action="pageTitle" url="5" target="" font_color=""/>
<item label="Tires" action="pageTitle" url="5" target="" font_color=""/>
<item label="MPG" action="pageTitle" url="5" target="" font_color=""/>
</item>
<item label="OPTIONS" action="pageTitle" url="11" target="" font_color="">
<item label="Available options" action="pageTitle" url="11" target="" font_color=""/>
<item label="Packages" action="pageTitle" url="11" target="" font_color=""/>
</item>
<item label="ACCESSORIES" action="pageTitle" url="14" target="" font_color="">
<item label="Exterior" action="pageTitle" url="14" target="" font_color=""/>
<item label="Interior" action="pageTitle" url="14" target="" font_color=""/>
</item>
</items>
</menu>
Note: In our case, the action attribute of each item node is equal to the name of Flash function to be called on menu item's click event. The url attribute of each item node is equal to the index of corresponding top level menu item. Thus, the value of url is a parameter for the pageTitle() function (see the ActionScript code above).
|
| |
This is your configuration XML document. Save the XML file in preferred location (for example, in the same directory as the SWF file that contains an Accordion Tree Menu component) and name it, in our case, "menu.xml". |
| 10. |
You can view the completed application here. |
|
|
