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

2. 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

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

4. 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

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

6. 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

7. 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

8. 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

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 short movie, then add the trace statements in different frames
Spring 2010
SCM-CityU 9

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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, …
Spring 2010
SCM-CityU 15

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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 = ; // assign value to x
b = true; // assign value true to b
Spring 2010
SCM-CityU 21

22. Using Data – Declaration
Declaration and value assignment can be in the same line
var a:int = 102;
var x:Number = ;
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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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 */

31. 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

32. 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

33. 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

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

35. 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 }

36. 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