SM1205 Interactivity Topic 04: Properties and Events Part I Spring 2011SCM-CityU1

SM1205 Interactivity

Topic 04: Properties and Events Part I

Spring 2011 SCM-CityU 1

Today’s Examples

• Simple_Flow.swf and Interactive_Album.swf in W drive


Review: if Conditional


Condition ACondition A

true

falseif

Process BProcess B

...if (conditionA) {

// process B}...

...if (conditionA) {

// process B}...

var score:Number = 87;

if (score >= 90) { trace ("A+");

}

if (score < 90 && score >= 85) { trace ("A");

}

var score:Number = 87;

if (score >= 90) { trace ("A+");

}

if (score < 90 && score >= 85) { trace ("A");

}

Review: if-else Conditional


Condition ACondition A

Process BProcess B

truefalse

if

Process CProcess C

if (conditionA) {// process B

} else {// process C

}…

if (conditionA) {// process B

} else {// process C

}…

if (currentFrame == 1) {gotoAndStop(totalFrames);

} else {prevFrame();

}

if (currentFrame == 1) {gotoAndStop(totalFrames);

} else {prevFrame();

}

Review: else-if Conditional


Condition A

Condition A

Process CProcess C

truefalse

if

Process EProcess E

Condition B

Condition B

false

Process DProcess D

else-iftrue

second if-elsesecond if-else statement statement

if (conditionA) {// process C

} else if (conditionB) {// process D

} else {// process E

}

if (conditionA) {// process C

} else if (conditionB) {// process D

} else {// process E

}

var age:uint = 15;

if (age >= 21) {trace("adult");

} else if (age > 12) {trace("teen");

} else if (age > 7) {trace("child");

} else {trace("infant");

}

var age:uint = 15;

if (age >= 21) {trace("adult");

} else if (age > 12) {trace("teen");

} else if (age > 7) {trace("child");

} else {trace("infant");

}

Review: if Conditional Summary

• Requires one if• Only one optional else can be used• Any number of optional else-if test can be used


if (...) {}if (...) {}

if (...) {} else if (...) {} else if (...) {}

if (...) {} else if (...) {} else if (...) {}

if (...) {} else {}

if (...) {} else {}

if (...) {} else if (...) {} else if (...) {} else {}

if (...) {} else if (...) {} else if (...) {} else {}

Review: Functions

• Example: math function f(x, y) = x2+y2


trace(f(1, 2)); trace(f(2, 3)); trace(f(3, 4));trace(f(4, 5));

function f(x:Number, y:Number): Number {return x*x + y*y;

}



} function definition function definition

function calls function calls

Review: Functions

• Position of function definition doesn’t influence program flow




}



}


}



}


trace(f(1, 2)); trace(f(2, 3));


}

trace(f(3, 4));trace(f(4, 5));

trace(f(1, 2)); trace(f(2, 3));


}

trace(f(3, 4));trace(f(4, 5));

Review: Statements and Blocks

• Simple statements are expressions followed by a semicolon (;)


// the following code contains four simple statements var a:int = 3;trace(a); a += 5; trace(a);

// the following code contains four simple statements var a:int = 3;trace(a); a += 5; trace(a);

Review: Statements and Blocks

• Braces { and } group multiple simple statements into a compound statement or block– { and } must be matched – Indentation highly recommended– Blocks can be nested


function genderTest(male:Boolean): void {if (male) {

trace("male");trace("playing games");

} else {trace("female");trace("going shopping");

}}genderTest(false);

function genderTest(male:Boolean): void {if (male) {

trace("male");trace("playing games");

} else {trace("female");trace("going shopping");

}}genderTest(false);

Question 1: How many blocks?

Question 2: Output?

Review: Indent Style


var a:Boolean = true; var b:Boolean = false;if (a) {if (b) {trace(10);}trace(5);} else {trace(20);}

var a:Boolean = true; var b:Boolean = false;if (a) {if (b) {trace(10);}trace(5);} else {trace(20);}

Auto Format

