HOME • SYLLABUS/SCHEDULE  •  ASSIGNMENTS •  COURSE RESOURCES  •  YOUR PAGES  •  YOUR FEEDBACK

Flash Tutorial 18 - ANIMATION WITH ACTIONSCRIPT: Part 1 - Variables, Properties, Events/Functions/Parameters

VARIABLES

 

 

Variables are placeholders for VALUES THAT CHANGE. They are alphanumeric characters or collections of words and/or numerals (but the numerals need to not come first) that can be referred to and changed by Actionscript.

 

Variables have SCOPE - they can live and die within a few lines of actionscript, within a function for instance (more on functions in a minute - - the LOCAL variable), or they can operate (and be valid) throughout the entire Flash movie- the GLOBAL variable.

 

You CREATE a variable by simply DECLARING it:

 

var spongeDevice;

 

but more often you will create a variable by SETTING it to some value:

 

var spongeDevice = 35;

 

 

If you want to make your variable a GLOBAL variable (usually the best choice), use the prefix _global in dot syntax:

 

_global.spongeDevice=35;

 

What does this mean? It means the global variable "spongeDevice" has been created, and it's been given the value of "35". Now, let's make this statement really MEAN something, by introducing PROPERTIES.

 

 

 

 

PROPERTIES.

 

 

Properties are characteristics that symbols possess. We've already seen lots of properties - a movie clip has an opacity level (_alpha), a graphic is placed on a certain x and y value on the stage (_x and _y), another movie clip is 200% its regular size (_xscale and _yscale).

 

Each of these characteristics  - - _alpha, _x, _y, _xscale, _yscale - - are properties of these symbols. They can be set and changed by actionscript. They can be assigned to a variable. You've seen how a symbol (usually a movie clip) can be attached to an ACTION with dot syntax actionscript :

 

_root.clip01_mc.gotoAndStop("begin");

 

well, you can attach a PROPERTY to a symbol the same way:

 

_root.clip01_mc._alpha=90;

 

That line means the movie clip "clip01_mc" on the main stage (_root) has been set to an opacity level of 90%.

 

 

Now, that all very groovy, but the real power comes from setting properties to variables, because, yes, variables can change. When the variable changes, so does the property of whatever symbol we're addressing:

 

_global.spongeDevice=35;

_root.clip01_mc._alpha= spongeDevice;

 

The opacity of the movie clip is set to 35. Maybe we want to make a button that changes the variable, and hence, the movie clip opacity:

 

on (release){

     _global.spongeDevice=100;

}

 

Once you press the button with that script, you'll change the movie clip to full opacity.

 

OK - One more note: Now that our variable actually MEANS something, why not NAME it accordingly? Name variables so their REASON FOR EXISTING is somehow apparent: _global.spongeDevice maybe should be named _global.spongeOpacity or something like that. Variable names SHOULD BE USEFUL - - in 6 months or a year, this code will be a mystery to you - name your variables so you'll be able to DECODE your work!

 

 

 

WHERE TO PUT THE SCRIPTS:

 

 

DECLARE your global variables and set the INITIAL VALUES of your properties on the FIRST FRAME, FIRST LAYER, MAIN STAGE ("Scene 1").

 

Put the scripts where you want to CHANGE something (usually a variable) on the BUTTON you want to press for this interactivity. FLASH NINJA NOTE: Yes, Flash Ninja, you can put ALL your BUTTON scripts also on the FIRST FRAME, FIRST LAYER, MAIN STAGE frame. You just need to attach your action to the button via a function (see below), and you'll have an event handler like onRelease instead of onEnterFrame in the example I give **.

 

 

 

 

EVENTS and FUNCTIONS and PARAMETERS

 

Wuffa!

We've seen where ACTIONS and PROPERTIES can be attached to a movie clip or other symbol with Actionscript. Now, let's attach an EVENT to the clip, and use this to define a FUNCTION.

 

The events we're used to in Actionscript look like this when they're attached to a button:

 

on (release) {

  //something happens;

}

 

 

where "release" is the event, and the next line determines what happens.

 

When you attach an EVENT to a clip, you drop the parentheses, and capitalize the first letter of the event:

 

_root.clip01_mc.onEnterFrame = (and this is followed by a function declaration, below . . . .) **

 

 

A FUNCTION is a bunch of Actionscript - - from several lines to hundreds of lines, including functions within functions - - that does something, that functions in some way. The syntax of a FUNCTION is:

 

1) DEFINE the function - - state what it does. This usually goes on the FIRST FRAME, FIRST LAYER, MAIN STAGE ("Scene 1").

 

2) CALL the function - - a button somewhere addresses the function so it can execute what it needs to do.

 

Here's a simple function that makes a movie clip go to a particular frame. It would be put on the FIRST FRAME, FIRST LAYER, MAIN STAGE ("Scene 1"):

 

moveThatThing = function(){

    _root.clip01_mc.gotoAndStop("beginning");

}

 

 

A button on the main stage would have this script:

 

on (release){

    _root.moveThatThing();

}

 

 

Not a big deal, really, but what if you have 14 different movieclips that you want to send to 14 different labels? For that, you build a FUNCTION with PARAMETERS.  A PARAMETER is a placeholder for a variable - for anything that can change.

 

Parameters are stated in the PARENTHESIS of the function, and then their relationship to the FUNCTION is further defined as we define the function. The parameters are PLACEHOLDERS, remember. I name them all with "which___" because it forces me to define their role in the function:

 

moveThatThing = function(whichClip, whichLabel){

whichClip.gotoAndStop(whichLabel);

}

 

 

When the function is CALLED by the button, the PARAMETERS go into the parenthesis of the call, and they are PLUGGED IN to the function. That way, you write a function once, and you apply it to as many like-objects as you need, just by changing the parameters:

on (release){

    _root.moveThatThing(_root.clip01_mc, "beginning");

}

 

 

OK, that's how FUNCTIONS, PARAMETERS, EVENTS, PROPERTIES, and VARIABLES work together. Know what each one does, and how they work!

 

Everything you've done in this tutorial will change certain properties or other elements in a Flash site INSTANTLY. But, you may want these changes to take place gradually (i.e., as animations), so go to the next part of the tutorial to find out how to do that!