1. SM1205 Interactivity Topic 02: ActionScript 3.0 Fundamentals - Part I Hongbo Fu Spring 2011SCM-CityU1

2. ActionScript (wiki)wiki Latest version: 3.0 – Since June 2006 – Need Flash Player 9 or newer Scripting language Object-oriented language Spring 2011SCM-CityU2

3. Actions Panel Build-in editor for writing ActionScript To open Actions panel – Select Window > Actions – Or press F9 Spring 2011SCM-CityU3

4. Actions Panel Spring 2011SCM-CityU4 Script Pane Script Navigator Actions Toolbox Toolbar Write code here

5. Your First Program Type the following code in the script pane – trace(“Hello world!”); Test Flash movie by – Either selecting Control > Test Movie – Or pressing Ctrl+Enter You’ll see “Hello world!” in the Output window Spring 2011SCM-CityU5

6. Your First Program trace(“Hello world!”); – Trace A method to write info to Output panel – Note: the info in Output panel is only for programmers, not for end users – “Hello world!” Argument (or parameter) of the trace method – The info you want to output (e.g., some text info here) – Use of semicolon(;) Denotes the end of a line Not required but recommended by every AS book! Spring 2011SCM-CityU6

7. Compiler Errors ActionScript has very strict syntax If you don’t follow it, compiler will raise errors! – E.g., compiler only knows trace instead of Trace, since AS is case-sensitive Spring 2011SCM-CityU7

8. Debugging (wiki)wiki A process of finding and reducing the number of bugs or problems in your program Spring 2011SCM-CityU8

9. Comments Comments: text for programmers only – Compiler will ignore them – So you can have any text in comments. No syntax rules Main purposes – Add more human-readable descriptions/notes – Remove temporarily useless code Spring 2011SCM-CityU9

10. Comments Usage – To comment single line, use “//” in front of that line – To comment multiple lines together, put the text between “/*” and “*/” Spring 2011SCM-CityU10 Script editor uses a special color for commented text

11. Comments Another example Spring 2011SCM-CityU11

12. Program Flow Basic Flow: Top  bottom; Left  Right – The code is executed from first line to last line Exercise: Add more trace statements – Use comma(,) to provide multiple parameters at once Spring 2011SCM-CityU12

13. Program Flow But we can control the flow of program, e.g. – Conditional jump (if-else, switch) – Looping / repeating (for, while, do-while) – And more… We will discuss them in the next class Spring 2011SCM-CityU13SCM-CityU13Spring 2011

14. ActionScript in Keyframe After adding ActionScript into the Flash file – A small “a” appears at current frame on timeline Indicate the frame has some associated script When a frame is played, its associated script will be executed Spring 2011SCM-CityU14

15. ActionScript in Keyframe Similar idea works for multiple frames – But note: only key frames can have AS code Flash movie plays from first frame to last frame – i.e. left to right in timeline When a key frame contains ActionScript, the associated code is executed from top to bottom Spring 2011SCM-CityU15SCM-CityU15Spring 2011

16. ActionScript in Keyframe Exercise – Create a movie with simple motion tween (layer1) – Add trace statements in different key frames (layer2) Spring 2011SCM-CityU16SCM-CityU16Spring 2011

17. ActionScript in Keyframe Use script navigator to easy switch between scripts in different frames SCM-CityU17Spring 2011SCM-CityU17

18. Using Data We need to store & process data in our program – Math calculation – User input (Keyboard, mouse input …) – Dynamic response to user (object movement, display information …) – Status of our program (interaction status, date/time …) Spring 2011SCM-CityU18SCM-CityU18Spring 2011

19. Using Data – Basic Syntax var VariableName:DataType = InitialValue; var VariableName:DataType; – If initial value is not ready Variables can change over time Spring 2011SCM-CityU19 var a:int = 10; // Integer variable var myString:String = "SM1205"; // String variable var myNumber:Number = 3.1415; // Number variable var myNumber2:Number; // No initial value a = 20; // Assign a new value to a myNumber2 = 5.6; // Assign a value to myNumber2 var a:int = 10; // Integer variable var myString:String = "SM1205"; // String variable var myNumber:Number = 3.1415; // Number variable var myNumber2:Number; // No initial value a = 20; // Assign a new value to a myNumber2 = 5.6; // Assign a value to myNumber2 a 10

