Toolbox for CreateJS: how to control the main timeline from outside the canvas.

Hey everybody,

I'm currently doing something simple, but my animation film breaks whenever I try to change my code. I created a basic animation in Flash where an object moves from the left side of the canvas, to the right and then loops of the last frame of the first image. Nothing else. The animation is simply placed on the main timeline. I exported the animation with the Toolbox for CreateJS through the extension of the Flash and animation series as it should. I'm trying to start and stop (reboot of the first image) the animation with the mouse on and off mouse events. I want that the events to fire when wriggling over/stop a div outside the animation canvas tag. Is this possible with CreateJS? I'm trying to find a way to control the main timeline without being inside the canvas tag.

HTML example:

http://www.thephotoncore.com/testing/example_test.html

Example Code:

< id article 'container' = >

< canvas id = "canvas" width = "550" height = "400" style = "background-color: #cccccc" > < / canvas >

< section id = "animation_control" >

< p > hover over to start and stop animation. < /p >

< / section >

< / section >

Thanks again for the help!

-DJ

Hi DjPhantasy5,

All the clips on the scene are children of the scene,

So now the "mouseover" all clips on the stage could be stopped with stop and on the "mouseout/mouseouthandler()" all the children could be restarted with gotoAndPlay like this:

function Stop()

{

If (stage & stage.children)

{

var t = stage.children.length;

for (i = 0; i< l;="">

{

child var = stage.children [i];

If ('stop' in child)

Child.Stop ();

}

}

}

function Restart()

{

If (stage & stage.children)

{

var t = stage.children.length;

for (i = 0; i< l;="">

{

child var = stage.children [i];

If ("gotoAndPlay" children)

child.gotoAndPlay (0);

}

}

}

See http://www.liauw.nl/forums/adobe/djfantasy5/index.html

But it is also possible to expose "ball1", for example, by adding it to the document.

This can be done by adding the code for "ball1" as follows:

/ * js

document.ball1 = this;

*/

Then stop the animation would look like:

function Stop()

{

If ('ball1' in the document)

document.ball1.stop ();

}

etc.

Have fun!

Ronald

Tags: Adobe Animate

Similar Questions

Maybe you are looking for