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

SM1205 Interactivity

Topic 06: Iteration and Multiple Objects

Spring 2012 SCM-CityU 1

Overview

• Technologies – for loop and iteration – Array data type

• Examples



Iteration and for Loop


Control Multiple Objects

• How to control multiple objects with similar behaviors?



• Straightforward solution– Manually assign different names to each object– Duplicate same code for all objects

SCM-CityU 5

s1

s2

s3

s4

s5

s6s7



• But how about too many objects?– E.g., 100 circles with random position and size



• Iteration is a better solution– Loop and operate on multiple objects– Code once run many!– No need to assign different names to all objects

• Today’s focus: to understand iteration (looping) in AS 3.0

SCM-CityU 7Spring 2012 SCM-CityU 7

Iteration

• Example – output text from 1 to 10

SCM-CityU 8

• Simple … right?

trace(1);trace(2);trace(3);trace(4);trace(5);trace(6);trace(7);trace(8);trace(9);trace(10);



Iteration

• How about printing numbers from 1 to 100?

• Copy and paste?– Not a good idea– Long code– Hard to debug

SCM-CityU 9


trace(11);…

trace(99);trace(100);


trace(11);…

trace(99);trace(100);


Iteration

• Can we only use fewer lines of code?• Yes we can!


• Let’s try it out

for (var i:int = 1; i <= 100; i++) { trace(i);}


SCM-CityU 10

• Syntax– Starting with for keyword

• Typically counter is related to numberof current iterations and condition is related to number of total iterations

– Example

for Looping Structure


for (declare counter; condition; update counter) { // statement(s) to execute repeatedly // as long as condition is true

}


}


for (var i:int = 1; i <= 100; i++) { trace(i);} SCM-CityU 11

for Looping Structure

1. Declare counter 2. Condition checking– If condition is true

a. First run statements within blockb. Then update counter c. Go to the beginning of Step 2

(starting another iteration)

– Otherwise, exit for looping and continue running the program


Running order

Running Order Example


for (var i:int = 1; i<=3; i++) {trace(i);

}


}

var i:int = 1; // declare counter

// iteration 1if (i <= 3) { // condition checking

trace(i); // looping body i++; // update counter

}



}



}

// i <=3 is false, exit looping

var i:int = 1; // declare counter



}



}



}

// i <=3 is false, exit looping

• declare counter, condition, update counter are all optional in syntax – But two semicolons ; are always needed

• The first to separate counter declaration from condition and second to separate condition from counter updating

• The following examples are equivalent

2012 SCM-CityU 14


}


}


}


}

var i:int = 1; // init counter externally for (; i <= 3; i++) {

trace(i);}

var i:int = 1; // init counter externally for (; i <= 3; i++) {

trace(i);}

var i:int; for (i = 1; i <= 3; i++) {

trace(i); } Spring

var i:int; for (i = 1; i <= 3; i++) {

trace(i); } Spring

for (var i:int = 1; i <= 3;) {trace(i); i++; // update counter internally

}

for (var i:int = 1; i <= 3;) {trace(i); i++; // update counter internally

}

More for Looping Examples


// example of incrementing counter by 2// print all even numbers in [0, 20)for (var i:int = 0; i < 20; i += 2) {

trace(i);}

// example of incrementing counter by 2// print all even numbers in [0, 20)for (var i:int = 0; i < 20; i += 2) {

trace(i);}

// example of decreasing counter for (var i:int = 3; i >= 1; i--) {

trace(i);}

// example of decreasing counter for (var i:int = 3; i >= 1; i--) {

trace(i);}

// counter can be used by multiple for loopsvar i:int;

// will 0 and 5 be printed?for (i = 0; i < 5; i++) {

trace(i); }// will 0 and 5 be printed?for (i = 5; i >= 0; i--) {

trace(i); }

// counter can be used by multiple for loopsvar i:int;

// will 0 and 5 be printed?for (i = 0; i < 5; i++) {

trace(i); }// will 0 and 5 be printed?for (i = 5; i >= 0; i--) {

trace(i); }

Class Exercise

• Print all odd numbers within a given range – E.g., range = [1, 20]– E.g., range = [50, 100]

• Hint: i % 2 == 1 if a number i is an odd number – Remember: % operator gives you the remainder of

