MovieClip Class
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. The MovieClip class has been included in the EaselJS minified file since 0.7.0.
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({loop:-1, labels:{myLabel: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
-
[props]
Parameters:
-
[props]Object optionalThe configuration properties to apply to this instance (ex.
{mode:MovieClip.SYNCHED}). Supported props for the MovieClip are listed below. These props are set on the corresponding instance properties except where specified.-
mode -
startPosition -
frameBounds
This object will also be passed into the Timeline instance associated with this MovieClip. See the documentation for Timeline for a list of supported props (ex.
paused,labels,loop,reversed, etc.) -
Item Index
Methods
- _addManagedChild
- _applyShadow
- _cloneProps
- _dispatchEvent
- _getBounds
- _getCurrentLabel
- _getDuration
- _getLabels
- _getNumChildren
- _getObjectsUnderPoint
- _getStage
- _goto
- _isMouseOpaque
- _renderFirstFrame
- _reset
- _resolveState
- _setState
- _testHit
- _testMask
- _tick
- _transformBounds
- _updateState
- _updateTimeline
- addChild
- addChildAt
- addEventListener
- advance
- cache
- clone
- cloneChildren
- contains
- dispatchEvent
- draw
- getBounds
- getCacheDataURL
- getChildAt
- getChildByName
- getChildIndex
- getConcatenatedDisplayProps
- getConcatenatedMatrix
- getCurrentLabel deprecated
- getDuration deprecated
- getLabels deprecated
- getMatrix
- getNumChildren deprecated
- getObjectsUnderPoint
- getObjectUnderPoint
- getStage deprecated
- getTransformedBounds
- globalToLocal
- gotoAndPlay
- gotoAndStop
- hasEventListener
- hitTest
- initialize deprecated
- isVisible
- localToGlobal
- localToLocal
- off
- on
- play
- removeAllChildren
- removeAllEventListeners
- removeChild
- removeChildAt
- removeEventListener
- set
- setBounds
- setChildIndex
- setTransform
- sortChildren
- stop
- swapChildren
- swapChildrenAt
- toString
- uncache
- updateCache
- updateContext
- willTrigger
Properties
- _bound_resolveState
- _bounds
- _cacheDataURL deprecated
- _cacheDataURLID deprecated
- _cacheScale deprecated
- _captureListeners
- _listeners
- _managed
- _props
- _rawPosition
- _rectangle
- _synchOffset
- _t
- _webGLRenderStyle
- actionsEnabled
- alpha
- autoReset
- bitmapCache
- cacheCanvas
- cacheID deprecated
- children
- compositeOperation
- currentFrame
- currentLabel
- cursor
- duration
- filters
- frameBounds
- framerate
- hitArea
- id
- INDEPENDENT static
- labels
- loop
- mask
- mode
- mouseChildren
- mouseEnabled
- name
- numChildren
- parent
- paused
- regX
- regY
- rotation
- scale
- scaleX
- scaleY
- shadow
- SINGLE_FRAME static
- skewX
- skewY
- snapToPixel
- stage
- startPosition
- SYNCHED static
- tickChildren
- tickEnabled
- timeline
- totalFrames
- transformMatrix
- visible
- x
- y
Methods
_addManagedChild
-
child -
offset
Adds a child to the timeline, and sets it up as a managed child.
_cloneProps
-
o
Parameters:
-
oDisplayObjectThe DisplayObject instance which will have properties from the current DisplayObject instance copied into.
Returns:
_dispatchEvent
-
eventObj -
eventPhase
_getObjectsUnderPoint
-
x -
y -
arr -
mouse -
activeListener -
currentDepth
Parameters:
-
xNumber -
yNumber -
arrArray -
mouseBooleanIf true, it will respect mouse interaction properties like mouseEnabled, mouseChildren, and active listeners.
-
activeListenerBooleanIf true, there is an active mouse event listener on a parent object.
-
currentDepthNumberIndicates the current depth of the search.
Returns:
_goto
-
positionOrLabel
_isMouseOpaque
()
Boolean
protected
Indicates whether the display object has any mouse event listeners or a cursor.
Returns:
_renderFirstFrame
()
protected
Renders position 0 without running actions or updating _rawPosition. Primarily used by Animate CC to build out the first frame in the constructor of MC symbols. NOTE: not tested when run after the MC advances past the first frame.
_reset
()
private
_resolveState
()
protected
Runs via a callback after timeline property updates and before actions.
_testMask
-
target -
x -
y
Parameters:
-
targetDisplayObject -
xNumber -
yNumber
Returns:
Indicates whether the x/y is within the masked region.
_tick
-
evtObj
Parameters:
-
evtObjObjectAn event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs. function.
_updateState
()
protected
Called before the object gets drawn and is a chance to ensure the display state of the object is correct. Mostly used by MovieClip and BitmapText to correct their internal state and children prior to being drawn.
Is manually called via draw in a Stage but is automatically called when present in a StageGL instance.
_updateTimeline
-
jump
Parameters:
-
jumpBooleanIndicates whether this update is due to jumping (via gotoAndXX) to a new position.
addChild
-
child
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:
-
childDisplayObjectThe display object to add.
Returns:
The child that was added, or the last child if multiple children were added.
addChildAt
-
child -
index
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:
-
childDisplayObjectThe display object to add.
-
indexNumberThe index to add the child at.
Returns:
Returns the last child that was added, or the last child if multiple children were added.
addEventListener
-
type -
listener -
[useCapture]
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:
-
typeStringThe string type of the event.
-
listenerFunction | ObjectAn object with a handleEvent method, or a function that will be called when the event is dispatched.
-
[useCapture]Boolean optionalFor events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.
advance
-
[time]
Advances the playhead. This occurs automatically each tick by default.
Parameters:
-
[time]Number optionalThe amount of time in ms to advance by. Only applicable if framerate is set.
cache
-
x -
y -
width -
height -
[scale=1] -
[options=undefined]
Draws the display object into a new element, which is then used for subsequent draws. Intended 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() again. You must specify the cached 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);
shape.cache(-25, -25, 50, 50);Note that filters need to be defined before the cache is applied or you will have to call updateCache after application. Check out the Filter class for more information. Some filters (ex. BlurFilter) may not work as expected in conjunction with the scale param.
Usually, the resulting cacheCanvas will have the dimensions width scale, height scale, however some filters (ex. BlurFilter) will add padding to the canvas dimensions.
In previous versions caching was handled on DisplayObject but has since been moved to BitmapCache. This allows for easier interaction and alternate cache methods like WebGL with StageGL. For more information on the options object, see the BitmapCache define.
Parameters:
-
xNumberThe x coordinate origin for the cache region.
-
yNumberThe y coordinate origin for the cache region.
-
widthNumberThe width of the cache region.
-
heightNumberThe height of the cache region.
-
[scale=1]Number optionalThe 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.
-
[options=undefined]Object optionalSpecify additional parameters for the cache logic
clone
()
MovieClip instances cannot be cloned.
cloneChildren
-
o
Recursively clones all children of this container, and adds them to the target container.
Parameters:
-
oContainerThe target container.
contains
-
child
Returns true if the specified display object either is this container or is a descendent (child, grandchild, etc) of this container.
Parameters:
-
childDisplayObjectThe DisplayObject to be checked.
Returns:
true if the specified display object either is this container or is a descendent.
dispatchEvent
-
eventObj -
[bubbles] -
[cancelable]
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:
-
eventObjObject | String | EventAn 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 if necessary with the specified type. This latter approach can be used to avoid event object instantiation for non-bubbling events that may not have any listeners.
-
[bubbles]Boolean optionalSpecifies the
bubblesvalue when a string was passed to eventObj. -
[cancelable]Boolean optionalSpecifies the
cancelablevalue when a string was passed to eventObj.
Returns:
Returns false if preventDefault() was called on a cancelable event, true otherwise.
draw
-
ctx -
ignoreCache
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:
-
ctxCanvasRenderingContext2DThe canvas 2D context object to draw into.
-
ignoreCacheBooleanIndicates 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
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 Bitmap/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 recalculatingTo 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:
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. Only generated if the cache has changed, otherwise returns last result.
Returns:
The image data url for the cache.
getChildAt
-
index
Returns the child at the specified index.
Example
container.getChildAt(2);Parameters:
-
indexNumberThe index of the child to return.
Returns:
The child at the specified index. Returns null if there is no child at the index.
getChildByName
-
name
Returns the child with the specified name.
Parameters:
-
nameStringThe name of the child to return.
Returns:
The child with the specified name.
getChildIndex
-
child
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:
-
childDisplayObjectThe child to return the index of.
Returns:
The index of the specified child. -1 if the child is not found.
getConcatenatedDisplayProps
-
[props]
Generates a DisplayProps object representing the combined display properties of the object and all of its parent Containers up to the highest level ancestor (usually the Stage).
Parameters:
-
[props]DisplayProps optionalA DisplayProps object to populate with the calculated values. If null, a new DisplayProps object is returned.
Returns:
The combined display properties.
getConcatenatedMatrix
-
[matrix]
Generates a 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:
Returns:
The combined matrix.
getMatrix
-
matrix
Returns a matrix based on this object's current transform.
Parameters:
-
matrixMatrix2DOptional. A Matrix2D object to populate with the calculated values. If null, a new Matrix object is returned.
Returns:
A matrix representing this display object's transform.
getObjectsUnderPoint
-
x -
y -
[mode=0]
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 stagemousemove),
and only if the mouse's position has changed.
- By default (mode=0) this method evaluates all display objects.
- By setting the
modeparameter to1, the mouseEnabled and MouseChildren:property properties will be respected. - Setting the
modeto2additionally excludes display objects that do not have active mouse event listeners or a DisplayObject:cursor:property property. That is, only objects that would normally intercept mouse interaction will be included. This can significantly improve performance in some cases by reducing the number of display objects that need to be tested.
Parameters:
Returns:
An Array of DisplayObjects under the specified coordinates.
getObjectUnderPoint
-
x -
y -
mode
Similar to getObjectsUnderPoint, but returns only the top-most display
object. This runs significantly faster than getObjectsUnderPoint(), but is still potentially an expensive
operation. See getObjectsUnderPoint for more information.
Parameters:
Returns:
The top-most display object under the specified coordinates.
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:
A Rectangle instance representing the bounds, or null if bounds are not available for this object.
globalToLocal
-
x -
y -
[pt]
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 = displayObject.globalToLocal(100, 100);
// Results in x=-200, y=-100Parameters:
Returns:
A Point instance with x and y properties correlating to the transformed position in the display object's coordinate space.
gotoAndPlay
-
positionOrLabel
Advances this movie clip to the specified position or label and sets paused to false.
gotoAndStop
-
positionOrLabel
Advances this movie clip to the specified position or label and sets paused to true.
hasEventListener
-
type
Indicates whether there is at least one listener for the specified event type.
Parameters:
-
typeStringThe string type of the event.
Returns:
Returns true if there is at least one listener for the specified event.
hitTest
-
x -
y
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:
Returns:
A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified coordinates.
initialize
()
deprecated
isVisible
()
Boolean
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 indicating whether the display object would be visible if drawn to a canvas
localToGlobal
-
x -
y -
[pt]
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 = displayObject.localToGlobal(100, 100);
// Results in x=400, y=300Parameters:
Returns:
A Point instance with x and y properties correlating to the transformed coordinates on the stage.
localToLocal
-
x -
y -
target -
[pt]
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:
-
xNumberThe x position in the source display object to transform.
-
yNumberThe y position on the source display object to transform.
-
targetDisplayObjectThe target display object to which the coordinates will be transformed.
-
[pt]Point | Object optionalAn object to copy the result into. If omitted a new Point object with x/y properties will be returned.
Returns:
Returns a Point instance with x and y properties correlating to the transformed position in the target's coordinate space.
off
-
type -
listener -
[useCapture]
A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the .on method.
IMPORTANT: To remove a listener added with on, you must pass in the returned wrapper function as the listener. See
on for an example.
on
-
type -
listener -
[scope] -
[once=false] -
[data] -
[useCapture=false]
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 wrapper function is returned for use with removeEventListener (or off).
IMPORTANT: To remove a listener added with on, you must pass in the returned wrapper function as the listener, or use
remove. Likewise, each time you call on a NEW wrapper function is subscribed, so multiple calls
to on with the same params will create multiple listeners.
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:
-
typeStringThe string type of the event.
-
listenerFunction | ObjectAn object with a handleEvent method, or a function that will be called when the event is dispatched.
-
[scope]Object optionalThe 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 optionalIf true, the listener will remove itself after the first time it is triggered.
-
[data]optionalArbitrary data that will be included as the second parameter when the listener is called.
-
[useCapture=false]Boolean optionalFor events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.
Returns:
Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.
play
()
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.removeAllEventListeners();
// Remove all click listeners
displayObject.removeAllEventListeners("click");Parameters:
-
[type]String optionalThe string type of the event. If omitted, all listeners for all types will be removed.
removeChild
-
child
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:
-
childDisplayObjectThe child to remove.
Returns:
true if the child (or children) was removed, or false if it was not in the display list.
removeChildAt
-
index
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:
-
indexNumberThe index of the child to remove.
Returns:
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);set
-
props
Provides a chainable shortcut method for setting a number of properties on the 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:
-
propsObjectA generic object containing properties to copy to the DisplayObject instance.
Returns:
Returns the instance the method is called on (useful for chaining calls.)
setBounds
-
x -
y -
width -
height
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).
setChildIndex
-
child -
index
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:
-
childDisplayObject -
indexNumber
setTransform
-
[x=0] -
[y=0] -
[scaleX=1] -
[scaleY=1] -
[rotation=0] -
[skewX=0] -
[skewY=0] -
[regX=0] -
[regY=0]
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 optionalThe horizontal translation (x position) in pixels
-
[y=0]Number optionalThe vertical translation (y position) in pixels
-
[scaleX=1]Number optionalThe horizontal scale, as a percentage of 1
-
[scaleY=1]Number optionalthe vertical scale, as a percentage of 1
-
[rotation=0]Number optionalThe rotation, in degrees
-
[skewX=0]Number optionalThe horizontal skew factor
-
[skewY=0]Number optionalThe vertical skew factor
-
[regX=0]Number optionalThe horizontal registration point in pixels
-
[regY=0]Number optionalThe vertical registration point in pixels
Returns:
Returns this instance. Useful for chaining commands.
sortChildren
-
sortFunction
Performs an array sort operation on the child list.
Example: Display children with a higher y in front.
var sortFunction = function(obj1, obj2, options) {
if (obj1.y > obj2.y) { return 1; }
if (obj1.y < obj2.y) { return -1; }
return 0;
}
container.sortChildren(sortFunction);Parameters:
-
sortFunctionFunctionthe function to use to sort the child list. See JavaScript's
Array.sortdocumentation for details.
stop
()
Sets paused to true.
swapChildren
-
child1 -
child2
Swaps the specified children's depth in the display list. Fails silently if either child is not a child of this Container.
Parameters:
-
child1DisplayObject -
child2DisplayObject
swapChildrenAt
-
index1 -
index2
Swaps the children at the specified indexes. Fails silently if either index is out of range.
toString
()
String
Returns a string representation of this object.
Returns:
a string representation of the instance.
updateCache
-
compositeOperation
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();In previous versions caching was handled on DisplayObject but has since been moved to BitmapCache. This allows for easier interaction and alternate cache methods like WebGL and StageGL.
Parameters:
-
compositeOperationStringThe compositeOperation to use, or null to clear the cache and redraw it. whatwg spec on compositing.
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:
-
ctxCanvasRenderingContext2DThe canvas 2D to update.
willTrigger
-
type
Indicates whether there is at least one listener for the specified event type on this object or any of its ancestors (parent, parent's parent, etc). A return value of true indicates that if a bubbling event of the specified type is dispatched from this object, it will trigger at least one listener.
This is similar to hasEventListener, but it searches the entire event flow for a listener, not just this object.
Parameters:
-
typeStringThe string type of the event.
Returns:
Returns true if there is at least one listener for the specified event.
Properties
_t
Number
private
The time remaining from the previous tick, only applicable when .framerate is set.
_webGLRenderStyle
Number
protected
Where StageGL should look for required display properties, matters only for leaf display objects. Containers or cached objects won't use this property, it's for native display of terminal elements.
Default: 0
actionsEnabled
Boolean
If true, actions in this MovieClip's tweens will be run when the playhead advances.
Default: true
alpha
Number
The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque.
Default: 1
autoReset
Boolean
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 of "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
bitmapCache
BitmapCache
readonly
If a cache has been made, this returns the class that is managing the cacheCanvas and its properties. See BitmapCache for more information. Use this to control, inspect, and change the cache. In special circumstances this may be a modified or subclassed BitmapCache.
Default: null
cacheCanvas
HTMLCanvasElement | Object
readonly
If a cache is active, this returns the canvas that holds the image of this display object. See cache for more information. Use this to display the result of a cache. This will be a HTMLCanvasElement unless special cache rules have been deliberately enabled for this cache.
Default: null
cacheID
Number
deprecated
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. Moved to BitmapCache
Default: 0
children
Array
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. For a list of supported compositeOperation value, visit
the W3C draft on Compositing and Blending.
Default: null
currentLabel
String
readonly
Returns the name of the label on or immediately before the current frame.
cursor
String
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
filters
Array
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
An array of bounds for each frame in the MovieClip. This is mainly intended for tool output.
Default: null
framerate
Number
By default MovieClip instances advance one frame per tick. Specifying a framerate for the MovieClip will cause it to advance based on elapsed time between ticks as appropriate to maintain the target framerate.
For example, if a MovieClip with a framerate of 10 is placed on a Stage being updated at 40fps, then the MovieClip will advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will vary slightly between frames.
This feature is dependent on the tick event object (or an object with an appropriate "delta" property) being passed into update.
Default: null
hitArea
DisplayObject
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
Unique ID for this display object. Makes display objects easier for some uses.
Default: -1
INDEPENDENT
String
static
readonly
The MovieClip will advance independently of its parent, even if its parent is paused. This is the default mode.
Default: "independent"
labels
Array
readonly
Returns an array of objects with label and position (aka frame) properties, sorted by position.
loop
Number
Specifies how many times this MovieClip should loop. A value of -1 indicates it should loop indefinitely. A value of 1 would cause it to loop once (ie. play a total of twice).
Default: -1
mask
Shape
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
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
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. Setting this property to false does not prevent the getObjectsUnderPoint
method from returning the child.
Note: In EaselJS 0.7.0, the mouseEnabled property will not work properly with nested Containers. Please check out the latest NEXT version in GitHub for an updated version with this issue resolved. The fix will be provided in the next release of EaselJS.
Default: true
name
String
An optional name for this display object. Included in toString . Useful for debugging.
Default: null
parent
Container
final
readonly
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
regX
Number
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. Cached object's registration points should be set based on pre-cache conditions, not cached size.
Default: 0
regY
Number
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. Cached object's registration points should be set based on pre-cache conditions, not cached size.
Default: 0
scale
Number
Set both the scaleX and the scaleY
property to the same value. Note that when you get the value, if the scaleX and scaleY are different values,
it will return only the scaleX.
Default: 1
scaleX
Number
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
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
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
readonly
The MovieClip will only display a single frame (as determined by the startPosition property).
Default: "single"
snapToPixel
Boolean
Indicates whether the display object should be drawn to a whole pixel when snapToPixelEnabled is true. To enable/disable snapping on whole categories of display objects, set this value on the prototype (Ex. Text.prototype.snapToPixel = true).
Default: true
stage
Stage
readonly
Returns the Stage instance that this display object will be rendered on, or null if it has not been added to one.
startPosition
Number
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
readonly
The MovieClip will be advanced only when its parent advances and will be synched to the position of the parent MovieClip.
Default: "synched"
tickChildren
Boolean
If false, the tick will not be propagated to children of this Container. This can provide some performance benefits. In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).
Default: true
tickEnabled
Boolean
If false, the tick will not run on this display object (or its children). This can provide some performance benefits. In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates on some display objects (ex. Sprite & MovieClip frame advancing, and DOMElement display properties).
Default: true
timeline
Timeline
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
transformMatrix
Matrix2D
If set, defines the transformation for this display object, overriding all other transformation properties (x, y, rotation, scale, skew).
Default: null
visible
Boolean
Indicates whether this display object should be rendered to the canvas and included when running the Stage getObjectsUnderPoint method.
Default: true
Events
added
Dispatched when the display object is added to a parent container.
click
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
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
Dispatched when the user presses their left mouse button over the display object. See the MouseEvent class for a listing of event properties.
mouseout
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
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
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.
Please note that if the initial mouse target from a mousedown event is removed from the stage after being pressed
(e.g. during a pressmove event), a pressmove event is still generated. However since it is no longer in the
display list, the event can not bubble. This means that previous ancestors (parent containers) will not receive
the event, and therefore can not re-dispatch it. If you intend to listen for pressup
or pressmove on a dynamic object (such as a MovieClip or Container),
then ensure you set mouseChildren to false.
pressup
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.
Please note that if the initial mouse target from a mousedown event is removed from the stage after being pressed
(e.g. during a pressmove event), a pressup event is still generated. However since it is no longer in the
display list, the event can not bubble. This means that previous ancestors (parent containers) will not receive
the event, and therefore can not re-dispatch it. If you intend to listen for pressmove
or pressup on a dynamic object (such as a MovieClip or Container),
then ensure you set mouseChildren to false.
removed
Dispatched when the display object is removed from its parent container.
rollout
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:
- when the mouse leaves shapeA (target=shapeA)
- when the mouse leaves shapeB (target=shapeB)
This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.
rollover
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:
- when the mouse enters shapeA (target=shapeA)
- when the mouse enters shapeB (target=shapeB)
This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.
tick
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.