Main page Add to Favorites Contact
Web menus for you

Flash Extensions
  picasso navigation bar
  chameleon flash menu bar
  total extension kit
  total flash menu
  total pic flash menu
  total flash news ext
  total flash button
  total flash mouse
  get cross-domain content
  removing IE activation

Flash menus downloads / Buy flash menu

Flash menus awards
Flash-Extensions terms
Link to Flash-Extensions
Flash-Extensions support
Flash menus FAQ
 

PICASSO NAVIGATION BAR TUTORIAL - Flash Component

 

Purchase and Installation

Once you purchase the component, the link to the download file will be sent to you by e-mail. This will be a zip archive with the component files and the documentation. Download this archive to your computer, unzip it and run the PicassoMenu.mxp file. This will install* the component on your computer. If you are not currently running the FLASH, close and restart it. The next time the environment is started the component will appear in the components panel and be ready to work.

* To install a mxp file you need macromedia extension manager, it can be downloaded for free from http://www.adobe.com/exchange/em_download/, it usually comes with flash or other macromedia products. After you have downloaded the mxp file open extension manager, select the product in which you want to install the extension (Flash MX, Flash MX 2004, Flash 8) from the drop down menu then click "install new extension", browse to the mxp file and click "install", now just fallow the instructions ("next", "accept"). Now the extension should be installed and displayed in extension manager list, you can click on the installed extension to see details about it.

 

Starting the Work

To start working with the component simply drag its copy onto the Stage from the Components panel and specify menu properties. (If you use Flash CS5 you can find Picasso Menu in your Adobe Flash interface here: Window > Common Libraries > Picasso menu. You can just drag and drop the Picasso menu library items to the your library and then insert Picasso menu component into your flash stage.) For high quality motion our menu usually requires high fps values. In our component we used fps = 21

 

PICASSO NAVIGATION BAR TUTORIAL - XML driven flash menu (SWF object)

 

Purchase and Installation

Once you purchase the object, the link to the download file will be sent to you by e-mail. This will be a zip archive with the object files and the documentation. Download this archive to your computer and unzip it.

 

Starting the Work

To start working simply paste object HTML into your page and setup xml configuration file. You can place configuration file anywhere on your server.

 

Object HTML code

We recommend you to use the SWFObject. SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

You can download SWFObject.js file here: 
DOWNLOAD SWFObject

1. Paste this code into your HTML-page and replace object stage parameter with your values.
2. Download and save the swfobject.js file near with your HTML-page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      var flashvars = {};
      flashvars.xmlURL = "path to configuration file";
      var params = {};
      params.quality = "high";
      params.scale = "noscale";
      params.bgcolor = "background color";
      var attributes = {};
      swfobject.embedSWF("swf file path", "myAlternativeContent", "width", "height", "7.0.0", "expressInstall.swf", flashvars, params, attributes);
    </script>
  </head>
  <body>
    <div id="myAlternativeContent">
      <a href="http://www.adobe.com/go/getflashplayer">
        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
      </a>
    </div>
  </body>
</html>


Read more on our FAQ page.

 

Object stage parameter

Width
This parameter controls width of flash object stage on your HTML-page. The width of the object can be different.

Height
This parameter controls height of flash object stage on your HTML-page. The height of the object can be different.

Swf file path
This parameter points to the object swf file. You can store your swf files anywhere on server.

Background color
This parameter controls background color of object stage. So you can adjust its look and fee. The color should be set in RGB in the following format: #NNNNNN, where N is a hexadecimal number (0-F).

