MovieClips & PropertiesMovieClips & Properties

Flash ActionScriptFlash ActionScriptIntroduction toIntroduction to

Thomas Lövgrenthomas.lovgren@humlab.umu

.se

MovieClipsMovieClips The MovieClip class is the template for all the The MovieClip class is the template for all the

properties, methods & events that are part of a properties, methods & events that are part of a MovieClip objectMovieClip object

When we create a movie clip, the When we create a movie clip, the new instancenew instance will will inherit properties, methods & events from the inherit properties, methods & events from the MovieClip classMovieClip class

Every MovieClip object has a timeline Every MovieClip object has a timeline (playing(playing independently of the main timeline) independently of the main timeline)

We can move the playhead to a specific point or frame We can move the playhead to a specific point or frame in the MovieClip Timelinein the MovieClip Timeline

The The Display PropertiesDisplay Properties describes a MovieClip Object’s describes a MovieClip Object’s formform

MovieClips could be placed inside each other (nested), MovieClips could be placed inside each other (nested), which also makes them useful for complex animationswhich also makes them useful for complex animations

Creating MovieClipsCreating MovieClips There are basically two ways of creating a There are basically two ways of creating a

movieClip:movieClip: Manual:Manual: Create a MovieClip symbol (library item)Create a MovieClip symbol (library item) Dynamic: MovieClip created by codeDynamic: MovieClip created by code

Note!Note! The The new instancenew instance will inherit all properties, methods will inherit all properties, methods & events from the & events from the base classes, base classes, independent of how the independent of how the MovieClip was createdMovieClip was created

Creating a MovieClip Creating a MovieClip SymbolSymbol

ManualManual (create a MovieClip symbol) (create a MovieClip symbol)

1. Insert new symbol1. Insert new symbol

2. Name the symbol (movieClipName_mc)2. Name the symbol (movieClipName_mc)

3. Draw/make the graphics3. Draw/make the graphics

4. Open/check the library4. Open/check the library

5. Drag the symbol from library to the stage5. Drag the symbol from library to the stage

6. Name the instance on main stage (movieClipName_mc)6. Name the instance on main stage (movieClipName_mc)

Note!Note! If we make changes to a MovieClip symbol in library, If we make changes to a MovieClip symbol in library, every new instance created from that clip will be changedevery new instance created from that clip will be changed

Create a MovieClip by Create a MovieClip by codecode

Dynamic Dynamic (movieClips created by code), (movieClips created by code), in this in this example we create a new MovieClip instance example we create a new MovieClip instance named my_mc:named my_mc:

var my_mc:MovieClip = new MovieClip():var my_mc:MovieClip = new MovieClip():

Tip! Tip! Use the movie clip suffix (_mc)Use the movie clip suffix (_mc)

Note!Note! The movie clip will not be shown until we add it to The movie clip will not be shown until we add it to the Display List (more of this later on...)the Display List (more of this later on...)

MovieClip Class MovieClip Class methods, properties & eventsmethods, properties & events

Example of some of the MovieClip class’s public Example of some of the MovieClip class’s public methods, properties and events:methods, properties and events:

Methods:Methods: gotoAndPlay(), gotoAndStop(), play(), stop()gotoAndPlay(), gotoAndStop(), play(), stop()

Properties:Properties:currentFrame(), currentLabel(), totalFrames() currentFrame(), currentLabel(), totalFrames()

Events:Events:mouseUp, mouseDown(), rollOver(), rollOut()mouseUp, mouseDown(), rollOver(), rollOut()

Note!Note! There are more methods, properties and events for the There are more methods, properties and events for the MovieClip ObjectMovieClip Object

Nested MovieClips & Nested MovieClips & AccessAccess

We can also nest MovieClips inside another to create complex We can also nest MovieClips inside another to create complex animations that would be difficult to create on a single animations that would be difficult to create on a single timelinetimeline

We can reach properties, variables, functions from a nested We can reach properties, variables, functions from a nested movie clip by using “dot-notation”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(); first_mc.second_mc.getData(); //function in a nested movieclip//function in a nested movieclip

To access the root we need to cast it as a MovieClipTo access the root we need to cast it as a MovieClip MovieClip(root).gotoAndStop(”video”); MovieClip(root).gotoAndStop(”video”); //main timeline//main timeline

Parent will take us up one level:Parent will take us up one level:

//we have to cast parent as a movieclip//we have to cast parent as a movieclip

MovieClip(this.parent.parent).my_mc.x = 50; MovieClip(this.parent.parent).my_mc.x = 50; //up two levels//up two levels

MovieClip CoordinatesMovieClip Coordinates Each MovieClip has a coordinate system in which Each MovieClip has a coordinate system in which

the origin the origin

(0, 0) is located in the registration point. For the (0, 0) is located in the registration point. For the main timeline this is the top left cornermain timeline this is the top left corner

Main timelineMain timeline

MovieClip on MovieClip on stagestage

