movieclips & properties flash actionscript introduction to thomas lövgren...
TRANSCRIPT
MovieClips & PropertiesMovieClips & Properties
Flash ActionScriptFlash ActionScriptIntroduction toIntroduction to
Thomas Lö[email protected]
.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);
}}