Actionscript basics

Actionscript basics
Date: 19 september 2003 Version: as_012003 This document is a short introduction to the programming language that enables you to create highly interactive Flash movies, and that makes things possible that without scripting would be a no-go. It is NOT a comprehensive tutorial on actionscript and NOT a reference. For more information on actionscript Id suggest you have a look at the actionscript dictionary that comes with flash and/or get a hold of that great book by Colin Moock, called Actionscript the definitive guide (published by OReilly).

So what is actionscript
Actionscript is an almost full fledged programming language that allows to to control your flash movies in a lot of ways. For instance you could use it to: - import and control sound and pictures dynamically - control animations - dynamically set text - connect Flash to a database or other external data - load new movies into an already existing movie - create games - create drag-and-drop actions - etc.

The basic structure

The structure of this language is in a lot of ways similar to for instance javascript. In short that would mean that it makes use of object, properties, events and methods (well get to that) and is written using dot-notation (well get to that also). Theres an important difference with Javascript also. Apart from the fact that objects, properties etc. in actionscript differ from the ones in javascript, javascript is very strict in its casesensitivity. Where in javascript anObject is something else than ANOBJECT or anobject,

Actionscript Basics these would (for now) be the same in actionscript (almost always). That is to say; with every new version of flash the case-sensitivity becomes more strict and will probably end up like in javascript. Therefore its important to impose strict case-sensitivity onto yourself already; be prepared for the future.

About objects, properties, methods and events

Actionscript is an object based programming language. What is an object in Flash? Well for instance; a button, a movieclip, a textfield, sound, XML the movie itself! Objects themselves are meaningless. They get their meaning through their properties, events and methods, like a car is nothing without wheels, seats, an engine, the ability to move etc. So lets have a look at what gives meaning Properties All of these objects have properties. For instance; a movieclip has the following properties: position (defined by x- and y-coordinates [_x and _y]), alpha (transparency: _alpha), size (defined by width and height [_width and _height]) etc. If youd have a look at the actionscript panel, youd find more if you expand the properties. In the reference/and or in the actionscript dictionary you can find more info on the meaning of a specific property. See the below image. Properties can be read and most properties can be set also. Youll find info on that in the dictionary and/or reference.

Example: suppose wed have a movieclip with the instancename myClip on stage. We could read its width with the following small piece of code: myClip._width; // reads the property and returns it Using trace(myClip._width); would put the value to the output window.

Actionscript Basics We could set the same property with this: myClip._width = 100; Textfields also have properties and one of them is text; referring to the text that is displayed in the textfield. Suppose we have a dynamic (!) textfield with the instancename myDynamicField_ text, then we could put the text Hello World in that textfield by writing this code on the timeline were the textfield resides: myDynamicField_text.text = Hello World; As you will have noticed; not all properties are written with an underscore (_). Especially the somewhat newer properties like text for textfields have to do without them. Its a long story but basically it this has to do with actionscript more and more adhering to a standard in scripting languages; the socalled ECMA standard. If youre not sure about the underscore thing, check the dictionary. By the way; you wont find any underscores in properties in the javascript language. Javascript has been around longer than actionscript. Methods Methods are basically the same as functions and a function is (simply put) a command to do something. You can recognise functions through the brackets ( ) that always come with them. Some very basic methods are: - play( ); - stop( ); - gotoAndPlay( ); - gotoAndStop( ); Example: if wed have an animation of 20 frames on out main timeline and wed put a stop(); in the first frame of the timeline, then our movie would not play. The playhead would enter that frame, read the action, and do what is required. If wed put the stop(); action in the last frame, then our animation would play only once and stop at frame 20. Putting a gotoAndPlay(1); in the last frame would make the movie loop endlessly. In the previous case were gaining control over the main timeline. We could also control the timeline of a movieclip. For instance: myClip.play(); would tell the movieclip with the instancename myClip to play. Every object has a specified set of methods to go with it. When you get further into actionscript you will discover that you can elaborate on the standard methods that come with those object, by adding/writing your own.

Actionscript Basics Events Actionscript not only is object-based; it is also event-based. The concept of events is quite simple: if this happens (the event) then the following will happen (a command will be carried out). If I turn the ignition key, my car will start (hopefully). In (fake) actionscript terms we would write something like: myCar.onTurnkey = carStart(); Here myCar is the object, onTurnkey the event and carStart the function or command that has to be performed. One of the most commonly events used in flash is an event that applies both to movieclips and buttons: onRelease. Generally when a user clicks button, something will happen. If we would want to state what has to be done when a user clicks a button with the instancename myButton_btn, we would write (in the first frame of the timeline the button is on): myButton_btn.onRelease = function() { }

trace(I clicked the button with the name myButton_btn);

Clicking the button would put the message I clicked the button with the name myButton_btn to the output window. Find out more about objects, properties, events and methods by having a peek in the actionscript dictionary. There you will also find simple examples that often you can easily test, to see how it works.

About the whole timeline thing

Flash is first of all a timeline based application. Everything and anything inside a flash movie is a timeline. Every symbol that you have created is a timeline even if only you have used only one frame of that timeline. Actionscript wouldnt be worth a penny if it wouldnt enable you to control multiple timelines at the same time; if it wouldnt be able to let you control the main timeline from within the timeline of a movieclip or the other way around. To get a clear understanding, you must know the following. Apart from the main timeline or the timeline of a movieclip, its good to know that each flashmovie also resides on its own level. Flash movies can be stacked and in that stack each movie has its own level. In each level there will always be a main timeline, which in flash is called _root. That main timeline or _root can obviously contain other timelines, e.g. movieclip instances. To refer to that main timeline from within a movieclip, we have two options; an absolute reference _root (which will allow you to controll the main timeline from wherever you are, as long as you are on the same level) or a relative reference _parent. The _parent reference will take you one step up in the timeline heirarchy. If youd have to do two steps up, then the syntax would be _parent._parent. Easy, right?! Also check the final example of this little paper.

