Flash Actionscript Working with Movieclips - PowerPoint PPT Presentation

1 / 39
About This Presentation
Title:

Flash Actionscript Working with Movieclips

Description:

The MovieClip class is the core class for animation and movie ... You can use scenes to demarcate a series of timelines that a SWF file will progress through. ... – PowerPoint PPT presentation

Number of Views:110
Avg rating:3.0/5.0
Slides: 40
Provided by: Nina76
Category:

less

Transcript and Presenter's Notes

Title: 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)
Write a Comment
User Comments (0)
About PowerShow.com