Flash Actionscript Working with Movieclips

1
Flash Actionscript Working with Movieclips
2
The MovieClip Class

• The MovieClip class is the core class for
  animation and movie clip symbols created in
  Flash.
• We will look in more detail at
• How to control movie clip playback
• How to create a movie clip dynamically.

3
Working with Movieclips

• Movieclips are a key element for people who
  create animated content with the Flash authoring
  tool and want to control that content with
  ActionScript.
• Whenever you create a movieclip symbol in Flash,
  Flash adds the symbol to the library of that
  Flash document.
• By default, this symbol becomes an instance of
  the MovieClip class, and as such has the
  properties and methods of the MovieClip class.

4
Working with Movieclips

• When an instance of a movie clip symbol is placed
  on the Stage, the movie clip automatically
  progresses through its timeline (if it has more
  than one frame) unless its playback is altered
  using ActionScript.
• It is this timeline that distinguishes the
  MovieClip class, allowing you to create animation
  through motion or shape tweens through the Flash
  authoring tool.
• By contrast, with a display object that is an
  instance of the Sprite class, you can create
  animation only by programmatically changing the
  object's values.

5
Working with Movieclips

• In previous versions of ActionScript, the
  MovieClip class was the base class of all
  instances on the Stage.
• In ActionScript 3.0, a movieclip is only one of
  many display objects that can appear on the
  screen.
• If a timeline is not necessary for the function
  of a display object, using the Shape class or
  Sprite class instead of the MovieClip class may
  improve rendering performance.

6
Working with MovieClip Objects

• When you publish a SWF file, Flash converts all
  movie clip symbol instances on the Stage to
  MovieClip objects.
• You can make a movie clip symbol available to
  ActionScript by giving it an instance name in the
  Instance Name field of the Property inspector.
• When the SWF file is created, Flash generates the
  code that creates the MovieClip instance on the
  Stage and declares a variable using the instance
  name.

7
Working with MovieClip Objects

• If you have named movie clips that are nested
  inside other named movie clips, those child movie
  clips are treated like properties of the parent
  movie clip - you can access the child movie clip
  using dot syntax.
• E.g., if a movie clip with the instance name
  childClip is nested within another clip with the
  instance name parentClip, you can make the child
  clip's timeline animation play by calling this
  code

parentClip.childClip.play()
8
Controlling Movieclip Playback

• Flash uses the metaphor of a timeline to convey
  animation or a change in state.
• Any visual element that employs a timeline must
  be either a MovieClip object or extend from the
  MovieClip class.
• While ActionScript can direct any movie clip to
  stop, play, or go to another point on the
  timeline, it cannot be used to dynamically create
  a timeline or add content at specific frames
  this is only possible using the Flash authoring
  tool.

9
Controlling Movieclip Playback

• When a MovieClip is playing, it progresses along
  its timeline at a speed dictated by the frame
  rate of the SWF file. Alternatively, you can
  override this setting by setting the
  Stage.frameRate property in ActionScript.

10
Playing and Stopping Playback

• The play() and stop() methods allow basic control
  of a movie clip across its timeline.
• E.g, suppose you have a movie clip symbol on the
  Stage which contains an animation of a bicycle
  moving across the screen, with its instance name
  set to bicycle. If the following code is attached
  to a keyframe on the main timeline,
• the bicycle will not move (its animation will
  not play).

bicycle.stop()
11
Playing and Stopping Playback

• The bicycle's movement could start through some
  other user interaction.
• E.g., if you had a button named startButton, the
  following code on a keyframe on the main timeline
  would make it so that clicking the button causes
  the animation to play

function playAnimation(eventMouseEvent)void
bicycle.play() startButton.addEventListener(M
ouseEvent.CLICK, playAnimation)
12
Fast-forwarding and Rewinding

• You can also move the playhead forward or
  backward along the timeline manually by using the
  nextFrame() and prevFrame() methods.
• Calling either of these methods stops playback
  and moves the playhead one frame forward or
  backward, respectively.
• Using the play() method is analogous to calling
  nextFrame() every time the movie clip object's
  enterFrame event is triggered.

13
Fast-forwarding and Rewinding

• Along these lines, you could make the bicycle
  movie clip play backwards by creating an event
  listener for the enterFrame event and telling
  bicycle to go to its previous frame in the
  listener function

// This function is called when the enterFrame
event is triggered, meaning // it's called once
per frame. function everyFrame(eventEvent)void
if (bicycle.currentFrame 1)
bicycle.gotoAndStop(bicycle.totalFrames)
else bicycle.prevFrame()
bicycle.addEventListener(Event.ENTER_FRAME,
everyFrame)
14
Fast-forwarding and Rewinding

• In normal playback, if a movie clip contains more
  than a single frame, it will loop indefinitely
  when playing that is, it will return to Frame 1
  after its final frame.
