CREATING ANIMATION WITH CLASS

EXECUTIVE SUMMARY: There are many ways to create animation in Flash (i.e., Timeline Animation, Using presets, programming animation with code ourselves, etc).  However, in this tutorial will will create animation with class (pun intended).

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

Get Adobe Flash player

Download and Import Class Library

THEORY: There are many Flash animation class libraries that we could use. However, we will be using one from Google that allow you to easily create animation that are common to most objects. While you had to write the code yourself, you can save yourself a ton of time by using class libraries that has already been created and are typically available for free on the web.

APPLICATION: We will be using  a class library called Tweener. It is used, as the name implies, to create tweens as well as other transitions. Animation created by code is easier to maintain then timeline-based animation. The later is control by the timeline's frames; whereas, code-based animation  is control by time.

  1. Down the class library from Google. Go to http://code.google.com/p/tweener and in the featured download area download the latest class library (In our case as of this writing, it will the the tweener_1_33_74_as3.zip).  Also download, unzip and review the TransitionCheatSheets_2.zip files.
    NOTE: Advanced user can place the classws in a global ActionScript class folder.
  2. Create a project folder (i.e., Tweening with Class).
  3. Unzip the zip file in this project folder 
    NOTE: Take note of the directory structure as it will be useful when you import the classes later.
  4. Create a new ActionScript 3 Flash movie in the project folder (i.e., TweeeWithClass.fla).

Create or Import an Object to Animate

THEORY: Before you can use a class library, it has to be import into the Flash movie using the import key word. Then object has to be a move clip symbol and assigned an instance name so that it can be referred to dynamically via code.

APPLICATION: We will create an object and later write code for it to animate randomly.

  1. Rename the default layer from Layer 1 to Object to Animate or whatever you want to label it.
  2. Change the frame rate (fps) to 30 fps, and the stage size to 1024W x 768H in the Property panel.
  3. Create or import an object (image, clipart, video) you wish to animate.
  4. Scale and position the object if necessary so that it is in the center of the stage at a reasonable size to animate around the stage.
  5. If necessary, convert the object to a symbol (F8), give the symbol a name (in our case, myObject), move the registration point to the center and then click OK.
    NOTE: Moving the registration point to the center ensures the object rotate from its center and not from and edge (top/left).
  6. Give the object an instance name in the Property Inspector (in our case, we called it myObject like the symbol name).

Write Animation Code

THEORY: Typically you start with a simply animation and then "build upon" that animation by adding more features. For example, in this tutorial, you will

  1. Create a simple tween animation with required properties values
  2. Randomize properties (x and y)
  3. Add an additional propery (rotation)
  4. Change a default property (transition)
  5. Add a function (moveObject) to make animation play repeatedly.

Simple Animation Tween

APPLICATION: We will first create a simply tween animation and then progressively enhance it with additional properties.

  1. Create a new layer and name it Actions as the top most layer.
  2. With frame 1/layer 1 still selected, press F9 to open the Actions panel and then write the following code (highligted in bold):

    import caurina.transitions.*

    Tweener.addTween(myObject, {x:200, y:50, time:2});


    NOTE: The first line of code import all classes.  Notice that the dot syntax matches the directory structure where the classes are located. Advanced user can save the classes to Flash's global class folder and reference them from there.
    NOTE: The second line of code uses the addTween static method of the Tweener Class. There are two arguments:
    1. The first argument is the object instance name that you want to animate.
    2. The second argument is a generic object with a series name/value pairs that represent properties that you want this object to have. In this case, we are assigning the x position, y position, and time in seconds.  It is important to note that there is a different between arguments and properties. While the addTween method has two arguments separated by a comma, one of them is an object that has three required properties assigned inside of curly braces " { property1:value1, property2:value2, property3:value3 }" also separated by commas.
    ALTERNATIVE: You could have create an object first and than pass it as the second argument to the addTween method:

    var TweenObject:Object = new Object()
    TweenObject.x = Math.random()*stage.stageWidth
    TweenObject.y = Math.random()*stage.stageHeight
    TweenObject.time = 2
    TweenObject.rotation = Math.random()*360
    TweenObject.onComplete = moveObject
    TweenObject.transition = transitionArray[arrayIndex]
    Tweener.addTween(myObject, TweenObject)
  3. Test movie by pressing Control + Enter several times to see the animation.
    RESULT TEST POINT: The default transition is easeOutExpo.

Randomize X and Y Properties

THEORY: Normally, you would like to randomize a property value. To do this you can use the random property of the Math Object and multiple it by the value you want it to end at with a  range.  For example, if you wanted to rotation an object between 0 and 180 degrees, you would write the code like this: Math.random*180. If you wanted it to rotate between 0 and 270, you would write code like this: Math.random*270.