i/2


Nested for Structure

• Syntax– Usually need individual counters


// outer loop for (declare counter1; condition1; update counter1) {

// optional statement(s) before inner loop ...

// inner loop for (declare counter2; condition2; update counter2) {

// statement(s)}

// optional statement(s) after inner loop ...

}

// outer loop for (declare counter1; condition1; update counter1) {

// optional statement(s) before inner loop ...

// inner loop for (declare counter2; condition2; update counter2) {

// statement(s)}

// optional statement(s) after inner loop ...

}

Example: Printing Prime Numbers

• 2, 3, 5, 7, …


var range_start:int = 10;var range_end:int = 50;for (var i:int = range_start; i <= range_end; i++){

var isPrime:Boolean = true;

for (var j:int = 2; j<i; j++) {// if i can be represented by j*some_num// then i is not a prime number if (i % j == 0) {

isPrime = false;}

}

if (isPrime) {trace(i);

}}

var range_start:int = 10;var range_end:int = 50;for (var i:int = range_start; i <= range_end; i++){

var isPrime:Boolean = true;

for (var j:int = 2; j<i; j++) {// if i can be represented by j*some_num// then i is not a prime number if (i % j == 0) {

isPrime = false;}

}

if (isPrime) {trace(i);

}}

starting from 2 to i-1if i can be divided by

j, i is not prime

Other Looping Structures in AS

• while and do-while looping structures – We won’t cover details for those structures


while (condition) {// statement(s) to execute repeatedly // as long as condition is true

}

while (condition) {// statement(s) to execute repeatedly // as long as condition is true

}

do {// statement(s) to execute repeatedly // as long as condition is true

} while (condition);

do {// statement(s) to execute repeatedly // as long as condition is true

} while (condition);


Array


Store/Process Multiple Objects

• We already know how to create a lot of objects/numbers using for loops – E.g., a series of prime numbers, odd numbers

• How to store those objects or numbers?– Store them into individual variables? • How to name those variables?• How to access those variables easily?• Not convenient!


Solution: Using Array

• Array can store multiple data with one variable name– Can hold any type of data – Each element can be individually read or written

• Example


// create an Array variable with size = 3var a:Array = new Array(3);

// set values for individual elements a[0] = 1;a[1] = 2;a[2] = 3;

trace(a);

// create an Array variable with size = 3var a:Array = new Array(3);

// set values for individual elements a[0] = 1;a[1] = 2;a[2] = 3;

trace(a);

SCM-CityU 22

1 2 3Variable name: a

Create Array Variables • Array is a complex data type

– Use keyword new to create Array variables

• If you know desired number of elements, say 10

• Otherwise, create 0-size (empty) array first

– Insert new elements using push method later on Spring 2012 SCM-CityU 23

Create Array Variables

• If you even know elements values, use

– Or

• Examples


var a:Array = new Array(val1, val2, val3);

var gender:Array = ["female", "male"]; // square brackets trace(gender);

var grades:Array = new Array("A+", "A", "A-", "B+"); // parenthesestrace(grades);

var gender:Array = ["female", "male"]; // square brackets trace(gender);

var grades:Array = new Array("A+", "A", "A-", "B+"); // parenthesestrace(grades);

Review: Brackets (wiki)

• Parentheses: ()– Function parameter list – Precedence ordering

• Braces: {}– Define a block, which

groups a set of statements

• Box/square brackets: []– Array


trace(para1, para2, para3, …, paraN);trace(para1, para2, para3, …, paraN);

trace((2 + 3) * 4); // 20trace((2 + 3) * 4); // 20

if (female) {trace("female");trace("hobby: shopping");

}

if (female) {trace("female");trace("hobby: shopping");

}

Access Array Elements • Each element in an array has a unique index • Use ArrayName[elementIndex] to access

element with index=elementIndex

– E.g., first element of a: a[0]• Index is 0-based and always integer • Second element is a[1]

– E.g., last element of a: a[a.length-1]• Array’s property length tells the length of an array• a[a.length] is illegal. Why?


Access Array Elements

• Array elements are readable and writable – Individual array elements behave like ordinary

variables• Though they have no names


var a:Array = [1, 3, 5, 7];

var sum:Number = a[1] + a[2]; // add two elementstrace(sum);

