KEMBAR78
Coding Flash : ActionScript(3.0) Tutorial | KEY
Coding Flash :
ActionScript(3.0) Tutorial
            Pei-Yao (Perry) Hung

               peiyaoh@umich.edu
  School of Information, University of Michigan
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 (Key:
  Up,Down,Left,Right,Space,Shift,b,l,a,A,v,r)
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
 • Breadth
• ActionScript 3.0 Cookbook
 • Quick manual, classic sample code
Reference Webpages I
• Flash Help
 • 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

Coding Flash : ActionScript(3.0) Tutorial

  • 1.
    Coding Flash : ActionScript(3.0)Tutorial Pei-Yao (Perry) Hung peiyaoh@umich.edu School of Information, University of Michigan
  • 2.
    Outline • ActionScript Basics •Interface & Animation • Reference
  • 3.
  • 4.
    Basics I • VariableDeclaration : • var i:Number; • Flow Control • for, if-else, ... • Code Using • include “your_code_filename”
  • 5.
    Basic II • FunctionDeclaration • function MyFunction(i:Number):Number • function function_name(parameter: parameter_type): return_value_type • Command-line Message Output • trace(“Print message : ” + your_msg)
  • 6.
    Basic III • Class,Package Using • import your_class_name • Inherit • a_class_name extends b_class_name • Return Value • return return_value
  • 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.
  • 9.
  • 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.
    Display Object Hierarchy II Parent’s Parent Parent Child Child
  • 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 (Key: Up,Down,Left,Right,Space,Shift,b,l,a,A,v,r)
  • 13.
  • 14.
    Event I • MouseEvent • Down, Move, Up, Click ... • KeyboardEvent • Down, UP, ...
  • 15.
    Event II • Registersto event with event handler • addEventListener(event:String, eventHandler) • Unregisters event handler to event • removeEventListener(event:String, eventHandler) • Demo : ParentChild.fla
  • 16.
    MovieClip Display Object containerwith canvas and frames
  • 17.
    MovieClip I • BasicProperty • x, y, width, height, rotation • scaleX, scaleY • mouseX, mouseY • alpha, visible • Demo : ParentChild.fla
  • 18.
    MovieClip II • Useproperty “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.
    MovieClip III • Useproperty “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.
    MovieClip IV • Detectcollision 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.
    MovieClip V • Playwith Scene, Frame • gotoAndPlay(frame_number, "scene_name"); • stop() : stop in the current frame • Demo : BatBirdGame.fla • Scene, Frame, library component extends class
  • 22.
    There are stillmany useful classes ...
  • 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.
  • 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.
    Other Library II •Adobe AIR : Build Desktop Application • http://www.adobe.com/products/air/ • mdm : Build Executable (.exe) • http://www.multimedia.com/
  • 27.
    Still not satisfied? Findother learning resource & reference
  • 28.
    Reference Books • EssentialActionScript 3.0 • Breadth • ActionScript 3.0 Cookbook • Quick manual, classic sample code
  • 29.
    Reference Webpages I •Flash Help • 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
  • 30.
    Reference Webpages II •Papervision3d • http://www.papervision3d.org/docs/as3/ • MDM • http://multidmedia.com/support/livedocs/
  • 31.
    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
  • 32.
  • 33.