Actionscript Basics Controlling movieclip timelines from main timeline (or _root) We already saw that you can control the timeline of a movieclip, or a property of a movieclip, by referring to its instancename. Using that dot-notation you are able to walk down (or up) the hierarchy of timelines that are nested into eachother. Example: if we would have a movieclip with the instancename myClip on our main timeline, and we made sure that it doesnt play by adding a stop() action in the first frame of myClip, then this script on the main timeline: myClip.play(); would make myClip to start playing. Similarly: play(); would make the timeline start to play on which the action resides. So if its on the main timeline, it would start the main timeline. If its written inside myClip, it would play myClip. Example: if we would have a movieclip with the instance name myMainClip on the main timeline and inside myMainClip there would be a movieclip called myNestedClip, then we could acces myNestedClip from the main timeline with myMainClip.myNestedClip.doWhatever(); If we are writing script on the timeline of myMainClip then we would access myNestedClip with myNestedClip.doWhatever(); Controlling the main timeline (or _root) from within a movieclip In some cases you want to be able to control the main timeline from within a movieclip. For instance: you want the main timeline to continue playing when an animation inside a movieclip has finished. So actionscript has a two ways of referring to the main timeline: _root and _ parent. The differences between these two? Where _root is an absolute reference that will always allow you to reach the main timeline, however deeply nested the timeline is that does the call. If youre using _parent as a reference then, this is a relative reference, that is referring to the timeline in which the current timeline is nested. Okay lets make this clear with an example. We have the following situation: we have a movie with a dynamic textfield called myText that resides on the main timeline. Also on that main timeline we have a movieclip called myMainClip. Inside myMainClip well find the following: a button called myNestedButton and a movieclip with an animation called myNestedAnimation. What we want to achieve in the example We want the button to start the animation and put the text animation is playing into the textfield. And we also want the text animation has finished to be displayed when well, the animation has finished.
W E B A N D M U L T I M E D I A D E S I G N

Actionscript Basics

myText myMainClip
main timeline

So lets first have a look at the script that controls the actions that have to be performed when the user clicks the button. This it what the button has to do:
myMainClip timeline

- put the text animation is playing in the textbox - make the animation start playing NB Obviously youll have to put a stop() action in the first frame of the animation timeline, to prevent it from starting to play ;-). Where do we put the action? Well

myNestedButton myNestedAnimation
myNestedAnimation timeline

actually there are two more or less logical options options. We could put it on the main timeline, or we could put it on the timeline where the button resides, which is inside the movieclip myMainClip. Lets have a look at the first option; the script on the main timeline (obviously we prefer this to keep as much code as possible in one central location). From main timeline: 1. myMainClip.myNestedButton.onRelease = function() { 2. 3. myText.text = animation is playing; myMainClip.myNestedClip.play();

4. };

1. First we refer to the button inside the movieclip, and assign a function to the onRelease event. 2. Then were referring to the textfield (which is on the main timeline) and adress its property text 3. Then we adress the movieclip myNestedClip which is inside myMainClip and tell it to start playing 4. we finish this function But if we dont care too much about codecentralisation we could also write some code that will perform the same, on the timeline of the movieclip myMainClip, where the button actually resides. It then looks like this. From the nested timeline: 1. myNestedButton.onRelease = function() { 2. 3. myNestedClip.play();

_root.myText.text = animation is playing;

4. };
W E

Actionscript Basics

1. First we refer to the button that is on the same timeline as were this script is written and assign a function to the onRelease event. 2. Then were referring to the textfield (which is on the main timeline) and adress its property text. The textfield is one level up on the main timeline. Therefore we have to adress it with _root (or _parent). 3. Then we adress the movieclip myNestedClip which is on the current timeline and tell it to start playing 4. we finish this function Now that wasnt to hard, was it? Lets finish with the final action, that takes care of the second requirement for this little thingie. Here youll see _parent in action more clearly. The requirement was to put the text animation has finished in the textfield, as soon as the animation has finished playing. The most logical place for this script would be the last frame of the animation. So if we go to edit myNestedClip and select the last keyframe, we would write: 1 stop();

2. _root. myText.text = animation has finished; OR 1 stop();

2. _parent._parent. myText.text = animation has finished; Se the difference between the two? In the first possible solution were making one huge step to the main timeline (where the textfield is placed) using the absolute reference _root. In the second solution were taking one step at the time using the relative reference _parent which will take you up one step in the timeline. And as the textfield resides two steps up, we use _parent._ parent. In this case the use of _root is perfectly fine, but suppose a situation where inside myMainClip would be a second nested movieclip called mySecondNestedClip. From the animation (myNestedClip), we could target that using _parent.mySecondNestedClip. Thats it for now folks. Its not hard, but just looks hard because its a little abstract at first. To get a better view on what you are trying to do, its wise to draw a scheme of your application/ movie on paper, just like I did above. It will help you understand the structure of your movie, because it will give you helicopterview. Other than that, just sit at your computer and experiment around. And dont forget about that actionscript dictionary that comes with flash. Good luck.