These are notes for the ActionScript sessions of the TepFlashClass

---

Concepts of Action Script

So far, we've learned how to type ( TextAndLabels ) , draw ( DrawingInFlash ), and animate ( BasicFlashAnimation ) in Flash. We've learned about frames and keyframes, tweens and masks. So far, we've been telling flash what we want it to do by drawing and moving things. However, it is also possible to tell flash what we want it to do by just telling it.

Of course, Flash doesn't speak English, so we have to speak to it in its own language, which is called Action Script. In this session, we will learn some of the basic concepts behind Action Script, and see how they are applied in our TEP project. Then we will run through a step-by-step tutorial so that, even if you don't know any Action Script, you can still complete your project. This "quick and dirty" part can be found by scrolling down to the bottom, to the words Quick and Dirty Step by Step Tutorial.

So don't worry if this doesn't make perfect sense; you will still be able to finish your work,. and have plenty of time to come to terms with it all later.

Actions Panel

All action script is typed into the Actions Panel, which you can get to through Window >> Actions.

Object Actions vs Frame Actions

There are two kinds of actions, Object actions and Frame actions. An object action can be attached to any Symbol on your screen, and usually controls that object. A Frame Action sits on a particular frame in your timeline, and is usually called into action when the playback head reaches that frame. For instance, we could put the action stop() on frame 10 of our movie, and that will cause the animation to stop when the playback head reaches that frame. In this project we will only be using frame actions.

To create a frame action, you select a keyframe, open the actions panel, and type in your action. You can tell that your action is a frame action in 2 ways.

1. While you are typing the script, your actions panel will be labelled as Frame Action rather than object:

In Flash MX it will look like this:

In Flash 5 it will look like this:

2. Once you are done entering your action, the frame will be labelled with the letter a. Open up your template.fla file and take a look at the timeline. Each a means that there is an action sitting on that frame.

Normal Mode vs. Expert Mode

In the top layer, the one labelled Layer 1, click the a next to the frame labelled Step_2. If you look at the actions panel (Window >> Actions) you can see what the actions are in that frame. Clicking the icon in the top right part of the window allows you to switch between Expert and Normal mode:

In Flash MX:

In Flash 5:

Normal mode presents a set of menus from which to choose our actions. This helps ensure we don't make spelling errors, which would render our Actionscript unreadable to flash. Even a wrongly capitalized letter will confuse flash. For instance, as far as Flash is concerned, actionscript is as different from Actionscript as banana is from orange.

In Expert mode, you can just type directly into the Actions Panel without the menu system, which is perfect for minor adjustments to scripts, and once you have learned Action Script, is a quicker way to code than always searching for the proper menu. The Action Script in this project will consist entirely of minor edits to existing scripts, so we will be using Expert Mode.

Switch back and forth from Normal to Expert mode a few times to see how presentation changes.

Now, back in Expert mode, lets look at the actual code.

Variables

A variable is a placeholder for a value, kind of like a Symbol is a place holder for an image. Lets say we made a symbol called Leaf and drew a red leaf in that symbol. Then we put instances of that symbol all over our screen. If we later changed the image within the symbol called Leaf intoa green leaf, every single instance of that symbol would turn to green. The Symbol is a placeholder for the shape within it, and changing that shape updates every instance of that symbol.

In the same way, a variable is a place holder for a value. I can write a script that refers to a variable in many different ways. By changing the value of that variable just once, I can affect all of those scripts.

Lets say I will only go home after work if it is not raining. I'll create a variable called is_it_raining. At 4:30, I look out the window, and it is not raining, so I set is_it_raining = false. Since is_it_raining is false, I can go home. If is_it_raining was set to true, then I wouldn't go home. The variable is_it_raining is a placeholder for the value true and false.

We could re-use that same variable in another script as well. A child who wants to play checks the variable is_it_raining. If is_it_raining is false, then that child goes out to play. And we could create a flower that only grows when is_it_raining is set to true.

Variables can have values other than true and false. We could make a variable to store the number of people who show up to each session of the Tep Flash Class. We could even create a variable that stored a list of the names of the people who showed up.

In this project, one of the variables we are using is called play_done. We will set play_done = true whenever one of thr steps in our animation is done playing. By constantly checking for the value of play_done, a different script I wrote can tell when it should advance to the next step, when it should play sound for a step, or change the tool. In our animations all we have to do is make sure we set the variable correctly, and the script I wrote will do the rest of the work.

So, the first line of the script - _level0.play_done = true means that the step has finished playing. Lets ignore the _level0. part of it for now. At the end of every step, we will need to stop the playback head and set play_done = true. We've already seen how to set the variable properly; now lets see how to stop the playback head.

The command stop() stops the playback head. Simple enough. Now let's go back to that _level0 stuff.

Dot Syntax

Each flash file can have many layers within it. We can also stack different flash files on top of each other in what are called levels.

So, each of our animations could be stored in a different level. Since each of our animations will be using a variable called play_done we want to make sure that we set the variable in the proper animation. Level_0 always refers to ourself - that is - to the flash file in which we are working. So, _level0.play_done is actually different than _level1.play_done.

If I loaded bisectingAline.swf into _level0, and bisectingAnAngle.swf into _level1, I could change variables in these two separate flash files by referring to the levels they are in. Although I do not plan on using multiple levels in this project, I wanted to show you that it is possible, and just in case things change down the line, by always referring to _level0 we know that we can always go back to the same variable.

Anyway, Dot Syntax refers to the way we specify directions for locating variables or objects in a flash file, using a dot to separate each part of the directions.

