Coding Flash : ActionScript(3.0) Tutorial

14,370 views
13,854 views

Published on

I use the slide to give a tutorial of ActionScript in the freshman training course of Intelligent Agent Laboratory in Computer Science Department of National Taiwan University. It is the second session of the Flash-ActionScript-Flex class.

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
14,370
On SlideShare
0
From Embeds
0
Number of Embeds
337
Actions
Shares
0
Downloads
0
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Coding Flash : ActionScript(3.0) Tutorial

  1. 1. Coding Flash : ActionScript(3.0) Tutorial Pei-Yao Hung ( ) UbicompLab, CSIE, NTU peiyaoh@gmail.com http://peiyaoh.blogspot.com/
  2. 2. Outline • ActionScript Basics • Interface & Animation • Reference
  3. 3. ActionScript Basics
  4. 4. Basics I • Variable Declaration : • var i:Number; • Flow Control • for, if-else, ... • Code Using • include “your_code_filename”
  5. 5. Basic II • Function Declaration • function MyFunction(i:Number):Number • function function_name(parameter: parameter_type): return_value_type • Command-line Message Output • trace(“Print message : ” + your_msg)
  6. 6. Basic III • Class, Package Using • import your_class_name • Inherit • a_class_name extends b_class_name • Return Value • return return_value
  7. 7. Sample Code List • HelloWorld.*: use code in .fla • HelloWorld2.*: use “include” to use .as • HelloWorld3.*: use “import” to use .as • HelloWorld4.*: use “extends” to use .as
  8. 8. Interface & Animation
  9. 9. DisplayObject Components you can see
  10. 10. Display Object Hierarchy I • All the display objects on the screen are organized through parent - child relationship (start from “root”) • Only display objects in the display hierarchy will be displayed • Children work as a group( under same parent ) with parent. ex. move, resize ...
  11. 11. Display Object Hierarchy II Parent’s Parent Parent Child Child
  12. 12. Display Object Hierarchy III • Code : use parent.addChild(child) to form the parent-child relationship • The last added child is the top most child you can see (with the biggest z-index) • Demo : ParentChild.fla
  13. 13. Interaction Respond to the Event
  14. 14. Event I • MouseEvent • Down, Move, Up, Click ... • KeyboardEvent • Down, UP, ...
  15. 15. Event II • Registers to event with event handler • addEventListener(event:String, eventHandler) • Unregisters event handler to event • removeEventListener(event:String, eventHandler) • Demo : ParentChild.fla
  16. 16. MovieClip Display Object container with canvas and frames
  17. 17. MovieClip I • Basic Property • x, y, width, height, rotation • scaleX, scaleY • mouseX, mouseY • alpha, visible • Demo : ParentChild.fla
  18. 18. MovieClip II • Use property “graphics” to draw line • lineStyle() : line setting • moveTo() : moves your pen • lineTo() : draws the line (start from where your pen is) • Demo : MovieClipCanvas.fla
  19. 19. MovieClip III • Use property “graphics” to fill region • beginFill() : fill setting • Draw line as border of the region • endFill() : fill the region • clear() : clear your drawing and setting • Demo : MovieClipCanvas.fla
  20. 20. MovieClip IV • Detect collision between movieclip • mc1.hitTestObject( mc2 ) • check if bounding box overlapped • mc1.hitTestPoint( x, y, shapFlag:boolean) • use shapFlag to determine whether to check the actual pixel instead of bounding box.
  21. 21. MovieClip V • Play with Scene, Frame • gotoAndPlay(frame_number, "scene_name"); • stop() : stop in the current frame • Demo : BatBirdGame.fla • Scene, Frame, library component extends class
  22. 22. There are still many useful classes ...
  23. 23. Useful Classes • SharedObject : act like cookie • Mask : reveal only some part of display object • Timer : do things periodically • TransitionManager : apply some typical animation without too much effort
  24. 24. Library Other talented developers already done them
  25. 25. Other Library I • as3corelib : Conatins png, jpeg encoder, ... • http://code.google.com/p/as3corelib/ • papervision3d : 3D engine • http://code.google.com/p/papervision3d/
  26. 26. Other Library II • Adobe AIR : Build Desktop Application • http://www.adobe.com/products/air/ • mdm : Build Executable (.exe) • http://www.multimedia.com/
  27. 27. Still not satisfied? Find other learning resource & reference
  28. 28. Reference Books • Essential ActionScript 3.0 • • ActionScript 3.0 Cookbook ( ) •
  29. 29. • Flash CS3 ActionScript3.0 • • Flash / ActionScript • ActionScript 3.0 • API ... ) ( ...
  30. 30. Reference Webpages I • Flash Help (in your hard disk) • ActionScript 3.0 Language and Components Reference • Programming ActionScript 3.0 • Adobe AIR: • http://help.adobe.com/en_US/AS3LCR/ Flash_10.0/index.html
  31. 31. Reference Webpages II • Papervision3d • http://www.papervision3d.org/docs/as3/ • MDM • http://multidmedia.com/support/livedocs/
  32. 32. Reference Blogs • My Flash Note : http://flashpeiyaoh.blogspot.com/ • http://qops.blogspot.com/feeds/posts/default • http://ticore.blogspot.com/feeds/posts/default • http://erinylin.blogspot.com/feeds/posts/default • http://www.luar.com.hk/flashbook/index.rdf • http://blog.yam.com/rss.php?blog_id=milkmidi&ver=2.0 • http://benbenstudio.blogspot.com/feeds/posts/default • http://diary.tw/allenliao/index.xml
  33. 33. Q &A
  34. 34. Thanks

×