• When you use prevFrame() or nextFrame(), this
  behaviour does not happen automatically (calling
  prevFrame() when the playhead is on Frame 1
  doesn't move the playhead to the last frame).
• The if condition in the example checks to see if
  the playhead has progressed backwards to the
  first frame, and sets the playhead ahead to its
  final frame, effectively creating a continuous
  loop of the movie clip playing backwards.

15
Jumping to a Different Frame and using Frame
Labels

• Sending a movie clip to a new frame is a simple
  affair. Calling either gotoAndPlay() or
  gotoAndStop() will jump the movie clip to the
  frame number specified as a parameter.
• Alternatively, you can pass a string that matches
  the name of a frame label.
• Any frame on the timeline can be assigned a
  label. To do this, select a frame on the timeline
  and then enter a name in the Frame Label field on
  the Property inspector.

16
Jumping to a Different Frame and using Frame
Labels

• The advantages of using frame labels are evident
  when creating a complex movie clip.
• When the number of frames, layers, and tweens in
  an animation becomes large, consider labeling
  important frames with explanatory descriptions
  that represent shifts in the behaviour of the
  movie clip (for example, "off," "walking," or
  "running").

17
Jumping to a Different Frame and using Frame
Labels

• This improves code readability and also provides
  flexibility, since ActionScript calls that go to
  a labeled frame are pointers to a single
  reference--the label--rather than a specific
  frame number.
• If later on you decide to move a particular
  segment of the animation to a different frame,
  you will not need to change your ActionScript
  code as long as you keep the same label for the
  frames in the new location.

18
Jumping to a Different Frame and using Frame
Labels

• In order to get access to the FrameLabel
  instances associated with a movie clip instance,
  the MovieClip class includes two properties that
  directly return FrameLabel objects.
• The currentLabels property returns an array that
  consists of all FrameLabel objects across the
  entire timeline of a movie clip. The currentLabel
  property returns a single FrameLabel object
  representing the frame label encountered most
  recently along the timeline.

19
Jumping to a Different Frame and using Frame
Labels

• Suppose you were creating a movie clip named
  robot and had labeled the various states of its
  animation. You could set up a condition that
  checks the currentLabel property to access the
  current state of robot

if (robot.currentLabel "walking) // do
something
20
Working with Scenes

• You can use scenes to demarcate a series of
  timelines that a SWF file will progress through.
• Using the second parameter of the gotoAndPlay()
  or gotoAndStop() methods, you can specify a scene
  to send the playhead to. All FLA files start with
  only the initial scene, but you can create new
  scenes.
• The following code uses the gotoAndPlay() method
  to direct the playhead to the frame labeled
  "intro" in the scene named "Scene 12"

gotoAndPlay("intro", "Scene 12")
21
Working with Scenes

• Using scenes is not always the best approach
  because scenes have a number of drawbacks.
• A Flash document that contains multiple scenes
  can be difficult to maintain, particularly in
  multiauthor environments.
• Multiple scenes can also be inefficient in
  bandwidth, because the publishing process merges
  all scenes into a single timeline. This causes a
  progressive download of all scenes, even if they
  are never played.
• For these reasons, use of multiple scenes is
  often discouraged except for organizing lengthy
  multiple timeline-based animations.

22
Creating MovieClip Objects with ActionScript

• One way of adding content to the screen in Flash
  is by dragging assets from the library onto the
  Stage, but that is not the only workflow.
• For complex projects, experienced developers
  commonly prefer to create movie clips
  programatically.
• This approach brings several advantages easier
  re-use of code, faster compile-time speed, and
  more sophisticated modifications that are
  available only to ActionScript.

23
Creating MovieClip Objects with ActionScript

• The display list API of ActionScript 3.0
  streamlines the process of dynamically creating
  MovieClip objects
• First you instantiate a MovieClip instance
  directly using the new keyword.
• Then you add it to the display list.
• Separating out these two provides flexibility and
  simplicity without sacrificing control.

24
Creating MovieClip Objects with ActionScript

• So when you create a movie clip (or any other
  display object) instance programatically, it is
  not visible on the screen until it is added to
  the display list by calling the addChild() or the
  addChildAt() method on a display object
  container.
• This allows you to create a movie clip, set its
  properties, and even call methods before it is
  rendered to the screen.

25
Exporting Library Symbols for ActionScript

• By default, instances of movie clip symbols in a
  Flash document's library cannot be dynamically
  created.
• This is because each symbol that is exported for
  use in ActionScript adds to the size of your SWF
  file, and it's recognized that some symbols might
  not be intended for use on the stage.
• For this reason, in order to make a symbol
  available in ActionScript, you must specify that
  the symbol should be exported for ActionScript.

26
To Export a Symbol for ActionScript

• Select the symbol in the Library panel and open
  its Symbol Properties dialog box (if necessary,
  activate the Advanced settings).
• In the Linkage section, activate the Export for
  ActionScript checkbox. This will activate the
  Class and Base Class fields.

27
To Export a Symbol for ActionScript

• By default, the Class field is populated with the
  symbol name, with spaces removed (E.g., a symbol
  named "Tree House" becomes "TreeHouse"). To
  specify that the symbol should use a custom class
  for its behaviour, enter the full name of the
  class including its package.
• If you want to be able to create instances of the
  symbol in ActionScript, but don't need to add any
  additional behaviour, you can leave the class
  name as-is.

28
To Export a Symbol for ActionScript

• Press the OK button to save the changes. At this
  point, if Flash can't find an external
  ActionScript file with a definition for the
  specified class (for instance, if you didn't need
  to add additional behaviour for the symbol), a
  warning is displayed
• A definition for this class could not be found
  in the classpath, so one will be automatically
  generated in the SWF file upon export.
• Disregard this warning if your library symbol
  does not require unique functionality beyond the
  functionality of the MovieClip class.

29
Exporting Library Symbols for ActionScript

• If you do not provide a class for your symbol,
  Flash will create a class for your symbol
  equivalent to this one

package import flash.display.MovieClip
public class ExampleMovieClip extends MovieClip
public function ExampleMovieClip()

30
Exporting Library Symbols for ActionScript

• If you do want to add extra ActionScript
  functionality to your symbol, add the appropriate
  properties and methods to this structure.
• E.g, suppose you have a movie clip symbol
  containing a circle of 50 pixels width and 50
  pixels height, and the symbol is specified to be
  exported for ActionScript with a class named
  Circle. The following code, when placed in a
  Circle.as file, extends the MovieClip class and
  provides the symbol with the additional methods
  getArea() and getCircumference()

31
Exporting Library Symbols for ActionScript
package import flash.display.MovieClip
public class Circle extends MovieClip
public function Circle() public
function getArea()Number // The
formula is Pi times the radius squared.
return Math.PI Math.pow((width / 2), 2)
public function getCircumference()Number
// The formula is Pi times the diameter.
return Math.PI width
32
Exporting Library Symbols for ActionScript

• The following code, placed on a keyframe on Frame
  1 of the Flash document, will create an instance
  of the symbol and display it on the screen

var cCircle new Circle() addChild(c)
trace(c.width) trace(c.height)
trace(c.getArea()) trace(c.getCircumference())

33
Exporting Library Symbols for ActionScript

• This code demonstrates ActionScript-based
  instantiation as an alternative to dragging
  individual assets onto the Stage.
• It creates a circle that has all of the
  properties of a movie clip and also has the
  custom methods defined in the Circle class.
• ActionScript-based instantiation is powerful,
  because it allows you to dynamically create large
  quantities of instances that would be tedious to
  arrange manually. It is also flexible, because
  you can customize each instance's properties as
  it is created.

34
Exporting Library Symbols for ActionScript

• E.g. try using a loop to dynamically create
  several Circle instances.
• With the Circle symbol and class described
  previously in your Flash document's library,
  place the following code on a keyframe on Frame
  1

35
Exporting Library Symbols for ActionScript
import flash.geom.ColorTransform var
totalCirclesuint 10 var iuint for (i 0
i lt totalCircles i) //Create a new Circle
instance. var cCircle new Circle()
//Place the new Circle at an x coordinate that
will space the //circles evenly across the
Stage. c.x (stage.stageWidth / totalCircles)
i //Place the Circle instance at the
vertical centre of the Stage. c.y
stage.stageHeight / 2 //Change the Circle
instance to a random colour c.transform.colorTran
sform getRandomColor() //Add the Circle
instance to the current timeline. addChild(c)

36
Exporting Library Symbols for ActionScript
function getRandomColor()ColorTransform
//Generate random values for the red, green,
and blue colour //channels. var redNumber
(Math.random() 512) - 255 var greenNumber
(Math.random() 512) - 255 var blueNumber
(Math.random() 512) - 255 //Create and
return a ColorTransform object with the random
//colours. return new ColorTransform(1, 1, 1,
1, red, green, blue, 0)
37
Exporting Library Symbols for ActionScript

• This demonstrates how you can create and
  customize multiple instances of a symbol quickly
  using code.
• Each instance is positioned based on the current
  count within the loop, and each instance is given
  a random colour by setting its transform property
  (which Circle inherits by extending the MovieClip
  class).

38
Loading an External SWF File

• SWF files are loaded using the Loader class. To
  load an external SWF file, your ActionScript
  needs to do 4 things
• Create a new URLRequest object with the url of
  the file.
• Create a new Loader object.
• Call the Loader object's load() method, passing
  the URLRequest instance as a parameter.
• Call the addChild() method on a display object
  container (such as the main timeline of a Flash
  document) to add the Loader instance to the
  display list.

39
Loading an External SWF File

• The code looks like this
• This same code can be used to load an external
  image file such as a JPEG, GIF, or PNG image, by
  specifying the image file's url rather than a SWF
  file's url.

var requestURLRequest new URLRequest("http//w
ww.yourdomain.com/externalSwf.swf") var
loaderLoader new Loader() loader.load(request
) addChild(loader)