Imagine this

chris.thumb.wiggle()

Anything with brackets after it can be thought of as an action, or a verb. Remember stop()? That is an action, as is wiggle(). So, chris needs to wiggle his thumb. But which thumb?

chris.leftarm.hand.thumb.wiggle()

That's better. It works the same way as _level0.play_done versus simply typing play_done. We use the dot syntax to dig down, specifying which exact variable or object we wish to control.

One more example of dot syntax before we move on, so that we can really cement it in our heads

fiji.suva.ratu_sukuna.drive()

Hopefully that makes sense. If it doesn't make sense, don't worry, because all you absolutely need to know to do your animation is that, in the frame before the end of each step, you will need to tell Flash to stop() and you will need to set _level0.play_done= true. It's as simple as inserting a keyframe in the right spot, and copy-pasting the action script from the previous frame script. We'll go over that once more in the very end of this session, once we've learned a little more about action script.

Arrays

Go to Layer 1 of template.fla, and click on the first frame, where you see the a. Make sure your Actions Panel is open (Window >> Actions):

The first line of that code should look familiar

_level0.total_steps = 3;

We are creating a variable called total_steps, and we are setting that variable (located in _level0) = 3. If your animation has 4 steps in it, you will need to change this value to 4. Basically, this variable tells the program how many steps are in the animation. You set it once at the beginning of the movie (in the first frame) and it affects how the rest of the program will function.

The next line is a little more difficult

_level0.icon_array = new Array("compass2", "compass2", "compass2");

The first part should look familiar: we are creating a variable called icon_array (which is in _level0). But rather than setting it to true , false, or to a number, we are setting it equal to something called a New Array.

An Array is another word for a list. We want to make kokoda, so we write up a list for a friend to bring to the market. That list will contain walu, lime, coconut, onion, and capsicum. We could write that list as an Array in flash like this

my_shopping_list = new Array("walu", "lime", "coconut", "onion", "capsicum")

We have created a variable called my_shopping_list, and we have made that variable a place holder for a list of ingredients.

So, back to our project, our variable called icon_array is a placeholder for the tools used in our animation, in the order they are used. In the example, we have 3 steps, so we need to have 3 tools, one for each step. That is why we repeat the same tool 3 times.

I have written the program so that at each step, it checks to see which tool it should display an icon for. At step 1, it looks at the first entry of the list. At step 2, it looks at the 2nd entry. And so on.

Strings

Let's take another look at our list

_level0.icon_array = new Array("compass2", "compass2", "compass2");

Notice that each entry is surrounded by quotes. Why didn't we just write it without quotes

_level0.icon_array = new Array(compass2, compass2, compass2);

Because when flash looks at that list, it would think that each of those entries were another variable. Putting them each in quotes makes flash know that this is a string, a set of letters or numbers that is not a variable, that is not a placeholder for anything else.

Looking at the second example, flash would say "Okay, I see we have a variable called icon_array, and that this variable is a list of 3 variables, each called compass2." Then it would look for the value of the variable called compass2, and wouldn't find anything, so we'd get an error.

Here is one more example of the difference between a variable and a string.

my_name = "Chris";
my_greeting = "My name is " + my_name

Here we have 2 variables, one called my_name, and one called my_greeting. The variable my_greeting is equal to the string "My name is" added to the value of the variable my_name. So, in this case, my_greeting would equal "My name is Chris''.

Now look at this code

my_name = "Chris";
my_greeting = "My name is " + "my_name"

In this case, my_greeting would be equal to "My name is my_name" Do you see why? Flash comes to the first line and finds a variable called my_name that is equal to the string "Chris". Then it comes to the second line, where there is a variable called my_greeting, which is equal to the string "My name is " added to the string "my_name".

To flash, the variable my_name is a placeholder, and has nothing whatsoever in common with the string "my_name", which is just a bunch of meaningless letters that aren't placeholders for anything.

Hopefully that makes some sense, but if it doesn't, you just have to remember that those quote's are important.

Now that we've covered the concepts of Action Script, you may be incredibly confused. Don't worry. While it is important that you learn about Action Script in the future if you wish to excel at Flash, we can finish this project with a real Quick and Dirty knowledge of Action Script, and that's what we will cover now: the bare essentials to getting the project done.

Quick and Dirty Step by Step Tutorial

1. Click the first frame in the first layer of your template. Make sure the Actions Pallette is open (Window >> Actions)

Change the number after _level0.total_steps = to the number of steps in your animation. If you have 3 steps, leave it alone. If you have 4 steps, change the 3 to 4.

2. Look at the the next line of code

_level0.icon_array = new Array("compass2", "compass2", "compass2");

Change the words within the quotes so that they match the tools in your animation. if you have extra steps, add extra entires into the list, being sure to match the format of quotes and commas.

For instance, if you had 4 steps in your animation, using a compass in step 1, a compass in step 2, a t-square in step 3, and a compass in step 4, then you would change the array to look like this

_level0.icon_array = new Array("compass", "compass", "t-square", "compass");

3. If you have 3 steps in your animation, your scripting is done. If you have to add an extra step to your animation, then up in the top layer, in the keyframe just before the new layer, insert another keyframe. Make sure you Actions Palette is open, select the keyframe you have just inserted, and type the following into the palette

_level0.play_done = true;
stop ();

If you add any more steps, do the exact same thing, adding a keyframe in the last frame of the previous step, the frame just before the new step, and typing in the exact same code into the Actions Panel.

All done!