API Documentation for: 0.7.0
Show:

MovieClip Class

Extends Container
Defined in: MovieClip:39
Module: EaselJS

The MovieClip class associates a TweenJS Timeline with an EaselJS Container. It allows you to create objects which encapsulate timeline animations, state changes, and synched actions. Due to the complexities inherent in correctly setting up a MovieClip, it is largely intended for tool output and is not included in the main EaselJS library.

Currently MovieClip only works properly if it is tick based (as opposed to time based) though some concessions have been made to support time-based timelines in the future.

Example

This example animates two shapes back and forth. The grey shape starts on the left, but we jump to a mid-point in the animation using gotoAndPlay.

 var stage = new createjs.Stage("canvas");
 createjs.Ticker.addEventListener("tick", stage);

 var mc = new createjs.MovieClip(null, 0, true, {start:20});
 stage.addChild(mc);

 var child1 = new createjs.Shape(
     new createjs.Graphics().beginFill("#999999")
         .drawCircle(30,30,30));
 var child2 = new createjs.Shape(
     new createjs.Graphics().beginFill("#5a9cfb")
         .drawCircle(30,30,30));

 mc.timeline.addTween(
     createjs.Tween.get(child1)
         .to({x:0}).to({x:60}, 50).to({x:0}, 50));
 mc.timeline.addTween(
     createjs.Tween.get(child2)
         .to({x:60}).to({x:0}, 50).to({x:60}, 50));

 mc.gotoAndPlay("start");

It is recommended to use tween.to() to animate and set properties (use no duration to have it set immediately), and the tween.wait() method to create delays between animations. Note that using the tween.set() method to affect properties will likely not provide the desired result.

Constructor

MovieClip

(
  • [mode=independent]
  • [startPosition=0]
  • [loop=true]
  • [labels=null]
)

Defined in MovieClip:39

Parameters:

  • [mode=independent] String optional

    Initial value for the mode property. One of MovieClip.INDEPENDENT, MovieClip.SINGLE_FRAME, or MovieClip.SYNCHED. The default is MovieClip.INDEPENDENT.

  • [startPosition=0] Number optional

    Initial value for the startPosition property.

  • [loop=true] Boolean optional

    Initial value for the loop property. The default is true.

  • [labels=null] Object optional

    A hash of labels to pass to the timeline instance associated with this MovieClip. Labels only need to be passed if they need to be used.

Item Index

Methods

_addManagedChild

(
  • child
  • offset
)
private

Adds a child to the timeline, and sets it up as a managed child.

Parameters:

_applyFilterBounds

(
  • x
  • y
  • width
  • height
)
Rectangle protected

Parameters:

Returns:

_applyFilters

() protected

_applyShadow

(
  • ctx
  • shadow
)
protected

Parameters:

  • ctx CanvasRenderingContext2D
  • shadow Shadow

_dispatchEvent

(
  • eventObj
  • eventPhase
)
protected

Parameters:

_getBounds

(
  • matrix
  • ignoreTransform
)
Rectangle protected

Inherited from DisplayObject but overwritten in _getBounds:542

Parameters:

Returns:

_getObjectsUnderPoint

(
  • x
  • y
  • arr
  • mouse
)
Array protected

Parameters:

  • x Number
  • y Number
  • arr Array
  • mouse Boolean

    If true, it will respect mouse interaction properties like mouseEnabled, mouseChildren, and hitArea.

Returns:

_goto

(
  • positionOrLabel
)
protected

Defined in _goto:426

Parameters:

  • positionOrLabel String | Number

    The animation name or frame number to go to.

_reset

() private

Defined in _reset:440

_setState

(
  • state
  • offset
)
protected

Defined in _setState:497

Parameters:

_testHit

(
  • ctx
)
Boolean protected

Inherited from DisplayObject: _testHit:1221

Parameters:

  • ctx CanvasRenderingContext2D

Returns:

_tick

(
  • params
)
protected

Inherited from DisplayObject but overwritten in _tick:412

Parameters:

  • params Array

    Parameters to pass onto the DisplayObject DisplayObject/tick function.

_transformBounds

(
  • bounds
  • matrix
  • ignoreTransform
)
Rectangle protected

Parameters:

Returns:

_updateTimeline

() protected

Defined in _updateTimeline:449

addChild

(
  • child
)
DisplayObject

Inherited from Container: addChild:151

Adds a child to the top of the display list.

Example

container.addChild(bitmapInstance);

You can also add multiple children at once:

 container.addChild(bitmapInstance, shapeInstance, textInstance);

Parameters:

Returns:

DisplayObject:

The child that was added, or the last child if multiple children were added.

addChildAt

(
  • child
  • index
)
DisplayObject

Inherited from Container: addChildAt:178

Adds a child to the display list at the specified index, bumping children at equal or greater indexes up one, and setting its parent to this Container.

Example

addChildAt(child1, index);

You can also add multiple children, such as:

 addChildAt(child1, child2, ..., index);

