Skip navigation
DjPhantasy5
Currently Being Moderated

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

Feb 3, 2013 12:25 PM

Tags: #flash #html5 #canvas #toolkit #createjs #toolkit_for_createjs #create_js

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

 
Replies
  • Currently Being Moderated
    Feb 4, 2013 3:05 PM   in reply to DjPhantasy5

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points