Thankyou for purchasing the Flash Chilli Sleek Menu! This guide contains information on how to setup and customize your new menu system.
The Flash chilli Sleek menu is an easy to use configurable menu that only requires the free flash player (already installed on most computers) to run and can be customised using a basic text editor (eg notepad) to change the settings in the XML file.
There is no restriction on the location of the files used to create the Menu and each item (menu.swf , menu.xml) can be in different locations.
Note: When testing the menu locally, the links may not work but everything will be fine once uploded to a web server.
Contents
Package Contents
Features List
XML Configuration Options
Setting up the SWF
Configuring the XML
Support
• Menu.swf (menu bar)
• Menu.xml (configuration file)
• Full user guide for inserting menu in to web-page
and configuring menu options in XML file
• Easy to update
• No flash knowledge required
• XML configuration file can be edited in any text editor
• Set path from web page to xml file
i.e Menu and XML files can be in different locations
• Search your site through Google or using your own search page, alternatively search the web
• Unlimited characters in search box
• Use web-standard hex codes to control colours, eg. #FF0000 = Red
• Tiny file size of 8.4kb for faster access
• Set menu bar colour
• Set number of main buttons (max 7 buttons)
• Set number of buttons in each sub menu (max 7 buttons)
• Set search box background colour
• Set search box outline colour
• Set seach location (either 'your site' or 'internet')
• Set sound effects on/off
• Set main button text
• Set main button font
• Set main button font size
• Set main button font colour
• Set main button rollover colour
• Set main button link
• Set main button link target
• Set sub button text
• Set sub button font
• Set sub button font size
• Set sub button font colour
• Set sub button highlight colour
• Set sub button separator colour
• Set sub button link
• Set sub button link target
Setting up the SWF
This menu system is designed to be easily implemented into any web-page or presentation. Just follow these simple steps for either a quickstart or a more in-depth customization.
Quick start
Step 1
Place the sleekmenu.swf file and the menu.xml file in the same directory and create a html file that the menu is to be displayed in.
Step 2
Insert this code into the html file where the menu is to be displayed:
In-depth customization
Step 1
The sleekmenu.swf and menu.xml files do not have to be in the same directory and they can even be renamed.
Step 2
Create a html file and insert the same code as before where the menu is to be displayed. To change the path from the html file to the swf file you need to change two lines:
<param name="movie" value="sleekmenu.swf">
and...
<embed src="sleekmenu.swf" width="700" height="200" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" xmlpath="menu.xml"></embed>
In these lines, wherever it says 'sleekmenu.swf', you need to change this to the path from the html file to the swf file. eg. flash/TitleNavBar.swf
Step 3
To change the path from the html file to the xml file you need to change a further two lines:
<param name="FLASHVARS" value="xmlpath=menu.xml">
and...
<embed src="menu.swf" width="700" height="200" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" xmlpath="menu.xml"></embed>
Wherever it says 'xmlpath="menu.xml"', you need to change this to the path from the html file to the xml file. eg. xmlpath="xml/NavBarXML.xml"
NOTE: If you do not specify a location for the xml file, the swf will assume the path is 'menu.xml' (in the same directory).
Configuring the XML
The xml file is broken in to two main sections: Options (for changing the look and workings of the menu) and Items (the actual menu buttons and sub menus). Here is a diagram to help explain how the xml is ordered:
Options
NOTE: All colours should be entered as a hex code, without the #. For example FF0000 is valid, whilst #FF0000 is not.
Site URL
This is where you specify the address of your site (eg. www.flashchilli.com) to be used in the Google search. NOTE: If you intend to use your own search page then is is safe to leave this tag blank (<siteurl></siteurl>) and change the button action to excute your search script.
Do not delete this tag.
Bar Colour
Enter the colour that the main bar should be tinted.
Sound
Set this to either on or off (lower case) to toggle the rollover sounds on and off.
Main Font Type, Colour and Size
These three tags allow you to set the font type, font colour and font size for the main headings.
Sub Font Type, Colour and Size
These three tags are the same as specified above except that they control text options for the sub items.
Sub Separator Colour and Sub Highlight Colour
In these two tags you set colours to do with the sub items. The 'Sub Separator Colour' is the colour for the vertical lines in between the sub items. The 'Sub Highlight Colour' is the colour of the rounded box that appears behind the sub item text on rollover.
Search Box Colour and Search Box Outline
Here you specify the colours for the search box. 'Search Box Colour' is the colour for the background of the search feild and 'Search Box Outline' is the colour of the outline around the search feild.
NOTE: Properties for the text entered into the search box are taken from the Main Font Type, Colour and Size tags.
Main and Sub Items
Main
This is the tag for the main headings, all the information is set as attributes inside the <main> tag. An attribute is inserted after '<main' but before '>', and follows the format 'attribute="value"'. The name attribute (name="") is used to set the text on the current heading. The colour attribute (colour="") is used to set the rollover colour for the current heading. A main heading can also be linked, even if it has a submenu, by setting the link (link="") and target (target="") attributes. The link attribute is the path to the file to be opened eg. http://www.flashchilli.com or services.htm. The target attribute is used to set the target of the specified link, this is useful if your page uses frames, or you can use some default targets, for example: '_blank' opens link in new window or '_self' opens link in current window/frame.
The very last heading is the search button, here you can specify the search script that flash calls and the name of the variable it sends, eg. link="search.php?term=" would call 'search.php' and send a variable called 'term' containing the contents of the search box. Alternatively by leaving out the link attribute, it will automatically search your site (specified in SiteURL in the options section) using Google. If you wish to make the search box search the web rather than your site you can leave the siteURL tag blank (as mentioned earlier).
You may have upto 7 main headings but the last will always be taken as the search button, this can be renamed and sub items can be attached but the main button size will only be 48 pixels.
Sub
This is the tag for a sub item, it is placed inside the 'main' tag (after '<main>' and before '</main>') that it belongs to. You can insert as many sub items as you wish but display has been limited to 7 sub items per heading to maintain appearence and usability. All the information is set as attributes (like in the 'main' tag) and the attributes are all the same with the exlusion of the 'colour' tag. This is not included because the colour for the highlight is set in the 'Sub Separator Colour' tag in the options section.