How to fade in and fade out a Yahoo Astra Menu Component

August 29, 2007

How to fade in and fade out a Yahoo Astra Menu Component

Category: components, flash — joshspoon @ 2:51 am —

I was messing around w/ the Yahoo's Astra Library, mainly the Menu Component and added a little fade on the menu so it's not so harsh when it comes up.

It's easy just use the show/hide events **Remember use the constants**

PLAIN TEXT

Actionscript:

//import the required data class
import com.yahoo.astra.fl.controls.Menu;
import com.yahoo.astra.fl.data.XMLDataProvider;
import com.yahoo.astra.fl.events.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
//Create some XML to populate the menu don't leave in CDATA
var colors:XML =
//give the menu the xml data above
menu.dataProvider = new XMLDataProvider(colors);
menu.iconField = "iconSource";
//cause the button to display the menu
button.addEventListener(MouseEvent.CLICK, showMenu);
menu.addEventListener(MenuEvent.MENU_SHOW, showing);
menu.addEventListener(MenuEvent.MENU_HIDE, hiding);
function hiding(evt:MenuEvent):void
{
menu.addEventListener(MenuEvent.MENU_SHOW, showing);
menu.removeEventListener(MenuEvent.MENU_HIDE, hiding);
trace("hiding");
var myTween:Tween = new Tween(Menu(evt.currentTarget), "alpha", Elastic.easeOut, 1, 0, 15, true);
}
function showing(evt:MenuEvent):void
{
menu.removeEventListener(MenuEvent.MENU_SHOW, showing);
menu.addEventListener(MenuEvent.MENU_HIDE, hiding);
Menu(evt.currentTarget).alpha = 0;
var myTween:Tween = new Tween(Menu(evt.currentTarget), "alpha", Elastic.easeOut, 0, 1, 5, true);
}
//display the menu
function showMenu(event:MouseEvent):void
{
//display the menu at the bottom of the button
menu.show();
}