topleft
topright
Installation with custom settings Print E-mail
This tutorial shows how to install FameID Menu on your hosting server with the custom settings and images for items' backgrounds.
 
The installation procedure can be formulated with the following steps:
 
  1. Extract the files from the FameID Menu distribution archive (fameid_menu_0_4.zip, for instance) that you downloaded from our website
  2. Upload extracted files to your hosting into the desired folder. You can upload it anywhere on your server, however you can not change the structure of the subfolders extracted from the distribution archive
  3. Add html code to your web documents that would load the menu. You can use example code in index.html from our distribution archive (everythig between <object> and </object> inclusive the <object> tag)
  4. Change the global settings file under flash/default/config/settings_flash.txt
  5. Edit / Create configuration xml files to define your submenus under flash/default/xml/
  6. Upload images for items' backgrounds under flash/default/images
  7. Test that the menu works
 
 
This is a short tutorial showing how to install FameID Menu on  your hosting server.
 

Calling the menu from a web document 

 
Below is the example of how to call FameID Menu from a web document (index.html, for instance). The most important parts of the code below are bold for your convinience. Please read the explanations (below the source code) of what each bold part of the code means.
 
<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="500" height="200" id="menu" align="middle">
 
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="fameid_menu.swf" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="salign" value="LT" />
 
    <embed src="fameid_menu.swf" quality="high" width="500" height="200" name="menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noscale" salign="LT"/>
 
</object>
 

Explanation of the highlighted parts of the source code 

 
  • width="1000" height="245" -> defines the dimenstions of your menu on teh webpage
  • <param name="movie" value="fameid_menu.swf" />  ->  defines the filename of the main FameID Menu movieclip
  • <param name="scale" value="noscale" /> -> make sure that the movie is no scaled with the change of its dimensions
  • <param name="salign" value="LT" /> -> this parameter is neccesary for proper positioning of the menu on the webpage
 
The same parameters are duplicated in the <EMBED> tag to make sure that the code is supported by all the browsers.
 

Folder structure


IMPORTANT: after you save your settings in the settings_flash.txt file, you MUST set the permissions of the file to READONLY.
 

The files that come with the distribution archive are:

  • fameid_menu.swf ? this file is the main movieclip file that has all the logic for the FameID Menu. You don not need to change it. Leave it as it is.
  • xml_menu.swf - library-helper for fameid_menu.swf. You should always put it in the same folder as menu.swf. You don not need to change it. Leave it as it is.
  • 'flash' folder - contains settings for your menus. By default, there is one folder in there ? ?default?. It represents the default set of settings for your menu. You are free to have as many different sets of configurations as you wish.There are 3 subfolders in each configuration set:
    1. 'config' - contains a settings file of the configuration set (settings_flash.txt).The settings in the file affect the look and behaviour of the menu as a whole. For example, number of items, background colour behind the menu etc.
    2. 'images' - contains background images for each item of your menu. The images can be of any format. They can also be custom made flash animations. The naming convention for the image files is: [item_number].jpg or .swf). For example, if your menu has 6 items, then, you must put 6 images in the 'images' folder. The names of the images for 'default' configuration set would be: 1.jpg, 2.jpg ... 6.jpg
    3. 'xml' - contains XML files (configuration files) that define the look of the menu's and submenu's items. For example, colour of the text header, size of the bar under the menu item, custom images for submenu item buttons. The naming convention here is the same as for images.
 

Creating and using alternative configuration sets 

 
You might want to have two completely different looks for your menu and use each as you need them.this can be done by adding extra confiugration sets. What you need to do it create another folder inside the "flash" folder (say call it "second_set"). You will now have two folders inside the "flash" folder: "default" and "second_set". You will then have to recreate the folder structure inside the "default" folder, change the configuration files inside "second_set" folder and upload images into "images" folder inside the "second_set" folder. Once you are done, you are set to start using both of your configuration sets. 
 
If you just load the fameid_menu.swf file from your web document, it will automatically load the "default" configuration set. If you want to specify which configuration set to load you need to load fameid_menu.swf with a special parameter, like so: "fameid_menu.swf?wp=second_set". This will tell the menu load the "second_set" coniguration set instead of the defaul one.
 

