SM1205 Interactivity Topic 03: Flow Control Spring 2010SCM-CityU1

SM1205 Interactivity

Topic 03: Flow Control

Spring 2010 SCM-CityU 1

Button

• Simplest UI element• Map action to each button


pressperform action

Exercise

• Use 2 buttons to control the size of the photo


Album Example

• Two buttons for nagviation (Previous & Next)


Album Example

• Load Image sequence as keyframes– Create new Flash file (AS3.0)– Open menu item “File => Import => Import to stage”– Select the first photo file (d/l from course homepage)– The system finds image sequence, answer “Yes” to

load the all files


Album Example

• Add Controls• Add one more layer (layer2)• Add two buttons to this layer (btn_prev, btn_next)

– Open “Window => Common library => buttons”– Select and add the button you like

• Add a dynamic text field(txt_index)


Album Example

• Add ActionScript & test the behavior• Goto frame 1 layer 2• Open the action panel (press F9)• Type the code in next slide

– We will explain the code

• Press Ctrl+Enter to test the movie• You can press the buttons to view the

previous/next photo


Album Examplestop();

txt_index.text = currentFrame + "/" + totalFrames;

btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick);

btn_next.addEventListener(MouseEvent.CLICK, onNextButtonClick);

function onPrevButtonClick(e:MouseEvent) : void {

prevFrame();


}

function onNextButtonClick(e:MouseEvent) : void {

nextFrame();


}


Album Example

• Simple movie control– currentFrame – Current frame number– totalFrames – total frames = last frame number– stop() – stop (pause) the movie– play() – play the movie, starting from current frame– prevFrame() – goto the previous frame– nextFrame() – goto the next frame– gotoAndPlay(f) – goto frame f and play the movie– gotoAndStop(f) – goto frame f and stop the movie


Album Example

• Handle mouse click events– Add event listener

btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick);

btn_next.addEventListener(MouseEvent.CLICK, onNextButtonClick);

– Add event handlersfunction onPrevButtonClick(e:MouseEvent) : void {

prevFrame();


}


nextFrame();


}


Album Example

• We can go from first photo to last photo• How about we press the previous button when we

at the first photo– No effect?– Goto the last photo? How to achieve this?


How About IF…

• If structure – only run the process B if the condition A is true


Condition ACondition A Process BProcess Btrue

false

if

How About IF…

if (condition) {// process

}Spring 2010 SCM-CityU 13

• Syntax – if statement– Start with “if” keyword– Condition put in parentheses– Process put in braces– Each pair of braces defines a block, which groups a set of statements together

How About IF…

• Condition in AS is a condition expression– Has value true / false (boolean value)– Usually is a comparison expression– E.g. a < b, a >= c, a == b

• Comparison Operators– equal (==), not equal (!=)– Less than (<), greater than (>),– less than or equal to (<=), greater than or equal to (>=)Spring 2010 SCM-CityU 14

How About IF…

var a:int = 1;

var b:int = 1;

if (a == b) {trace(“same”);

}


• Examplesvar flag:Boolean = true;

if (flag == true) {trace(“yes”);

}

var flag:Boolean = true;

if (flag) {trace(“yes”);

}Output: “same”Output: “same” Output: “yes”Output: “yes”

Output: “yes”Output: “yes”

How About IF… Album Examplefunction onPrevButtonClick(e:MouseEvent) : void {

if (currentFrame > 1) {

prevFrame();

}

if (currentFrame == 0) {

gotoAndStop(totalFrames);

}


}


if (currentFrame < totalFrames) {

nextFrame();

}

if (currentFrame == totalFrames) {

gotoAndStop(1);

}


}


Test the movie again after modified the code!

How About IF…

• Sometime we need to combine conditions and test them in a single if statement

– E.g. age > 21 and gender == “male”

• Logical Operators– and (&&), or (||), not (!)


How About IF…

var a:int = 13;

var b:int = 12;

