Computer Animation with Flash CS3

1
Computer Animationwith 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
ActionScript and the Flash Authoring Tool (Cont.)

• Computer Animationwith Flash CS3 ActionScript
  3.0

3
ActionScript and the Flash Authoring Tool (Cont.)

• Linked Classes for Movie Clip Symbols
• Instantiating Symbols via ActionScript
• The Document Class

4
Linked Classes for Movie Clip Symbols (1)

• In ActionScript
• Almost everything, except graphic, could be a
  class (including Button, Movie Clip, Sound etc).
• Every instances are objects

5
Linked Classes for Movie Clip Symbols (2)

• Q. But how to make the symbols be Classes?
• A. You have to link it. To link it, please
• Click on an existing symbol,e.g. Rectangle in
  Library
• Right Click -gt Linkage
• Then check on Export for ActionScript -gt OK -gt
  OK

6
Instantiating Symbols via ActionScript

• As you know, every symbol can be classes.
• After you created a linked class, you can
  instantiate by creating object from the class.
• var rec1mvRectangle new mvRectangle()
• rec1.x 200
• rec1.y 50
• addChild(rec1) //Add an object to stage
• To instantiate(v) To create instance

7
Important Codes (1)

• To create objects
• var starmvStar new mvStar() // Movie Clip
• var shortgunShortGun new ShortGun() // Sound
• To add the objects to stage
• addChild(star)
• To hide/show mouse cursor
• Mouse.hide() //To hide
• Mouse.show() //To show
• To play sound
• shortgun.play()

8
Important Codes (2)

• To add Event to stage
• stage.addEventListener(MouseEvent.MOUSE_DOWN,
  onMouseDownOnStage)
• Location of Mouse
• mouseX
• mouseY

9
Lab CreateStars

• Create stars in the sky by just clicking.

10
Lab ShootingWall

• Shooting Wall (with Sound)

11
The Document Class (1)

• What is the Document Class?
• - The Document Class is a external ActionScript
  class file (.as) which is linked to Flash
  documents (.fla).
• - It helps to decouple coding from designing.
  That is, you design animations in Flash (.fla)
  whereas you code in another external class file
  (.as).
• - It enables you to use OOP features easily.
• - Note that it is available for AS 3.0 only.

12
The Document Class (2)

• How to create the Document Class?
• Create a new Flash file (AS3.0).
• Create animations. But you should create button
  or MovieClip symbols for every part of
  animations. Then save the file, say, FlashEx.fla.
• Next, create AS file by clicking on File -gtNew
  -gtActionScript File.
• Write your codes. Then save it, ASEx.as.

13
The Document Class (3)

• Please switch back to FlashEx.fla.
• On the Flash file property, you will see a
  textbox called Document Class.
• Please type your AS file name, ASEx.

14
The Document Class (3) - Sample

• 1. Open AS file HelloWorld.as
• package
• import flash.display.Sprite
• import flash.events.MouseEvent
• public class HelloWorld extends Sprite
• public function HelloWorld()
• stage.addEventListener(MouseEvent.MOUSE_DOWN,
• mouseDown)
• private function mouseDown (eMouseEvent)void
  
• trace("Hello World")

15
The Document Class (3) - Sample

• Open Flash (AS3.0) file
• On properties panel and in the Document Class,
  please write HelloWorld

16
Lab Exercise

• To rebuild the exercise CreateStars and
  ShootingWall by using document class.
• Hint
• In Flash file, create only symbols and then link
  them to be classes.
• In AS file, write code.