SM1205 Interactivity Topic 04: Properties and Events Spring 2010SCM-CityU1

SM1205 Interactivity

Topic 04: Properties and Events

Spring 2010 SCM-CityU 1

Today’s Example

• Pingpong-like game


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

}

Properties

• Symbol instances provide a lot of 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

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;

Class Exercise • Create a symbol instance similar to the one below and

change its properties in ActionScript – Fill shape with gradient color using Paint Bucket Tool


Instance name: ball

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

Events & Listeners

• 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 – Any symbol instance you create, e.g., a button!– Stage, timer (to be covered soon),


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




}



}


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

where the event happens




}



}


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

Timer Event

• Timer is a complex data type in ActionScript – Useful for create animation, since it can dispatch

some timer event for every short period


I will give you a TimerEvent for every second.

I will give you a TimerEvent for every second.

Great. I will update the ball position for every second.Great. I will update the ball position for every second.

Timer Event

• For complex data types, variable definition is a bit different– var varName:ComplexType

= new ComplexType(para1,…,para2);

– E.g. var timer:Timer = new Timer(20);• First parameter specifies how often a timer event should

happen • In milliseconds (0.02 second for the above example)


Timer Event

• Timer instance will not start to invoke events until you call its start method– Timer is a complex data type, so it can have some

functions associated with it – Those associated functions are called methods


var timer:Timer = new Timer(20); // for 0.02 second

timer.start();var timer:Timer = new Timer(20); // for 0.02 second

timer.start();

Timer Event

• Now it’s time to add an event listener for handling timer event – We listen to only event type: TimerEvent.TIMER


var timer:Timer = new Timer(20); // for 0.02 second timer.start();

timer.addEventListener(TimerEvent.TIMER, onTimer);function onTimer(evt:TimerEvent):void {

ball.rotation += 5;}

var timer:Timer = new Timer(20); // for 0.02 second timer.start();

timer.addEventListener(TimerEvent.TIMER, onTimer);function onTimer(evt:TimerEvent):void {

ball.rotation += 5;}

Let’s Make Ball Moving


OX

Y

ball.x += ball_speed_x;ball.y += ball_speed_y;

Bouncing Against Boundary


OX

Y

How ?


• If ball.y is too large (i.e., > stage.stageHeight)– Set ball.y = stage.stageHeight;– And set ball_speed_y *= -1; // moving along negative y axis

• Class Exercise


OX

Y

y = stage.stageHeight