The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list, you could use:

 container.addChildAt(myShape, container.getChildIndex(otherShape));

This would also bump otherShape's index up by one. Fails silently if the index is out of range.

Parameters:

Returns:

DisplayObject:

Returns the last child that was added, or the last child if multiple children were added.

addEventListener

(
  • type
  • listener
  • [useCapture]
)
Function | Object

Adds the specified event listener. Note that adding multiple listeners to the same function will result in multiple callbacks getting fired.

Example

 displayObject.addEventListener("click", handleClick);
 function handleClick(event) {
    // Click happened.
 }

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    An object with a handleEvent method, or a function that will be called when the event is dispatched.

  • [useCapture] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

Returns:

Function | Object:

Returns the listener for chaining or assignment.

cache

(
  • x
  • y
  • width
  • height
  • [scale=1]
)

Inherited from DisplayObject: cache:711

Draws the display object into a new canvas, which is then used for subsequent draws. For complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick. The cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually update the cache by calling updateCache() or cache() again. You must specify the cache area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.

Example

For example if you defined a Shape that drew a circle at 0, 0 with a radius of 25:

 var shape = new createjs.Shape();
 shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 25);
 myShape.cache(-25, -25, 50, 50);

Note that filters need to be defined before the cache is applied. Check out the Filter class for more information. Some filters (ex. BlurFilter) will not work as expected in conjunction with the scale param.

Usually, the resulting cacheCanvas will have the dimensions widthscale by heightscale, however some filters (ex. BlurFilter) will add padding to the canvas dimensions.

Parameters:

  • x Number

    The x coordinate origin for the cache region.

  • y Number

    The y coordinate origin for the cache region.

  • width Number

    The width of the cache region.

  • height Number

    The height of the cache region.

  • [scale=1] Number optional

    The scale at which the cache will be created. For example, if you cache a vector shape using myShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate cached elements with greater fidelity. Default is 1.

clone

()

Inherited from DisplayObject but overwritten in clone:385

MovieClip instances cannot be cloned.

cloneProps

(
  • o
)
protected

Inherited from DisplayObject: cloneProps:1164

Parameters:

  • o DisplayObject

    The DisplayObject instance which will have properties from the current DisplayObject instance copied into.

Container__getBounds

(
  • matrix
  • ignoreTransform
)
Rectangle protected

Parameters:

Returns:

contains

(
  • child
)
Boolean

Inherited from Container: contains:409

Returns true if the specified display object either is this container or is a descendent (child, grandchild, etc) of this container.

Parameters:

Returns:

Boolean:

true if the specified display object either is this container or is a descendent.

dispatchEvent

(
  • eventObj
  • [target]
)
Boolean

Dispatches the specified event to all listeners.

Example

 // Use a string event
 this.dispatchEvent("complete");

 // Use an Event instance
 var event = new createjs.Event("progress");
 this.dispatchEvent(event);

Parameters:

  • eventObj Object | String | Event

    An object with a "type" property, or a string type. While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used, dispatchEvent will construct an Event instance with the specified type.

  • [target] Object optional

    The object to use as the target property of the event object. This will default to the dispatching object. This parameter is deprecated and will be removed.

Returns:

Boolean:

Returns the value of eventObj.defaultPrevented.

draw

(
  • ctx
  • ignoreCache
)

Inherited from DisplayObject but overwritten in draw:309

Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform. Returns true if the draw was handled (useful for overriding functionality). NOTE: This method is mainly for internal use, though it may be useful for advanced uses.

Parameters:

  • ctx CanvasRenderingContext2D

    The canvas 2D context object to draw into.

  • ignoreCache Boolean

    Indicates whether the draw operation should ignore any current cache. For example, used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).

getBounds

() Rectangle

Inherited from DisplayObject: getBounds:1037

Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation). Objects that have been cached will return the bounds of the cache.

Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.

All All display objects support setting bounds manually using setBounds(). Likewise, display objects that have been cached using cache() will return the bounds of their cache. Manual and cache bounds will override the automatic calculations listed below.
Bitmap Returns the width and height of the sourceRect (if specified) or image, extending from (x=0,y=0).
Sprite Returns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified in the spritesheet data. See also getFrameBounds
Container Returns the aggregate (combined) bounds of all children that return a non-null value from getBounds().
Shape Does not currently support automatic bounds calculations. Use setBounds() to manually define bounds.
Text Returns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are not, especially when using textBaseline values other than "top".
BitmapText Returns approximate bounds. Values will be more accurate if spritesheet frame registration points are close to (x=0,y=0).

Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the bounds explicitly:

var bounds = obj.getBounds();
obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);
// getBounds will now use the set values, instead of recalculating

To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its values if you need to retain it.

var myBounds = obj.getBounds().clone();
// OR:
myRect.copy(obj.getBounds());

Returns:

Rectangle:

A Rectangle instance representing the bounds, or null if bounds are not available for this object.

getCacheDataURL

() String

Returns a data URL for the cache, or null if this display object is not cached. Uses cacheID to ensure a new data URL is not generated if the cache has not changed.

Returns:

String:

The image data url for the cache.

getChildAt

(
  • index
)
DisplayObject

Inherited from Container: getChildAt:287

Returns the child at the specified index.

Example

container.getChildAt(2);

Parameters:

  • index Number

    The index of the child to return.

Returns:

DisplayObject:

The child at the specified index. Returns null if there is no child at the index.

getChildByName

(
  • name
)
DisplayObject

Inherited from Container: getChildByName:301

Returns the child with the specified name.

Parameters:

  • name String

    The name of the child to return.

Returns:

DisplayObject:

The child with the specified name.

getChildIndex

(
  • child
)
Number

Inherited from Container: getChildIndex:334

Returns the index of the specified child in the display list, or -1 if it is not in the display list.

Example

var index = container.getChildIndex(child);

Parameters:

Returns:

Number:

The index of the specified child. -1 if the child is not found.

getConcatenatedMatrix

(
  • [mtx]
)
Matrix2D

Generates a concatenated Matrix2D object representing the combined transform of the display object and all of its parent Containers up to the highest level ancestor (usually the Stage). This can be used to transform positions between coordinate spaces, such as with localToGlobal and globalToLocal.

Parameters:

  • [mtx] Matrix2D optional

    A Matrix2D object to populate with the calculated values. If null, a new Matrix2D object is returned.

Returns:

Matrix2D:

a concatenated Matrix2D object representing the combined transform of the display object and all of its parent Containers up to the highest level ancestor (usually the Stage).

getCurrentLabel

() String

Defined in getCurrentLabel:374

Returns the name of the label on or immediately before the current frame. See TweenJS: Timeline.getCurrentLabel() for more information.

Returns:

String:

The name of the current label or null if there is no label.

getLabels

() ArrayObject

Defined in getLabels:365

Returns a sorted list of the labels defined on this MovieClip. Shortcut to TweenJS: Timeline.getLabels();

Returns:

ArrayObject:

A sorted array of objects with label and position (aka frame) properties.

getMatrix

(
  • matrix
)
Matrix2D

Inherited from DisplayObject: getMatrix:954

Returns a matrix based on this object's transform.

Parameters:

  • matrix Matrix2D

    Optional. A Matrix2D object to populate with the calculated values. If null, a new Matrix object is returned.

Returns:

Matrix2D:

A matrix representing this display object's transform.

getNumChildren

() Number

Inherited from Container: getNumChildren:348

Returns the number of children in the display list.

Returns:

Number:

The number of children in the display list.

getObjectsUnderPoint

(
  • x
  • y
)
Array

Returns an array of all display objects under the specified coordinates that are in this container's display list. This routine ignores any display objects with mouseEnabled set to false. The array will be sorted in order of visual depth, with the top-most display object at index 0. This uses shape based hit detection, and can be an expensive operation to run, so it is best to use it carefully. For example, if testing for objects under the mouse, test on tick (instead of on mousemove), and only if the mouse's position has changed.

Parameters:

  • x Number

    The x position in the container to test.

  • y Number

    The y position in the container to test.

Returns:

Array:

An Array of DisplayObjects under the specified coordinates.

getObjectUnderPoint

(
  • x
  • y
)
DisplayObject

Similar to Container/getObjectsUnderPoint(), but returns only the top-most display object. This runs significantly faster than getObjectsUnderPoint(), but is still an expensive operation. See getObjectsUnderPoint for more information.

Parameters:

  • x Number

    The x position in the container to test.

  • y Number

    The y position in the container to test.

Returns:

DisplayObject:

The top-most display object under the specified coordinates.

getStage

() Stage

Inherited from DisplayObject: getStage:829

Returns the stage that this display object will be rendered on, or null if it has not been added to one.

Returns:

Stage:

The Stage instance that the display object is a descendent of. null if the DisplayObject has not been added to a Stage.

getTransformedBounds

() Rectangle

Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied). Objects that have been cached will return the transformed bounds of the cache.

Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.

To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its values if you need to retain it.

Container instances calculate aggregate bounds for all children that return bounds via getBounds.

Returns:

Rectangle:

A Rectangle instance representing the bounds, or null if bounds are not available for this object.

globalToLocal

(
  • x
  • y
)
Point

Transforms the specified x and y position from the global (stage) coordinate space to the coordinate space of the display object. For example, this could be used to determine the current mouse position within the display object. Returns a Point instance with x and y properties correlating to the transformed position in the display object's coordinate space.

Example

 displayObject.x = 300;
 displayObject.y = 200;
 stage.addChild(displayObject);
 var point = myDisplayObject.globalToLocal(100, 100);
 // Results in x=-200, y=-100

Parameters:

  • x Number

    The x position on the stage to transform.

  • y Number

    The y position on the stage to transform.

