CODEWITHSUNDEEP
movieclipcreatejseaseljs
DevR
DevR

Reputation: 335

How to play a MovieClip x times

The MovieClip class in the EaselJS module has a loop property which can be set to true or false, causing the movie clip to play infinitely or only once. http://www.createjs.com/docs/easeljs/classes/MovieClip.html

I need to play a movie clip (banner ad) three times. How can that be done?

This is the init function:

<script>
var canvas, stage, exportRoot;
function init() {
	// --- write your JS code here ---
	
	canvas = document.getElementById("canvas");
	images = images||{};

	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
	exportRoot = new lib.banner_728x90();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();
	stage.enableMouseOver();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}

</script>

Upvotes: 0

Views: 757

Answers (1)

Lanny
Lanny

Reputation: 11294

There is currently no loop count support, nor any events from MovieClip indicating when an animation finishes. The latter isn't a bad idea, feel free to log a bug in GitHub.

One solution you could use would be to dispatch some custom events from a timeline script in Animate:

this.dispatchEvent("walkend");

Then you can listen for the event, and handle it yourself.

var loopCount = 0;
exportRoot.myClip.on("walkend", function(event) {
    loopCount++;
    if (loopCount > 2) {
        doSomething();
        event.remove(); // No longer get this event.
    }
});

Hope that helps.

Upvotes: 2

Related Questions