We’ll take our first look at Actionscript today and talk about our final projects.

Download these files. We will use them for today’s lesson.

Download this simplified control mc.

Actionscript

What is it? Actionscript is an object-oriented language specifically designed for web animation. It is an event-based language which means that actions are triggered by particular events. Actionscript 3.0 was modeled on the same standards as Javascript so that it would be more familiar to web designers.

Actionscript can go in many places in your movie. However, it is BEST to keep actions on their own layer in the timeline. This makes it easy to see all of your actions in the same place. This is what your timeline looks like when your actions are in the right place:

To get back to your actions, click on the “Actions-Frame” Tab on the top.

Object-Oriented Programming

As mentioned before, Actionscript is an object-oriented language (click on the link to learn more). so it is based on classes of objects. Each class of objects (nouns) has its own propertes (adjectives) and methods (verbs). Let’s say I have a class of objects called horse. Our horse class has properties: height, width and color. It has methods: run, trot, gallop. If we want to tell our horse, which is named “Abracadabra” to trot, we would write it like this:

Abracadabra.trot();

The () are for parameters. Depending on the method, there are different parameters. In this case, there might be the parameters slow and fast.

Abracadabra.trot(”slow”);

Let’s say we want to get Abracadabra’s height and store it into a variable called Abracadabra_height. We would do it this way:

var Abracadabra_height:Number=Abracadabra.height;

Variables:

A variable is a placeholder for information or data. It can hold a String(ie “Name”), Boolean (true or false), an int (integer or whole number), or a Number (any kind of number), among other things. To declare a variable, use the keyword var and state what kind of variable it is after the colon like above. Refer to the file variables.fla in the download for today. Open it up and change the variables to describe yourself. Play around with the if-then-else statement.

Now, the horse class does not actually exist in Flash. Let’s translate this into a class that does exist, like the MovieClip class.

To tell a movieclip with the name “star” to stop, we would write:

star_mc.stop();

To make it play:

star_mc:play();

To store its height in a variable:

var myStarHeight:Number = star_mc.height;

Properties:

Think of properties as your adjectives. They describe your objects. Refer to the file mc_properties.fla in the download for today for examples of moviclip properties.

Moving around in the main timeline:

Let’s backtrack a little bit to the main timeline. How can we get the main timeline to skip around to different frames? We can use the same methods, but like this:

play();
stop();

Notice we don’t need the “star.” in front. Since the actions are on the main timeline, it understands that it affects the main timeline. We could also write it as:

this.play();
this.stop();

“this” is a reserved word in flash, which roughly means, “whatever I was talking about before, that’s what I’m talking about now.”

You can also be more specific about where the timeline plays or stops with these two methods:

gotoAndPlay(10);
gotoAndStop(10);

Refer to the file timeline_methods.fla for more examples.

Events:

In the example control_mc.fla in the download for today, we explore the mouse events “CLICK” and “MOUSE_OVER.”

Here is the whole list of events:
CLICK, DOUBLE_CLICK, MOUSE_OVER (hover), MOUSE_DOWN (click is depressed), MOUSE_LEAVE (mouse leaves stage), MOUSE_OUT (mouse leaves area of object), MOUSE_MOVE (mouse moves), MOUSE_UP (mouse comes up from being depressed), MOUSE_WHEEL (mouse wheel moves).

Functions:

Functions are sets of commands that can be stored for later. In the example, we make a named function like this:

function myFunction(parameters){
//what happens when function gets called.
}

and then call on the function later like this:

myFunction();

Name the instance of your symbol!

Anytime you are controlling a symbol on the stage with actionscript, you need to name that instance. You can do so by clicking on the symbol, opening the properties panel, and then adding a name. Buttons should be named with the suffix _btn and movieclips with the suffix _mc. This will help you program them by triggering the code hints.

Assignment

1. Begin prototyping your flash site by either creating a paper prototype or a storyboard or both.
2. Create a movieclip that stops on the first frame until you press a button. Use this as your template, but change the movieclip and the button to suit you.