I am running into an issue with looping an animation for an HTML5 ad I am working on. I add this code to the last frame to loop the animation 2 times and then stop playing at the last frame:
if (!this.looped) this.looped = 1;
if (this.looped++ == 2) this.stop();
It works, sort of. I nested and animated the type inside other movie clips and added it to the main timeline to keep the timeline short. I am controlling the main timeline and nest movie clip timelines by using the following code:
var tl=this;
tl.stop();
var delay = 2400;
var startTime=createjs.Ticker.getTime();
createjs.Ticker.addEventListener('tick',f);
function f(e){
if(createjs.Ticker.getTime()-startTime>delay){
tl.play();
createjs.Ticker.removeEventListener('tick',f);
}
}
I am unable to figure out why when the animation loops the 2nd time the type at the beginning of the ad does not animate in with the correct timing as it did the first time. I looked through the adobe community and online for a solution and cannot find one. I am hoping someone is able to help point me in the right direction. Thank you!
Here is the ad to see what how the animation gets stuck when it loops. https://oswaldomendoza.com/ads/
I also included screenshots of how I set up the main timeline and nested movie clip timeline.
AdChoices
