Highlighted

HTML5 canvas looping animation using code

Community Beginner ,
Aug 07, 2019

Copy link to clipboard

Copied

Hi!

I'm new to animate html5! I have some prior experience coding with Action Script but it's been a few years so I'm pretty rusty.

If anyone has any beginner tutorials they could point me toward that would be awesome!

Now to my question: I have a movie clip that I'm bringing onto the stage with 'addChild' and another movie clip in there with a timeline. I'm wondering how to control the nested movie clip and loop it at a certain point? This is the code I've got so far. I just can't seem to get the if statement to work

var Cover = new lib.cover_mc();

createjs.Ticker.on("tick", animLoop);

this.addCover = function () {

this.addChild(Cover);

}

this.addCover();

function animLoop(e) {

if (Cover.bee_mc.currentFrame("endLoop")) {

Cover.bee_mc.gotoAndPlay("startLoop");

}

}

actually I figured it out! I wanted the animation in a nested movie clip to loop when it reached a particular frame in the timeline (so I could trigger some other animation in the same timeline with a mouse click). This is the resulting code:

createjs.Ticker.on("tick", loopAnim);

function loopAnim(e) {

if (Cover.bee_mc.currentLabel == "endLoop") {

Cover.bee_mc.gotoAndPlay("startLoop");

}

}

Views

211

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML5 canvas looping animation using code

Community Beginner ,
Aug 07, 2019

Copy link to clipboard

Copied

Hi!

I'm new to animate html5! I have some prior experience coding with Action Script but it's been a few years so I'm pretty rusty.

If anyone has any beginner tutorials they could point me toward that would be awesome!

Now to my question: I have a movie clip that I'm bringing onto the stage with 'addChild' and another movie clip in there with a timeline. I'm wondering how to control the nested movie clip and loop it at a certain point? This is the code I've got so far. I just can't seem to get the if statement to work

var Cover = new lib.cover_mc();

createjs.Ticker.on("tick", animLoop);

this.addCover = function () {

this.addChild(Cover);

}

this.addCover();

function animLoop(e) {

if (Cover.bee_mc.currentFrame("endLoop")) {

Cover.bee_mc.gotoAndPlay("startLoop");

}

}

actually I figured it out! I wanted the animation in a nested movie clip to loop when it reached a particular frame in the timeline (so I could trigger some other animation in the same timeline with a mouse click). This is the resulting code:

createjs.Ticker.on("tick", loopAnim);

function loopAnim(e) {

if (Cover.bee_mc.currentLabel == "endLoop") {

Cover.bee_mc.gotoAndPlay("startLoop");

}

}

Views

212

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 07, 2019 0
Adobe Community Professional ,
Aug 07, 2019

Copy link to clipboard

Copied

Please explain what you think the currentFrame() function does, so we can know what you're trying to do.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2019 0
Community Beginner ,
Aug 07, 2019

Copy link to clipboard

Copied

I think it gets current frame of a movie clip?

That's obviously wrong, but how else do I access a particular frame or frame label of a movie clip?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2019 0
Community Beginner ,
Aug 07, 2019

Copy link to clipboard

Copied

actually I figured it out! I wanted the animation in a nested movie clip to loop when it reached a particular frame in the timeline (so I could trigger some other animation in the same timeline with a mouse click). This is the resulting code:

createjs.Ticker.on("tick", loopAnim);

function loopAnim(e) {

if (Cover.bee_mc.currentLabel == "endLoop") {

Cover.bee_mc.gotoAndPlay("startLoop");

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2019 0