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

2. Button Simplest UI element Map action to each button Spring 2010SCM-CityU2 press perform action

3. Exercise Use 2 buttons to control the size of the photo Spring 2010SCM-CityU3

4. Album Example Two buttons for nagviation (Previous & Next) Spring 2010SCM-CityU4

5. 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 Spring 2010SCM-CityU5

6. 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) Spring 2010SCM-CityU6

7. 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 Spring 2010SCM-CityU7

8. Album Example stop(); txt_index.text = currentFrame + "/" + totalFrames; btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick); btn_next.addEventListener(MouseEvent.CLICK, onNextButtonClick); function onPrevButtonClick(e:MouseEvent) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } function onNextButtonClick(e:MouseEvent) : void { nextFrame(); txt_index.text = currentFrame + "/" + totalFrames; } Spring 2010SCM-CityU8

9. 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 Spring 2010SCM-CityU9

10. Album Example Handle mouse click events – Add event listener btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick); btn_next.addEventListener(MouseEvent.CLICK, onNextButtonClick); – Add event handlers function onPrevButtonClick(e:MouseEvent) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } function onNextButtonClick(e:MouseEvent) : void { nextFrame(); txt_index.text = currentFrame + "/" + totalFrames; } Spring 2010SCM-CityU10

11. 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? Spring 2010SCM-CityU11

12. How About IF… If structure – only run the process B if the condition A is true Spring 2010SCM-CityU12 Condition A Process B true false if

13. How About IF… if (condition) { // process } Spring 2010SCM-CityU13 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

14. How About IF… Condition in AS is a condition expression – Has value true / false (boolean value) – Usually is a comparison expression – E.g. a = c, a == b Comparison Operators – equal (==), not equal (!=) – Less than ( ), – less than or equal to ( =) Spring 2010SCM-CityU14

15. How About IF… var a:int = 1; var b:int = 1; if (a == b) { trace(“same”); } Spring 2010SCM-CityU15 Examples var flag:Boolean = true; if (flag == true) { trace(“yes”); } var flag:Boolean = true; if (flag) { trace(“yes”); } Output: “same” Output: “yes”

16. How About IF… Album Example function onPrevButtonClick(e:MouseEvent) : void { if (currentFrame > 1) { prevFrame(); } if (currentFrame == 0) { gotoAndStop(totalFrames); } txt_index.text = currentFrame + "/" + totalFrames; } function onNextButtonClick(e:MouseEvent) : void { if (currentFrame < totalFrames) { nextFrame(); } if (currentFrame == totalFrames) { gotoAndStop(1); } txt_index.text = currentFrame + "/" + totalFrames; } Spring 2010SCM-CityU16 Test the movie again after modified the code!

17. 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 (!) Spring 2010SCM-CityU17

18. How About IF… var a:int = 13; var b:int = 12; if (a>10 && b>10) { trace(“>10”); } Spring 2010SCM-CityU18 Examples var pass:Boolean = true; var score = 50; if (!flag || score<60) { trace(“fail”); } Output: “>10” Output: “fail”

19. How About IF… var a:int = 13; var b:int = 12; if (a>10 && b>10) { trace(“>10”); } Spring 2010SCM-CityU19 Examples var pass:Boolean = true; var score = 50; if (!flag || score<60) { trace(“fail”); } Output: “>10” Output: “fail”

20. If-else structure – if the condition A is true, run process B, otherwise run process C Or ELSE… Spring 2010SCM-CityU20 Condition A Process B true false if Process C

21. 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 Spring 2010SCM-CityU21 if (condition) { // process A } else { // process B }

22. Or ELSE IF… Example Spring 2010SCM-CityU22 var age:int = 20; if (age >= 21) { trace(“adult”); } else { trace(“child”); } Output: “child”

23. Or ELSE IF… Album Example function onPrevButtonClick(e:MouseEvent) : void { if (currentFrame > 1) { prevFrame(); } else { gotoAndStop(totalFrames); } txt_index.text = currentFrame + "/" + totalFrames; } function onNextButtonClick(e:MouseEvent) : void { if (currentFrame < totalFrames) { nextFrame(); } else { gotoAndStop(1); } txt_index.text = currentFrame + "/" + totalFrames; } Spring 2010SCM-CityU23 Test the movie again after modified the code!

24. 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 Spring 2010SCM-CityU24

25. Or ELSE IF… Spring 2010SCM-CityU25 Condition A Process C true false if Process C Condition B false Process D else-if true second if-else statement

26. Or ELSE IF… Syntax Spring 2010SCM-CityU26 var age:int = 15; if (age >= 21) { trace(“adult”); } else if (age > 12) { trace(“teen”); } else { trace(“child”); } Output: “teen” The code in bolded is the second if-else statement

27. 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 Spring 2010SCM-CityU27

28. 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(); Spring 2010SCM-CityU28

29. Write-once, Run-many 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” Spring 2010SCM-CityU29 function onPrevButtonClick(e:MouseEvent) : void { prevFrame(); // call function prevFrame(); // after called prevFrame(), start to execute next statement txt_index.text = currentFrame + "/" + totalFrames; }

30. Write-once, Run-many Surely, we call define our own function Syntax Spring 2010SCM-CityU30 function yourFunctionName(): void { // place your code here // can use multiple statements }

31. Write-once, Run-many examples Spring 2010SCM-CityU31 function printAtoE(): void { trace(“A”); trace(“B”); trace(“C”); trace(“D”); trace(“E”); }

32. Write-once, Run-many Functions often have parameters as input values – to define action of functions – more flexible control – Dynamic behaveior Syntax Spring 2010SCM-CityU32 function name(parameter:type, parameter:type, …): void { // place your code here // can use multiple statements }

33. Write-once, Run-many examples Spring 2010SCM-CityU33 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; }

34. Write-once, Run-many Functions can have return value as output values – to define result of functions – Similar to mathematic function, e.g. f(x) = 2x – Syntax Spring 2010SCM-CityU34 f(1) = 2 f(2) = 4 f(13) = 26 … function name(parameter:type, …): returnType { // place your code here // remember to return a value after computation return x; }

35. Write-once, Run-many examples Spring 2010SCM-CityU35 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; }