Topic 02: Introduction to ActionScript 3.0 Spring 2010 SCM-CityU

Actions Panel Build-in editor for writing ActionScript Open Flash CS4 and create a new Flash file (AS3.0) Open the Action panel Select “Window => Actions” menu item Or press F9 Spring 2010 SCM-CityU

Actions Panel Toolbar Actions Toolbox Script pane Script Navigator Spring 2010 SCM-CityU

First ActionScript Program Type trace(“Hello world!”); in the script pane The trace statement is used to write information to the Output panel in Flash The text “Hello world” is the argument (or parameter) of the trace statement, which is the input information for the trace statement. Select “Control => Test Movie” (or Ctrl+Enter) to test the flash movie Spring 2010 SCM-CityU

First ActionScript Program you will see the Output panel appear with the text “Hello World!,” (hello_world.fla) Spring 2010 SCM-CityU

Program Flow Basic Flow – Top to bottom The code is executed from first line to last line Exercise: Add more trace statements Spring 2010 SCM-CityU

Program Flow Simple actions needs few lines of code Complicated actions may need 100+ lines We can control the flow of program, e.g. Conditional jump (if-else) Looping / repeating (for, while, do-while) And more… We will discuss them later Spring 2010 SCM-CityU 7

ActionScript in Keyframe After adding ActionScript into the Flash file a small “a” will appear at the current frame on the timeline Indicates the frame has script associate to it When a frame is play, the script of the frame will be executed Spring 2010 SCM-CityU

ActionScript in Keyframe Flash movie play from first frame to last frame i.e. left to right in timeline When a frame contains ActionScript, the code is executed from top to bottom Exercise: Create a short movie, then add the trace statements in different frames Spring 2010 SCM-CityU 9

ActionScript in Keyframe Flash movie play from first frame to last frame i.e. left to right in timeline When a frame contains ActionScript, the code is executed from top to bottom Exercise: Create a movie with simple motion tween (layer1) Add the trace statements in different frames (layer2) Note: only keyframes can insert ActionScript See hello_world2.fla Spring 2010 SCM-CityU 10

ActionScript in Keyframe We can use the script navigator to switch and edit scripts in different frames (and/or layers) Spring 2010 SCM-CityU 11

Using Data We need to store and process data in our program User input (Keyboard, mouse input …) Dynamic response to user (object movement, display information …) Status of our program (interaction status, date/time …) Spring 2010 SCM-CityU 12

Using Data - Variables Variables – places to store data e.g. name, color, position, size … How to declare a variables? Know the data type Design a variable name Basic syntax var name:type; var is the keyword used for declaring variable Semicolon terminate the statement Spring 2010 SCM-CityU 13

a Using Data - Variables 10 var is a keyword Examples: var a:int; var playerName:String; After declaring variable, we can store data to them a = 10; playerName = “Mary”; a Spring 2010 SCM-CityU 14

Using Data – Data Type Data type – tell the system how to store and process the data Three numeric data type Integer (int): 3, 12, -100 … Unsign Integer (uint): 1, 2, 3, … Floating point (number): 0.75, 1.23, -0.001 … Spring 2010 SCM-CityU 15

Using Data – Data Type Examples: Integer: used for counter or simple integer data var count:int = 1; var age:int: 21; Number: used for general computation var angle:number = 33.33 Spring 2010 SCM-CityU 16

Using Data – Data Type Exercise: Display a variable Declare an integer variable and show in output window var a:int; a = 10; trace(a); Spring 2010 SCM-CityU 17

Using Data – Data Type String data type: used for any text-based value or string of characters var s:String; s = “hello world”; trace(s); Spring 2010 SCM-CityU 18

Using Data – Data Type Boolean: can only be true or false commonly used for comparison and decision making var b:Boolean; b = false; trace(b); Spring 2010 SCM-CityU 19

Using Data – Data Type Short Summary Integer (int, uint) – integer only Number – any number String – text-based values Boolean –true or false only Spring 2010 SCM-CityU 20