var a:Boolean = true; var b:Boolean = false;if (a) {

if (b) {trace(10);

}trace(5);

} else {trace(20);

}


if (b) {trace(10);

}trace(5);

} else {trace(20);

}

Review: Indent Style

• Indentation reveals program structure easily


var a:Boolean = true; var b:Boolean = false;if (a) {if (b) {trace(10);} else {trace(20);}trace(5);}

var a:Boolean = true; var b:Boolean = false;if (a) {if (b) {trace(10);} else {trace(20);}trace(5);}


if (b) {trace(10);

} else {trace(20);

}trace(5);

}


if (b) {trace(10);

} else {trace(20);

}trace(5);

}

Review: Brackets (wiki)

• Parentheses: ()– Function parameter list – Precedence ordering

• Braces: {}– Define a block, which

groups a set of statements

• Box/square brackets: []– Array


trace(para1, para2, para3, …, paraN);trace(para1, para2, para3, …, paraN);

trace((2 + 3) * 4); // 20trace((2 + 3) * 4); // 20

if (female) {trace("female");trace("hobby: shopping");

}

if (female) {trace("female");trace("hobby: shopping");

}

Review: ; : , .• ;

– A semicolon ends a simple statement

• :– A colon for data type declaration

• ,– A comma for separate parameters

• .– A.B means A contains B (B can be

either a property or a method/function)


var a:int = 3;trace(a); var a:int = 3;trace(a);

var pi:Number = 3.14;function f(x:Number): Number;var pi:Number = 3.14;function f(x:Number): Number;

function f(x:Number, y:Number): Number;trace(a, b, c, d);function f(x:Number, y:Number): Number;trace(a, b, c, d);

bird.speed = 5;bird.fly();bird.speed = 5;bird.fly();

btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick);btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick);


Events & Listeners


Events & Listeners• Multiple parties might be

interested in special things, called events (e.g., clicking), happened to a target object (e.g., a button)


Hi folks, I have been

clicked!


clicked!



clicked!


clicked!

Got it. I will perform some follow-up taskGot it. I will perform some follow-up task

Who cares! I’m only interested in keyboard

events on you

Who cares! I’m only interested in keyboard

events on you

• In ActionScript,

eventTarget.addEventListener (EventType, eventListener);

– btn.addEventListener(MouseEvent.CLICK, clickTask); – btn.addEventListener(KeyboardEvent.KEY_DOWN, keyDownTask);



clicked!


clicked!

Got it. I will perform some follow-up taskGot it. I will perform some follow-up task

Who cares. I’m only interested in keyboard

events on you

Who cares. I’m only interested in keyboard

events on you

• eventTarget can be – Stage – Any symbol instance you create, e.g., a button!


btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick);

function onPrevButtonClick(e:MouseEvent) : void {prevFrame();txt_index.text = currentFrame + "/" + totalFrames;

}



}


• Listen to an event type you only care! • There are many event types defined in Event,

TimerEvent, KeyboardEvent, MouseEvent, … – E.g., MouseEvent.CLICK




}



}


Event, MouseEvent … are complex data types for events Event, MouseEvent … are complex data types for events

• eventListener is simply a function but always with a single special parameter – Through this parameter you can get the context where the

event happens




}



}


Note: data type of parameter should becompatible with the one used for eventtype

Note: data type of parameter should becompatible with the one used for eventtype

Execution Flow• When an event happens to a target, all registered

listeners that are listening to this event type are invoked

• E.g., when click event happens to btn – clickTask function will be called – But keyDownTask function won’t


btn.addEventListener(MouseEvent.CLICK, clickTask);

btn.addEventListener(KeyboardEvent.KEY_DOWN,

keyDownTask);

btn.addEventListener(MouseEvent.CLICK, clickTask);

btn.addEventListener(KeyboardEvent.KEY_DOWN,

keyDownTask);

Simple Flow Control

• Our previous album demo – A keyframe in every frame – Frame jumping using ActionScript (at Frame 1)


Simple Flow Control

