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_filename”

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

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

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

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

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.fla
• 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 satisfied?
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://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

Q &A

Thanks