ActionScript and JavaScript

ActionScript has been the scripting language in Flash through Flash CS6. Beginning with Flash CS3, Flash used ActionScript 3.0 whereas Flash 8 used ActionScript 2.0.. When one creates a new file in CS3 through CS6, one chooses between ActionScript 2.0 and 3.0.

Flash CC offers two three alternatives - ActionScript 3.0, HTML5 Canvas, and WebGL (Preview) but not ActionScript 2.0. FlashCC can generate ActionScript 3.0 or JavaScript (for HTML5 Canvas or WebGL). Code Snippets can be very helpful in writing JavaScript for HTML5 Canvas, or ActionScript 3.0; they can be accessed through Window>Code Snippets, or by clicking the <> icon in the Actions Panel (Window>Actions or F9).

ActionScript 3.0 Elements

variables hold data

var score: Number = 3;

This is doing two things. The use of the var keyword means that we are declaring a variable (score) to be of a certain type (Number). Secondly, this is assigning the value 3 to the variable. Alternatively, one can do these two steps separately, i.e.

var score:Number;
score = 3;

Another example using Strings

var message:String = "Hello World";

The use of the double quotes denotes a string value

Instances and instance names

To name an instance, select the instance and at the left side of the Property Inspector, type the name. Names should begin with a lower case and one should avoid spaces and special characters. In some prevoius versions of Flash, if one ended instance names with _mc (movie clip), _btn (buttons), and _txt (text fields), Flash would give you access to code hints in the Actions panel once one typed the instance name followed by a period (intellisense). Unfortunately this has not been present in recent versions although the naming convention is still a useful one so as to keep organized.

Properties

Properties are variables that are attached to an instance of a symbol. Alternatively, you can think of properties as attributes that you can modify in the Property Inspector. In ActionScript 3.0, properties will be accessed using dot syntax, i.e.

instancename.property

Functions and Methods

Methods will be followed by parentheses - sometimes there will be something between the parentheses (these are called arguments). Functions will be defined using the function keyword, as in:

function myFunction():void {Block of code}

The void keyword indicates that the function does not return a value

Using ActionScript 3.0 to Control the Main Timeline

It is good practice to always put actions in a layer named actions that is the top layer of a movie.
To write ActionScript, select Window>Actions or use the keyboard shortcut F9. Note that the top of the panel says Actions-Frame -- this means you will be adding actions to the keyframe you have selected.
To stop the Timeline from playing beyond a certain frame), insert a keyframe in that frame in the actions layer and type stop(); in the Actions panel. Ths stop() method can thus be used so that the movie doesn't start playing until something happens (stop() in frame 1) or to prevent looping (stop() in last frame of movie)

In Code Snippets, one would use Timeline Navigation>Stop at this Frame.

In order to play the Timeline when it is stopped, one will usually create a button and drag an instance of it onto the Stage. Select the instance using the Selection Tool and give the instance an instance name at the left side of the Property Inspector. In the Actions panel, type the following:

function playMovie(event:MouseEvent):void {play();}
play_btn.addEventListener(MouseEvent.CLICK, playMovie);

Here

the word event represents the event that happened and is an arbitrary name
the data type of this event is MouseEvent
CLICK is a predefined constant of the MouseEvent class
play() is a predefined method which plays the Timeline
play_btn is the name of the button instance and is an arbitrary name
The function name playMovie is arbitrary.

In Code Snippets, one selects the instance of the button symbol (the instance has already been given a name) and chooses Event Handlers>Mouse Click Event. In the body of the function generated, type play(); To stop the main timeline, one would type stop(); in the body of the function.

The movie will play once and stop in frame 1 due to the presence of the stop() action in frame 1. To avoid this and have the movie loop, click in the final frame of the movie, in the Actions layer, and type gotoAndPlay(2) in the Actions Panel. This will take the movie to frame 2, bypassing frame 1 and the stop action.

Note: If the difference between frame 1 and 2 is noticeable, one can remove any tweens that start at frame 1, then click on frame 1 and press F6 to copy over the content to frame 2, and then begin any tweens that previously started at frame 1, at frame 2 instead.

----------------

Using JavaScript to Control the Main Timeline in HTML5 Canvas

As before, you can use whatever you like as a function name. If you use the Code Snippets in Flash, it will generate function names such as those below.

this.stop(); // stops the main timeline

this.stop_btn.addEventListener("click", stopMovie.bind(this));
function stopMovie()
{
this.stop();
}

this.play_btn.addEventListener("click", playMovie.bind(this));
function playMovie()
{
this.play();
}

The steps in Code Snippets are the same as for ActionScript.

Note that in HTML5 Canvas, if the button has text, the spaces between the letters may not be clickable; putting a rectangle or similar shape in the hit state of the button to define the clickable area of the button, will fix this.

Using ActionScript to Control Movie Clips

One simply gives the instance of the movie clip a name through the Property Inspector and then in the ActionScript, one prefaces the methods such as stop(), play(), and gotoAndPlay(2) with the instance name of the movie clip followed by a period. Thus if the instance of the movie clip was named ball_mc, one would type ball_mc.play();

In Code Snippets, one selects the instance of the movie clip and then chooses Actions>Play a Movie Clip or Actions>Stop a Movie Clip. In Code Snippets, If one is trying to stop or play a movie clip in response to clicking a button, one first selects the instance of the button and then chooses Event Handlers>Mouse Click Event. Inside of the function body, one enters the code for stopping or playing a movie clip.

Using JavaScript to Control Movie Clips in HTML5 Canvas

The approach is the same as in ActionScript except that one also adds the "this" keyword, so one would have

this.bouncingball_mc.stop(); // stops the movie clip when the frame containing this code is reached

this.stopmc_btn.addEventListener("click", stopMovieClip.bind(this));
function stopMovieClip()
{
this.bouncingball_mc.stop();
}

This stops the movie clip with an instance name of bouncingball_mc initially and also when the button with an instance name of stopmc_btn is clicked.

Revised: April 24, 2016. Comments to William Pegram, bill@billpegram.com