APPLICATION:  Here, we will take the existing animation and make it a random animation sequence.

  1. Change the code (highlighted in bold) to change the hard-wired x/y property values to a random properties values to create a random movement:

    import caurina.transitions.*

    Teener.addTween(myObject, {x:Math.random()*1024,
                                                           
    y:Math.random()*768,
                                                           
    time:2});

    NOTE: Math.random()*1024 and Math.random()*768 will return a random number between 0 and the width and height of the stage, respectively.
    NOTE: While not necessary, each property (x, y, and time) is placed on a separate line for clarity sake and to make the properties easier to read and update.
  2. Test movie by pressing Control + Enter several times to see the animation.
    RESULT TEST POINT: The object should now move randomly every time you play the movie.
  3. Change the code (highlighted in bold) to change the random properties values to random movement correctly on any stage size:
    NOTE: Normally, developers may cut code from one project to the next project.  Writing this code will ensure that if this code is used in another flash movie with a different stage size that it would work correctly.

    import caurina.transitions.*

    Teener.addTween(myObject, {x:Math.random()*stage.stageWidth,
                                                           
    y:Math.random()*stage.stageHeight,
                                                           
    time:2});

    NOTE: Math.random()*stage.stageWidth and Math.random()*stage.stageHeight will return a random number between 0 and the width and height of the stage regardless of what movie it is placed in.
  4. Test movie by pressing Control + Enter several times to see the animation.
    RESULT TEST POINT: The object should now move randomly every time you play the movie as before but this time it is made more dynamic and will stay within the borders of the stage deminsion.

Add Rotation Property

THEORY: There are many occasions where an object has to be rotated. This is easily accomplished by adding rotation property to the object.

APPLICATION: We will not cause the object to rotate.

  1. Change the code (highlighted in bold) to change the hard-wired rotation value a random rotation value to create a random rotation:

    import caurina.transitions.*

    Teener.addTween(myObject, {x:Math.random()*stage.stageWidth,
                                                           y:Math.random()*stage.stageHeight,
                                                          
    time:2,
                                                          rotation:Math.random()*360});


    NOTE: The rotation property value will randomly rotate the object between 0 and 360 degrees.
    NOTE: Notice a commas was added after the the number 2 because another property was added.

  2. Test movie  by pressing Control + Enter several times to see the animation.
    RESULT TEST POINT: The object not only move randomly but also rotate randomly every time you play the movie.

Change Transition Property

THEORY: : As stated earlier, the animation has a default easing property of easeOutExpo.  So, we would like to change it to some different type of easing.

APPLICATION: We will change the transition property

  1. Change the code (highlighted in bold) to make the animation run repeatedly without having to press Control + Enter repeatedly.

    import caurina.transitions.*

    Teener.addTween(myObject, {x:Math.random()*stage.stageWidth,
                                                          y:Math.random()*stage.stageHeight,
                                                           time:2,
                                                           rotation:Math.random()*360,
                                                           transition:"easOutElastic"});

    NOTE: The transition property is a string value and as a result has to be placed in quotes.
    NOTE: Notice a commas was added after the the number 360 because another property was added.

  2. Test movie by pressing Control + Enter several times to see the animation.
    RESULT TEST POINT: You should see the easing property of the object has changed.
  3. Replace the easeOutElastic string with easOutBounce, etc. -- See CheatSheet and test again
    RESULT TEST POINT: You should see a different transition (easing) for each transition property you added.

Create a Recursive Function

THEORY: There are several ways to animation and object with ActionScript (i.e. Looping, setInterval). However, an easy way is to "wrap" a function around the simple animation code and then call the function itself.  This concept is called recursive.

APPLICATION: We will create a function that will call itself repeatedly to animate the object.

  1. Change the code (highlighted in bold) to make the animation run repeatedly without having to press Control + Enter repeatedly.

    import caurina.transitions.*

    function moveObject()
    {

    Teener.addTween(myObject, {x:Math.random()*stage.stageWidth,
                                                              y:Math.random()*stage.stageHeight,
                                                             
    time:2,
                                                              rotation:Math.random()*360,
                                                             
    transition:"easOutElastic",
                                                              onComplete:moveObject });

    }

    NOTE: The onComplete property is used to check when the animation is complete and then run the SAME function repeatedly.
    NOTE: Notice a commas was added after the word easeOutElastic.

  2. RESULT TEST POINT: Test movie  by pressing Control + Enter several times to see the animation.
    NOTE: The animation should run repeatedly.

BONUS: Randomizing Transitions

THEORY: Occasionally, you may want to randomize a particurlar property. In this case, we will randomize the transition types by creating an array that will hold the various types and the creating a variable to generate a random number which is pass to that array.

APPLICATION: We will randomized the transition effects.

  1. Change the code (highlighted in bold) to make the animation run repeatedly without having to press Control + Enter repeatedly.

    import caurina.transitions.*

    var transitionArray = [ "easeOutBounce", "easeOutElastic", "easeInOutElastice" ]

    function moveObject()
    {

    var arrayIndex:int = Math.random()*(transitionArray.length);

    Teener.addTween(myObject, {x:Math.random()*stage.stageWidth,
                                                              y:Math.random()*stage.stageHeight,
                                                             
    time:2,
                                                              rotation:Math.random()*360,
                                                           
      transition:transitionArray[arrayIndex],
                                                              
    onComplete:moveObject });
    }

    NOTE: The onComplete property is used to check when the animation is complete and then run the SAME function repeatedly.
    NOTE: Notice a commas was added after the 360.

  2. RESULT TEST POINT: Test movie  by pressing Control + Enter several times to see the animation.
    NOTE: The animation should run repeatedly.