6 Replies Latest reply on Jul 23, 2014 1:50 AM by Laubender

    HTML5-canvas: animation

    Ief_DR Level 1


      I've made an animation in the HTML5-canvas. It works perfectly. See: http://www.studio-ief.be/extra/potlood_HTML.html.

      I 've put the javascript in frame 1:



      this.knop.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame.bind(this));


      function fl_ClickToGoToAndPlayFromFrame()






      This is not what I want but I couldn't get it better. Now it starts playing on hover on. But when I hover off it continues playing. And on hovering on again it goes back to the beginning of the animation. I don't want all of that.

      Can someone help me to modify the javascript-code? I want to play animation on hover on and pause it on hover off; when the animation restarts on hover on it has to go on from the point were it stopped. "knop" is the name of the instance.



        • 1. Re: HTML5-canvas: animation
          Ned Murphy Adobe Community Professional & MVP

          I think you need a "mouseout" listener whose event handler function executes a this.stop(); command, and the "mouseover" probably needs to issue a this.play() command rather than a this.gotoAndPlay(2) command.

          1 person found this helpful
          • 2. Re: HTML5-canvas: animation
            Ief_DR Level 1

            It works now. Thanks for helping!


            Is it possible not to change the mouse-pointer in a hand? It has to stay an arrow, even on mouse over.

            • 3. Re: HTML5-canvas: animation
              Ned Murphy Adobe Community Professional & MVP

              Try using:


              this.knop.useHandCursor = false;

              • 4. Re: HTML5-canvas: animation
                Ief_DR Level 1

                It tried to add it to the code. It doesn't do anything. Look at: http://www.studio-ief.be/extra/potlood_HTML.html Maybe I have to alter it?

                • 5. Re: Re: HTML5-canvas: animation
                  Laubender Adobe Community Professional & MVP

                  @lef_DR – I'm totally new to the "HTML5-canvas"-animation features in Flash CC 2014. Used Flash some years ago and now trying to convert older, simple animations to HTML5. While using HTML5-canvas, what is working well in principle, I came accross some problems:


                  1. Scaling the view of the animation in the browser is rendering the animation blurry.
                  (Firefox 30.0 on Mac OSX)


                  I can see this "effect" in your animation too.


                  Not so with my original SWF animation.
                  Can I do something about that? Can we do something about this?
                  Or is this a limitation of the canvas element in HTML5?


                  Coding some SVG animation will show no blurryness.

                  However, Flash CC 2014 seems not to support SVG animation.


                  2. Start stop animation with a double click

                  I used some ActionScript3 code in my original design to start, stop animation.

                  These features did not travel over in the conversion process to HTML5.


                  Used code:


                  //Action inside M1 inside Logo_Outlines
                  //Uwe Laubender
                  //Double click must be enabeled, because default is "false":
                  stage.doubleClickEnabled = true;
                  function stopMove(e:MouseEvent):void{
                  function startMove(e:MouseEvent):void{
                      //trace("Double Click");


                  How can I translate this code to the JavaScript side of the HTML5 animation?
                  (If possible at all)


                  3. Some changes in the vector presentation after converting to HTML 5:


                  Before as SWF embedded (with background color of the original web site):

                  (browser view scaled to maximum)




                  After converting to HTML5 canvas:

                  (browser view scaled to maximum)



                  Blurry as mentioned already above. Plus: some details are rendered or converted false.

                  Thickness of the stroke is quite different.



                  • 6. Re: Re: HTML5-canvas: animation
                    Laubender Adobe Community Professional & MVP

                    Now I recreated my small animation by coding a SVG Animation. Tedious, but if that's the way (sigh), it should be.
                    Like to see SVG Animation output in Flash CC 2014. Other projects are waiting…