Actionscript 3 - Session 2 Getting Started Flash IDE

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

Computer Animationwith Flash CS3 & ActionScript 3.0

3

ActionScript and the Flash Authoring Tool

• Write ActionScript in Flash

• Timeline Script

• Accessing Created Symbol Instances

• New Event Handling in AS3

4

Write ActionScript in Flash (1)

Tools for Writing Code

1. Flash authoring tool: Adobe Flash CS32. Adobe Flex Builder 2 (an IDE)3. Notepad + Flex 2 SDK

5

Write ActionScript in Flash (2)

• To write AS on Timeline:

1. Click on a key frame and then press F9.2.

6

Timeline Script (for AS3.0)

Methods:

• play();

• stop();

• gotoAndPlay();

• gotoAndStop();

• nextFrame();

• prevFrame();

Properties

• currentFrame

• currentLabel

• currentLabels

• totalFrames

7

Accessing Created Symbol Instances (1)

1. Create a symbol: MovieClip or SimpleButton.

2. Create an instance by dragging it from the library to the stage.

3. Input a name to every instance, say, movie1 and button1. After that, you can call these names in the AS.

4. Click on a keyframe and write code:

8

Accessing Created Symbol Instances (2)

• Properties:

movie1.x = 20; //set x locationmovie1.y = 40; // set y locationmovie1.width = 100; // set new widthmovie1.height = 200; // set new height

9

Accessing Created Symbol Instances (3)

Where these properties came from?

• In AS3, all display objects are inherited from DisplayObject class.

• movie1 is also DisplayObject so it can use every properties and methods of DisplayObject class.

• For more details, click Help menu ->

-> ActionScript 3.0 Language and Component Reference-> All Classes

-> DisplayObject

10

New Event Handling in AS3 (1)

• AS3 changes the event handling, eg. Click on buttons, to a new machanism.

– on ()– onClipEvent()– .onload– addListener()– UIEventDispatcher()

.addEventListener()

11

New Event Handling in AS3 (2)

How to make a button clickable?

1. Create a symbol: Movie Clip or Button.

2. Create an instance by dragging it from the library to the stage.

3. Input a name to every instance, say, movie1 and button1.

4. Click on a keyframe and write code:

(Note in AS3, we can never write codes on buttons anymore. We MUST write these on the keyframe.)

12

New Event Handling in AS3 (2)

• Full Syntax:

instanceName.addEventListener(type, listener, useCapture, priority, useWeakReference)

• Minimized Syntax:

instanceName.addEventListener(type,listener);

• Example:

playButton.addEventListener(MouseEvent.CLICK, onPlayButtonClick);

13

New Event Handling in AS3 (3)

button1.addEventListener(MouseEvent.CLICK, onButton1Click);

function onButton1Click(e:MouseEvent):void{

trace("button 1 Clicked");

}

movie1.addEventListener(MouseEvent.CLICK, onMovie1Click);

function onMovie1Click(e:MouseEvent):void{

trace("Movie 1 Clicked");

}

14

Exercise

• Make a pictures slideshow (SlideShow.fla)

15

Solution (1)

1. Open a Flash file (AS3.0)

2. Import pics to library (File->Import)

3. Convert the pics to Movie Clip (Optional)

4. Make keyframes and place a pic to every Keyframe

16

Solution (2)

5. Create a button symbol and put it in a new layer

6. Make 2 instances (next, prev) from the button symbol

7. Give an instance name “nextButton” and another one “previousButton”

17

Solution (3)

• Create a new layer and name it, say, “AS3”

• Write code the keyframe of the AS3 layer

18

Solution (4) – Code AS3.0

1. stop();

2. nextButton.addEventListener(MouseEvent.CLICK, onNextButtonClicked);

3. previousButton.addEventListener(MouseEvent.CLICK, onPreviousButtonClicked);

4. function onNextButtonClicked(e:MouseEvent):void {

5. if (currentFrame == totalFrames) {

6. gotoAndStop(1);

7. } else {

8. nextFrame();

9. }

10.}

11. function onPreviousButtonClicked(e:MouseEvent):void {

12. if (currentFrame == 1) {

13. gotoAndStop(totalFrames);

14. } else {

15. prevFrame();

16. }

17.}