Toolkit for CreateJS: How to control the main timeline from outside the canvas.

Question

Hey Everyone,
I'm currently trying to do something simple, but my animation breaks whenever I attempt to change my code. I have created a basic animation in Flash where an object moves from the left side of the canvas, to the right, and then loops from the last frame to the first frame. Nothing else. The animation is simply put on the main timeline. I exported the animation with Toolkit for CreateJS through Flash's extension and the animation runs as it should. I am trying to start and stop (restarting from the first frame) the animation with mouse over and mouse off events. I want the events to fire when moused over/off a div OUTSIDE the animation's canvas tag. Is this possible with CreateJS? I'm trying to figure out how to control the main timeline without being inside the canvas tag.
Example HTML:
http://www.thephotoncore.com/testing/example_test.html
Example Code:
<section id="container">
  <canvas id="canvas" width="550" height="400" style="background-color:#cccccc"></canvas>
  <section id="animation_control">
    <p>Roll over to start and stop animation.</p>
  </section>
</section>
Thanks again for the help!
-DJ

Answer 1

Hi DjPhantasy5,
All movieclips on the stage are children of the stage,
So on the "mouseover" all movieclips on the stage could be stopped with stop and on the "mouseout" all children could be restarted with gotoAndPlay like this:
function Stop()
          if (stage && stage.children)
                    var i, l = stage.children.length;
                    for (i = 0; i < l; i++)
                              var child = stage.children[i];
                              if ("stop" in child)
                                        child.stop();
function Restart()
          if (stage && stage.children)
                    var i, l = stage.children.length;
                    for (i = 0; i < l; i++)
                              var child = stage.children[i];
                              if ("gotoAndPlay" in child)
                                        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 code to "ball1" like so:
/* js
document.ball1 = this;
Then the stopping of the animation would look like:
function Stop()
     if ("ball1" in document)
          document.ball1.stop();
etc.
Have fun!
Ronald