20. Using Data – Variables Variable naming style – Can only contain alphanumeric characters ([a-z], [A-Z], [0-9]), dollar sign ($) or underscore (_); – But not start with number Spring 2011SCM-CityU20 var boxSize; // valid var box_size; // valid var $dollar; // valid var _studentID; // valid var 10marks; // invalid: start with number var box size; // invalid: contain space var box-size; // invalid: contain '-' var boxSize; // valid var box_size; // valid var $dollar; // valid var _studentID; // valid var 10marks; // invalid: start with number var box size; // invalid: contain space var box-size; // invalid: contain '-'

21. Using Data – Variables Variable naming style – Make it unique – Should not already be keywords or reserved words Keyword in AS 3.0 Spring 2011SCM-CityU21 var boxSize; // valid var boxsize; // valid: AS is case sensitive var boxSize; // invalid: duplicate variable definition var var; // invalid: conflict with keyword var false; // invalid: conflict with keyword var boxSize; // valid var boxsize; // valid: AS is case sensitive var boxSize; // invalid: duplicate variable definition var var; // invalid: conflict with keyword var false; // invalid: conflict with keyword

22. Using Data – Data Type Why we need to declare data type? Reasons – Compact representation E.g., Boolean has two possible values; It’s unnecessary to represent a Boolean variable the same as an integer – Help compiler identify errors Spring 2011SCM-CityU22

23. Using Data – Data Type Data type – tell the system how to store and process the data Spring 2011SCM-CityU23 [Courtesy of Ryan] SCM-CityU23

24. Using Data – Data Type Numeric data types – Integer (int): 3, 12, -100 … – Unsigned integer (uint): 0, 1, 2, 3, … – General numbers (Number): 10, 0.75, 1.23, -0.001 … Possibly with fractional part Spring 2011SCM-CityU24 var count:int = 1; var age:uint = 21; var angle:Number = 33.33; var result:Number = Math.sqrt(22); trace(result); // output: 4.69041575982343 var count:int = 1; var age:uint = 21; var angle:Number = 33.33; var result:Number = Math.sqrt(22); trace(result); // output: 4.69041575982343 SCM-CityU24

25. Using Data – Data Type String data type – For text or string of characters – String values are enclosed by double quotation mark (“) Spring 2011SCM-CityU25 var s1:String = "ActionScript"; var s2:String = "programming is fun"; trace(s1, s2); // ActionScript programming is fun var s1:String = "ActionScript"; var s2:String = "programming is fun"; trace(s1, s2); // ActionScript programming is fun SCM-CityU25

26. Using Data – Data Type Boolean data type – Can only be true or false – Commonly used for comparison or decision making Spring 2011SCM-CityU26 var isResultGood: Boolean = true; if (isResultGood) { trace("Have a rest first."); } else { trace("Have to work harder."); } var isResultGood: Boolean = true; if (isResultGood) { trace("Have a rest first."); } else { trace("Have to work harder."); } SCM-CityU26

27. Using Data – Data Type Short summary – Integer (int, uint) – integer only – Number – any number – String – text-based values – Boolean – true or false only SCM-CityU27Spring 2011SCM-CityU27

28. Using Data – Operator Assignment operator (=) – Assign value/variable on the right side of “=“ to variable on the left side Spring 2011SCM-CityU28 var a:int; var b:int; a = 10;// OK b = a;// OK trace(b); // output: 10 a = 12; trace(b); // output: ??? 3 = 10;// Illegal: RHS must be a variable! var a:int; var b:int; a = 10;// OK b = a;// OK trace(b); // output: 10 a = 12; trace(b); // output: ??? 3 = 10;// Illegal: RHS must be a variable! SCM-CityU28 a 10

29. Using Data – Operator Assignment operator (=) – AS will automatically do some data conversion if feasible E.g., Number  int/uint: fractional part will be ignored E.g., Number/int/uint  Boolean: non-zero number will be converted to true; false, otherwise Spring 2011SCM-CityU29 var a:int = 2.5; trace(a); // 2 var b:Boolean = -2.3; trace(b); // true b = 0; trace(b); // false var a:int = 2.5; trace(a); // 2 var b:Boolean = -2.3; trace(b); // true b = 0; trace(b); // false SCM-CityU29

30. Using Data – Operator Mathematical operator “+”, “-”, “*”, “/”, “%” – %: Modulus operator for remainder calculation SCM-CityU30 trace(2 - 10); // -8 trace(10 + 2); // 12 trace(10 * 2); // 20 trace(10 / 2); // 5 trace(10 / 3); // 3.3333333333333335 trace(10 % 3); // 1 trace(9 % 3); // 0 trace(2 - 10); // -8 trace(10 + 2); // 12 trace(10 * 2); // 20 trace(10 / 2); // 5 trace(10 / 3); // 3.3333333333333335 trace(10 % 3); // 1 trace(9 % 3); // 0 Spring 2011SCM-CityU30

