The following example shows how you can use the TransitionManager class in ActionScript 3.0 to create a simple effect on a movie clip.
Full code after the jump.
// ActionScript 3.0 /** * Requires: * - MovieClip on the Stage with an instance name of "logo". */ import fl.transitions.*; import fl.transitions.easing.*; var blindsObj:Object = new Object(); blindsObj.type = Blinds; blindsObj.direction = Transition.IN; blindsObj.duration = 4; blindsObj.easing = Strong.easeOut; blindsObj.numStrips = 10; blindsObj.dimension = 1; TransitionManager.start(logo, blindsObj);
Note: You could also create the Object in one line of code, using the Object shorthand ({}), as seen in the following example:
var blindsObj:Object = {type:Blinds, direction:Transition.IN, duration:4, easing:Strong.easeOut, numStrips:10, dimension:1};
So, the big question is, “how do I tell when the transition effect completes?”. Well, the answer to that is to listen for either the transitionInDone event or the transitionOutDone event (depending on whether you set the transition’s direction property to Transition.IN or Transition.OUT).
Let’s take a look at another ActionScript 3.0 example:
// ActionScript 3.0 /** * Requires: * - MovieClip on the Stage with an instance name of "logo". * - Button component on the Stage with an instance name of "button". */ import fl.transitions.*; import fl.transitions.easing.*; var blindsObj:Object = {type:Blinds, direction:Transition.IN, duration:4, easing:Strong.easeOut, numStrips:10, dimension:1}; button.label = "Play"; button.addEventListener(MouseEvent.CLICK, button_click); function button_click(evt:MouseEvent):void { button.enabled = false; logo.alpha = 1.0; // 100% (reset alpha) var transition:Transition = TransitionManager.start(logo, blindsObj); transition.addEventListener("transitionInDone", transition_transitionInDone); } function transition_transitionInDone(evt:Event):void { logo.alpha = 0.5; // 50% button.enabled = true; }
Now, each time you click the Button control, the Button sets it’s enabled property to false, preventing the user from clicking it twice. Once the transition effect is complete, the transitionInDone event gets dispatched which sets the logo’s alpha property to 50% and setting the Button control’s enabled property back to true, allowing the user to replay the animation.
The following example shows how you can use the transitionOutDone event:
// ActionScript 3.0 /** * Requires: * - MovieClip on the Stage with an instance name of "logo". * - Button component on the Stage with an instance name of "button". */ import fl.transitions.*; import fl.transitions.easing.*; var blindsObj:Object = {type:Blinds, direction:Transition.OUT, duration:4, easing:Strong.easeOut, numStrips:10, dimension:1}; button.label = "Play"; button.addEventListener(MouseEvent.CLICK, button_click); function button_click(evt:MouseEvent):void { button.enabled = false; logo.alpha = 1.0; // 100% (reset alpha) var transition:Transition = TransitionManager.start(logo, blindsObj); transition.addEventListener("transitionOutDone", transition_transitionOutDone); } function transition_transitionOutDone(evt:Event):void { logo.alpha = 0.5; // 50% button.enabled = true; }
Basically, the only two things that changed between the two previous samples are Blind transition’s direction property changed from Transition.IN to Transition.OUT, and instead of listening for the transitionInDone event, we listen for the transitionOutDone event. And as you can see, clicking the button now causes the logo to transition from visible to invisible instead of the other way around.
You can also create transitions using the TransitionManager class constructor method and the startTransition() method, as seen in the following example:
// ActionScript 3.0 /** * Requires: * - MovieClip on the Stage with an instance name of "logo". * - Button component on the Stage with an instance name of "button". */ import fl.transitions.*; import fl.transitions.easing.*; var blindsObj:Object = {type:Blinds, direction:Transition.IN, duration:4, easing:Strong.easeOut, numStrips:10, dimension:1}; button.label = "Play"; button.addEventListener(MouseEvent.CLICK, button_click); function button_click(evt:MouseEvent):void { button.enabled = false; logo.alpha = 1.0; // 100% (reset alpha) var transitionManager:TransitionManager = new TransitionManager(logo); transitionManager.addEventListener("allTransitionsInDone", transitionManager_allTransitionsInDone); var transition:Transition = transitionManager.startTransition(blindsObj); } function transitionManager_allTransitionsInDone(evt:Event):void { logo.alpha = 0.5; // 50% button.enabled = true; }
The previous example creates a new TransitionManager instance by calling the TransitionManager class constructor and passing a reference to the movie clip that you want to apply the transition to. Next, an event listener is defined, and listens for the allTransitionsInDone event. We listen for the allTransitionsInDone event because the transition direction is set to Transition.IN. If we were using an out transition (Transition.OUT), we would instead listen for the allTransitionsOutDone event. Finally, we start the transition by calling the startTransition() method on the TransitionManager instance returned by the TransitionManager class constructor.
For more information on the TransitionManager and Transition classes in ActionScript 3.0, see TransitionManager and Transition in the Flash CS3 documentation.
{ 4 comments… read them below or add one }
super
This was really helpful. I’m trying to make a hiding menu with a button that will show or hide it. This tutorial brought me most of the way to a finished product.
Thank you, this is very useful.
thank u very useful example
tell about the multiple images using transition(For banner or slideshow)