Coding Flash : ActionScript(3.0) Tutorial

Coding Flash : ActionScript(3.0) Tutorial Pei-Yao Hung ( ) UbicompLab, CSIE, NTU peiyaoh@gmail.com http://peiyaoh.blogspot.com/

Outline • ActionScript Basics • Interface & Animation • Reference

ActionScript Basics

Basics I • Variable Declaration : • var i:Number; • Flow Control • for, if-else, ... • Code Using • include “your_code_ﬁlename”

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)

Basic III • Class, Package Using • import your_class_name • Inherit • a_class_name extends b_class_name • Return Value • return return_value

Sample Code List • HelloWorld.*: use code in .ﬂa • HelloWorld2.*: use “include” to use .as • HelloWorld3.*: use “import” to use .as • HelloWorld4.*: use “extends” to use .as

Interface & Animation

DisplayObject Components you can see

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

Display Object Hierarchy II Parent’s Parent Parent Child Child

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.ﬂa

Interaction Respond to the Event

Event I • MouseEvent • Down, Move, Up, Click ... • KeyboardEvent • Down, UP, ...

Event II • Registers to event with event handler • addEventListener(event:String, eventHandler) • Unregisters event handler to event • removeEventListener(event:String, eventHandler) • Demo : ParentChild.ﬂa

MovieClip Display Object container with canvas and frames

MovieClip I • Basic Property • x, y, width, height, rotation • scaleX, scaleY • mouseX, mouseY • alpha, visible • Demo : ParentChild.ﬂa

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.ﬂa

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

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.

MovieClip V • Play with Scene, Frame • gotoAndPlay(frame_number, "scene_name"); • stop() : stop in the current frame • Demo : BatBirdGame.ﬂa • Scene, Frame, library component extends class

There are still many useful classes ...

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

Library Other talented developers already done them

Other Library I • as3corelib : Conatins png, jpeg encoder, ... • http://code.google.com/p/as3corelib/ • papervision3d : 3D engine • http://code.google.com/p/papervision3d/

Other Library II • Adobe AIR : Build Desktop Application • http://www.adobe.com/products/air/ • mdm : Build Executable (.exe) • http://www.multimedia.com/

Still not satisﬁed? Find other learning resource & reference

Reference Books • Essential ActionScript 3.0 • • ActionScript 3.0 Cookbook ( ) •

• Flash CS3 ActionScript3.0 • • Flash / ActionScript • ActionScript 3.0 • API ... ) ( ...

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

Reference Webpages II • Papervision3d • http://www.papervision3d.org/docs/as3/ • MDM • http://multidmedia.com/support/livedocs/

Reference Blogs • My Flash Note : http://ﬂashpeiyaoh.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/ﬂashbook/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

Thanks

http://flashpeiyaoh.blogspot.com	60
http://www.slideshare.net	20
http://newstudentsproject.wordpress.com	1

Coding Flash : ActionScript(3.0) Tutorial

by PEI-YAO HUNG on Aug 29, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 81

Statistics

Coding Flash : ActionScript(3.0) Tutorial — Presentation Transcript