Embed Size (px)
DESCRIPTION
Actionscript 3 - Session 2 Getting Started Flash IDETaught by Oum Saokosal, Head of Information Technology, National Polytechnic Institute of Cambodia
Citation preview
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.}
