springroll.easeljs.BitmapMovieClip Class

A class similar to createjs.MovieClip, but made to play animations from a springroll.easeljs.TextureAtlas. The EaselJS Sprite class requires a spritesheet with equal sized and spaced frames. By using TextureAtlas, you can use a much smaller spritesheet, sprites on screen with fewer extra transparent pixels, and use the same API as MovieClip.

Format for BitmapMovieClip data:

{
    fps:30,
    labels:
    {
        animStart:0,
        animStart_loop:15
    },
    origin:{ x: 20, y:30 },
    frames:
    [
        {
            name:"myAnim#",
            min:1,
            max:20,
            digits:4
        }
    ],
    scale:1
}

The example object describes a 30 fps animation that is 20 frames long, and was originally myAnim0001.png->myAnim0020.png, with frame labels on the first and 16th frames. 'digits' is optional, and defaults to 4.

Constructor

springroll.easeljs.BitmapMovieClip

(
  • [atlas]
  • [data]
)

Parameters:

  • [atlas] springroll.easeljs.TextureAtlas optional

    The texture atlas to pull frames from.

  • [data] Object optional

    Initialization data

    • [fps] Int optional

      Framerate to play the movieclip at. Omitting this will use the current framerate.

    • [labels] Object optional

      A dictionary of the labels in the movieclip to assist in playing animations.

    • [origin={x:0,y:0}] Object optional

      The origin of the movieclip.

    • [frames] Array optional

      An array of frame sequences to pull from the texture atlas.

      • [name] String optional
        The name to use for the frame sequence. This should include a "#" to be replaced with the image number.
      • [min] Int optional
        The first frame number in the frame sequence.
      • [max] Int optional
        The last frame number in the frame sequence.
      • [digits=4] Int optional
        The maximum number of digits in the names of the frames, e.g. myAnim0001 has 4 digits.
    • [scale=1] Number optional

      The scale at which the art was exported, e.g. a scale of 1.4 means the art was increased in size to 140% before exporting and should be scaled back down before drawing to the screen.

_goto

(
  • positionOrLabel
)
protected

Defined in _goto:635

Parameters:

  • positionOrLabel String | Number

    The animation name or frame number to go to.

_reset

()
private

Defined in _reset:697

_tick

(
  • props
)
protected

Defined in _tick:623

Parameters:

  • props Object

    Properties to copy to the DisplayObject DisplayObject/tick event object. function.

_updateTimeline

()
protected

Defined in _updateTimeline:666

advance

(
  • [time]
)

Defined in advance:386

Advances the playhead. This occurs automatically each tick by default.

Parameters:

  • [time] Number optional

    The amount of time in ms to advance by. If 0 or null, time is not advanced but the timeline is still updated.

cacheByBounds

(
  • [buffer=0]
  • [scale=1]
)
Does a cache by the nominalBounds set from Flash

Parameters:

  • [buffer=0] Int optional
    The space around the nominal bounds to include in cache image
  • [scale=1] Number optional
    The scale to cache the container by.

cacheByRect

(
  • rect
  • [buffer=0]
  • [scale=1]
)
Does a cache by a given rectangle

Parameters:

  • rect createjs.Rectangle
    The rectangle to cache with.
  • [buffer=0] Int optional
    Additional space around the rectangle to include in cache image
  • [scale=1] Number optional
    The scale to cache the container by.

clone

(
  • sprite
  • [x=0]
  • [y=0]
)
springroll.easeljs.BitmapMovieClip
static

Defined in clone:590

Clone a sprite. Creates a shallow copy of loaded element

Parameters:

copyFrom

(
  • other
)

Defined in copyFrom:572

Copies the labels, textures, origin, and framerate from another BitmapMovieClip. The labels and textures are copied by reference, instead of a deep copy.

Parameters:

  • other BitmapMovieClip

    The movieclip to copy data from.

destroy

()

Defined in destroy:608

Destroys the BitmapMovieClip, removing all children and nulling all reference variables.

draw

(
  • ctx
  • ignoreCache
)

Defined in draw:317

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).

getCurrentLabel

() String

Defined in getCurrentLabel:435

Returns the name of the label on or immediately before the current frame.

Returns:

String:

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

getEvents

() Array

Defined in getEvents:424

Returns a sorted list of the labels which can be played with Animator.

