actionscript 3 - session 2 getting started flash ide
Post on 21-Oct-2014
3.273 views
DESCRIPTION
Actionscript 3 - Session 2 Getting Started Flash IDETaught by Oum Saokosal, Head of Information Technology, National Polytechnic Institute of CambodiaTRANSCRIPT
![Page 1: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/1.jpg)
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
![Page 2: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/2.jpg)
2
ActionScript and the Flash Authoring Tool p.821
Computer Animationwith Flash CS3 & ActionScript 3.0
![Page 3: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/3.jpg)
3
ActionScript and the Flash Authoring Tool
• Write ActionScript in Flash
• Timeline Script
• Accessing Created Symbol Instances
• New Event Handling in AS3
![Page 4: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/4.jpg)
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
![Page 5: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/5.jpg)
5
Write ActionScript in Flash (2)
• To write AS on Timeline:
1. Click on a key frame and then press F9.2.
![Page 6: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/6.jpg)
6
Timeline Script (for AS3.0)
Methods:
• play();
• stop();
• gotoAndPlay();
• gotoAndStop();
• nextFrame();
• prevFrame();
Properties
• currentFrame
• currentLabel
• currentLabels
• totalFrames
![Page 7: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/7.jpg)
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:
![Page 8: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/8.jpg)
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
![Page 9: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/9.jpg)
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
![Page 10: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/10.jpg)
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()
![Page 11: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/11.jpg)
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.)
![Page 12: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/12.jpg)
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);
![Page 13: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/13.jpg)
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");
}
![Page 14: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/14.jpg)
14
Exercise
• Make a pictures slideshow (SlideShow.fla)
![Page 15: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/15.jpg)
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
![Page 16: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/16.jpg)
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”
![Page 17: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/17.jpg)
17
Solution (3)
• Create a new layer and name it, say, “AS3”
• Write code the keyframe of the AS3 layer
![Page 18: Actionscript 3 - Session 2 Getting Started Flash IDE](https://reader033.vdocument.in/reader033/viewer/2022061106/5445ac77afaf9feb2a8b4616/html5/thumbnails/18.jpg)
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.}