Our concepting portfolio

Transition Manager in ActionScripting 3.0

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

First, create a Square of 32 pixels wide by 32 pixels in height. Convert this to a movie clip symbol. Select linkage and set for export to actionscripting and name the class with "MyObject" for naming of the class, and select ok to continue. Remove the symbol from the stage and we are done for the first part.

 

Second part, let's add the following code:


  
// Copyright by CreativeReform
// Written by Don Le - donle21@yahoo.com
// All rights reserved //import for animation

import fl.transitions.*;
import fl.transitions.easing.*;

//variables
var myObject:MyObject
//maximum objects
var myNum = 5;

//setting up variable
for(var i:uint = 0; i < myNum; i++){
    
    //new object
    myObject = new MyObject();
    
    //use switch to set up transitioning type
    //each transitioning will be assign to the object.trans parameter
    //which will be used as transitioning type.
    switch (i){
    
        case 0:
        myObject.trans = Squeeze;
        break;
        
        case 1:
        myObject.trans = PixelDissolve;
        break;
        
        case 2:
        myObject.trans = Wipe;
        break;
        
        case 3:
        myObject.trans = Rotate;
        break;
        
        case 4:
        myObject.trans = Fade;
        break;
        
        //default will be blind transitioning effect
        default:
        myObject.trans = Blinds;
        break;
    
    }
    //create name for each object
    myObject.name = "myObject"+i;
    //set x and y positioning of the object
    myObject.y = 50;
    myObject.x = 50 + (myObject.width +15)*i;
    
    //add object to stage
    addChild(myObject);
    
    //add listener to animate on roll over
    myObject.addEventListener(MouseEvent.ROLL_OVER, animateBox);
    
}
    
function animateBox(e:Event):void{
    
    //remove mouse event on roll over so the animattion won't repeat automatically
    e.currentTarget.removeEventListener(MouseEvent.ROLL_OVER,animateBox);
    
    //setting up transitioning manager, pass in target;
    var myTransitionManager:TransitionManager = new TransitionManager(e.currentTarget as MovieClip);
    
    //start transition with type, direction, duration, and easing.
    myTransitionManager.startTransition (
    {
        type:e.currentTarget.trans, 
        direction:Transition.IN, 
        duration:1, 
        easing:Regular.easeOut
    });
    
    //on complete animation, enable the buttons again.
    myTransitionManager.addEventListener ("allTransitionsInDone", animateEnabled);
    
}
function animateEnabled(e:Event):void{
        // enable the buttons again.
        for (var i:uint = 0; i< myNum; i++){
        getChildByName("myObject"+i).addEventListener(MouseEvent.ROLL_OVER, animateBox);
        }

}


That's it. There are 10 transition in transitioning manager, it would be fun to try them all out and find creative ways to include them into your project. Enjoy!

 

DOWNLOAD file in this tutorial >