• Today’s first example – Jumping between tween animations


Basic Steps 1. Change stage size to 181 x 380 2. Load images (File > Import to Stage)

– Select all images of interest– All images will be loaded into single frame

and single layer • In previous example, only first image is selected, all

images under the same directory are loaded as a sequence, each image placed into individual key frames

3. Distribute images to individual layers


Image Source

Basic Steps

4. Drag keyframe of 1.jpg and move it to frame 2 Then insert frame at frame 10


Basic Steps

5. Create motion tweens – Convert to symbols first

• Why: motion tween requires symbol instances • How: select 1.jpg image on the stage & right click….


Basic Steps

5. Create motion tweens – Convert to symbols first – Change properties of symbol instances

• E.g., alpha in our case

Spring 2011 SCM-CityU 28Alpha = 0 @Frame1 Alpha = 1 @Frame10

Timeline


Class Exercise

• Task: create motion tween for images 2-4


11-2021-30

31-40

2-10

Frame No

Basic Steps

6. Add user control – Have a layer for AS and span the entire timeline

• Insert frame at Frame 40

– Insert control button (from built-in component)• This button will appear in the entire animation


Instance: playBtn

Basic Steps

6. Add user control – Add an event listener for the control button


I have been clicked!

I have been clicked!

Got it. I will play the next key frame.

Got it. I will play the next key frame. Event Target Event Listener

Event Type

Basic Steps

6. Add user control – Add an event listener for the control button

• At Frame 1


playBtn.addEventListener(MouseEvent.CLICK, onButtonClick);

function onButtonClick(e:MouseEvent): void {if (currentFrame == 1) {

gotoAndPlay(2);}

}

playBtn.addEventListener(MouseEvent.CLICK, onButtonClick);

function onButtonClick(e:MouseEvent): void {if (currentFrame == 1) {

gotoAndPlay(2);}

}

Event Target Event Type Event Listener

Basic Steps

6. Add user control – Stop animation at Frame 10

• Insert a key frame at Frame 10• Add stop(); to stop animation

• Class exercise– Complete the whole animation – Hints

• Event listeners are shared among key frames • So the same playBtn can be used for playing control

– Add code in onButtonClick (at Frame 1)


Frame Labels• 10, 20, 30, 40 are like magic numbers in our app • If you change position of key frames, you have to

modify the code correspondingly

• A better solution: assigning some labels to key frames and accessing those frames in AS by label


Frame Labels

• Example– Select key frame 10– Assign a frame label in Properties panel

• E.g., 1e (end of 1.jpg)


Frame Labels• Just like currentFrame representing the number of

frame being played, currentFrameLabel is the label at the current frame – currentFrameLabel is of String type (ref)

• gotoAndPlay and gotoAndStop accept both frame number or label as input (ref)


mc1.gotoAndPlay(currentFrame + 5);

mc1.gotoAndPlay("1e");

mc1.gotoAndPlay(currentFrame + 5);

mc1.gotoAndPlay("1e");


Properties


Properties

• Symbol instances provide a large set of predefined properties for manipulation, e.g., – x, y – width, height – scaleX, scaleY– alpha– visible

• Access properties using dot syntax – E.g., ball.rotation += 30;


Properties

• Why bother property changing in ActionScript? – To support interactivity!

• But you can use properties panel to set initial properties


Properties: x, y

• Using dot syntax • Units: pixels


OX

Y

Note: y-axis is downward!Note: y-axis is downward!

Properties: width, height


OX

Y

box.width

box.

heig

ht

Properties: scaleX, scaleY

• Multiplies current width/height by a scale factor


OX

Y

box.scaleX = 0.5;box.scaleY = 0.5;

Properties: rotation

• Clockwise; angle in degree


OX

Y

Properties: alpha

• Range: [0, 1]


box.alpha = 1; box.alpha = 0.5;

Example: Interactive Album

• Control multiple objects– Sharing event listeners– All objects have the same behavior!


Basic Steps

1. Load images to the stage 2. Convert to symbols and assign instance names