Returns:

Point:

A Point instance with x and y properties correlating to the transformed position in the display object's coordinate space.

gotoAndPlay

(
  • positionOrLabel
)

Defined in gotoAndPlay:344

Advances this movie clip to the specified position or label and sets paused to false.

Parameters:

  • positionOrLabel String | Number

    The animation name or frame number to go to.

gotoAndStop

(
  • positionOrLabel
)

Defined in gotoAndStop:354

Advances this movie clip to the specified position or label and sets paused to true.

Parameters:

  • positionOrLabel String | Number

    The animation or frame name to go to.

hasEventListener

(
  • type
)
Boolean

Indicates whether there is at least one listener for the specified event type and useCapture value.

Parameters:

  • type String

    The string type of the event.

Returns:

Boolean:

Returns true if there is at least one listener for the specified event.

hitTest

(
  • x
  • y
)
Boolean

Inherited from DisplayObject but overwritten in hitTest:424

Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at the specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all transform properties including regX/Y.

Parameters:

  • x Number

    The x position to check in the display object's local coordinates.

  • y Number

    The y position to check in the display object's local coordinates.

Returns:

Boolean:

A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified coordinates.

initialize

(
  • [mode=independent]
  • [startPosition=0]
  • [loop=true]
  • [labels=null]
)
protected

Inherited from EventDispatcher but overwritten in initialize:268

Initialization method called by the constructor.

Parameters:

  • [mode=independent] String optional

    Initial value for the mode property. One of MovieClip.INDEPENDENT, MovieClip.SINGLE_FRAME, or MovieClip.SYNCHED. The default is MovieClip.INDEPENDENT.

  • [startPosition=0] Number optional

    Initial value for the startPosition property.

  • [loop=true] Boolean optional

    Initial value for the loop property. The default is true.

  • [labels=null] Object optional

    A hash of labels to pass to the timeline instance associated with this MovieClip. Labels only need to be passed if they need to be used.

isVisible

() Boolean

Inherited from DisplayObject but overwritten in isVisible:290

Returns true or false indicating whether the display object would be visible if drawn to a canvas. This does not account for whether it would be visible within the boundaries of the stage. NOTE: This method is mainly for internal use, though it may be useful for advanced uses.

Returns:

Boolean:

Boolean indicating whether the display object would be visible if drawn to a canvas

localToGlobal

(
  • x
  • y
)
Point

Transforms the specified x and y position from the coordinate space of the display object to the global (stage) coordinate space. For example, this could be used to position an HTML label over a specific point on a nested display object. Returns a Point instance with x and y properties correlating to the transformed coordinates on the stage.

Example

 displayObject.x = 300;
 displayObject.y = 200;
 stage.addChild(displayObject);
 var point = myDisplayObject.localToGlobal(100, 100);
 // Results in x=400, y=300

Parameters:

  • x Number

    The x position in the source display object to transform.

  • y Number

    The y position in the source display object to transform.

Returns:

Point:

A Point instance with x and y properties correlating to the transformed coordinates on the stage.

localToLocal

(
  • x
  • y
  • target
)
Point

Transforms the specified x and y position from the coordinate space of this display object to the coordinate space of the target display object. Returns a Point instance with x and y properties correlating to the transformed position in the target's coordinate space. Effectively the same as using the following code with localToGlobal and globalToLocal.

 var pt = this.localToGlobal(x, y);
 pt = target.globalToLocal(pt.x, pt.y);

Parameters:

  • x Number

    The x position in the source display object to transform.

  • y Number

    The y position on the source display object to transform.

  • target DisplayObject

    The target display object to which the coordinates will be transformed.

Returns:

Point:

Returns a Point instance with x and y properties correlating to the transformed position in the target's coordinate space.

off

(
  • type
  • listener
  • [useCapture]
)

Inherited from EventDispatcher: off:246

A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the .on method.

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    The listener function or object.

  • [useCapture] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

on

(
  • type
  • listener
  • [scope]
  • [once=false]
  • [data]
  • [useCapture=false]
)
Function

Inherited from EventDispatcher: on:174

A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener only run once, associate arbitrary data with the listener, and remove the listener.

This method works by creating an anonymous wrapper function and subscribing it with addEventListener. The created anonymous function is returned for use with .removeEventListener (or .off).

Example

    var listener = myBtn.on("click", handleClick, null, false, {count:3});
    function handleClick(evt, data) {
        data.count -= 1;
        console.log(this == myBtn); // true - scope defaults to the dispatcher
        if (data.count == 0) {
            alert("clicked 3 times!");
            myBtn.off("click", listener);
            // alternately: evt.remove();
        }
    }

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    An object with a handleEvent method, or a function that will be called when the event is dispatched.

  • [scope] Object optional

    The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).

  • [once=false] Boolean optional

    If true, the listener will remove itself after the first time it is triggered.

  • [data] optional

    Arbitrary data that will be included as the second parameter when the listener is called.

  • [useCapture=false] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