Returns:

Array:

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

getLabels

() ArrayObject

Defined in getLabels:413

Returns a sorted list of the labels defined on this BitmapMovieClip.

Returns:

ArrayObject:

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

gotoAndCache

()

Defined in gotoAndCache:380

To provide feature parity with the createjs.MovieClip mixin

gotoAndPlay

(
  • positionOrLabel
)

Defined in gotoAndPlay:358

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:369

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.

init

(
  • atlas
  • data
)

Defined in init:454

Initializes or re-initializes the BitmapMovieClip.

Parameters:

  • atlas springroll.easeljs.TextureAtlas

    The texture atlas to pull frames from.

  • data Object

    Initialization data

    • [fps] Int optional

      Framerate to play the movieclip at. Omitting this will use the current framerate.

    • [labels] Object optional

      A dictionary of the labels in the movieclip to assist in playing animations.

    • [origin={x:0,y:0}] Object optional

      The origin of the movieclip.

    • [frames] Array optional

      An array of frame sequences to pull from the texture atlas.

      • [name] String optional
        The name to use for the frame sequence. This should include a "#" to be replaced with the image number.
      • [min] Int optional
        The first frame number in the frame sequence.
      • [max] Int optional
        The last frame number in the frame sequence.
      • [digits=4] Int optional
        The maximum number of digits in the names of the frames, e.g. myAnim0001 has 4 digits.
    • [scale=1] Number optional

      The scale at which the art was exported, e.g. a scale of 1.4 means the art was increased in size to 140% before exporting and should be scaled back down before drawing to the screen.

isVisible

() Boolean

Defined in isVisible:303

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

play

()

Defined in play:340

Sets paused to false.

stop

()

Defined in stop:349

Sets paused to true.

_bitmap

createjs.Bitmap private

Defined in _bitmap:148

The Bitmap used to render the current frame of the animation.

_currentTexture

createjs.TextureAtlas.Texture private

Defined in _currentTexture:180

The current texture.

_duration

Number private

Defined in _duration:119

When the BitmapMovieClip is framerate independent, this is the total time in seconds for the animation.

Default: 0

_events

Array private

Defined in _events:164

An array of event labels.

_framerate

Number private

Defined in _framerate:107

By default BitmapMovieClip instances advance one frame per tick. Specifying a framerate for the BitmapMovieClip will cause it to advance based on elapsed time between ticks as appropriate to maintain the target framerate.

Default: 0

_frames

Array private

Defined in _frames:172

An array of textures.

_labels

Array private

Defined in _labels:156

An array of frame labels.

_origin

Point private

Defined in _origin:188

The origin point of the BitmapMovieClip.

_prevPosition

Number private

Defined in _prevPosition:140

Default: 0

_scale

Number private

Defined in _scale:196

A scale to apply to the images in the BitmapMovieClip to restore normal size (if spritesheet was exported at a smaller or larger size).

_t

Number private

Defined in _t:130

When the BitmapMovieClip is framerate independent, this is the time elapsed from frame 0 in seconds.

Default: 0

currentFrame

Number

Defined in currentFrame:80

The current frame of the movieclip.

Default: 0

currentTexture

createjs.TextureAtlas.Texture

Defined in currentTexture:287

(Read-Only) The Texture of the current frame

elapsedTime

Number public

Defined in elapsedTime:252

When the BitmapMovieClip is framerate independent, this is the time elapsed from frame 0 in seconds.

Default: 0

framerate

Number

Defined in framerate:219

By default BitmapMovieClip instances advance one frame per tick. Specifying a framerate for the BitmapMovieClip will cause it to advance based on elapsed time between ticks as appropriate to maintain the target framerate.

For example, if a BitmapMovieClip with a framerate of 10 is placed on a Stage being updated at 40fps, then the BitmapMovieClip 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 Stage/update.

Default: 0

loop

Boolean

Defined in loop:72

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

Default: true

nominalBounds

createjs.Rectangle

Defined in nominalBounds:97

Boundaries of the animation, like the nominalBounds produced by Flash's HTML5 exporter. This uses the full, untrimmed size of the first frame.

paused

Boolean

Defined in paused:89

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

Default: false

totalFrames

Int

Defined in totalFrames:272

(Read-Only) The total number of frames in the timeline

Default: 0