Path to the configuration file
This parameter points to the object xml configuration file. You can store your xml files anywhere on server.
But remember this path can be absolute (example: http://www.yourdomain.com/config/menu01.xml) or relative to the directory with your HTML page (example: ../config/menu01.xml).

 

PICASSO NAVIGATION BAR TUTORIAL - FLASH Component and XML menu (SWF object)

 

Parameter Description

Menu properties

Menu type
This parameter determines the type of the menu. If set to "vertical", the menu will be vertical. If set to "horizontal", the menu will be horizontal.

Sub menu vertical align
This parameter determines the vertical align of the sub menu. If set to "top", the sub menu will be drop down. If set to "bottom", the menu will be popup.

Sub menu horizontal align
This parameter determines the horizontal align of the sub menu. If set to "left", the sub menu will appear on the right. If set to "right", the sub menu will appear on the left.

Main button selected state
This parameter determines the selected state of the main buttons. If set to "true", the main menu button will be selected after click. If set to "false", the main menu button will be without selected state.

External menu buttons theme file
This parameter is the path to the menu buttons theme file. Its value may be either an external swf (buttontheme.swf) file path. If no name is specified, the included basic button theme will be used. If the name is incorrect, the component will not work.

Menu background
This parameter is the path to the menu background file. Its value may be either an external jpeg or swf (+ gif & png, if you work in the Flash 8) file path. If no name is specified, the background will not be used. If the name is incorrect, the background will not be used.

Menu rollover sound
This parameter is the path to the menu buttons rollover sound file. Its value may be either an external mp3 file path. If no name is specified, the rollover sound will not be used. If the name is incorrect, the rollover sound will not be used.


Menu tree

Menu tree editor
Here you can add, remove and change main and sub buttons.

Button actions
If you want that the button was visible without execute any action then set it's ACTION to "".

"GetUrl" opens url in target window.
"loadMovie" load your file (jpeg, swf + gif & png, if you work in the Flash 8) in target movie clip.
"gotoAndStop" go and stop to frame or label in target movie clip.
"gotoAndPlay" go and play to frame or label in target movie clip.
"nameofyourfunction" execute your function in target movie clip and transfer parameter in it (if it is necessary).

 

Buttons creation

Now you can simply draw flash buttons, which are necessary for you. You will find two usual flash buttons in the library: "1 mainButton" and "2 subButton".

      

You can edit them as you wish as these are usual flash buttons! Create a beautiful effect for the appearance, a roll over effect or simply draw a fine static button.

      

If you drag and drop Picasso menu component from the components panel on the stage all necessary movieclips will automatically be created in the library. You will only need to edit them. (If you use Flash CS5 you can find Picasso Menu in your Adobe Flash interface here: Window > Common Libraries > Picasso menu. You can just drag and drop the Picasso menu library items to the your library and then insert Picasso menu component into your flash stage.)

Inside the flash button you can use a textfield with any font and any adjustments. It is important that the textfield is a "dynamic text" type and that it is placed directly in the flash button or inside a movieclip. Then the button label will automatically be entered in the textfield.





 

XML File Format

To prepare your object for work you need setup configuration xml file. The component settings XML file is a usual text file of the following format:


<menu>

<properties>

<menu_type type="vertical"/>
<menu_vertical_align align="top"/>
<menu_horizontal_align align="left"/>
<selected_state state="true"/>
<button_theme theme_file_path=""/>
<menu_background bg_file_path=""/>
<menu_rollover_sound mp3source="" mp3volume="10"/>

</properties>

<buttons>

<button text="Button actions" url="" target="" action="">
<button text="getUrl action" url="your.html" target="_blank" action="getUrl"/>
<button text="loadMovie" url="tst.swf" target="_parent.test_mc.swfloader" action="loadMovie"/>
<button text="gotoAndStop action" url="30" target="_parent.test_mc" action="gotoAndStop"/>
<button text="gotoAndPlay action" url="playframe" target="_parent.test_mc" action="gotoAndPlay"/>
<button text="myFunction action" url="1000" target="_parent.test_mc" action="myFunction"/>
</button>
<button text="Products" url="your.html" target="_blank" action="getUrl"/>
<button text="Services" url="your.html" target="_blank" action="getUrl"/>
<button text="Contact Us" url="your.html" target="_blank" action="getUrl"/>
<button text="Company" url="your.html" target="_blank" action="getUrl"/>

</buttons>

</menu>

 
  HOME   SUPPORT   FAQ   SITEMAP   LINK TO US   TERMS
Copyright 2005-2009 Flash-Extensions.net All Rights Reserved

navigation bar features
navigation bar tutorial
navigation bar online demos
navigation bar themes
navigation bar download