1. SM1205 Interactivity Topic 06: Iteration and Multiple Objects Spring 2010SCM-CityU1

2. Control Multiple Objects How to control multiple objects with similar behaviors? Spring 2010SCM-CityU2

3. Control Multiple Objects Possible solution – Assign different names to each object ? – Write same code for all objects? How about too many objects? How to build dynamic objects? We need a more flexible way to access display objects Spring 2010SCM-CityU3

4. Control Multiple Objects Iterations and arrays is a better solution – Loop and operate on multiple objects – Code once run many – No need to assign different name to all objects First of all we need to understand iteration (looping) in AS 3.0 Spring 2010SCM-CityU4

5. Iteration Example – output text from 1 to 10 Spring 2010SCM-CityU5 trace(1); trace(2); trace(3); trace(4); trace(5); trace(6); trace(7); trace(8); trace(9); trace(10); Simple … right?

6. Iteration How about printing numbers from 1 to 100? Copy and paste? – Not a good idea – Long code – Hard to debug Spring 2010SCM-CityU6 trace(1); trace(2); trace(3); trace(4); trace(5); trace(6); trace(7); trace(8); trace(9); trace(10);

7. Iteration Can we only use fewer lines of code? Yes we can! Spring 2010SCM-CityU7 for (var i:int = 1; i<=10; i++) { trace(i); } Let’s try it out

8. For Structure The is our first for looping statement – Only 4 lines of code – Can print numbers from 1 to any number – trace() is called for many time but you only need to write once Spring 2010SCM-CityU8 for (var i:int = 1; i<=10; i++) { trace(i); }

9. For Structure General case of the for structure “for” is the keyword Statements inside the blocks run continuously while the test part evaluates to true Spring 2010SCM-CityU9 for (init; test; update) { // statements }

10. For Structure General case of the for structure Init part – assigns an initial value to the testing variables used in the test Update part – modifies the value of testing variable AFTER each iteration Spring 2010SCM-CityU10 for (init; test; update) { // statements }

11. For Structure For structure runs in the following order: 1.The init statement is run 2.The test is evaluated to true of false 3.If the test is true, goto step 4. Otherwise goto step 6 4.Run the statements within the block 5.Run the update statement and goto step 2 6. Exit the structure and continue running the program Spring 2010SCM-CityU11 for (init; test; update) { // statements }

12. For Structure Example: Spring 2010SCM-CityU12 for (var i:int = 1; i<=3; i++) { trace(i); } var i:int = 1 // 1<=3 is true trace(i); i++; // 2<=3 is true trace(i); i++; // 3<=3 is true trace(i); i++; // 4<=3 is false // exit looping Output: 1 2 3 Output: 1 2 3 init test loop body update test loop body update test loop body update

13. Printing Numbers Simple exercise: – Print odd numbers within 1 to 20 – Print even numbers within 1 to 20 – How many solution you can think about? Recall the format of for structure Spring 2010SCM-CityU13 for (init; test; update) { // statements }

14. Printing Numbers First solution (odd number): – Use an if statement to test each number Spring 2010SCM-CityU14 for (var i:int = 1; i<=20; i++) { if (i%2 == 1) { trace(i); } if i is an odd number print it

15. For Structure Another solution (odd number): – Use another updating step – Increase variable i by 2 after each iteration – Recall that i+=2 is the same as i = i + 2 – How about printing even number? Spring 2010SCM-CityU15 for (var i:int = 1; i<=20; i+=2 ) { trace(i); }

16. Nested For Structure Question - How to find the prime numbers? – 2, 3, 5, 7, 11, 13, … Hints – Using nested for structure – For structure is with in another for structure – Similar format to nested if structure – The inner for structure is used to check a number is prime or not – with boolean flag and if statement Spring 2010SCM-CityU16

17. Nested For Structure Solution - How to find the prime numbers? Spring 2010SCM-CityU17 for (var i:int = 1; i<=20; i++) { var isPrime:Boolean = true; for (var j:int = 2; j<i; j++) { if (i%j == 0) { isPrime = false; } if (isPrime) { trace(i); } starting from 2 to i-1 if i can be divided by j, i is not prime

18. Using Array Array can store multiple data with one variable name – Can hold any type of data – Each element can be individually read or updated. Example – storing 3 number into one array Spring 2010SCM-CityU18 var a:Array = new Array(); a[0] = 1; a[1] = 2; a[2] = 3; trace(a);

19. Using Array Array is a complex data type – Use keyword “new” to define an array Storing data – we need an index to specify the location of the slot in the array – Indices are just an integers, starts with zero – The index must put inside the brackets [ and ] Spring 2010SCM-CityU19 a[0] = 1; // assign 1 to a[0] a[1] = 2; // assign 2 to a[1] a[2] = 3; // assign 3 to a[2] var a:Array = new Array();

20. Using Array Reading data – Same syntax as storing data to array – Use the brackets [ and ] Spring 2010SCM-CityU20 var a:Array = new Array(); a[0] = 1; // assign 1 to a[0] a[1] = 2; // assign 2 to a[1] a[2] = a[0] + a[1]; // a[2] = 1 + 2

21. Using Array Processing elements in array with for structure – Access and update each element in array – Use the array length as testing condition Example – find the sum of all numbers in an array Spring 2010SCM-CityU21 var sum:int = 0; for (var i:int = 0; i<a.length; i++) { sum += a[i]; } trace(sum);

22. Control Multiple Objects Example – Swimming ducks – Dynamically create objects (ducks!) – Store and access objects with array and for structure Spring 2010SCM-CityU22

23. Control Multiple Objects Open duck.fla – You can see nothing in the stage – We are going to create objects and add them to the stage by codes Spring 2010SCM-CityU23

24. Control Multiple Objects Open duck.fla – You can see nothing in the stage – We are going to create objects and add them to the stage by codes Spring 2010SCM-CityU24

25. Control Multiple Objects Check the property of the “Symbol Duck” Enable the options – Export for ActionScript – Export in frame 1 This allows us to create duck object in AS Spring 2010SCM-CityU25

26. Control Multiple Objects Open Action Panel Insert the code below to create the ducks Spring 2010SCM-CityU26 stop(); // create array var ducks:Array = new Array(); // create ducks for (var i:int = 0; i<5; i++) { var d:SymbolDuck = new SymbolDuck(); d.x = 400;// set position of duck d.y = i * 60; addChild(d);// add ducks into stage ducks[i] = d;// add ducks into array }

27. Control Multiple Objects Result New function: addChild(obj) – Add display object to the current stage Spring 2010SCM-CityU27

28. Control Multiple Objects Insert the code below to move the ducks Spring 2010SCM-CityU28 // create new timer var timer:Timer = new Timer(20); timer.start(); // timer event listener timer.addEventListener(TimerEvent.TIMER, onTimer); function onTimer(evt:TimerEvent):void { // move all ducks to left for (var i:int=0; i<ducks.length; i++) { ducks[i].x -= Math.random() * 4; }

29. Control Multiple Objects Result New function – Math.random() – Return random number within 0.0 and 1.0 Spring 2010SCM-CityU29

30. Control Multiple Objects Exercise 1.Make the ducks enter the stage from right side when they go outside of the stage 2.Add code to allow user to click and add a new duck (using the Array.Push() function) 3.Remove ducks when they go outside of stage (using the removeChild() function) Spring 2010SCM-CityU30