Actionscript syntax

Events, properties and methods

Instance names

Create

Actions

Actions explained

The text box

Variables

Conditional Statements

Actionscript syntax

OK here's a quick intro to Actionscript - the programming language used by Flash. Actionscript uses 'dot syntax' so should look quite familiar to you if you've ever used Javascript, PHP or any other programming language based on C++.

Here's what you will be making:

Flash comes with a number of built in objects. If you've ever played with Flash you would have no doubt seen a few of them - MovieClips, Buttons and Textboxes. These 'objects' have a visual aspect but there are many others that are invisible and can be used for storing data or loading data into Flash - such as the LoadVars object or an Array. Nearly all objects in Flash have events, methods and properties - lets go through these in more detail but looking closely at the most common Flash object - the MovieClip.

When you draw a shape on the stage and convert it to a movieclip symbol, you've automatically created a movieclip object. You can then make your symbol react to movieclip events (eg onEnterFrame, onRelease, onMouseMove etc). You can also set properties for your movieclip such as _xscale and _alpha and call methods such as attachMovie() and loadMovie(). Methods are built in functions that make it easy to do common tasks (eg load an external jpg into a movieclip instance). You can create new methods for any Flash object but that's for another tute. The general syntax for events, properties and methods is like so:

Events: onSomething
Properties: _something
Methods:someMethod()

To call any methods or set properties (or just about do anything) your object must have a name. It's important to note that the name you give your symbol when you create it is irrelevant - for MovieClips and Buttons its the instance name that is used in actionscript. So, whenever you create a new Symbol be sure to immediately give the instance of that symbol an instance name. Of course, you can have as many instances of a symbol as you want, but they all must have a unique instance name. For instance names, its worth having a naming convention that you stick to. ie for movieclips, end all your instance names with _mc and for buttons end all your instance names with _btn. Do not include any spaces or special characters in your instance names (+,$,& etc) and don't start them with a number. Also, instance names are case sensitive so MY_mc is not the same as my_mc. If you use the naming convention mentioned above, you have the added benefit of receiving 'code hints' while typing actions into the actions panel. Lets have a look at some actionscript now.

If you havent already, draw a shape on the stage (may a suggest a circle?) and convert it to a movieclip symbol. In the covert to symbol dialog box that opens give it a name of fred and click ok



An 'instance' of fred should now be selected on the stage. Go to the Property Inspector and give your instance name of fred_mc.



So we have a symbol name of 'fred' which I have already told you is irrelevant. The important part is the instance name of fred_mc that we will use in our actionscript. Option-drag fred_mc on the stage to create a copy (think its alt drag on a PC). You will see that the new instance of fred automatically has the same instance name. This is BAD as all instance names must be unique so change the new instance name to fred2_mc. OK so now you should have 2 instances of fred on the stage with instance names of fred_mc and fred2_mc - confused yet? This is when the fun part begins ;-)

Open the 'Actions' panel if its not already open and make sure you're in expert mode (I don't even know if the latest version of Flash has a normal mode...I can't find it anyway). On the main timeline (usually referred to as _root in actionscript) make a new layer and name it 'Actions' (note: you can call it whatever you want).



Its good practice to keep your actions on a seperate layer to your graphics. OK click on frame 1 of the new actions layer, return to the actions panel. Copy and paste this into the actions panel

fred_mc.onRelease=function(){
trace('Hi, my name is ' + this._name);
}


As you can see, in just a few lines of code we've made a movieclip react to an event, call a method and output a property to the output panel. Choose Control/Test Movie and click on fred_mc to see what happens. As you can see, the trace method outputs a message to the output panel - this method is used while developing your project to help you see what's going on inside your movie - the trace messages WILL NOT be see by people that visit your website or view your swf etc. Let's go through the code line by line

fred_mc.onRelease=function(){
This basically attaches an onRelease event to fred_mc and says 'whenever fred_mc is clicked, do whatever is inside the{}'.

trace('Hi, my name is ' + this._name);

This calls the trace method and outputs a string (Hi, my name is ) and on the end of the string attaches the name of the instance that is calling the method. Because we are inside the event handler for fred_mc, 'this' refers to fred_mc and this._name returns (you guessed it) 'fred_mc'.

}
This just closes off our function - don't forget this or your code won't work! Of course, you can have as many things happen when fred_mc is clicked as you want. Try replacing the code on frame 1 with the code below, test your movie and click on fred_mc a few times