Using Data – Declaration Variable allows a data to be reused many times within the program You need to declare a variable before using it var a:int; // declare variable a with type int var x:Number; // declare variable x with type Number var b:Boolean; // declare variable b with type bool a = 102; // assign value 102 to a x = 123.45; // assign value 123.45 to x b = true; // assign value true to b Spring 2010 SCM-CityU 21

Using Data – Declaration Declaration and value assignment can be in the same line var a:int = 102; var x:Number = 123.45; var b:Boolean = true; Note that a variable cannot be re-declared var a:int = 10; a = 20; // OK. assign 20 to a var a:int = 30; // ERROR! a is already declared Spring 2010 SCM-CityU 22

Using Data – Operator Assignment operator “=“ Assign the value of the right side of “=“ to the variable on the left side var a:int; var b:int; a = 10; // OK b = a; // OK 3 = 10; // Error!! Spring 2010 SCM-CityU 23

Using Data – Operator Mathematical operator “+”, “-”, “*”, “/”, “%” The operators of the right of “=” symbol is computed first the computed value is assigned to the variable on the left var a:int; var b:int; a = 10; // now a = 10 b = a + 2; // now a = 10, b = 12 a = a * 2; // now a = 20, b = 12 b = a – b; // now a = 20, b = 8 Spring 2010 SCM-CityU 24

Using Data – Operator Modulus operator “%” calculates the remainder when one number is divided by another var a:int; a = 9 / 3; // now a = 3 a = 9 % 3; // now a = 0 a = 10 / 3; // now a = 3 a = 10 % 3; // now a = 1 Spring 2010 SCM-CityU 25

Using Data – Operator Operator Precedence determines which operator is evaluated before other operators multiplication is always performed before addition Multiplicative * / % Additive + - Assignment = Higher Precedence Lower Precedence Spring 2010 SCM-CityU 26

Using Data – Shortcut Increment and decrement operators (++ and --) var x:int = 1; trace(x); // print 1 x++; // equivalent to x = x + 1 trace(x); // print 2 var y:int = 3; trace(y); // print 3 y--; // equivalent to y = y - 1 trace(y); // print 2 Spring 2010 SCM-CityU 27

Using Data – Shortcut Add assign operator += Subtract assign operator += Multiply assign operator *= Divide assign operator /= var x:int = 1; trace(x); // print 1 x += 3; // equivalent to x = x + 3 trace(x); // print 4 Spring 2010 SCM-CityU 28

Using Data – Shortcut var y:int = 1; trace(y); // print 1 y -= 5; // equivalent to y = y - 5 trace(y); // print -4 var x:int = 2; trace(x); // print 2 x *= 3; // equivalent to x = x * 2 trace(x); // print 6 Spring 2010 SCM-CityU 29

Comments Comments can be used to summarize code or to explain the programmer's intent // Two forward slashes to denote a comment // All text after the slashes is ignored by computer. /* A forward slash followed by an asterisk define a multiline comment. The comment continue until an asterisk followed by a slash is found */

Case sensitivity AS is a case-sensitivity language Remember: Variable names are case-sensitivity var myname:String = “john”; var Myname:String = “john”; var myName:String = “john”; var MyName:String = “john”; All are different variable! Spring 2010 SCM-CityU 31

Simple Example Change the text in text field Open a new Flash file Add a text field Change it to a Dynamic Text Change its name to myText Now the text field is changeable and can modify by program Spring 2010 SCM-CityU 32

Simple Example 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! Spring 2010 SCM-CityU 33

Dot syntex Dot (.) operator is used to access the properties or methods of an object or a movie clip myText.text = "Hello world!"; myBox.x = 200; myMovie.Stop();

Exercise 1 – Copy Text Copy text data from Input Text Field to Dynamic Text Field We use the following code to add action to object when it is clicked myObj.addEventListener(MouseEvent.CLICK, onClick); function onClick(e:MouseEvent){ // add action here }

Exercise 2 – Simple Calculation Design simple calculation to compute the addition, subtraction, multiplication and division of two number. Hint: 2 input text fields for input 1 dynamic text field for output 1 object used for button