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.

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(event:MouseEvent):void { bicycle.play(); } startButton.addEventListener(MouseEvent.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(event:Event):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: 1. First you instantiate a MovieClip instance directly using the new keyword. 1. 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 1. Select the symbol in the Library panel and open its Symbol Properties dialog box (if necessary, activate the Advanced settings). 2. 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 3. 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. 4. 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 6. 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 c:Circle = 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 totalCircles:uint = 10; var i:uint; for (i = 0; i < totalCircles; i++) { //Create a new Circle instance. var c:Circle = 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.colorTransform = 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 red:Number = (Math.random() * 512) - 255; var green:Number = (Math.random() * 512) - 255; var blue:Number = (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: 1. Create a new URLRequest object with the url of the file. 2. Create a new Loader object. 3. Call the Loader object's load() method, passing the URLRequest instance as a parameter. 4. 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 request:URLRequest = new ¬URLRequest(" var loader:Loader = new Loader(); loader.load(request); addChild(loader);