fred_mc.onRelease=function(){
//trace('Hi, my name is ' + this._name);
fred2_mc._x+=10;
this._y-=5;
}

As you can see, we now target the _x property of fred2_mc and increase it by 10 every click (which moves it to the right). We also target the _y property of the clip that's triggered the actions (can be referred to as 'this' or fred_mc' - using 'this' makes your code much more flexible) and make it move up the stage. I've also commented out the trace method with // at the start which means that line of code won't run.

OK let's have a look at another common Flash object - the textbox. Make a new layer on the main timeline, select the text tool and make sure that its set to dynamic text (in the property inspector). Draw a textbox on the stage and give it an instance name of display_txt



Dynamic and input text boxes allow you to set the contents of the text box via actionscript (Static text boxes do not). In this case, we just want to display some data in the text box, we don't need the user to enter data themselves, so a dynamic textbox should suit our needs nicely. From the library, drag another instance of poor old fred on to the stage and give it an instance name of stop_mc. This is what we are going to do:

Have a button that when clicked, starts animating another mc around the stage at a random speed
Another button that stops the animation.
A text box to display the random speed.

Replace the actions on frame 1 with the actions below, test your movie and click on fred_mc a few times before clicking on stop_mc

fred_mc.onRelease=function(){
//get a random value for speed between 10 and -10
//Math.random() returns a random number between 0 and 1
//Math.random()*20 returns a random number between 0 and 20
//(Math.random()*20)-10 returns a random number between 10 and -10
speed=(Math.random()*20)-10;
//start animating fred2_mc
//onEnterFrame events happen every frame and therefore actions within an onEnterFrame handler are run, by default, 12 times per second
fred2_mc.onEnterFrame=function(){
this._x+=speed;
}
//display the speed in the text box (by targeting the .text property)
//we round off 'speed' to a whole number using Math.round()
display_txt.text='The speed is: '+Math.round(speed);
}
//when the stop_mc is clicked
stop_mc.onRelease=function(){
//turn off fred2_mc's enterFrame action and let it rest until you click on fred_mc again
fred2_mc.onEnterFrame=null;
}

The code is heavily commented to make sure you have a read of those. As you can see, if our random speed is negative, fred2_mc moves left, otherwise it moves right.

Couple of other things I want to quickly cover. Variables: variables are like a box that you give a name and put stuff into. We use a variable above to store the value 'speed'. In actionscript, you can create a variable by simply declaring it and giving it a value.

myVar='someValue'; //this variable holds a string
myNum=57; //this variable holds a number

For more info on variables go here.

Conditional Statements: Like all programming languages, Actionscript allows you to put conditions before lines of code

ie

if(veg=='red'){
trace("it's a tomato");
}else{
trace("it's a carrot);
}

Let's make a conditional statement to stop fred2_mc from going way off the stage. What we will do it keep an eye on the _x property of fred2_mc - if this is less than 0 or more than the width of the stage, we'll reverse the speed variable.

Replace JUST the fred2_mc enterFrame handler with this

fred2_mc.onEnterFrame=function(){
//move along the x axis
this._x+=speed;
//if its x is less than zero or (the || operator mean OR) greater than the stage width
if(this._x<0 || this._x>Stage.width){
//reverse the value of the speed variable
//(ie if speed is 3.5 make it -3.5)
speed*=-1;
//update the text box
display_txt.text='The speed is: '+Math.round(speed);
}
}

and test the movie. As you can see, fred2_mc can't run away now...(insert evil laugh in here)

So there you have it. A very basic intro to Flash actionscript - the objects and the syntax. For a detailed list of all objects and their methods, properties and events check out the Flash reference. For example, hit F1 and when the Help panel opens go to the Actionscript dictionary on the left hand side. Scroll down to 'M' and you will see a list of events, methods and properties for the movieclip object. There are a number of important concepts that I haven't covered in this tute because I've already written about them elsewhere. Namely, paths and various movieclip methods such as loadMovie, attachMovie and duplicateMovieClip, startDrag and ...well...lots of stuff...go here to learn more