1. MovieClips & Properties Flash ActionScript Introduction to Thomas Lövgren thomas.lovgren@humlab.umu.se

2. MovieClips The MovieClip class is the template for all the properties, methods & events that are part of a MovieClip object The MovieClip class is the template for all the properties, methods & events that are part of a MovieClip object When we create a movie clip, the new instance will inherit properties, methods & events from the MovieClip class When we create a movie clip, the new instance will inherit properties, methods & events from the MovieClip class Every MovieClip object has a timeline (playing independently of the main timeline) Every MovieClip object has a timeline (playing independently of the main timeline) We can move the playhead to a specific point or frame in the MovieClip Timeline We can move the playhead to a specific point or frame in the MovieClip Timeline The Display Properties describes a MovieClip Object’s form The Display Properties describes a MovieClip Object’s form MovieClips could be placed inside each other (nested), which also makes them useful for complex animations MovieClips could be placed inside each other (nested), which also makes them useful for complex animations

3. Creating MovieClips There are basically two ways of creating a movieClip: There are basically two ways of creating a movieClip: Manual: Create a MovieClip symbol (library item) Manual: Create a MovieClip symbol (library item) Dynamic: MovieClip created by code Dynamic: MovieClip created by code Note! The new instance will inherit all properties, methods & events from the base classes, independent of how the MovieClip was created Note! The new instance will inherit all properties, methods & events from the base classes, independent of how the MovieClip was created

4. Creating a MovieClip Symbol Manual (create a MovieClip symbol) Manual (create a MovieClip symbol) 1. Insert new symbol 2. Name the symbol (movieClipName_mc) 3. Draw/make the graphics 4. Open/check the library 5. Drag the symbol from library to the stage 6. Name the instance on main stage (movieClipName_mc) Note! If we make changes to a MovieClip symbol in library, every new instance created from that clip will be changed Note! If we make changes to a MovieClip symbol in library, every new instance created from that clip will be changed

5. Create a MovieClip by code Dynamic (movieClips created by code), in this example we create a new MovieClip instance named my_mc: Dynamic (movieClips created by code), in this example we create a new MovieClip instance named my_mc: var my_mc:MovieClip = new MovieClip(): Tip! Use the movie clip suffix (_mc) Tip! Use the movie clip suffix (_mc) Note! The movie clip will not be shown until we add it to the Display List (more of this later on...) Note! The movie clip will not be shown until we add it to the Display List (more of this later on...)

6. MovieClip Class methods, properties & events Example of some of the MovieClip class’s public methods, properties and events: Example of some of the MovieClip class’s public methods, properties and events: Methods: Methods: gotoAndPlay(), gotoAndStop(), play(), stop() Properties: Properties: currentFrame(), currentLabel(), totalFrames() Events: Events: mouseUp, mouseDown(), rollOver(), rollOut() Note! There are more methods, properties and events for the MovieClip Object Note! There are more methods, properties and events for the MovieClip Object

7. Nested MovieClips & Access We can also nest MovieClips inside another to create complex animations that would be difficult to create on a single timeline We can also nest MovieClips inside another to create complex animations that would be difficult to create on a single timeline We can reach properties, variables, functions from a nested movie clip by using “dot-notation” We can reach properties, variables, functions from a nested movie clip by using “dot-notation” Example of reaching the getData()-function in the second_mc: Example of reaching the getData()-function in the second_mc: first_mc.second_mc.getData(); //function in a nested movieclip To access the root we need to cast it as a MovieClip To access the root we need to cast it as a MovieClip MovieClip(root).gotoAndStop(”video”); //main timeline MovieClip(root).gotoAndStop(”video”); //main timeline Parent will take us up one level: Parent will take us up one level: //we have to cast parent as a movieclip MovieClip(this.parent.parent).my_mc.x = 50; //up two levels

8. MovieClip Coordinates Each MovieClip has a coordinate system in which the origin Each MovieClip has a coordinate system in which the origin (0, 0) is located in the registration point. For the main timeline this is the top left corner Main timeline MovieClip on stage

9. Properties A collection of properties describes the object A collection of properties describes the object Ex. An apple has properties like color, size and position A MovieClip has properties (Display Properties) that we can access and manipulate A MovieClip has properties (Display Properties) that we can access and manipulate xPos = 200 yPos = 200 Height = 300 Color = red

10. Display Properties The Display Properties describes the MovieClip Object’s form The Display Properties describes the MovieClip Object’s form The most common Display Properties, and a migration from AS2 to AS3 is shown below: The most common Display Properties, and a migration from AS2 to AS3 is shown below: Note! The Display Properties are inherits from the DisplayObject class Note! The Display Properties are inherits from the DisplayObject class

11. MovieClip & Properties We can easily manipulate these properties and then change the form and/or position of the MovieClip Object (square_mc) like: We can easily manipulate these properties and then change the form and/or position of the MovieClip Object (square_mc) like: movieClipInstanceName.propertyName = value; square_mc.scaleX = 2; //scale up 200% in x-direction square_mc.x = 650; //move in x-direction to 650 square_mc.rotation = 90; //rotate 90 degrees square_mc.alpha = 0.5; //50% transparency

12. Events & Properties In this example we use a button with an EventListener and a function for rotating a rectangle-clip like: In this example we use a button with an EventListener and a function for rotating a rectangle-clip like: //add listener to button rotate_btn.addEventListener(MouseEvent.CLICK, rotateRectangle); //function for rotating function rotateRectangle(e:MouseEvent):void{ rectangle_mc.rotation += 5; //increase degrees by 5 every click rectangle_mc.rotation += 5; //increase degrees by 5 every click}

13. Properties & Input text We can use an Input text field for changing MovieClip properties on a Mouse press We can use an Input text field for changing MovieClip properties on a Mouse press //add listener to button xPos_btn.addEventListener(MouseEvent.MOUSE_DOWN, xMove); //function for moving box in x-direction function xMove(event:MouseEvent):void{ box_mc.x = Number(xPos_txt.text); //cast input text to number }

14. Drag’n drop With the drag and drop functionality, we can move our MovieClips around by using the mouse With the drag and drop functionality, we can move our MovieClips around by using the mouse //add listener for the mouse, call handler/functions drag_mc.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag); drag_mc.addEventListener(MouseEvent.MOUSE_UP, onStopDrag); //handler/function for start dragging function onStartDrag(event:MouseEvent){ event.target.startDrag(); //get the event target } //handler/function for stop dragging function onStopDrag(event:MouseEvent){ event.target.stopDrag();}

15. Swap Depths (setChildIndex) If we got two or more MovieClips, and want to display/place the active clip on top: we can use the setChildIndex() - method If we got two or more MovieClips, and want to display/place the active clip on top: we can use the setChildIndex() - method to actually swap the depths of the clips //get the number of movie clips on stage var maxIndex:Number = numChildren - 1; //add listener for the mouse, call handler/functions blue_mc.addEventListener(MouseEvent.CLICK, sendToTop); yellow_mc.addEventListener(MouseEvent.CLICK, sendToTop); //handler/function that swaps the depths of active movieclip function sendToTop(event:Event):void{ //setchildindex method, cast the event object as movieclip get maxindex setChildIndex(event.currentTarget as MovieClip, maxIndex); }