31. Using Data – Operator Operator Precedence – Determine which operator is evaluated before other operator – Use (, ) to form complex calculation SCM-CityU31 *, /, % +, - = Precedence Decrease trace(2 + 3 * 4); // 14 trace((2 + 3) * 4); // 20 var r:Number = 2 - 3; trace(r); // -1; trace(2 + 3 * 4); // 14 trace((2 + 3) * 4); // 20 var r:Number = 2 - 3; trace(r); // -1; Spring 2011SCM-CityU31

32. Using Data – Operator Increment and decrement operators (++ and --) – Increase or decrease the variable by 1 Spring 2011SCM-CityU32 var a:int = 1; trace(a); // 1 a++; // equivalent to a = a + 1 trace(a); // 2 var b:int = 0; trace(b); // 0 b--; // equivalent to b = b - 1 trace(b); // -1 var a:int = 1; trace(a); // 1 a++; // equivalent to a = a + 1 trace(a); // 2 var b:int = 0; trace(b); // 0 b--; // equivalent to b = b - 1 trace(b); // -1 SCM-CityU32

33. Using Data – Operator Add assign operator += Subtract assign operator += Multiply assign operator *= Divide assign operator /= Spring 2011SCM-CityU33 var a:int = 1; trace(a); // 1 a += 3; // equivalent to a = x + 3 trace(x); // 4 var a:int = 1; trace(a); // 1 a += 3; // equivalent to a = x + 3 trace(x); // 4 SCM-CityU33

34. Simple Example Change the text in text field – Open a new Flash file – Add a text field – Instance name: myText Now the text field is changeable and can be modified by program SCM-CityU34Spring 2011SCM-CityU34

35. Instance Name To access symbol instances in ActionScript, we need to give them names – Naming instances is the same naming variables! Can only contain alphanumeric characters ([a-z], [A-Z], [0-9]), dollar sign ($) or underscore (_); But not start with number Spring 2011SCM-CityU35 boxSize // valid box_size // valid $dollar // valid _studentID // valid 10marks // invalid: start with number box size // invalid: contain space box-size // invalid: contain '-' boxSize // valid box_size // valid $dollar // valid _studentID // valid 10marks // invalid: start with number box size // invalid: contain space box-size // invalid: contain '-'

36. Select the first frame Add the following script in the Action Panel (press F9 to open) myText.text = "Hello world!"; Test the movie You can see the text is updated! Simple Example SCM-CityU36SCM-CityU36Spring 2011

37. Dot Syntax Dot (.) operator is used to access the properties or methods of an object or a movie clip – myText.text = "Hello world!"; – myBox.x = 200; Spring 2011SCM-CityU37

38. Simple Example What’s the difference between “Ready Only”, “Selectable”, “Editable”? Spring 2011SCM-CityU38

39. Simple Example Change text border and background color Spring 2011SCM-CityU39

40. Exercise 1 – Copy Text Design the following user interface – Buttons are available via Window > Common Libraries > Button Spring 2011SCM-CityU40 Read OnlyEditable Name: inputTxt Name: outputTxt Name: btn

41. Exercise 1 – Copy Text Copy text from inputTxt to outputTxt when btn is clicked But how to know when the button is clicked? – Use the following code btn.addEventListener (MouseEvent.CLICK, onClick); function onClick(e:MouseEvent) { // add code for copying text data here } btn.addEventListener (MouseEvent.CLICK, onClick); function onClick(e:MouseEvent) { // add code for copying text data here } Spring 2011SCM-CityU41

42. Exercise 2 – Simple Calculation Design simple calculation to compute addition of two numbers Spring 2011SCM-CityU42

43. Exercise 2 – Simple Calculation Spring 2011SCM-CityU43 outputTxt.text = inputTxt1.text + inputTxt2.text; Why?

44. Exercise 2 – Simple Calculation The data type associated with text fields is String So we need data type conversion between Number and String Spring 2011SCM-CityU44 //Convert the String into number trace(Number("999")); var num:Number = Number("999"); //Convert the number into String trace(String(999)); var s:String = String(999); //Convert the String into number trace(Number("999")); var num:Number = Number("999"); //Convert the number into String trace(String(999)); var s:String = String(999);

45. Recommended Books on AS 3.0 Spring 2011SCM-CityU45