Creating an application
The following procedure explains how to add the Global Menu Pro component to an application while authoring.
In this example, Global Menu Pro is used to create the navigation system for HTML-based web application.
To create an application with the Global Menu Pro component:
| 1. |
Set the Stage size to 570 x 370 pixels and leave white as background color. For frame rate enter the value not less than 30 fps. |
| 2. |
Drag one Global Menu Pro component from the Components panel to the Stage and set its coordinates to (20, 20). |
| 3. |
In the Component inspector leave all parameters without changes (with default values). |
| 4. |
Set dimensions for the component instances to 530 x 25 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: |
| |
Note: The full code of this XML file (as well as the source FLA file) is available in the package of the Global Menu Pro paid version (see the Sample 1 files).
<?xml version="1.0" encoding="UTF-8"?>
<menu>
<settings>
<menuBar width="530" height="25" color1="F5F5F5" alpha1="100" color2="FFFFFF" alpha2="70" rounded="all"/>
<rectangleCornerRadius value="6"/>
<leftMargin value="0"/>
<itemHeight level1="22" level2="22"/>
<itemWidth level1="" level2="" level3="" level4="" level5=""/>
<topLevelIcons enabled="true" size=""/>
<popupLevelIcons enabled="true" size=""/>
<tweenDuration rollover="0.2" sliding="0.3"/>
<fadeOut delay="0.4"/>
<shiftLeft basic="10" slide="40"/>
<glowFilter enabled="true"/>
<itemRollAnimation mode="1"/>
<fontFamily name="Arial"/>
<embedFonts enabled="false"/>
<fontSize level1="12" level2="11"/>
<fontColor level1="445C82" level2="FFFFFF"/>
<fontColorRollover level1="AFB2B6" level2="383838"/>
<fontColorSelected level2="DADEE9"/>
<fontColorDisabled level1="979797" level2="B1B4B8"/>
<fontWeight level1="normal" level2="normal"/>
<fontStyle level1="normal" level2="normal"/>
<textDecoration level1="none"/>
<textDecorationRollover level1="none"/>
<textAlign level1="left"/>
<textPaddingLevel1 top="" left=""/>
<textPaddingLevel2 top="" left=""/>
<backgroundLevel1 color1="" alpha1="0" color2="" alpha2="0" rounded="top"/>
<backgroundLevel1Rollover color="37383E" alpha="100"/>
<backgroundLevel2 color1="37383E" alpha1="100" color2="444444" alpha2="100" rounded="all"/>
<backgroundLevel2Rollover color="C0CCE3" alpha="100"/>
<backgroundLevel2Selected color="747A86" alpha="100"/>
</settings>
<items>
<item label="Audio" widthL1="65" widthL2="145" shiftLeftSlide="10">
<item label="Mixers" widthL3="130">
<item label="Analog Mixers" widthL4="100">
<item label="Soundcraft" widthL5="170">
<item label="Live" action="getUrl" url="/audio/mixers/analog_mixers/soundcraft/live/" target="_self"></item>
<item label="Multi-Purpose" action="getUrl" url="/audio/mixers/analog_mixers/soundcraft/multi_purpose/" target="_self"></item>
<item label="Recording" action="getUrl" url="/audio/mixers/analog_mixers/soundcraft/recording/" target="_self"></item>
</item>
<item label="Allen & Heath" widthL5="100">
<item label="Large Format" action="getUrl" url="/audio/mixers/analog_mixers/allen/large_format/" target="_self"></item>
<item label="Small Format" action="getUrl" url="/audio/mixers/analog_mixers/allen/small_format/" target="_self"></item>
</item>
<item label="Midas" action="getUrl" url="/audio/mixers/analog_mixers/midas/" target="_self"></item>
<item label="Mackie" action="getUrl" url="/audio/mixers/analog_mixers/mackie/" target="_self"></item>
<item label="Hosa" action="getUrl" url="/audio/mixers/analog_mixers/hosa/" target="_self"></item>
.......................................
</item>
</item>
</item>
</items>
</menu>
|
| |
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 a Global Menu Pro component) and name it, for example, "menu.xml". |
| 7. |
Create an HTML 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="570" height="370" id="menu" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="menu.swf" />
<param name="FlashVars" value="xmlURL=menu.xml" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="menu.swf" FlashVars="xmlURL=menu.xml" quality="high" bgcolor="#FFFFFF" width="570" height="370" name="menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
Note: Global Menu Pro can accept one external variable: xmlURL — the path to configuration XML file.
|
| 8. |
Save the HTML file in preferred location (for example, in the same directory as the SWF file that contains a Global Menu Pro component) and name it, for example, "menu.html". |
| 9. |
Open menu.html in a web browser and test the behavior of the Global Menu Pro component. |
| 10. |
You can view the completed application here. |
In this example, Global Menu Pro 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 Global Menu Pro component:
| 1. |
Set the Stage size to 570 x 303 pixels and specify "#FFFFFF" as background color. For frame rate enter the value not less than 30 fps. |
| 2. |
Import the saved image files to the Stage by selecting File > Import > Import to Stage. Set the coordinates for the imported images: (0, 0) — for city_bg.jpg; (548, 10) — for home_icon.gif. |
| 3. |
Drag one Global Menu Pro component from the Components panel to the Stage and set its coordinates to (15, 3). In the Property inspector, set the Instance Name value for the component instance to "gmp". |
| 4. |
| In the Component inspector, do the following: |
For xmlFileURL parameter, set: |
| "menu.xml" |
|
| |
You can leave the other parameters without changes and configure the component through the XML file, or you can leave the values for the <settings> element attributes blank and configure the component through the Component inspector panel.
|
| 5. |
Set dimensions for the component instance to 240 x 20 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 "header_txt". Create three more dynamic text fields and set the Variable value for them accordingly to "category_txt", "title_txt" and "description_txt". Set appropriate values for other text field properties. |
| 7. |
In case if you want to use an embedded font in your SWF file, do the following: |
| - Be sure the font you want to use is installed on your system (in our case, "Arial"). |
| - Create a font library item (see Adobe Flash Help on the web for more information). Enter "arial_embed" for the font item in the Name text field. |
| - The fontFamily parameter (this can be either the corresponding node of the XML file or the corresponding parameter in the Component inspector panel) must refer to the name of the embedded font ("arial_embed", in our case), and the embedFonts parameter must be set to "true". |
| 8. |
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code: |
| |
menuListener = new Object();
menuListener.onLoadXML = function(eventObj) {
xmlDecomposing();
}
gmp.addEventListener("onLoadXML", menuListener);
home_btn.onRelease = function() {
header_txt = "Italy";
category_txt = "";
title_txt = "General Information";
description_txt = gmp.xml.firstChild.childNodes[1].attributes.description;
}
function xmlDecomposing() {
itemsArray = new Array();
header_txt = "Italy";
category_txt = "";
title_txt = "General Information";
description_txt = gmp.xml.firstChild.childNodes[1].attributes.description;
for (var aNode:XMLNode = gmp.xml.firstChild.childNodes[1].firstChild; aNode != null; aNode = aNode.nextSibling) {
itemsArray.push(aNode.attributes.description);
if (aNode.hasChildNodes() == true) {
for (var bNode:XMLNode = aNode.firstChild; bNode != null; bNode = bNode.nextSibling) {
itemsArray.push(bNode.attributes.description);
if (bNode.hasChildNodes() == true) {
for (var cNode:XMLNode = bNode.firstChild; cNode != null; cNode = cNode.nextSibling) {
itemsArray.push(cNode.attributes.description);
}
}
}
}
}
}
function pageInformation(index:Number, city:String, category:String) {
header_txt = city;
category_txt = category;
title_txt = gmp.getItemAt(index).label;
description_txt = itemsArray[index];
}
|
| 9. |
Publish the Flash document with appropriate name — for example, "menu.swf". |
| 10. |
Using your favorite text editor, create a new document and enter the following code: |
| |
Note: The full code of this XML file (as well as the source FLA file) is available in the package of the Global Menu Pro paid version (see the Sample 4 files).
<?xml version="1.0" encoding="UTF-8"?>
<menu>
<settings>
<menuBar width="240" height="20" color1="FFFFFF" alpha1="100" color2="FFFFFF" alpha2="100" rounded="none"/>
<rectangleCornerRadius value="6"/>
<leftMargin value="0"/>
<itemHeight level1="20" level2="20"/>
<itemWidth level1="" level2="" level3="" level4="" level5=""/>
<topLevelIcons enabled="false" size=""/>
<popupLevelIcons enabled="true" size=""/>
<tweenDuration rollover="0.2" sliding="0.3"/>
<fadeOut delay="0.4"/>
<shiftLeft basic="0" slide=""/>
<glowFilter enabled="true"/>
<itemRollAnimation mode="2"/>
<fontFamily name="arial_embed"/>
<embedFonts enabled="true"/>
<fontSize level1="13" level2="12"/>
<fontColor level1="CC3333" level2="F4F4F4"/>
<fontColorRollover level1="FEDAD3" level2="CC3333"/>
<fontColorSelected level2="444444"/>
<fontColorDisabled level1="979797" level2="B1B4B8"/>
<fontWeight level1="normal" level2="normal"/>
<fontStyle level1="normal" level2="normal"/>
<textDecoration level1="none"/>
<textDecorationRollover level1="none"/>
<textAlign level1="center"/>
<textPaddingLevel1 top="" left=""/>
<textPaddingLevel2 top="" left=""/>
<backgroundLevel1 color1="" alpha1="" color2="" alpha2="" rounded="none"/>
<backgroundLevel1Rollover color="CC3333" alpha="100"/>
<backgroundLevel2 color1="CC3333" alpha1="100" color2="CC3333" alpha2="70" rounded="bottom"/>
<backgroundLevel2Rollover color="F4F4F4" alpha="80"/>
<backgroundLevel2Selected color="F4F4F4" alpha="50"/>
</settings>
<items description="Italy, officially the Italian Republic, is a country located on the Italian Peninsula in Southern Europe and on the two largest islands in the Mediterranean Sea, Sicily and Sardinia...">
<item
label="Rome"
widthL1="80"
widthL2="110"
shiftLeftSlide="0"
bgL1Color1="CC3333"
bgL1Color2="CC3333"
bgL1Alpha1="20"
bgL1Alpha2="0"
>
<item label="History" widthL3="200">
<item label="Earliest History" action="pageInformation" url="2,Rome,History" target="" description="There is geological evidence of human occupation of the Rome area from at least 14000 years..."></item>
<item label="Monarchy, Republic, Empire" action="pageInformation" url="3,Rome,History" target="" description="Rome's early history is shrouded in legend. According to Roman tradition, the city was founded by the twins Romulus and Remus..."></item>
.......................................
</item>
</item>
</items>
</menu>
Note: In this example, 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 defines 3 parameters separated by commas: 1) the index of a corresponding menu item, 2) the name of the selected city, 3) the name of the current category. Thus, the value of <url> specifies parameters for the pageInformation() function (see the ActionScript code above). We also add our custom attribute "description" to the <items> element and some <item> nodes. This data can be then easily accessible through the component's xml property. |
| |
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 Global Menu Pro component) and name it, in our case, "menu.xml". |
| 11. |
You can view the completed application here. |
|
|
