Interactive Flash Applications
with ActionScript
Khoo Yit Phang
CMSC 434
September 26, 2006
What is ActionScript?
What is ActionScript?
 Prototyped-based programming language closely related to
Javascript (superficially resembles Java):
/* Hello World module */
var HelloString = “Hello World!”;
function getHello(name:String) {
var welcome:String = “ Welcome ” + name;
return welcome + HelloString;
}
Adding ActionScript
 To a KeyFrame,
or symbol instance
 Strangely, the “Action”
item is sometimes grayed
out in the context menu;
click on instance and use
the “Window” menu
instead.
Adding ActionScript (cont’d)
ActionScript is also organized
into Layers/Frames
(and symbols)
Writing ActionScript
A Two-minute Primer
Variables
 Local variables (to timeline or function):
var name = “MyName”
var x:Number = 1; // optional type
 Global variables:
_global.y = 2; // cannot be typed!
trace(y);
// implied _global.*
Objects
 Objects are associative arrays:
var point = new Object();
point.x = 1; // properties cannot be typed!
point.y = 2;
/* equivalently */
var point2 = { x:1, y:2 };
 _global is an Object
Arrays
 Arrays are generalized collections:
var list = new Array(1, 2, 3);
/* equivalently */
var list2 = [ 1, 2, 3 ];
list2[2] = 10;
// => [ 1, 2,
list2.push(“a”); // => [ 1, 2,
var x;
x = list2.pop(); // => [ 1, 2,
delete list2[0]; // => [ 2, 10
10]
10, “a” ]
10 ]
]
Statements
 if (x == 1) {...}
else if (x > 10) {...}
else {...}
 switch (x) { case 1: ...; break; }
 for (var i=0; i<5; i++) {...}
 while (!x) {...};
 do {...} while (!x);
Functions
 Named functions:
function sqrt(x:Number) { // optional type
return Math.pow(x, 0.5);
}
 Functions are objects too!
symbol.sqrt = sqrt; // from above, no ()!
symbol.onRelease = function() {
/* anonymous function */
}
Etc.
 ActionScript also supports:
 Classes
 Exceptions
 Modules (i.e. code libraries)
 Refer to Flash Help
Symbols Revisited
Using Symbols
 Reusable content stored in Library
 Create instance from symbols, and name
Components
 Predefined symbols with
behaviors:




Button
TextArea
RadioButton
and other “standard” controls
Custom Components
 Basically: MovieClip symbols+ActionScript
 MovieClip symbols are symbols with their own
timeline
 The idea:
 create multiple frames (in the symbol) to
represent multiple states of the control
 use playback methods: movieClip.stop(),
play(), gotoAndPlay(), gotoAndStop()
Event Handling
Tying user input to output
on(event) Handler
 Edit an instance’s action:
/* e.g. ComboBox instance */
on (change) {
RedRoute.gotoAndStop(
selectedItem.data);
/* implied this.selectedItem */
}
What Handlers are Defined?
 Refer to Flash Help ->
Component Language Reference
or
 Use the Behaviors panel:
 events code generator
 typically, I add some random behavior;
browse the events; and then edit the
generated Action to the correct behavior
Other Handlers
 Other event handling models available:
 onClipEvent()
 addEventListener()
 Refer to Flash Help
 on() handler is easiest to use, but has limitations
(e.g. only statically defined instances); hopefully
won’t be encountered
Tips & Tricks
Debugging
 trace(exp) function outputs the result of exp
into the “Output” window.
 The debugger can be started from the menu item:
Control -> Debug Movie:
 Breakpoints are set in the Debugger
Controlling Playback
 Playback can be controlled using: stop(),
play(), gotoAndPlay(), gotoAndStop()
 _root object represents the entire movie:
/* e.g. in the last keyframe */
_root.stop();
/* or just stop(), since root is implied in
the main timeline */
Referencing Instances
 Instances are defined under _root hierarchy:
 _root.button1
 _root.movieclip
 _root.movieclip.nestedClip
 Relative references are also possible:
 _root.movieclip._parent == _root
Hiding Instances
 Use the _visible property (events disabled):
/* e.g. in Button */
on (click) {
route._visible = false;
}
or
 Use the _alpha property (events still enabled):
on (click) {
route._alpha = 20; // 20% translucent
}
Questions