HOME  â€¢  SYLLABUS/SCHEDULE   •   ASSIGNMENTS •  COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

Tutorial 19 - ANIMATION WITH ACTIONSCRIPT: Part 2 - Iteration

(and if you haven't already done so, you should unpack this zip file: 2-animateWthActionscript.zip  We're mostly concerned with the "animateWithAS.fla" file.)

WHAT IT IS

In the previous tutorial, we saw how we can change various PROPERTIES of movie clips - - their x and y location, their opacity, their scaling - - and how we can use VARIABLES and FUNCTIONS with PARAMETERS to do this. But it's pretty ho-hum unless you can see CHANGE take place over TIME (animation). To do this, we must harnass the power of Actionscript to perform ITERATIONS of a script - - that is, the repeating of a script with an incremental change on each repetition.

 

First, let's look at two OPERATORS that form the foundation for iteration: +=  and -=.  Think of them as shorthand for an equation:

 

A = A + 1

A = A - 1

 

These two eqautions can be replaced (in the Actionscript environment) with these:

 

A++

A-- (that's minus minus)

 

We can also create an eqation where one side of the equation will repeat (iterate) until it is equal to the other side:

 

A+=B + 1

 

HOW DOES THE ITERATION HAPPEN?

 

Here's where you can use the built-in mechanics of Flash to help you run the script (you can also use other Flash functions such as "repeat " or "repeat while" in the body of the code - but this we can do later). Remember the notion that the playback head in Flash is continually looping? We can combine that mechanical aspect of Flash with the "onEnterFrame" function we attached to a movie clip in the previous tutorial to create a script that will constantly iterate:

 

_root.clip01_mc.onEnterFrame = function(){

//put your iterative Actionscript here!

}

 

In the previous tutorial, we attached this function to a movie clip, and then developed a set of global variables that would change various properties. We will now use this iterative script-running process to CHANGE THE GLOBALS, INCREMENTALLY, and hence, change the properties of the movieclip. Here's the same script above with just one more line of code, dealing with the movie clip's _x position (horizontal location) - - and you guessed it, it's located in the FIRST FRAME, FIRST LAYER, SCENE 1:

 

_root.clip01_mc.onEnterFrame = function(){

 

_root.clip01_mc._x+= Number ((_global.buttonXpositioner-this._x)/5)

}

 

Translation: The horizontal position (_x value) of movie clip with instance name "clip01_mc" is going to be incrementally set and iterated until it is equal to the absolute value (that's the Number function) of the current global variable "buttonXpositioner" minus the movie clip's actual _x value (this refers to  _root.clip01_mc). The division by 5 is a FACTOR - change the 5 to 20, and then to 1 to see what the FACTOR changes.

OK, so we need this line, too, placed right after the function. This sets the global's INITIAL VALUE:

 

_global.buttonXpositioner = 144;

 

 

Note - a few housekeeping items: the "button" reffered to here is actually the movie clip, so in the next version of this tutorial, I'll be more careful about what I name things. My bad. 

 

You notice there's multiple lines of similar code in the Flash file, plus multiple global declarations. For every PROPERTY you want to animate, you'll need a line of code in the function, and a global declaration of its initial, default value below the function.

Now, look at the scripts attached to the two buttons, one red and one green:

 

on (release){

_global.buttonXpositioner = 80;

_global.buttonYpositioner = 60;

_global.buttonSizer = 3000;

_global.buttonAlpha = 8;

}

 

 

The only thing we're changing to change the properties is the VALUE of the GLOBAL VARIABLES. That's it.

Pretty cool, no? For every movie clip you want to control in this manner, you'll need to write a separate function, and have a separate set of global variables. But you can write this all on the same script (first frame, first layer, Scene 1).

 

 

IMPORTANT ADDENDUM!

 

In tutorials for 2009 and beyond, I'm trying to get everybody  to put ALL their Actionscript in a single location - on the main timeline, on a single frame. This way, you don't have to hunt down scripts attached to 15 buttons to change something - - it's all on a single frame.

 

Here's what you must do: you need to give your buttons an instance name, then attach scripts to them, using the same form of attaching a function to a movie clip. If your button's instance name is 'button01_bt', your script will look like this:

 

 

_root.button01_bt.onRelease = function(){

 _global.buttonXpositioner = 80;

_global.buttonYpositioner = 60;

_global.buttonSizer = 3000;

_global.buttonAlpha = 8;

}

 

 

Notice, like the 'onEnterFrame' event previously, the event handler is attached directly to the instance of the button on the stage. This will, of course, balloon the amount of scripting in that single, first frame, but it's all in one script - - it's not floating around your project in many bits, hidden in buton scripts. Yay!