...if (conditionA) {

// process B}...

...if (conditionA) {

// process B}...

x = stage.stageWidth

+y -y

OX

Y


• Since ball has its radius (i.e., r = ball.width / 2), it should bounce at

y = stage.stageHeight - r; // for bottom border

• Class Exercise– Update and fix


y = stage.stageHeight - r

Bouncing Against Catcher

• Next step: add user interaction – User controls a horizontal bar, called catcher

Spring 2010 SCM-CityU 32Instance name: catcher

Keyboard Event

• Making the catcher move horizontally by pressing left or right key– stage is a variable you can always access


stage

Hi buddy, some key has been

pressed

Hi buddy, some key has been

pressed

OK. Let me check if left or right key has been pressedOK. Let me check if left or right key has been pressed

Keyboard Event

• KeyboardEvent provides event types for key down or up

• The info that be passed from stage to listener includes the key being pressed (keyCode)


stage.addEventListener(KeyboardEvent.KEY_DOWN, onBarControl);

function onBarControl(e:KeyboardEvent):void {

if (e.keyCode==Keyboard.LEFT) {trace("Left key pressed");

}}

stage.addEventListener(KeyboardEvent.KEY_DOWN, onBarControl);

function onBarControl(e:KeyboardEvent):void {

if (e.keyCode==Keyboard.LEFT) {trace("Left key pressed");

}}

Class Exercise

• Change x property of catcher when left or right key is pressed– catcher.x -= catcher_speed; // for left key– catcher.x += catcher_speed; // for right key

• Catcher movement should stop if it hits the stage border – cather.x < catcher.width / 2; // for left border


When Ball Hits Catcher

• This is true only if– ball.y > catcher.y – r AND – ball.x > catcher.x – catcher.width / 2 AND– ball.x < catcher.x + catcher.width / 2

• Class Exercise – Add code in onTimer


Game Over

• When catcher fails to get the ball, the game is over– I.e., ball.y > stage.stageHeight – r is true


Game Over

• Idea: if game over is detected, go to the second key frame

• Let’s insert a key frame first

• Test movie!


Errors

• You will get errors: – TypeError: Error #1009: Cannot access a property or

method of a null object reference.• at PingPong_Try4_fla::MainTimeline/onTimer()• at flash.utils::Timer/_timerDispatch()• at flash.utils::Timer/tick()

• Why?


Remove Event Listeners

• Try to add the following code at the beginning of AS code for Frame 1

• Does it help? Unfortunately, no• Because at Frame 2, event listeners at Frame 1

will still keep running – But all symbol instances at Frame 1 become invalid

at Frame 2Spring 2010 SCM-CityU 40

stop(); // stop movieclip animation gotoAndStop(2); // go to second framestop(); // stop movieclip animation gotoAndStop(2); // go to second frame

Remove Event Listeners • We need to remove unused event listeners at Frame 1

before jump to Frame 2• Removing event listeners is very simple. Just replace

addEventListener with removeEventListener


timer.removeEventListener(TimerEvent.TIMER, onTimer);

stage.removeEventListener(KeyboardEvent.KEY_DOWN,

onBarControl);

timer.removeEventListener(TimerEvent.TIMER, onTimer);

stage.removeEventListener(KeyboardEvent.KEY_DOWN,

onBarControl);

Remove Event Listeners

• One remaining issue


function onTimer(evt:TimerEvent):void {...

if (ball.y > stage.stageHeight-r) {trace("game over");timer.removeEventListener(TimerEvent.TIMER, onTimer);stage.removeEventListener(KeyboardEvent.KEY_DOWN, onBarControl);gotoAndStop(2);

}

// Remaining code possibly accesses symbol instances // However, those instances cannot be accessed at frame 2...

}



}


}

Function Return




return; // directly exit the function }


}



return; // directly exit the function }


}

Function Return

• After calling “return”, it would directly exit the function and – Set the output as the returned value or void


function returnTest(): void {return; trace("this line will never execute");

}

function returnTest2(): int {return 1; // set output = 1 and exit function return 2;

}

returnTest();trace(returnTest2());

function returnTest(): void {return; trace("this line will never execute");

}

function returnTest2(): int {return 1; // set output = 1 and exit function return 2;

}

returnTest();trace(returnTest2());

Class Exercise

• Add some AS code at Frame 2 such that pressing any key will restart the game– I.e.g, go back to frame 1

• Hints:– Add an event listener to check if there is any key

down event for stage • Similar to what we did at Frame 1

– gotoAndStop(1);


Assignment 1

• Submission – Via ACS – Deadline: 23:59:59, Tuesday, 23 Feb, 2010

• No late submission is allowed

• In-class presentation, 24 Feb– Each student has roughly 5 minutes for presentation

• Assessment – Based on implementation difficulty + creativity +

presentation performance


Assignment 1

• Topic: any interactive system – E.g., nonlinear storytelling

• More than one possible plotline and ending

– E.g., a small interesting game


Assignment 1

• Topic: any interactive system – E.g., nonlinear storytelling

• More than one possible plotline and ending

– E.g., a small interesting game


Start End 1

End 2

Assignment 1

• Requirements– Technical

• Jumping between key frames with user interaction– Reference: album demo

• Having at least three event listeners – No requirement for event types

• Use multiple else-if statements– Conditions must be related to user input

– Content • Your system must be meaningful

– Not just simply a piece of code to satisfy technical requirements


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

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

Assignment 1

• Optional tasks– Write and use your own functions

• With or without parameters • With or without returning values

– Nested if statements


Documents

SM1205 Interactivity Topic 04: Properties and Events Spring 2010SCM-CityU1