Returns:

Function:

Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.

play

()

Defined in play:328

Sets paused to false.

removeAllChildren

()

Removes all children from the display list.

Example

container.removeAlLChildren();

removeAllEventListeners

(
  • [type]
)

Removes all listeners for the specified type, or all listeners of all types.

Example

 // Remove all listeners
 displayObject.removeAllEvenListeners();

 // Remove all click listeners
 displayObject.removeAllEventListeners("click");

Parameters:

  • [type] String optional

    The string type of the event. If omitted, all listeners for all types will be removed.

removeChild

(
  • child
)
Boolean

Inherited from Container: removeChild:215

Removes the specified child from the display list. Note that it is faster to use removeChildAt() if the index is already known.

Example

container.removeChild(child);

You can also remove multiple children:

 removeChild(child1, child2, ...);

Returns true if the child (or children) was removed, or false if it was not in the display list.

Parameters:

Returns:

Boolean:

true if the child (or children) was removed, or false if it was not in the display list.

removeChildAt

(
  • index
)
Boolean

Inherited from Container: removeChildAt:241

Removes the child at the specified index from the display list, and sets its parent to null.

Example

 container.removeChildAt(2);

You can also remove multiple children:

 container.removeChild(2, 7, ...)

Returns true if the child (or children) was removed, or false if any index was out of range.

Parameters:

  • index Number

    The index of the child to remove.

Returns:

Boolean:

true if the child (or children) was removed, or false if any index was out of range.

removeEventListener

(
  • type
  • listener
  • [useCapture]
)

Removes the specified event listener.

Important Note: that you must pass the exact function reference used when the event was added. If a proxy function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or closure will not work.

Example

 displayObject.removeEventListener("click", handleClick);

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    The listener function or object.

  • [useCapture] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

set

(
  • props
)
DisplayObject

Inherited from DisplayObject: set:1019

Provides a chainable shortcut method for setting a number of properties on a DisplayObject instance.

Example

 var myGraphics = new createjs.Graphics().beginFill("#ff0000").drawCircle(0, 0, 25);
 var shape = stage.addChild(new Shape())
     .set({graphics:myGraphics, x:100, y:100, alpha:0.5});

Parameters:

  • props Object

    A generic object containing properties to copy to the DisplayObject instance.

Returns:

DisplayObject:

Returns The DisplayObject instance the method is called on (useful for chaining calls.)

setBounds

(
  • x
  • y
  • width
  • height
)

Inherited from DisplayObject: setBounds:1122

Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape & Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always override calculated bounds.

The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).

Parameters:

  • x Number

    The x origin of the bounds. Pass null to remove the manual bounds.

  • y Number

    The y origin of the bounds.

  • width Number

    The width of the bounds.

  • height Number

    The height of the bounds.

setChildIndex

(
  • child
  • index
)

Inherited from Container: setChildIndex:392

Changes the depth of the specified child. Fails silently if the child is not a child of this container, or the index is out of range.

Parameters:

setTransform

(
  • [x=0]
  • [y=0]
  • [scaleX=1]
  • [scaleY=1]
  • [rotation=0]
  • [skewX=0]
  • [skewY=0]
  • [regX=0]
  • [regY=0]
)
DisplayObject

Shortcut method to quickly set the transform properties on the display object. All parameters are optional. Omitted parameters will have the default value set.

Example

 displayObject.setTransform(100, 100, 2, 2);

Parameters:

  • [x=0] Number optional

    The horizontal translation (x position) in pixels

  • [y=0] Number optional

    The vertical translation (y position) in pixels

  • [scaleX=1] Number optional

    The horizontal scale, as a percentage of 1

  • [scaleY=1] Number optional

    the vertical scale, as a percentage of 1

  • [rotation=0] Number optional

    The rotation, in degrees

  • [skewX=0] Number optional

    The horizontal skew factor

  • [skewY=0] Number optional

    The vertical skew factor

  • [regX=0] Number optional

    The horizontal registration point in pixels

  • [regY=0] Number optional

    The vertical registration point in pixels

Returns:

DisplayObject:

Returns this instance. Useful for chaining commands.

sortChildren

(
  • sortFunction
)

Inherited from Container: sortChildren:315

Performs an array sort operation on the child list.

Example

var sortFunction = function(item1, item2, options) { if (item1 > item2) { return 1; } if (item1 < item2) { return -1; } return 0; } container.sortChildren(sortFunction);

Parameters:

  • sortFunction Function

    the function to use to sort the child list. See JavaScript's Array.sort documentation for details.

stop

()

Defined in stop:336

Sets paused to true.

swapChildren

(
  • child1
  • child2
)

Inherited from Container: swapChildren:372

Swaps the specified children's depth in the display list. Fails silently if either child is not a child of this Container.

Parameters:

swapChildrenAt

(
  • index1
  • index2
)

