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).
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.
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.
Create a project folder (i.e., Tweening with Class).
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.
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.
Rename the default layer from Layer 1 to Object to Animate or whatever you want to label it.
Change the frame rate (fps) to 30 fps, and the stage size to 1024W x 768H in the Property panel.
Create or import an object (image, clipart, video) you wish to animate.
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.
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).
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
Create a simple tween animation with required properties values
Randomize properties (x and y)
Add an additional propery (rotation)
Change a default property (transition)
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.
Create a new layer and name it Actions as the top most layer.
With frame 1/layer 1 still selected, press F9 to open the Actions panel and then write the following code (highligted in bold):
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:
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.
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:
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.
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.
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.
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.
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.
Change the code (highlighted in bold) to change the hard-wired rotation value a random rotation value to create a random rotation:
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.
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
Change the code (highlighted in bold) to make the animation run repeatedly without having to press Control + Enter repeatedly.
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.
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.
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.
Change the code (highlighted in bold) to make the animation run repeatedly without having to press Control + Enter repeatedly.
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.
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.
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);
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.
RESULT TEST POINT: Test movie by pressing Control + Enter several times to see the animation. NOTE: The animation should run repeatedly.