1

Computer Animationwith Flash CS3 & ActionScript 3.0

National Polytechnic Institute of Cambodia

Bachelor of IT, Year III, Semester 1

2007-2008

by

Oum Saokosal, Head of IT Department

2

ActionScript and the Flash Authoring Tool (Cont.)

Computer Animationwith Flash CS3 & ActionScript 3.0

3

ActionScript and the Flash Authoring Tool (Cont.)

• Linked Classes for Movie Clip Symbols

• Instantiating Symbols via ActionScript

• The Document Class

4

Linked Classes for Movie Clip Symbols (1)

In ActionScript:

• Almost everything, except graphic, could be a class (including Button, Movie Clip, Sound etc).

• Every instances are objects

5

Linked Classes for Movie Clip Symbols (2)

Q. But how to make the symbols be Classes?

A. You have to link it. To link it, please

1. Click on an existing symbol,e.g. Rectangle in Library2. Right Click -> Linkage3. Then check on “Export for ActionScript” -> OK -> OK

6

Instantiating Symbols via ActionScript

• As you know, every symbol can be classes.

• After you created a linked class, you can instantiate by creating object from the class.

var rec1:mvRectangle = new mvRectangle();

rec1.x = 200;

rec1.y = 50;

addChild(rec1); //Add an object to stage– To instantiate(v) : To create instance

7

Important Codes (1)

• To create objects:

var star:mvStar = new mvStar(); // Movie Clip

var shortgun:ShortGun = new ShortGun(); // Sound

• To add the objects to stage:

addChild(star);• To hide/show mouse cursor:

Mouse.hide(); //To hide

Mouse.show(); //To show• To play sound:

shortgun.play();

8

Important Codes (2)

• To add Event to stage:

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownOnStage);

• Location of Mouse:

mouseX;

mouseY;

9

Lab: CreateStars

• Create stars in the sky by just clicking.

10

Lab: ShootingWall

• Shooting Wall (with Sound)

11

The Document Class (1)

• What is the Document Class?

- The Document Class is a external ActionScript class file (*.as) which is linked to Flash documents (*.fla).

- It helps to decouple coding from designing. That is, you design animations in Flash (*.fla) whereas you code in another external class file (*.as).

- It enables you to use OOP features easily.

- Note that it is available for AS 3.0 only.

12

The Document Class (2)

• How to create the Document Class?

1. Create a new Flash file (AS3.0).

2. Create animations. But you should create button or MovieClip symbols for every part of animations. Then save the file, say, FlashEx.fla.

3. Next, create AS file by clicking on File ->New ->ActionScript File.

4. Write your codes. Then save it, ASEx.as.

13

The Document Class (3)

5. Please switch back to FlashEx.fla.

6. On the Flash file property, you will see a textbox called “Document Class”.

7. Please type your AS file name, “ASEx”.

14

The Document Class (3) - Sample

1. Open AS file: HelloWorld.aspackage {

import flash.display.Sprite;import flash.events.MouseEvent;

public class HelloWorld extends Sprite {public function HelloWorld() {

stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);

}private function mouseDown (e:MouseEvent):void {

trace("Hello World");}

}}

15

The Document Class (3) - Sample

2. Open Flash (AS3.0) file

3. On properties panel and in the Document Class, please write HelloWorld

16

Lab: Exercise

• To rebuild the exercise CreateStars and ShootingWall by using document class.

• Hint:

1. In Flash file, create only symbols and then link them to be classes.

2. In AS file, write code.