1. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Intro to Action Script "The games of a people reveal a great deal about them.“ Marshall McLuhan

2. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Action Script The programming language inside Flash. Allows Flash objects react to events such as the user choices or random events. Controls animation in non-linear presentations, interactive applications and games. Actions scripts are lists of instructions for Flash to follow. Action Script places in the Flash movie Frames Buttons Movie clips

3. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Action Script panel Window > Actions ( F9 )

4. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 To Apply Scripts to frames select frame in the timeline then select (type in) function in the Actions panel to buttons select button in the stage then select (type in) function in the Actions panel to movie clips name movie clip in the properties window select movie clip in the stage then select (type in) function in the Actions panel

5. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Frame scripts Controlling Flash playback gotoAndPlay(“frame”); command to jump and play specific frame in the movie gotoAndStop (“frame”); command to jump and stop at the specific frame in the movie

6. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Frame scripts Create a new movie with 4 keyframes and name them Animation Aesthetics Concept Fun

7. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Frame scripts Select “Animation” frame and apply script goto And Play (“fun”); Select “fun” frame and apply script goto And Play (“concept”); Select “concept” frame and apply script goto And Play (“aesthetics”); Select “aesthetics” frame and apply script gotoAndPlay (“animation”); Test the movie Control > test movie

8. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Button scripts Make a new layer “buttons” Create graphics for two buttons on the stage play and stop Select button play and convert it into the button symbol Modify > convert to symbol > button Edit individual button frames in the individual button timelines for rollover and press effects Select play button on the stage and apply the script in the actions window: on (press) { play(); }

9. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Button scripts Select stop button on the stage and apply the script in the actions window: on (press) { stop(); } Test the movie

10. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Movie clip scripts Make a new layer “movie_clips” Create graphics for movie clip character on the stage Select graphics and convert it into the movie clip symbol Modify > convert to symbol > movie clip Drag 2 instances of the movie clip to the stage and name them : char1 and char2

11. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Movie clip scripts Select char1 on the stage and apply the following script using Actions window Movie Clip Control onClipEvent (enterFrame) { this._x+=5; } this refers to the movie clip itself.dot after the object means you want to access object property _x horizontal position of the object += move object 5 pixels at a time

12. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Movie clip scripts Select char2 on the stage and apply the following script using Actions window Movie Clip Control onClipEvent (enterFrame) { this._x=_root._xmouse; this._y=_root._ymouse; } _root addresses the main timeline _xmouse horizontal position of the mouse cursor on the stage _ymouse vertical position of the mouse cursor on the stage

13. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 variables Storage units to store numbers or string of characters allowing dynamic data transactions Must be declared and initialized before use myVar = 5; myVar +=2; myVar2=“hello AD305”; Arithmetic operators: + addition -subtraction /division *multiplication --decrement ++increment % modulo (remainder of division)

14. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 variables A=7; B=5; C=A+B; trace(C); Math functions built in Flash > Math Math.random() function MyRandNum = int(Math.radom()*10); cerates random number from 0 to 9 D=“hello”; E=“world”; F=D+E;(F=“helloworld”) trace(F); G=D+” “ +E;(G=“hello world”) trace(G);

15. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Structured programming Control structure Sequence structure Loop structure

16. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Relational operators A==BA is equal to B The result is true if the expressions are equal. A!=BA is not equal to B Returns true if the operands are not the same. A<BA is less than B Returns true if the left operand is mathematically smaller than the right operand. A>BA is greater than B Returns true if the left operand is mathematically larger than the right operand.

17. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Relational operators A<=BA is less than or equal to B Returns true if the left operand is mathematically smaller than or the same as the right operand. A>=BA is greater than or equal to B Returns true if the left operand is mathematically larger than or the same as the right operand.

18. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Conditional statements Conditional statement in its simplest form is specified by keyword IF If (this condition is true) { execute this statement ; } Can contain several statements If (this condition is true) { do this ; and this ; } If (a == 7) { gotoAndPlay (“special_frame”) ; }

19. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Conditional statements To extend the scope of the IF control statement we can use keyword ELSE If (this condition is true) { execute this statement ; } else { this statement ; } If (a == 7) { gotoAndPlay (“special_frame”) ; } Else { gotoAndPlay (”another_frame”) ; }

20. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Conditional statements If (a == 7) { gotoAndPlay (“special_frame”) ; } Else if (a == 12) { gotoAndPlay (”another_frame”) ; } Else if (a == 15) { gotoAndPlay (”very_special_frame”) ; } Else { gotoAndPlay (”not_so_special_frame”) ; }

21. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Conditional statements If statement is fundamental building block for all programs To change variables Branch to other frames Decisions on the score etc.

22. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Logical Operators Used to combine relational operators compare Boolean values (true and false) and return a third Boolean value andadding two operands produces a true result only when both operands are true orORing two operands produces a true result is either operand is true && Returns true only if both the left and right operands are true || Returns true if either the left or right operand is true !NOT: Returns the logical (Boolean) opposite of the operand. The logical NOT operator takes one operand.

23. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Logical Operators If ((a == 7) and (b == 12)) { gotoAndPlay (”another_frame”) ; } If ((a == 7) and (username == “alex”)) { gotoAndPlay (”alex_frame”) ; }

24. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Loops A loop is a control structure that allows one or more events to occur as long as a given condition remains true For loop allows automatic incrementation of a variable For (initialization; condition ; increment/decrement) { statement ; } For (i=0 ; i<10 ; i++) { trace (i) ; }

25. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Loops Create an instance of the char3 movie clip on the stage For ( i = 1 ; i <= 8 ; i++ ) { _root. char3. _x++ ; }

26. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Functions An autonomous module that performs tasks Piece of code that can be reused function sum ( m, o ) { L = m + o ; return L ; } trace ( sum ( 3, 15 )) ;

27. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Arrays Arrays allow to store a sequence of variables of the same type. Fruit = [“apple”, “orange”, “peach”, “plum”] ; 01 2 3 myItem = Fruit[1] ; To create an empty array and add items: Fruit = new Array(); Fruit.push(“apple”); Fruit.push(“orange”); Fruit.push(“peach”); Fruit.push(“plum”);

28. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Arrays while ( Fruit. Length > 0 ) { trace ( Fruit. pop ()) ; }.push adds element to array.pop returns element of the array.sort to list array elements in alphabetical or numerical order Fruit. Sort ( ) ;

29. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Arrays Fruit = new Array(); Fruit.push(“apple”); Fruit.push(“orange”); Fruit.push(“peach”); Fruit.push(“plum”); Fruit. Sort ( ) ; trace ( Fruit. toString ( )) ;

30. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Arrays Fruit = [“apple”, “orange”, “peach”, “plum”] ; 01 2 3 Fruit. splice (2, 1 ) ; 2 –element position to start removing (“peach”) 1 – how many elements to remove (1).splice removes elements from the array Fruit. splice (2, 1, “pear” ) ; “peach” is removed and “pear” is inserted into that position

31. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Mouse trail Fading trail of objects behind the mouse cursor Make new movie with movie clip “cursor trail” In the library right mouse button click on the properties of the movie clip and check Linkage export for Action Script Make a dummy movie clip outside of the stage and apply the following action script

32. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Mouse trail onClipEvent(load) { // creates empty array to hold references for the trail movie clips trail = new Array(); trailNum = 0; // variable trailNum keeps track of the number of next movie clip to be created // variable speed is used to determine how fast the trail movie clips shrink and fade speed = 2; }

33. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Mouse trail onClipEvent(enterFrame) { // new trail // creates a new movie clip from the library trailNum // allows any movieclip in the library which has been given a linkage id to be // attached to an existing movieclip (or the main timeline) in the movie // while it is running. // Note that if you attach a movieclip at the same depth as something that // already exists in the timeline at that depth, the previous thing will be deleted. _root.attachMovie("cursor trail","cursor trail"+trailNum,trailNum); “Linckage ID”, “clipname”, depth var mc = _root.attachMovie("cursor trail","cursor trail"+trailNum,trailNum);

34. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Mouse trail // set position to the current cursor position mc._x = _root._xmouse; mc._y = _root._ymouse; // add to array // places new movie clip trailNum into array and array is incremented for the next element trail.push(mc); trailNum++;

35. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Mouse trail // loops through the movie clips stored in array trail // if any ends up with alpha property less than 0, then they are removed from array and from the screen for(var i=trail.length-1;i>=0;i--) { // reduce alpha and scale trail[i]._alpha -= speed; trail[i]._xscale -= speed; trail[i]._yscale -= speed; // if this is one invisible, remove it if (trail[i]._alpha <= 0) { // remove array trail.splice(0,1); // remove movie clip trail[i].removeMovieClip(); }}}