Interactive Flash Applicationswith ActionScript

Interactive Flash Applicationswith ActionScript

Khoo Yit Phang

CMSC 434September 26, 2006

Khoo Yit Phang

CMSC 434September 26, 2006

What is ActionScript?What is ActionScript?

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;

}

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 ActionScriptAdding 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.

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)Adding ActionScript (cont’d)

ActionScript is also organizedinto Layers/Frames

(and symbols)

ActionScript is also organizedinto Layers/Frames

(and symbols)

Writing ActionScriptWriting ActionScript

A Two-minute PrimerA Two-minute Primer

VariablesVariables

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.*

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.*

ObjectsObjects

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

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

ArraysArrays

Arrays are generalized collections:var list = new Array(1, 2, 3);

/* equivalently */

var list2 = [ 1, 2, 3 ];

list2[2] = 10; // => [ 1, 2, 10]

list2.push(“a”); // => [ 1, 2, 10, “a” ]

var x;

x = list2.pop(); // => [ 1, 2, 10 ]

delete list2[0]; // => [ 2, 10 ]

Arrays are generalized collections:var list = new Array(1, 2, 3);

/* equivalently */

var list2 = [ 1, 2, 3 ];

list2[2] = 10; // => [ 1, 2, 10]

list2.push(“a”); // => [ 1, 2, 10, “a” ]

var x;

x = list2.pop(); // => [ 1, 2, 10 ]

delete list2[0]; // => [ 2, 10 ]

StatementsStatements

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);

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);

FunctionsFunctions

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 */

}

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.Etc.

ActionScript also supports: Classes Exceptions Modules (i.e. code libraries)

Refer to Flash Help

ActionScript also supports: Classes Exceptions Modules (i.e. code libraries)

Refer to Flash Help

Symbols RevisitedSymbols Revisited

Using SymbolsUsing Symbols

Reusable content stored in Library Reusable content stored in Library

Create instance from symbols, and name Create instance from symbols, and name

ComponentsComponents

Predefined symbols with behaviors: Button TextArea RadioButton and other “standard” controls

Predefined symbols with behaviors: Button TextArea RadioButton and other “standard” controls

Custom ComponentsCustom 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()

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 HandlingEvent Handling

Tying user input to outputTying user input to output

on(event) Handleron(event) Handler

Edit an instance’s action:/* e.g. ComboBox instance */

on (change) {

RedRoute.gotoAndStop(

selectedItem.data);

/* implied this.selectedItem */

}

Edit an instance’s action:/* e.g. ComboBox instance */

on (change) {

RedRoute.gotoAndStop(

selectedItem.data);

/* implied this.selectedItem */

}

What Handlers are Defined?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

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 HandlersOther 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

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 & TricksTips & Tricks

DebuggingDebugging

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

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 PlaybackControlling 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 */

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 InstancesReferencing Instances

Instances are defined under _root hierarchy: _root.button1 _root.movieclip _root.movieclip.nestedClip

Relative references are also possible: _root.movieclip._parent == _root

Instances are defined under _root hierarchy: _root.button1 _root.movieclip _root.movieclip.nestedClip

Relative references are also possible: _root.movieclip._parent == _root

Hiding InstancesHiding 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

}

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

}

QuestionsQuestions