ActionScript - Simple Programs

You'd think that *Hello World* would be simple ....

Writing Code | Hello World | A Simple Button | Debug Assistance | Comments

Writing Code

Code is entered via the Actions frame ... open it via

Right click on the Timeline or on any object and select Actions
In the menu, select Window / Actions
Press F9 (acts like a toggle)

In ActionScript3, code can only be added to a layer. It is considered good practice to create a code layer and to attach all of the code to frame 1 of that layer.

It is also possible to create a separate script file and add it to the library. This is the preferred method for code that will be used with multiple projects.

Hello World - no button

In a new project

Place a text object with some dummy text on the canvas
In the Properties frame
- Change the type from Static Text to Dynamic Text
- Enter an Instance Name (no spaces or periods) - I suggest Test_UIEdit
Test the form (press Ctrl-Enter) - the text you entered should be displayed

In order to add code

Add a new layer (single click the first layer icon)
Change the name to code (double click the name or right click and select Properties...)
Open the Actions frame (see above)

The tab at the bottom of the Actions frame will tell you where the code will be stored - you want code : 1.

In the Actions frame, click Script Assist - this will provide some help. Since you are just starting, I suggest using the library tree in the upper left of the Actions frame. Navigate to and double click

flash.text / TextField / Properties / text

This will add 2 lines of code to the script

import flash.text.TextField;
not_set_yet.text;

The first line includes the necessary library, the second is a partial line of code, change the code to

import flash.text.TextField;
Test_UIEdit.text = "New Text";

Test the form (press Ctrl-Enter) - the new text should be displayed.

The following code performs the same function using a variable ... this is useful because it enables good context sensitive help when you type s dot.

import flash.text.TextField;
var s:TextField = Test_UIEdit;
s.text = "more text";

A Simple Button

Code placed in the script is executed immediately. In order to control when the code is run, it needs to be placed in subroutines and called when some event occurs. Using the project above

Draw an object

You can use a rectangle, circle, or related object

Convert it to a button

Right click

Select Convert to Symbol...

Select Button and Save (click OK)

In the Properties frame, enter an Instance Name (no spaces or periods) - I suggest test_UIButton

Add code to display simple text

To make a button call code, you need to create an Event Listener and associate it with both the button and a subroutine. This is the suggested code

import flash.text.TextField;
test_UIButton.addEventListener(MouseEvent.CLICK, test_UIButton_OnClick); 

function test_UIButton_OnClick(event1:MouseEvent):void
{
  var s:TextField = Test_UIEdit;
  s.text = "more text";
}

Test the form (press Ctrl-Enter)

When you click the button, the text in the code should be displayed

Help

The popup help for addEventListener is a little confusing

public override function addEventListener(type:String, listener:Function, 
   useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

type is a case sensitive string. For mouse click, you can use either of these

MouseEvent.CLICK
"click"

The help file suggests using the property because the compiler will catch any errors ... if you mistype the case sensitive strings, then the program may fail in weird ways.

The available events are not very easy to find - these apply to MouseEvent

Mouse Events
MouseEvent Property	String
CLICK	"click"
DOUBLE_CLICK	"doubleClick"
MOUSE_DOWN	"mouseDown"
MOUSE_LEAVE	"mouseLeave"
MOUSE_MOVE	"mouseMove"
MOUSE_OUT	"mouseOut"
MOUSE_OVER	"mouseOver"
MOUSE_UP	"mouseUp"
MOUSE_WHEEL	"mouseWheel"
ROLL_OUT	"rollOut"
ROLL_OVER	"rollOver"

Debug Assistance

Sometimes it is useful to indicate what is happening while the code is running.

The following can be used to send any string to the Output panel.

trace("Any string");

Actually, trace can accept multiple arguments, of most types (not just strings), separated by commas.

Comments

This language is object oriented, but the user interface is fairly weak.

It does not provide the context sensitive help that makes Delphi so good - when you type a period, there is no supporting help at all for components on the form. However, there is weak supporting help for variables. Use Ctrl-Space to open the help window (same as Delphi).
When Script Assist is enabled, you can not type directly into the program. Instead, you select a line and then edit it in a separate field. (Yuk)
Ctrl-Ins and Shift-Ins do not work for Copy and Paste, use Ctrl-C and Ctrl-V instead. (very frustrating)

To write code

Leave Script Assist off - lets you directly edit code, double click highlights just the string between 2 dots
Use the Target icon (circle with crosshairs) to replace the selected text with the name of a defined object
Use the Plus icon to add properties and methods

Naming conventions

Every object on the User Interface is identified with _UIObjectType - such as Test_UIText and Test_UIButton
Methods called by Events are typically named ObjectName_OnEventName - such as Test_UIText_OnClick
When objects are grouped together in some way, the object names typically start with the common group name or ID

Author: Robert Clemenzi - clemenzi@cpcug.org