Drop Down Tree Menu V3

ABOUT

The Drop Down Tree Menu V3 is a flash component designed to help you load a tree menu
structure in an drop-down fashion. This is a major upgrade to the Drop Down Menu Pro,
featuring multi-level menus (more than 2-level), high level of skinning and customization,
horizontal and vertical orientation, alpha and blur transitions, and of course custom
tweening options.

The Drop Down Tree Menu V3 is suitable for multi-level (3+) drop-down menus that can be
built in Flash. If you need a 2-level drop-down menu (main menu and 1 submenu level only)
than you can purchase the Drop Down Menu V3 component instead.
However you can use the Drop Down Tree Menu V3 to build 1-level or 2-level menus too.

Compatibility

ActionScript: 2.0, 3.0

Flash IDE: Flash 8, Flash CS3
FlashPlayer: FlashPlayer 8, FlashPlayer 9

What’s new in Drop Down Tree Menu V3?

built from scratch based on the Jumpeye V3 Standards

skin customization support
full visual customization
tween transition customization
alpha, blur, slideX, slideY and slideXY modes
multi-level data menu
embed fonts supported
vertical menu orientation
function called by item click
open urls by item click
true event handling implemented
menu data is loaded using XML
component can be configured using XML

The story of the Drop Down Tree Menu V3

We wanted to build the perfect Drop Down Menu that would fit all expectations, we wanted
to create an easy way to tween, skin and customize the look and functionality of our initial
version of Drop Down Menu Pro and make it even more advanced.

After 2 years of experience in selling flash drop-down menus and other flash menu
components, we have yet understood what web designers and web developers actually
need. An easy way to build and customize flash dynamic drop-down menus using quick
features to help developers to easy implement the functionality, all these while having true
script control capabilities and lots of features for experts and advanced users.
Drop Down Tree Menu V3 is developed especially for web designers and developers who
need to save time and money using the easiest to implement and most skinable flash drop-
down menu ever built, while maximizing the benefits of essential built-in features.

STYLES

Jumpeye’s V3 Components allows skinning with visual elements, Skinning is done via styles
(styles are declared and used in the XML of a menu, but they may link to movieclip and
fonts that need to be found inside a flash file library).

The styles need to be declared inside the <styles> tag, and should be used for items in the
<data> tag of the XML file that feeds the component.

STYLE DECLARATION

All styles should be declared inside the XML that feeds the component under the node
<styles>, in separate nodes using the name that will be used in the data node when using
styles. E.g. <myStyleName> or <style1>

A style node may contain some nodes that will be used for configuring all states, while it
also have a <states> node, containing all/or some of the states allowed for the skin.

The <style> node may contain the following child nodes

<folderIconId>
The value of the node should be the linkage id of the movieclip used for the icon of a parent
node

<barIconSpacing>
This style is used only in horizontal orientation mode.
The distance between the beginning of the movieclip item and the place where the text
begins, a distance that will be used only if an icon will be displayed in the place, only if the
icon attribute of the item node is set.

<popIconSpacing>
This style is used only in pop menus (main vertical mode and on all submenus).
The distance between the beginning of the movieclip item and the place where the text
begins, a distance that will be used to display an icon.

<fixedSize>
Boolean, if true the menu size (width) will be taken from the size of the movieclip; if false,
the size will be taken from the text size (the longest text size)

<itemHeight>
The value of the node should be a number that will be used for sizing the height of an item

<itemSpacing>
The value will be used for spacing between icon and text inside a icon, and where spacing is
needed

<textFormat>
The node has exactly the same structure of a TextFormat Class but in XML format, all its
childNodes will be added to the menu item TextField as TextFormat properties.
E.g.
<textFormat>
<font>Tahoma</font>
<size>11</size>
<color>0xFF0000</color>
<bold>false</bold>
<italic>false</italic>
<underline>false</underline>
</textFormat>

<states>
The node may will contain a child node for each possible state, however, you can omit
states, you can simply define only the mandatory <up> state and it will be used for all
others in base of the state substitution order.

The possible states are the following:

<up>
<over>
<down>
<selected>
<disabled>