– E.g., names: s1, s2, s3, s4

3. Resize symbol instances and have an initial layout like


s1

s2

s3

s4

Add User Controls

• Add event listeners for s1

– MouseEvent (ref)• Event types: CLICK, DOUBLE_CLICK, MOUSE_DOWN,

MOUSE_UP, MOUSE_MOVE

• Repeat this for the other images – All images share same event listeners


s1.addEventListener(MouseEvent.MOUSE_DOWN, onPhotoDown);s1.addEventListener(MouseEvent.MOUSE_UP, onPhotoUp);s1.addEventListener(MouseEvent.MOUSE_DOWN, onPhotoDown);s1.addEventListener(MouseEvent.MOUSE_UP, onPhotoUp);

Add User Controls

• Make images draggable – Start to drag when mouse is down– Stop to drag when mouse is up


function onPhotoDown(e:MouseEvent): void {

var photo:MovieClip = e.target as MovieClip;

photo.startDrag();}

function onPhotoUp (e:MouseEvent): void {


photo.stopDrag();}

function onPhotoDown(e:MouseEvent): void {


photo.startDrag();}

function onPhotoUp (e:MouseEvent): void {


photo.stopDrag();}

Note 1: e.target refers to event target where event happens. Note 2: as operator does data type conversion (DisplayObject MovieClip)

Add User Controls

• Bring the image being dragged onto topmost (ref)– Each symbol instance on the stage has an index

• numChildren -1 means topmost • 0 means bottommost


function onPhotoDown(e:MouseEvent): void {var photo:MovieClip = e.target as MovieClip;

photo.startDrag();

// bring the image being dragged to the topsetChildIndex(photo, numChildren - 1);

}

function onPhotoDown(e:MouseEvent): void {var photo:MovieClip = e.target as MovieClip;

photo.startDrag();

// bring the image being dragged to the topsetChildIndex(photo, numChildren - 1);

}

Add User Controls

• Enlarge images being clicked


// center the image being clickedphoto.x = stage.stageWidth/2;photo.y = stage.stageHeight/2;// set larger size photo.width = 400;photo.height = 300;

// center the image being clickedphoto.x = stage.stageWidth/2;photo.y = stage.stageHeight/2;// set larger size photo.width = 400;photo.height = 300;

Note: by default the origin of objectcoordinate system is at the object centerNote: by default the origin of objectcoordinate system is at the object center

Add User Controls

• Get back to the original image size– Store original size to some variables before enlarging

• zoomedPhoto, old_x, old_y, old_w, old_h

– Restore original size if the photo is clicked again


// store currently being zoomed photovar zoomedPhoto:MovieClip = null; var old_x:Number;var old_y:Number;var old_w:Number;var old_h:Number;

// store currently being zoomed photovar zoomedPhoto:MovieClip = null; var old_x:Number;var old_y:Number;var old_w:Number;var old_h:Number;

// need to restore original sizeif (zoomedPhoto != null) {

... }

// need to restore original sizeif (zoomedPhoto != null) {

... }

Note: null means empty object for complex data types (compare: 0 for primitive data type)

Note: null means empty object for complex data types (compare: 0 for primitive data type)

Class Exercise • Task: prevent image enlarging when dragging image

• Hints: check if the mouse positions for mouse down and up are the same • Mouse movement dragging; otherwise img enlarging

• Step 1: when the mouse is down (in onPhotoDown), store mouse position into some variables– (stage.mouseX, stage.mouseY)

• Step 2: when the mouse is up (in onPhotoUp), check if the current mouse position is the same as the stored position


More Examples• Build a simple scroll bar

– Use scroll bar to control locations and alpha of other objects – Simple_Scroll_Bar.fla in W drive


bar

bar_buttons1 s2 s3 s4


More Examples

• Control the movement of FL icon by mouse click– move_icon.fla in W drive


More Examples

• Zoom in/out image– zoom_solution.fla in W drive


Documents

SM1205 Interactivity Topic 04: Properties and Events Part I Spring 2011SCM-CityU1