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

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

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

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

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?

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

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

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

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 }

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 }

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 }

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: Output: init test loop body update test loop body update test loop body update

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 }

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

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

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

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

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

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

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

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

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

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

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

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

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 }

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

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

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

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