Every state may contain the following child nodes:

<textFormat>
This OPTIONAL node has exactly the same structure of a TextFormat Class
but in XML format, all its childNodes will be added to the menu item TextField
as TextFormat properties. It overrides the general textFormat for a speciffic
state.

<mcLinkageId>
The linkage id of the movieclip that will be loaded as a specific state of the
menu item. This movieclip have to be found inside the flash library.

State substitution order

The up state has no substitute, all other states may have proximal substitute, or be
substituted by the up state, as following:

over = up
down = over = up
selected = up
disabled = up

<parts>
The node may will contain a child node for each possible part (top, botton, lef, right, vertical
and horizontal separators). All these nodes link to movieclips that will be loaded from the
library.

Horizontal menu style (main menubar)

 <left>
<right>
<hseparator>

Vertical menu style (main vertical menu and all submenus)

<top>
<bottom>
<vseparator>

STYLE USAGE

The styles can be used within the <data> child node as follows. Each menu item (folder
item or terminal item) may have its own style, or it can use/inherit its parent childStyle or
it can inherit its parent style, and its parent uses the same method to inherit styles from its
parents.

A theme has the visual items and styles defined for a suite of sub-levels, themes are
packages containing the following:

1. .fla file containing the visual assets of the component

2. .xml file containing the styles and applied to a standard data
3. .as files (rarely, where classes are used to perform a movieclip special effect for
component’s states)

Inside the <data> node, each item node may contain the following style attributes:
style - the style of one particular item. E.g. style=”style1”
childStyle - the style that every child of this item will inherit (in case they don't have their own
style). E.g. childStyle=”arctic”

A style can be applied to as many items you want. When an item has no style set, it will
look for a childStyle of its parent following the style substitute order as follows:

item.style > item.parentNode.childStyle > item.parentNode.style >

> item.parentNode.parentNode.childStyle > item.parentNode.parentNode.style …

Since the Drop Down Menu V3 and the Drop Down Tree Menu V3 shares the same themes
and styles for skinning it is very easy to switch between them.

MENU DATA

In order to build the desired menu, the menu structure needs to be defined in the XML file,
using the <data> tag.

The <data> tag will contain the <main> tag which contains the main menus as items
(using the <item> tag); Those folder type menus that have childNodes will have their own
<item> childNodes following this structure:

<data>
<main>
<item >
 <item >
<item />
<item />
<item />
</item>
<item />
<item />
</item>
<item />
<item />
</main>
</data>

The <main> tag may have the following attributes:

childStyle - the style that his childNodes will inherit in case they don't have their own style
(optional) (you can also use the style attribute instead, even if it is interpreted only by its
childNodes, since the main node has no visual reference, no applicable style)

The <item> tag may have the following attributes:

GENERAL ATTRIBUTES:
title - the text that will be shown in the menu item
icon - the icon of the menu item (optional)
style - the style of the item (optional)
childStyle - the style that his childNodes will inherit in case they don't have their own style
(optional)
isEnabled - if the menu item is enabled(true) or disabled(false) (optional)
itemHeight - optional style parameter that can override the general style itemHeight
parameter

URL METHOD ATTRIBUTES

url - a url address to be followed when user clicks on the menu (optional)
target - the url target (optional)

FUNCTION ATTRIBUTES
function - the function with brackets and params, its path by dot notation like in eg.:
myFunc(param1,param2) (optional)

USER ATTRIBUTES
any other attributes can be inserted here. You will have access to them from the item itself
with dot notation

PROPERTIES
Property Type Description
Component
Inspector
xmlPath String Optional parameter. Sets the path to a XML file that can configure the
Yes Drop Down Tree Menu V3.

Parameters that are set from the <properties> node of the XML
(xmlPath) will override parameters set from script or Component
 Inspector.