PropertiesProperties A collection of A collection of propertiesproperties describes the object describes the object

Ex. An apple has properties like color, size and Ex. An apple has properties like color, size and positionposition

A MovieClip has properties (A MovieClip has properties (Display Properties)Display Properties) that we can access and manipulatethat we can access and manipulate

xPos = 200yPos = 200

Height = 300

Color = red

Display PropertiesDisplay Properties The The Display PropertiesDisplay Properties describes the MovieClip describes the MovieClip

Object’s formObject’s form The most common The most common Display PropertiesDisplay Properties, and a , and a

migration from AS2 to AS3 is shown below:migration from AS2 to AS3 is shown below:

Note!Note! The Display Properties are inherits from the The Display Properties are inherits from the DisplayObject DisplayObject class class

MovieClip & PropertiesMovieClip & Properties We can easily manipulate these properties and We can easily manipulate these properties and

then change the form and/or position of the then change the form and/or position of the MovieClip Object (square_mc) like:MovieClip Object (square_mc) like:

movieClipInstanceNamemovieClipInstanceName..propertyNamepropertyName = = valuevalue;;

square_mc.scaleX = 2; square_mc.scaleX = 2; //scale up 200% in x-direction//scale up 200% in x-direction

square_mc.x = 650; square_mc.x = 650; //move in x-direction to 650//move in x-direction to 650

square_mc.rotation = 90; square_mc.rotation = 90; //rotate 90 degrees//rotate 90 degrees

square_mc.alpha = 0.5;square_mc.alpha = 0.5; //50% transparency//50% transparency

Events & PropertiesEvents & Properties In this example we use a button with an In this example we use a button with an

EventListener and a function for rotating a EventListener and a function for rotating a rectangle-clip like:rectangle-clip like:

//add listener to button//add listener to button

rotate_btn.addEventListener(MouseEvent.CLICK, rotateRectangle);rotate_btn.addEventListener(MouseEvent.CLICK, rotateRectangle);

//function for rotating //function for rotating

function rotateRectangle(e:MouseEvent):void{function rotateRectangle(e:MouseEvent):void{

rectangle_mc.rotation += 5; rectangle_mc.rotation += 5; //increase degrees by 5 every click//increase degrees by 5 every click

}}

Properties & Input textProperties & Input text We can use an Input text field for changing We can use an Input text field for changing

MovieClip properties on a Mouse pressMovieClip properties on a Mouse press

//add listener to button//add listener to button

xPos_btn.addEventListener(MouseEvent.MOUSE_DOWN, xMove);xPos_btn.addEventListener(MouseEvent.MOUSE_DOWN, xMove);

//function for moving box in x-direction//function for moving box in x-direction

function xMove(event:MouseEvent):void{function xMove(event:MouseEvent):void{

box_mc.x = Number(xPos_txt.text); box_mc.x = Number(xPos_txt.text); //cast input text to number//cast input text to number

}}

Drag’n drop Drag’n drop With the With the drag and drop drag and drop functionality, we can functionality, we can

move our MovieClips around by using the mouse move our MovieClips around by using the mouse

//add listener for the mouse, call handler/functions//add listener for the mouse, call handler/functions

drag_mc.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);drag_mc.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);

drag_mc.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);drag_mc.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);

//handler/function for start dragging//handler/function for start dragging

function onStartDrag(event:MouseEvent){function onStartDrag(event:MouseEvent){

event.target.startDrag(); //get the event target event.target.startDrag(); //get the event target

}}

//handler/function for stop dragging//handler/function for stop dragging

function onStopDrag(event:MouseEvent){function onStopDrag(event:MouseEvent){

event.target.stopDrag();event.target.stopDrag();

}}

Swap DepthsSwap Depths(setChildIndex)(setChildIndex)

If we got two or more MovieClips, and want to If we got two or more MovieClips, and want to display/place the active clip on top: we can use the display/place the active clip on top: we can use the setChildIndex()setChildIndex()- - methodmethod

to actually swap the depths of the clipsto actually swap the depths of the clips

//get the number of movie clips on stage//get the number of movie clips on stage

var maxIndex:Number = numChildren - 1;var maxIndex:Number = numChildren - 1;

//add listener for the mouse, call handler/functions//add listener for the mouse, call handler/functions

blue_mc.addEventListener(MouseEvent.CLICK, sendToTop);blue_mc.addEventListener(MouseEvent.CLICK, sendToTop);

yellow_mc.addEventListener(MouseEvent.CLICK, sendToTop);yellow_mc.addEventListener(MouseEvent.CLICK, sendToTop);

//handler/function that swaps the depths of active movieclip//handler/function that swaps the depths of active movieclip

function sendToTop(event:Event):void{function sendToTop(event:Event):void{

//setchildindex method, cast the event object as movieclip get maxindex//setchildindex method, cast the event object as movieclip get maxindex

setChildIndex(event.currentTarget as MovieClip, maxIndex); setChildIndex(event.currentTarget as MovieClip, maxIndex);

}}