a[2] = 10; // change 3rd element's value trace(a);

var a:Array = [1, 3, 5, 7];

var sum:Number = a[1] + a[2]; // add two elementstrace(sum);

a[2] = 10; // change 3rd element's value trace(a);

1 3 5 7

1 3 1010 7

Access Array Elements

• for loops are often used to process data represented by arrays


var a:Array = [1, 3, 5, 7];

// sum up all array elements// from a[0] to a[a.length-1]// not including a[a.length]var sum:Number = 0; for (var i:int = 0; i < a.length; i++) {

sum += a[i];}

trace(sum);

var a:Array = [1, 3, 5, 7];

// sum up all array elements// from a[0] to a[a.length-1]// not including a[a.length]var sum:Number = 0; for (var i:int = 0; i < a.length; i++) {

sum += a[i];}

trace(sum);

Insert/Removing Elements • Use push method to add a new element to the end of

the array • Use pop method to remove the last element from the

array


Note: there are other methods to insert/remove elements. Check out online reference

var a:Array = [1, 3, 5, 7];

a.pop(); // remove last element trace(a);

// insert two new elements

a.push(10);

a.push(20);trace(a);

var a:Array = [1, 3, 5, 7];

a.pop(); // remove last element trace(a);

// insert two new elements

a.push(10);

a.push(20);trace(a);


Examples


Example: Swimming Ducks

• We will learn – How to dynamically create objects (ducks!)– How to store/access objects with Array and for

looping structure


Dynamically Creating Display Objects in AS

• Why not just using authoring tool? – Reason: AS allows us to create multiple display objects

very easily

• How? – Idea: use for loop – For each iteration,

• Create a new display object (e.g., a duck)– Syntax: var a:SomeDataType = new SomeDataType();

• Add it to stage


Dynamically Creating Display Objects in AS


But what’s associated data type we can use

in AS?

Defining Data Type for Symbol• Define a data type for a symbol when you create it


Defining Data Type for Symbol

• You can simply ignore this warping by hitting OK


Instance Name vs Class Name• Instance name: like variable name in AS

– If your AS wants to directly assess some existing symbol instance on stage, assign instance name

• Class name: like data type in AS– If your AS wants to dynamically create new symbol instances, create

class name for your symbol!• Class naming style is the same as

variable/instance naming style


This name has no special usageThis name has

no special usage

Adding Visual Obj to Stage

• AS uses display list to organize all display objects on stage (ref) – A hierarchical list of all visual objects


Adding Visual Obj to Stage• Use addChild method to add display objects to stage

• Use removeChild method to remove display objects from stage


var s:MySymbol = new MySymbol ();s.x = 50;s.y = 100;addChild(s);//removeChild(s);

var s:MySymbol = new MySymbol ();s.x = 50;s.y = 100;addChild(s);//removeChild(s);

Class Exercise

• Add two symbol instances to stage using AS


Duck Example 1. File > Import > Import to Library

– Import a duck image

2. Give a class name: SymbolDuck – Make sure symbol type is Movie Clip


Task 1

• Enable options– Export for ActionScript– Export in frame 1

• This creates a data type, called SymbolDuck in AS, for Symbol Duck – var duck:SymbolDuck = new SymbolDuck();

SCM-CityU 41Spring 2012 SCM-CityU 41

Class Exercise

• Create a duck and add it to stage using AS


Class Exercise • Create 5 ducks using for loop and store them into an

array (var ducks:Array) – Set ducks’ positions like those in the figure below


Make Ducks Swimming • Let’s add a ENTER_FRAME event to animate ducks – Move them from right to left

• Constant moving speed is boring

• So how about having some random moving speed?– Math.random() generates a random number in-between 0

and 1



Class Exercise • Task 1– Make the ducks enter the stage from right side when they go

outside of the stage• Hint: borrow idea from our previous ping-pong example


Class Exercise • Task 2– Dynamically add ducks at mouse-clicked positions

• Add event listener for MouseEvent.CLICK• Use Array.push method to add newly created duck to array

– Similar to what we did for creating first 5 ducks


Class Exercise • Task 1: dynamically create a large number of shapes

(e.g., circles) with random – Size – Position – Alpha

• Task 2: remove clicked shape fromstage – Use removeChild


Documents

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