if (a>10 && b>10) {

trace(“>10”);

}


• Examplesvar pass:Boolean = true;

var score = 50;

if (!flag || score<60) {trace(“fail”);

}

Output: “>10”Output: “>10” Output: “fail”Output: “fail”

How About IF…

var a:int = 13;

var b:int = 12;

if (a>10 && b>10) {

trace(“>10”);

}


• Examplesvar pass:Boolean = true;

var score = 50;

if (!flag || score<60) {trace(“fail”);

}

Output: “>10”Output: “>10” Output: “fail”Output: “fail”

• If-else structure – if the condition A is true, run process B, otherwise run process C

Or ELSE…


Condition ACondition A Process BProcess Btrue

false

if

Process CProcess C

Or ELSE…

• Syntax – if-else statement– Start with “if” keyword– Condition put in parentheses– Process A put in braces after “if” keyword– “else” keyword put after Process A– Process B put after “else” keyword


if (condition) {

// process A

} else {

// process B

}

Or ELSE IF…

• Example


var age:int = 20;

if (age >= 21) {

trace(“adult”);

} else {

trace(“child”);

}

Output: “child”Output: “child”

Or ELSE IF… Album Examplefunction onPrevButtonClick(e:MouseEvent) : void {

if (currentFrame > 1) {

prevFrame();

} else {

gotoAndStop(totalFrames);

}


}


if (currentFrame < totalFrames) {

nextFrame();

} else {

gotoAndStop(1);

}


}


Test the movie again after modified the code!

Or ELSE IF…

• We can use else-if structure to check multiple conditions

– Grouping two or more if-else statement together– Beware how “if” and “else” are matched


Or ELSE IF…


Condition ACondition A Process CProcess Ctrue

false

if

Process CProcess C

Condition BCondition B

false

Process DProcess Delse-if

true

second if-elsesecond if-else statement statement

Or ELSE IF…

• Syntax


var age:int = 15;

if (age >= 21) {

trace(“adult”);

} else if (age > 12) {

trace(“teen”);

} else {

trace(“child”);

} Output: “teen”Output: “teen”

The code in bolded is the second

if-else statement

Exercise

1. Use 4 buttons to move the Flash icon in the display area

2. Add checking so that the icon does not go outside the window


Write-once, Run-many

• Function– A portion of code within a larger program– Performs a special task– Relatively independent to other part of the program– Can be used many time

• Examples– prevFrame();– gotoAndStop();



• Function– can be called several times from several places in the

program– After calling a function, will “return” to the next

instruction after the “function call”


function onPrevButtonClick(e:MouseEvent) : void {

prevFrame(); // call function prevFrame();

// after called prevFrame(), start to execute next statement


}


• Surely, we call define our own function• Syntax


function yourFunctionName(): void

{

// place your code here

// can use multiple statements

}


• examples


function printAtoE(): void

{

trace(“A”);

trace(“B”);

trace(“C”);

trace(“D”);

trace(“E”);

}


• Functions often have parameters as input values– to define action of functions– more flexible control– Dynamic behaveior

• Syntax


function name(parameter:type, parameter:type, …): void

{


// can use multiple statements

}


• examples


function addAndPrint(a:int, b:int): void

{

var sum:int = a + b;

trace(sum);

}

function displaceIcon(x:int, y:int): void

{

myIcon.x += x;

myIcon.y += y;

}


• Functions can have return value as output values– to define result of functions– Similar to mathematic function, e.g. f(x) = 2x

– Syntax


f(1) = 2f(2) = 4f(13) = 26…

function name(parameter:type, …): returnType

{


// remember to return a value after computation

return x;

}


• examples


var x:int = 10;

var y:int = 7;

Var result:int = addThreeInt(x, y, 5);

function addThreeInt(a:int, b:int, c:int): int

{

var sum:int = a + b + c;

return sum;

}

Documents

SM1205 Interactivity Topic 03: Flow Control Spring 2010SCM-CityU1