Inherited from Container: swapChildrenAt:357

Swaps the children at the specified indexes. Fails silently if either index is out of range.

Parameters:

toString

() String

Inherited from EventDispatcher but overwritten in toString:394

Returns a string representation of this object.

Returns:

String:

a string representation of the instance.

uncache

()

Inherited from DisplayObject: uncache:807

Clears the current cache. See cache for more information.

updateCache

(
  • compositeOperation
)

Inherited from DisplayObject: updateCache:754

Redraws the display object to its cache. Calling updateCache without an active cache will throw an error. If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object will be drawn over the existing cache using the specified compositeOperation.

Example

Clear the current graphics of a cached shape, draw some new instructions, and then update the cache. The new line will be drawn on top of the old one.

 // Not shown: Creating the shape, and caching it.
 shapeInstance.clear();
 shapeInstance.setStrokeStyle(3).beginStroke("#ff0000").moveTo(100, 100).lineTo(200,200);
 shapeInstance.updateCache();

Parameters:

updateContext

(
  • ctx
)

Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow to the specified context. This is typically called prior to draw.

Parameters:

  • ctx CanvasRenderingContext2D

    The canvas 2D to update.

Properties

_bounds

Rectangle protected

Inherited from DisplayObject: _bounds:624

Default: null

_cacheDataURL

String protected

Default: null

_cacheDataURLID

Number protected

Default: 0

_cacheOffsetX

Number protected

Default: 0

_cacheOffsetY

Number protected

Default: 0

_cacheScale

Number protected

Inherited from DisplayObject: _cacheScale:584

Default: 1

_captureListeners

Object protected

_listeners

Object protected

_managed

Object private

Defined in _managed:251

List of display objects that are actively being managed by the MovieClip.

_matrix

Matrix2D protected

Inherited from DisplayObject: _matrix:608

Default: null

_prevPos

Number private

Defined in _prevPos:235

Default: -1

_prevPosition

Number private

Defined in _prevPosition:243

Default: 0

_rectangle

Rectangle protected

Inherited from DisplayObject: _rectangle:616

Default: null

_synchOffset

Number private

Defined in _synchOffset:227

Default: 0

actionsEnabled

Boolean

Defined in actionsEnabled:195

If true, actions in this MovieClip's tweens will be run when the playhead advances.

Default: true

alpha

Number

Inherited from DisplayObject: alpha:288

The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque.

Default: 1

autoReset

Boolean

Defined in autoReset:203

If true, the MovieClip will automatically be reset to its first frame whenever the timeline adds it back onto the display list. This only applies to MovieClip instances with mode=INDEPENDENT.

For example, if you had a character animation with a "body" child MovieClip instance with different costumes on each frame, you could set body.autoReset = false, so that you can manually change the frame it is on, without worrying that it will be reset automatically.

Default: true

buildDate

String static

Defined in buildDate:21

The build date for this release in UTC format.

cacheCanvas

HTMLCanvasElement | Object

Inherited from DisplayObject: cacheCanvas:296

If a cache is active, this returns the canvas that holds the cached version of this display object. See Cache for more information.

Default: null

cacheID

Number

Inherited from DisplayObject: cacheID:521

Returns an ID number that uniquely identifies the current cache for this display object. This can be used to determine if the cache has changed since a previous check.

Default: 0

children

Array

Inherited from Container: children:60

The array of children in the display list. You should usually use the child management methods such as addChild, removeChild, swapChildren, etc, rather than accessing this directly, but it is included for advanced uses.

Default: null

compositeOperation

String

The composite operation indicates how the pixels of this display object will be composited with the elements behind it. If null, this property is inherited from the parent container. For more information, read the whatwg spec on compositing.

Default: null

Container__tick

Function protected

Defined in Container__tick:405

Container_draw

Function private

Defined in Container_draw:302

currentFrame

Number

Defined in currentFrame:153

The current frame of the movieclip.

Default: 0

cursor

String

Inherited from DisplayObject: cursor:556

A CSS cursor (ex. "pointer", "help", "text", etc) that will be displayed when the user hovers over this display object. You must enable mouseover events using the enableMouseOver method to use this property. Setting a non-null cursor on a Container will override the cursor set on its descendants.

Default: null

DisplayObject__tick

Function private

DisplayObject_draw

Function private

DisplayObject_getBounds

Function protected

DisplayObject_initialize

Function private

Inherited from Container but overwritten in DisplayObject_initialize:261

filters

Array

Inherited from DisplayObject: filters:511

An array of Filter objects to apply to this display object. Filters are only applied / updated when Cache or UpdateCache is called on the display object, and only apply to the area that is cached.

Default: null

frameBounds

Array

Defined in frameBounds:217

An array of bounds for each frame in the MovieClip. This is mainly intended for tool output.

Default: null

hitArea

DisplayObject

Inherited from DisplayObject: hitArea:539

