Actionscript 3 - Session 2 Getting Started Flash IDE

2,770 views

Published on

Actionscript 3 - Session 2 Getting Started Flash IDE
Taught by Oum Saokosal, Head of Information Technology, National Polytechnic Institute of Cambodia

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,770
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
166
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Actionscript 3 - Session 2 Getting Started Flash IDE

  1. 1. Computer Animation with 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. 2. ActionScript and the Flash Authoring Tool p.821 Computer Animation with Flash CS3 & ActionScript 3.0
  3. 3. ActionScript and the Flash Authoring Tool <ul><li>Write ActionScript in Flash </li></ul><ul><li>Timeline Script </li></ul><ul><li>Accessing Created Symbol Instances </li></ul><ul><li>New Event Handling in AS3 </li></ul>
  4. 4. Write ActionScript in Flash (1) <ul><li>Tools for Writing Code </li></ul><ul><ul><li>Flash authoring tool: Adobe Flash CS3 </li></ul></ul><ul><ul><li>Adobe Flex Builder 2 (an IDE) </li></ul></ul><ul><ul><li>Notepad + Flex 2 SDK </li></ul></ul>
  5. 5. Write ActionScript in Flash (2) <ul><li>To write AS on Timeline: </li></ul><ul><ul><li>Click on a key frame and then press F9. </li></ul></ul>
  6. 6. Timeline Script (for AS3.0) <ul><li>Methods: </li></ul><ul><li>play(); </li></ul><ul><li>stop(); </li></ul><ul><li>gotoAndPlay(); </li></ul><ul><li>gotoAndStop(); </li></ul><ul><li>nextFrame(); </li></ul><ul><li>prevFrame(); </li></ul><ul><li>Properties </li></ul><ul><li>currentFrame </li></ul><ul><li>currentLabel </li></ul><ul><li>currentLabels </li></ul><ul><li>totalFrames </li></ul>
  7. 7. Accessing Created Symbol Instances (1) <ul><li>Create a symbol: MovieClip or SimpleButton. </li></ul><ul><li>Create an instance by dragging it from the library to the stage. </li></ul><ul><li>Input a name to every instance, say, movie1 and button1 . After that, you can call these names in the AS. </li></ul><ul><li>Click on a keyframe and write code: </li></ul>
  8. 8. Accessing Created Symbol Instances (2) <ul><li>Properties: </li></ul><ul><ul><li>movie1.x = 20; //set x location </li></ul></ul><ul><ul><li>movie1.y = 40; // set y location </li></ul></ul><ul><ul><li>movie1.width = 100; // set new width </li></ul></ul><ul><ul><li>movie1.height = 200; // set new height </li></ul></ul>
  9. 9. Accessing Created Symbol Instances (3) <ul><li>Where these properties came from? </li></ul><ul><li>In AS3, all display objects are inherited from DisplayObject class. </li></ul><ul><li>movie1 is also DisplayObject so it can use every properties and methods of DisplayObject class. </li></ul><ul><li>For more details, click Help menu -> </li></ul><ul><ul><li>-> ActionScript 3.0 Language and Component Reference </li></ul></ul><ul><ul><li>-> All Classes </li></ul></ul><ul><ul><li> -> DisplayObject </li></ul></ul>
  10. 10. New Event Handling in AS3 (1) <ul><li>AS3 changes the event handling, eg. Click on buttons, to a new machanism. </li></ul><ul><ul><li>on () </li></ul></ul><ul><ul><li>onClipEvent() </li></ul></ul><ul><ul><li>.onload </li></ul></ul><ul><ul><li>addListener() </li></ul></ul><ul><ul><li>UIEventDispatcher() </li></ul></ul>.addEventListener()
  11. 11. New Event Handling in AS3 (2) <ul><li>How to make a button clickable? </li></ul><ul><li>Create a symbol: Movie Clip or Button. </li></ul><ul><li>Create an instance by dragging it from the library to the stage. </li></ul><ul><li>Input a name to every instance, say, movie1 and button1 . </li></ul><ul><li>Click on a keyframe and write code: </li></ul><ul><li>(Note in AS3, we can never write codes on buttons anymore. We MUST write these on the keyframe.) </li></ul>
  12. 12. New Event Handling in AS3 (2) <ul><li>Full Syntax: </li></ul><ul><li>instanceName . addEventListener (type, listener, useCapture, priority, useWeakReference) </li></ul><ul><li>Minimized Syntax: </li></ul><ul><li>instanceName . addEventListener (type,listener); </li></ul><ul><li>Example: </li></ul><ul><li>playButton. addEventListener ( MouseEvent.CLICK , onPlayButtonClick); </li></ul>
  13. 13. New Event Handling in AS3 (3) <ul><ul><li>button1. addEventListener ( MouseEvent.CLICK , onButton1Click); </li></ul></ul><ul><ul><li>function onButton1Click(e: MouseEvent ): void { </li></ul></ul><ul><ul><li>trace (&quot; button 1 Clicked &quot;); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>movie1. addEventListener ( MouseEvent.CLICK , onMovie1Click); </li></ul></ul><ul><ul><li>function onMovie1Click(e: MouseEvent ): void { </li></ul></ul><ul><ul><li>trace (&quot; Movie 1 Clicked &quot;); </li></ul></ul><ul><ul><li>} </li></ul></ul>
  14. 14. Exercise <ul><li>Make a pictures slideshow (SlideShow.fla) </li></ul>
  15. 15. Solution (1) <ul><li>Open a Flash file (AS3.0) </li></ul><ul><li>Import pics to library (File->Import) </li></ul><ul><li>Convert the pics to Movie Clip (Optional) </li></ul><ul><li>Make keyframes and place a pic to every Keyframe </li></ul>
  16. 16. Solution (2) <ul><li>Create a button symbol and put it in a new layer </li></ul><ul><li>Make 2 instances (next, prev) from the button symbol </li></ul><ul><li>Give an instance name “nextButton” and another one “previousButton” </li></ul>
  17. 17. Solution (3) <ul><li>Create a new layer and name it, say, “AS3” </li></ul><ul><li>Write code the keyframe of the AS3 layer </li></ul>
  18. 18. Solution (4) – Code AS3.0 <ul><li>stop(); </li></ul><ul><li>nextButton. addEventListener ( MouseEvent.CLICK , onNextButtonClicked); </li></ul><ul><li>previousButton. addEventListener ( MouseEvent.CLICK , onPreviousButtonClicked); </li></ul><ul><li>function onNextButtonClicked(e: MouseEvent ): void { </li></ul><ul><li>if ( currentFrame == totalFrames ) { </li></ul><ul><li>gotoAndStop (1); </li></ul><ul><li>} else { </li></ul><ul><li>nextFrame (); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>function onPreviousButtonClicked(e: MouseEvent ):void { </li></ul><ul><li>if ( currentFrame == 1) { </li></ul><ul><li>gotoAndStop ( totalFrames ); </li></ul><ul><li>} else { </li></ul><ul><li>prevFrame (); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>

×