The <data> node will contain the menu data, entering this node is
essential for the menu to display.
You don’t need to use xmlPath param, you can set the XML using the
setXML method.
The <styles> node will contain the styles for menu items, their
movieclip states and how their text is rendered.
Usage:
componentInstance.xmlPath = “XMLMenuConfig.xml”
orientation String Sets the orientation of the main menu. Values:[horizontal, vertical]
Yes Default: horizontal
Usage:
componentInstance.orientation = “vertical”
easeTypeIn String Sets the ease type for the drop in transition tween. Values:[easeOut,
Yes easeIn, easeInOut, none] Default: easeOut
Usage:
componentInstance.easeTypeIn =”easeIn”
easeTypeOut String Sets the ease type for the drop out transition tween. Values:[easeOut,
Yes easeIn, easeInOut, none] Default: easeIn
Usage:
componentInstance.easeTypeOut =”easeOut”
embedFonts Boolean If true, embed fonts will be used instead of device fonts. Default: false
Yes Usage:
componentInstance.embedFonts = true
navigationMode String The mode of navigation with the mouse. Values:[press, release,
Yes rollover, none] Default: rollover
Usage:
componentInstance.navigationMode = “press”
tweening Boolean If false, the switching between the items will be done without sliding.
Yes Default: true
Usage:
componentInstance.tweening = false
tweeningDurationIn Number Sets the duration of the slide tweening in frames. Default: 20
Yes Usage:
componentInstance.tweeningDurationIn = 10
tweeningDurationOut Number Sets the duration of the slide tweening in frames. Default: 20
Yes Usage:
componentInstance.tweeningDurationOut = 10
tweenTypeIn String Sets the tweening type. Values:[Regular, Strong, Bounce, Back, Elastic,
Yes None] Default: Back
Usage:
componentInstance.tweenTypeIn = “Strong”
tweenTypeOut String Sets the tweening type. Values:[Regular, Strong, Bounce, Back, Elastic,
Yes None] Default: Back
Usage:
componentInstance.tweenTypeOut = “Strong”
width Number Used to resize the component’s width in runtime without affecting the
No _xscale/scaleX of the component. The component will than align and
resize (if needed) the content in order to show the new size.
Usage:
componentInstance.width=200

AS2 EVENTS
Event Description
onLoadXML Event is triggered after the XML is loaded, this happens before loading the content.
Usage:
myEventListener = new Object();
myEventListener.onLoadXML = function(args){
trace("onLoadXML "+ args.target + “:” + args.success);
}
componentInstance.addEventListener("onLoadXML",myEventListener);
onDrawComplete Event is triggered after the content has been visually drawn.
Usage:
 myEventListener = new Object();
myEventListener.onDrawComplete = function(args){
}
componentInstance.addEventListener("onDrawComplete",myEventListener);
onRelease Event is triggered when “onRelease” event is invoked on one item.
Usage:
myEventListener = new Object();
myEventListener.onRelease= function(args){
trace(“onRelease event on item: ” + args.item);
}
componentInstance.addEventListener("onRelease",myEventListener);
onPress Event is triggered when “onPress” event is invoked on one item.
Usage:
myEventListener = new Object();
myEventListener.onPress= function(args){
trace(“onPress event on item: ” + args.item);
}
componentInstance.addEventListener("onPress",myEventListener);
onRollOver Event is triggered when “onRollOver” event is invoked on one item.
Usage:
myEventListener = new Object();
myEventListener.onRollOver = function(args){
trace(“onRollOver event on item: ” + args.item);
}
componentInstance.addEventListener("onRollOver",myEventListener);
onRollOut Event is triggered when “onRollOut” event is invoked on one item.
Usage:
myEventListener = new Object();
myEventListener.onRollOut = function(args){
trace(“onRollOut event on item: ” + args.item);
}
componentInstance.addEventListener("onRollOut",myEventListener);
onReleaseOutside Event is triggered when “onReleaseOutside” event is invoked on one item.
Usage:
myEventListener = new Object();
myEventListener.onReleaseOutside = function(args){
trace(“onReleaseOutside event on item: ” +args.item);
}
componentInstance.addEventListener("onReleaseOutside",myEventListener);
onDragOver Event is triggered when “onDragOver” event is invoked on one item.
Usage:
myEventListener = new Object();
myEventListener.onDragOver= function(args){
trace(“onDragOver event on item: ” + args.item);
}
componentInstance.addEventListener("onDragOver",myEventListener);
onDragOut Event is triggered when “onDragOut” event is invoked on one item.
Usage:
myEventListener = new Object();
myEventListener.onDragOut = function(args){
trace(“onDragOut event on item: ” + args.item);
}
componentInstance.addEventListener("onDragOut",myEventListener);
onMotionFinished Event is triggered when the tweening is over.
Usage:
myEventListener = new Object();
myEventListener.onMotionFinished = function(args){
}
componentInstance.addEventListener("onMotionFinished",myEventListener);
onOpen Event is triggered when a folder item is expanded.
Usage:
myEventListener = new Object();
myEventListener.onOpen = function(args){
}
componentInstance.addEventListener("onOpen",myEventListener);
onClose Event is triggered when a folder item is collapsed.
 Usage:
myEventListener = new Object();
myEventListener.onClose = function(args){
}
componentInstance.addEventListener("onClose",myEventListener);

AS3 EVENTS
Event Description
XML_LOAD Event is triggered after the XML is loaded, this happens before loading the content.
Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.XML_LOAD,xmlLoadHdl);
function xmlLoadHdl(evt: DropDownMenuEvents):void{
}
DRAW Event is triggered after the content has been visually drawn.
Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.DRAW,drawHdl);
function drawHdl (evt: DropDownMenuEvents):void{
}
ITEM_RELEASE Event is triggered when “onRelease” event is invoked on one item.
Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.ITEM_RELEASE,releaseHdl);
function releaseHdl (evt: DropDownMenuEvents):void{
trace(“ITEM_RELEASE event on item: ” + evt.item);
}
ITEM_PRESS Event is triggered when “onPress” event is invoked on one item.
Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.ITEM_PRESS,pressHdl);
function pressHdl (evt: DropDownMenuEvents):void{
trace(“ITEM_PRESS event on item: ” + evt.item);
}

ITEM_CLICK Event is triggered when “mouseDown” event is invoked on one item.

Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.ITEM_CLICK,clickHdl);
function clickHdl (evt: DropDownMenuEvents):void{
trace(“ITEM_CLICK event on item: ” + evt.item);
}

ITEM_ROLL_OVE Event is triggered when “onRollOver” event is invoked on one item.

R Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.ITEM_ROLL_OVER,rollOverHdl)
;
function rollOverHdl (evt: DropDownMenuEvents):void{
trace(“ITEM_ROLL_OVER event on item: ” + evt.item);
}

ITEM_ROLL_OUT Event is triggered when “onRollOut” event is invoked on one item.

Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.ITEM_ROLL_OUT,rollOutHdl);
function rollOutHdl (evt: DropDownMenuEvents):void{
trace(“ITEM_ROLL_OUT event on item: ” + evt.item);
}
SIZE Event is triggered when “onSizeChanged” event is invoked on one item.
Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.SIZE, sizeHdl);
function sizeHdl (evt: DropDownMenuEvents):void{
trace("SIZE event on item: ” + evt.item);
}
CHANGE Event is triggered when “onChange” event is invoked on one item.
Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents.CHANGE,changeHdl);
function changeHdl (evt: DropDownMenuEvents):void{
trace(“CHANGE event on item: ” + evt.item);
}

ITEM_OPEN Event is triggered when a folder item is expanded.

Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents. ITEM_OPEN,openHdl);
function openHdl (evt: DropDownMenuEvents):void{
trace(“ITEM_OPEN event on item: ” + evt.item);
}
ITEM_CLOSE Event is triggered when a folder item is collapsed.
Usage:
import com.jumpeye.Events. DropDownMenuEvents;
componentInstance.addEventListener(DropDownMenuEvents. ITEM_CLOSE,closeHdl);
function closeHdl (evt: DropDownMenuEvents):void{
trace(“ITEM_CLOSE event on item: ” + evt.item);
}

METHODS
Method Description
setXML Sets an XML for the component. You can pass a XML V3 standard to the component
using this method.
Usage:
componentInstance.setXML(myxml:XML)
getXML Returns the XML that fed the component.
Usage:
componentInstance.getXML():XML