A display object that will be tested when checking mouse interactions or testing getObjectsUnderPoint. The hit area will have its transformation applied relative to this display object's coordinate space (as though the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested using only its own alpha value regardless of the alpha value on the target display object, or the target's ancestors (parents).

If set on a Container, children of the Container will not receive mouse events. This is similar to setting MouseChildren to false.

Note that hitArea is NOT currently used by the hitTest() method, nor is it supported for Stage.

Default: null

id

Number

Inherited from DisplayObject: id:306

Unique ID for this display object. Makes display objects easier for some uses.

Default: -1

INDEPENDENT

String static

Defined in INDEPENDENT:94

The MovieClip will advance independently of its parent, even if its parent is paused. This is the default mode.

Default: "independent"

loop

Boolean

Defined in loop:145

Indicates whether this MovieClip should loop when it reaches the end of its timeline.

Default: true

mask

Shape

Inherited from DisplayObject: mask:530

A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation will be applied relative to the display object's parent coordinates (as if it were a child of the parent).

Default: null

mode

String

Defined in mode:128

Controls how this MovieClip advances its time. Must be one of 0 (INDEPENDENT), 1 (SINGLE_FRAME), or 2 (SYNCHED). See each constant for a description of the behaviour.

Default: null

mouseChildren

Boolean

Inherited from Container: mouseChildren:71

Indicates whether the children of this container are independently enabled for mouse/pointer interaction. If false, the children will be aggregated under the container - for example, a click on a child shape would trigger a click event on the container.

Default: true

mouseEnabled

Boolean

Indicates whether to include this object when running mouse interactions. Setting this to false for children of a Container will cause events on the Container to not fire when that child is clicked. Note that setting this property to false does not prevent the getObjectsUnderPoint method from returning the child.

Default: true

name

String

Inherited from DisplayObject: name:325

An optional name for this display object. Included in toString . Useful for debugging.

Default: null

onClick

Function deprecated

Inherited from DisplayObject: onClick:475

Deprecated: Use addEventListener and the "click" event.

REMOVED. Use addEventListener and the click event.

onDoubleClick

Function deprecated

Inherited from DisplayObject: onDoubleClick:482

Deprecated: Use addEventListener and the "dblclick" event.

REMOVED. Use addEventListener and the dblclick event.

onMouseOut

Function deprecated

Inherited from DisplayObject: onMouseOut:496

Deprecated: Use addEventListener and the "mouseout" event.

REMOVED. Use addEventListener and the mouseout event.

onMouseOver

Function deprecated

Inherited from DisplayObject: onMouseOver:489

Deprecated: Use addEventListener and the "mouseover" event.

REMOVED. Use addEventListener and the mouseover event.

onPress

Function deprecated

Inherited from DisplayObject: onPress:468

Deprecated: Use addEventListener and the "mousedown" event.

REMOVED. Use addEventListener and the mousedown event.

onTick

Function

Inherited from DisplayObject: onTick:503

REMOVED. Use addEventListener and the tick event.

parent

Container final

Inherited from DisplayObject: parent:334

A reference to the Container or Stage object that contains this display object, or null if it has not been added to one.

Default: null

paused

Boolean

Defined in paused:187

If true, the MovieClip's position will not advance when ticked.

Default: false

regX

Number

Inherited from DisplayObject: regX:346

The left offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50.

Default: 0

regY

Number

Inherited from DisplayObject: regY:355

The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50.

Default: 0

rotation

Number

Inherited from DisplayObject: rotation:364

The rotation in degrees for this display object.

Default: 0

scaleX

Number

Inherited from DisplayObject: scaleX:372

The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display object to twice its nominal width. To horizontally flip an object, set the scale to a negative number.

Default: 1

scaleY

Number

Inherited from DisplayObject: scaleY:381

The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display object to half its nominal height. To vertically flip an object, set the scale to a negative number.

Default: 1

shadow

Shadow

Inherited from DisplayObject: shadow:406

A shadow object that defines the shadow to render on this display object. Set to null to remove a shadow. If null, this property is inherited from the parent container.

Default: null

SINGLE_FRAME

String static

Defined in SINGLE_FRAME:105

The MovieClip will only display a single frame (as determined by the startPosition property).

Default: "single"

skewX

Number

Inherited from DisplayObject: skewX:390

The factor to skew this display object horizontally.

Default: 0

skewY

Number

Inherited from DisplayObject: skewY:398

The factor to skew this display object vertically.

Default: 0

snapToPixel

Boolean deprecated

Inherited from DisplayObject: snapToPixel:450

Deprecated: Hardware acceleration in modern browsers makes this unnecessary.

Indicates whether the display object should have its x & y position rounded prior to drawing it to stage. Snapping to whole pixels can result in a sharper and faster draw for images (ex. Bitmap & cached objects). This only applies if the enclosing stage has Stage/snapPixelsEnabled:property set to true. The snapToPixel property is true by default for Bitmap and Sprite instances, and false for all other display objects.

