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

    HTML5-canvas: animation

    Ief_DR Level 1

      Hi,


      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.stop();

       

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

       

      function fl_ClickToGoToAndPlayFromFrame()

      {

        this.gotoAndPlay(2);

      }

       

       

      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.

       

      Thx!

        • 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
                  //19.05.2010
                  
                  //Double click must be enabeled, because default is "false":
                  
                  stage.doubleClickEnabled = true;
                  
                  stage.addEventListener(MouseEvent.CLICK,stopMove);
                  
                  function stopMove(e:MouseEvent):void{
                      //trace("Click");
                      stop();
                      //trace(currentFrame);
                      stage.removeEventListener(MouseEvent.CLICK,stopMove);
                      stage.addEventListener(MouseEvent.DOUBLE_CLICK,startMove);
                  }
                  
                  function startMove(e:MouseEvent):void{
                      //trace("Double Click");
                      //trace(currentFrame);
                      gotoAndPlay(currentFrame);
                  }
                  

                   

                  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)

                   

                  Before-Flash-SCALED-IN-BROWSER.png

                   

                  After converting to HTML5 canvas:

                  (browser view scaled to maximum)

                   

                  After-HTML5-canvas-SCALED-IN-BROWSER.png

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

                  Thickness of the stroke is quite different.

                   

                  Uwe

                  • 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…

                     

                    Uwe