Editing configuration sets 

 
There are three places where the configuration settings are located. The reason they are devided into three parts is that each affects different scopes of the menu:
 
  1. Global settings ? affect the whole menu. These settings are stored in the ?settings_flash.txt? file, which can be found in /flash/[configuration_set_name]/config. (For example, for the default configuration set the path would be ?/flash/default/config/settings_flash.txt?). Make sure that there is no any line break characteers after the last parameter inside this file.

    • 'x' - X coordinate of the top left corner of the menu (in pixels)
    • 'y' - Y coordinate of the top left corner of the menu (in pixels)
    • 'width' - Width of the movieclip  (in pixels)
    • 'height' - Height of the movieclip (in pixels)
    • 'global_bg_colour' - Menu\'s background color (in 0xRRGGBB format)
    • 'under_buttons_bg_default' - Default value for alpha transparency for the submenu items\' background panels (range: 0-100, 0 - fully transparent, 100 - fully visible)
    • 'min_alpha' - Minimum value for alpha transparency of menu\'s items. This value is assigned to the transparency level of all menu items that are not rolled over with a mouse. (range: 0-100)
    • 'max_alpha' - Maximum value for alpha transparency of menu\'s items. This value is assigned to the transparency level of the menu item that is rolled over with a mouse. (range: 0-100)
    • 'min_scale' - Minimum value for scale setting of menu\'s items. This value is assigned to the scale attribute of each menu item that does not have a mouse over it. (range: 0-300, in percets). For example if you want the menu item's background image to be shrunk to 50% of its real size when mouse is not over this item, set this value to 50.
    • 'max_scale' - Maximum value for scale setting of menu\'s items. This value is assigned to the scale attribute of the menu item that has a mouse over it. (range: 0-300, in percents). For example if you want the menu item's background image to be magnified to 150% of its real size when mouse is over this item, set this value to 150.
    • 'num_of_items' - Number of items in the menu (range: 1-30)
    • 'item_start' - Start Y coordinate (in relation to the top left corner of the item\'s border) of the submenu animation. (in pixels)
    • 'item_end' - End Y coordinate (in relation to the top left corner of the item\'s border) of the submenu animation. (in pixels)
    • 'speed_step' - Speed of the animation. The bigger the value is, the slower the animation is. (range: 1-20)
    • 'max_unfold' - Size of the rolled over item when it\'s fully unfolded. For example, if teh value is set to 3, then when the item is rolled over with a mouse, it will occupy one third of the width of the whole menu. (range: 1-10)
    • 'item_border_width' - Distance between menu items. (in pixels)
    • 'stretch_bg' - (1 or 0) Stretch item's background together with its dimensions or not. If set to 1, the background image is stretched when it's active and as the menu item is unfolding the background image just stretches unproportionally to create an "ellastic. If set to 0, the background image is not stetched when its active but just more of it is revealed as the menu item is unfolding.
    • 'item_text_always_on' - (0 or 1) If set to 1, the text under the menu items is always displayed. If set to 0, the text under the menu items is only displayed for a currently active menu item
    • 'is_button_image_visible' - (0 or 1) If set to 1, the submenu button icons are displayed. If set to 0, teh submenu button icons are not displayed
    • 'button_image' - (<path/filename>) Name of an image to be placed instead of a generic button image that is displayed for each submenu item

  2. Menu's items settings - affect menu item as a whole. These settings are stored in the xml files located at /flash/[configuration_set_name]/xml/*.xml. The settings are to be placed into the ITEMS tag attributes.

    • 'target_window' - Specifies the name of the target window for links. For example, if you have a frameset and want the a particular frame loaded with the URL of the menu item, then set this value to the name of that frame / window. (String)
    • (NEW) 'msg_font_size' - Menu item's font size
    • 'msg_colour' - Colour of the message with the name of the item that appears under the item when mouse is rolled over it. (0xRRGGBB)
    • 'msg_offset' - Distance of the name of the item from the bottom of the item. (in pixels)')
    • 'url' - URL for the menu\'s item. (http://...)
    • 'bg_alpha' - Alpha transparency level of the background panel of submenu. (range: 0(min) - 100(max))
    • 'bg_width' - Width of the background panel of submenu. (in pixels)
    • 'bg_height' - Height of the background panel of submenu. (in pixels)
    • 'line_colour' - Colour of the line under the menu item. (0xRRGGBB)
    • 'line_thickness' - Thickness of the line under the menu item. (in pixels)
    • 'line_cap' - Cap type of the line under the menu item. ("square", "curve")
    • 'line_offset' - Distance between the line under the menu item and the menu inself (in pixels)

  3. Submenu items settings ? affect single submenu item. These settings are also stored in the xml files located at /flash/[configuration_set_name]/xml/*.xml. The settings are to be placed into the ITEM tag attributes.

    • 'txt' - Text message for the submenu's item.
    • (NEW) 'txt_font_size' - Text message's font size.
    • 'link' - URL for the submenu\'s item. (http://...)
    • 'colour' - Colour of the the submenu\'s item text message. (0xRRGGBB)
    • 'text_width' - Width of the submenu\'s item text message. (in pixels)
    • 'target_window' - Target window name for the link of the submenu\'s item. (string)

Example of an XML configuration file 

 
Each line in this example starts with the number. This number is only there for a reference purpose and should be deleted if you decide to use this example for testing
 
  • Line 1: Items' Settings
  • Lines 2 ? 5: Submenu Items? Settings

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
 
  1. <items msg="Testing submenus" url="mainpage.html" target_window="content" bg_width="200" bg_height="30" line_colour="0x0FD73E" line_thickness="50" item_border_width="10">
  2. <item txt="page 1 heading" link="page1.html" w_text="200"/>
  3. <item txt="page 2 heading" link="page2.html" colour="0xFF00FF" txt_width="300" />
  4. <item txt="page 3 heading" link="page3.html" colour="0xFFFF00" txt_width="100" target_window="content"/>
  5. <item txt="page 4 heading" link="page4.html" colour="0x00FFFF" txt_width="50" target_window="content"/>
  6. </items>

 

Polls

Does FameID Menu need a vertical menu implementation in addition to horizontal one ?
 

Who's Online

We have 11 guests online
(c) 2006 - 2008 FameID Development - All rights reserved
Joomla Templates by JoomlaShack Joomla Templates