Note that this applies only rounds the display object's local position. You should ensure that all of the display object's ancestors (parent containers) are also on a whole pixel. You can do this by setting the ancestors' snapToPixel property to true.

Default: false

startPosition

Number

Defined in startPosition:137

Specifies what the first frame to play in this movieclip, or the only frame to display if mode is SINGLE_FRAME.

Default: 0

SYNCHED

String static

Defined in SYNCHED:115

The MovieClip will be advanced only when its parent advances and will be synched to the position of the parent MovieClip.

Default: "synched"

timeline

Timeline

Defined in timeline:162

The TweenJS Timeline that is associated with this MovieClip. This is created automatically when the MovieClip instance is initialized. Animations are created by adding TweenJS Tween instances to the timeline.

Example

var tween = createjs.Tween.get(target).to({x:0}).to({x:100}, 30); var mc = new createjs.MovieClip(); mc.timeline.addTween(tween);

Elements can be added and removed from the timeline by toggling an "_off" property using the tweenInstance.to() method. Note that using Tween.set is not recommended to create MovieClip animations. The following example will toggle the target off on frame 0, and then back on for frame 1. You can use the "visible" property to achieve the same effect.

 var tween = createjs.Tween.get(target).to({_off:false})
     .wait(1).to({_off:true})
     .wait(1).to({_off:false});

Default: null

version

String static

Defined in version:12

The version string for this release.

visible

Boolean

Inherited from DisplayObject: visible:415

Indicates whether this display object should be rendered to the canvas and included when running the Stage Stage/getObjectsUnderPoint method.

Default: true

x

Number

Inherited from DisplayObject: x:424

The x (horizontal) position of the display object, relative to its parent.

Default: 0

y

Number

Inherited from DisplayObject: y:432

Default: 0

Events

click

Inherited from DisplayObject: click:187

Available since 0.6.0

Dispatched when the user presses their left mouse button and then releases it while over the display object. See the MouseEvent class for a listing of event properties.

dblclick

Inherited from DisplayObject: dblclick:194

Available since 0.6.0

Dispatched when the user double clicks their left mouse button over this display object. See the MouseEvent class for a listing of event properties.

mousedown

Inherited from DisplayObject: mousedown:180

Available since 0.6.0

Dispatched when the user presses their left mouse button over the display object. See the MouseEvent class for a listing of event properties.

mouseout

Inherited from DisplayObject: mouseout:209

Available since 0.6.0

Dispatched when the user's mouse leaves this display object. This event must be enabled using enableMouseOver. See also rollout. See the MouseEvent class for a listing of event properties.

mouseover

Inherited from DisplayObject: mouseover:201

Available since 0.6.0

Dispatched when the user's mouse enters this display object. This event must be enabled using enableMouseOver. See also rollover. See the MouseEvent class for a listing of event properties.

pressmove

Inherited from DisplayObject: pressmove:257

Available since 0.7.0

After a mousedown occurs on a display object, a pressmove event will be generated on that object whenever the mouse moves until the mouse press is released. This can be useful for dragging and similar operations.

pressup

Inherited from DisplayObject: pressup:265

Available since 0.7.0

After a mousedown occurs on a display object, a pressup event will be generated on that object when that mouse press is released. This can be useful for dragging and similar operations.

rollout

Inherited from DisplayObject: rollout:237

Available since 0.7.0

This event is similar to mouseout, with the following differences: it does not bubble, and it considers Container instances as an aggregate of their content.

For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over shapeA, then directly on to shapeB, then off both. With a listener for Mouseout:event on myContainer, two events would be received, each targeting a child element:

  1. when the mouse leaves shapeA (target=shapeA)
  2. when the mouse leaves shapeB (target=shapeB)
However, with a listener for "rollout" instead, only a single event is received when the mouse leaves the aggregate myContainer content (target=myContainer).

This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.

rollover

Inherited from DisplayObject: rollover:217

Available since 0.7.0

This event is similar to mouseover, with the following differences: it does not bubble, and it considers Container instances as an aggregate of their content.

For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over shapeA and then directly on to shapeB. With a listener for Mouseover:event on myContainer, two events would be received, each targeting a child element:

  1. when the mouse enters shapeA (target=shapeA)
  2. when the mouse enters shapeB (target=shapeB)
However, with a listener for "rollover" instead, only a single event is received when the mouse first enters the aggregate myContainer content (target=myContainer).

This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.

tick

Inherited from DisplayObject: tick:273

Available since 0.6.0

Dispatched on each display object on a stage whenever the stage updates. This occurs immediately before the rendering (draw) pass. When update is called, first all display objects on the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their Tick:event event dispatched in order of their depth prior to the event being dispatched on their parent.

Event Payload:

  • target Object

    The object that dispatched the event.

  • type String

    The event type.

  • params Array

    An array containing any arguments that were passed to the Stage.update() method. For example if you called stage.update("hello"), then the params would be ["hello"].