Dynamic 3D Flip Photo Menu – AS3 (Horizontal Menus)

This is a 3D menu with a nice animation and style. No PaperVision or any other 3rd party script is used.

The action script coding is fully OOP based. Plus, the menu supports adding and removing the items dynamically. Plus, it dispatches useful events for various purposes.
 
As, coding is OOP based, it is already highly customizable. But, some features that are worth mentioning are…
A. DYNAMIC METHODS
1. clear()
This dynamic method clears all the items on the menu.
Usage Example:
photoMenu.clear();
 
2. addItem(data:XML)
This dynamic method adds an item to the menu whenever you want. You do not have to always add the items via XML . But, you can add the items dynamically in runtime.
Usage Examples:
photoMenu.addItem(new XML (“ ”));
photoMenu.addItem(xmlVariable);
 
3. removeItem(data:XML)
This method dynamically removes an item at the runtime. The function searches for the item that has XML data equal to the supplied parameter and deletes it.
Usage Example:
photoMenu.removeItem(xmlVariable);
 
B. DYNAMIC EVENTS
1. ITEM _ADDED – ac.FlipPhotoMenu. MenuEvent. ITEM _ADDED
This event is dispatched when an item is added to the menu. The event also supplies the related item on the event. The item can be accessed using evt.item property and the item data XML can be accessed using evt.item.data property.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. ITEM _ADDED, menuItemAdded);
private function menuItemAdded(evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
 
2. ITEM _REMOVED – ac.FlipPhotoMenu. MenuEvent. ITEM _REMOVED
This event is dispatched when an item is removed from the menu. The event also supplies the related item on the event. The item can be accessed using evt.item property and the item data XML can be accessed using evt.item.data property.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. ITEM _REMOVED, menuItemRemoved);
private function menuItemRemoved (evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
3. ITEM _CLICKED – ac.FlipPhotoMenu. MenuEvent. ITEM _CLICKED
This event is dispatched when an item is clicked on the menu. The event also supplies the related item on the event. The item can be accessed using evt.item property and the item data XML can be accessed using evt.item.data property.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. ITEM _CLICKED, menuItemClicked);
private function menuItemClicked (evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
4. ITEM _ROLL_OVER – ac.FlipPhotoMenu. MenuEvent. ITEM _ROLL_OVER
This event is dispatched when mouse moves over an item. The event also supplies the related item on the event. The item can be accessed using evt.item property and the item data XML can be accessed using evt.item.data property.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. ITEM _ROLL_OVER, menuItemRollOver);
private function menuItemRollOver (evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
5. ITEM _ROLL_OUT – ac.FlipPhotoMenu. MenuEvent. ITEM _ROLL_OUT
This event is dispatched when mouse moves out of an item. The event also supplies the related item on the event. The item can be accessed using evt.item property and the item data XML can be accessed using evt.item.data property.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. ITEM _ROLL_OUT, menuItemRollOut);
private function menuItemRollOut (evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
6. ITEM _IMAGE_LOADED – ac.FlipPhotoMenu. MenuEvent. ITEM _IMAGE_LOADED
This event is dispatched when an item’s image is loaded. The event also supplies the related item on the event. The item can be accessed using evt.item property and the item data XML can be accessed using evt.item.data property.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. ITEM _IMAGE_LOADED, menuItemImageLoaded);
private function menuItemImageLoaded (evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
7. MENU _CLEARED – ac.FlipPhotoMenu. MenuEvent. MENU _CLEARED
This event is dispatched when menu is cleared.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. MENU _CLEARED, menuCleared);
private function menuCleared (evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
8. MENU _SCROLLING – ac.FlipPhotoMenu. MenuEvent. MENU _SCROLLING
This event is dispatched when menu is cleared.
Usage Example:
photoMenu.addEventListener(ac.FlipPhotoMenu. MenuEvent. MENU _SCROLLING, menuScrolling);
private function menuScrolling (evt: ac.FlipPhotoMenu. MenuEvent):void {
//YOUR CODE GOES HERE
//DO SOMETHING ON THIS EVENT
}
 
There are many settings that can be changed in the settings.xml file.
1. menuWidth – width of the menu
2. itemWidth – menu item width
3. itemHeight – menu item height
4. itemGap – gap between the items
5. itemReflectionGap – gap beetween an item and its reflection
6. itemReflectionAlpha – item reflection transparency
7. showItemReflection – whether to show the item reflection or not
8. itemBackgroundColor – background color of an item
9. itemBackgroundAlpha – transparency for an item’s background
10. toolTipTextColor – text color of tool tips
11. toolTipBackgroundColor – background color of tool tips
12. toolTipPreLoaderColor1 – first color for tool tip preloader
13. toolTipPreLoaderColor2 – second color for tool tip preloader
14. flipSpeed – flip speed for items – greater the speed, slower the animation
15. alphaSpeed – speed for transparency animations – greater the speed and slower the animation
16. scrollSpeed – scrolling speed – – greater the speed and slower the animation
17. scrollMargins – margins to leave to the left and right while scrolling
 
In the data.xml file, each item can have the following attributes.
1. image – image to show on the menu item
2. toolTip – tooltip text to show when mouse moves over an item
3. link – link to open when an item is clicked
4. target – target frame or window in which the link should open

Images in the preview are purchased from www.fotolia.com and they are not included in the file you purchase.

Download Dynamic 3D Flip Photo Menu – AS3 (Horizontal Menus)

Leave a Reply

Your email address will not be published. Required fields are marked *