10 Replies Latest reply on Aug 19, 2017 9:08 AM by kglad

    HTML5 Canvas - Transitions between frames

    jrameriz Level 1

      Is there a way to make HTML5 Cavas Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Random..... between frames?

      One of the adobe animate cc advance templates has a good example but they don't have that same template for HTML5. is that an option or is there something similar to the below code in HTML5 Canvas?

       

      TransitionManager.start(slides_mc, {type:Wipe, direction:Transition.IN, duration:0.25});

        • 2. Re: HTML5 Canvas - Transitions between frames
          jrameriz Level 1

          kglad I'll give it a try, thank you for the fast response! Your awesome!

          • 3. Re: HTML5 Canvas - Transitions between frames
            kglad Adobe Community Professional & MVP

            you're welcome.

            • 4. Re: HTML5 Canvas - Transitions between frames
              ClayUUID Adobe Community Professional

              I doubt the Tween class would be very useful for these sort of effects. They're generally implemented with masking, and programmatically tweening masks doesn't work in Canvas mode. You have to either pre-draw the mask animation as a sequence of frames, or redraw the mask from scratch every frame.

               

              For example something like this: Canvas Element and masks

              • 5. Re: HTML5 Canvas - Transitions between frames
                jrameriz Level 1

                You are right, it created a problem with interactivity inside the movie clip object.

                • 6. Re: HTML5 Canvas - Transitions between frames
                  kglad Adobe Community Professional & MVP

                  for frame-to-frame transitions you cannot simultaneously tween-out the initial frame and tween-in the next frame.

                   

                  for frame-to-frame transitions you have to completely 'tween-out' the initial frame, change frames and then completely 'tween-in' the next frame.  almost all of those transitions are reproducible* with that understanding.  some are easier to implement than others.

                   

                  you should probably start with an easy one (eg, fly).

                   

                   

                  *by reproducible i mean you may not be performing a true transition of the objects currently on-stage but instead using something that plays the role of a mask. eg, for the transitions that use a mask, you can use a background colored object that overlays the frame contents and tween that overlay to reveal the frame contents.

                  • 7. Re: HTML5 Canvas - Transitions between frames
                    jrameriz Level 1

                    Can you help me out with an example? My code looks like this so far i basically want to add sort of a swipe transition between frames.

                    //slidesTrans is the main movie clip

                    this.slidesTrans.stop();

                    var pageNumberOn = true; // true, false

                    //this.pageNumbers.text = "";

                    createjs.Touch.enable(stage);

                    var thisShit = this; //hold on to stage

                    /* Tween Vars didn't work

                    */

                    //var slideMain = this.slidesTrans;

                    ////target initial position

                    //createjs.Tween.get(slideMain, {

                    // //loop: true,

                    // override:true

                    //}).to({

                    // x: -slideMain.x,

                    // //y: canvas.height - 55,

                    // //rotation: -360

                    // }, 250, createjs.Ease.none);

                    //

                    //slideMain.x = this.stage.canvas.width;

                    $("#pageNumbers").text("");

                    Hammer(document.getElementById("canvas")).on("swipeleft", function () {

                    $("#goToLeft").show();

                    $("#goToRight").show();

                    $("#pageNumbers").show();

                    //animate from the left

                    var frameNumber = thisShit.slidesTrans.currentFrame;

                    var checkFrameCount = thisShit.slidesTrans.totalFrames - 1;

                    if (checkFrameCount === frameNumber) {

                    //do nothing

                    } else {

                    thisShit.slidesTrans.gotoAndStop(frameNumber + 1);

                    }

                    if (pageNumberOn === false) {

                    $("#pageNumbers").text("");

                    } else {

                    $("#pageNumbers").text(thisShit.slidesTrans.currentFrame);

                    //thisShit.pageNumbers.text = thisShit.currentFrame;

                    }

                    });

                    Hammer(document.getElementById("canvas")).on("swiperight", function () {

                    $("#goToLeft").show();

                    $("#goToRight").show();

                    $("#pageNumbers").show();

                    var frameNumber = thisShit.slidesTrans.currentFrame;

                     

                     

                    if (frameNumber > 1) {

                    thisShit.slidesTrans.gotoAndStop(frameNumber - 1);

                    }

                    if (pageNumberOn === false) {

                    $("#pageNumbers").text("");

                    } else {

                    $("#pageNumbers").text(thisShit.slidesTrans.currentFrame);

                    //thisShit.pageNumbers.text = thisShit.currentFrame;

                    }

                    });

                     

                     

                     

                    //start event listeners

                    this.slidesTrans.turnOnHeater.addEventListener("click", tryturnOnHeater.bind(this));

                    this.slidesTrans.turnOnHeater.addEventListener("touchstart", tryturnOnHeater.bind(this));

                    function tryturnOnHeater() {

                     

                     

                    $("#goToLeft").show();

                    $("#goToRight").show();

                    $("#pageNumbers").show();

                     

                    this.slidesTrans.gotoAndStop(1);

                    if (pageNumberOn === false) {

                    $("#pageNumbers").text('');

                    } else {

                    $("#pageNumbers").text(this.slidesTrans.currentFrame);

                    }

                    }

                     

                    //document.getElementById("homeButton").addEventListener("click", fl_ClickToGoToWebPage);

                    //document.getElementById("homeButton").addEventListener("touchstart", fl_ClickToGoToWebPage);

                     

                    function fl_ClickToGoToWebPage() {

                    window.open("../index.html", "_self");

                    }

                     

                    document.getElementById("goToLeft").addEventListener("click", goBackToLabel.bind(this));

                    document.getElementById("goToLeft").addEventListener("touchstart", goBackToLabel.bind(this));

                    function goBackToLabel() {

                    var frameNumber = this.slidesTrans.currentFrame;

                     

                     

                    if (frameNumber > 1) {

                    this.slidesTrans.gotoAndStop(frameNumber - 1);

                     

                     

                    }

                    if (pageNumberOn === false) {

                    $("#pageNumbers").text("");

                    } else {

                    $("#pageNumbers").text(this.slidesTrans.currentFrame);

                    //this.pageNumbers.text = this.currentFrame;

                    }

                    }

                     

                     

                    //forward button NEEDED

                    document.getElementById("goToRight").addEventListener("click", goforwardToLabel.bind(this));

                    document.getElementById("goToRight").addEventListener("touchstart", goforwardToLabel.bind(this));

                    function goforwardToLabel() {

                    $("#goToLeft").show();

                    $("#goToRight").show();

                    $("#pageNumbers").show();

                     

                    var frameNumber = this.slidesTrans.currentFrame;

                    var checkFrameCount = this.slidesTrans.totalFrames - 1;

                    //console.log(checkFrameCount);

                    //console.log(frameNumber);

                     

                     

                    if (checkFrameCount === frameNumber) {

                    //do nothing

                    } else {

                    this.slidesTrans.gotoAndStop(frameNumber + 1);

                    }

                    if (pageNumberOn === false) {

                    $("#pageNumbers").text("");

                    } else {

                    $("#pageNumbers").text(this.slidesTrans.currentFrame);

                    }

                    }

                    • 8. Re: HTML5 Canvas - Transitions between frames
                      kglad Adobe Community Professional & MVP

                      that's more code than i'm willing to debug in a forum.

                       

                      i recommend you create a test project that's easy to code (and debug via a forum) so you can learn the basics (and get help via this forum with your code).

                       

                      here's a 'slide' transition with a two frame project:

                       

                      var tl = this;

                      var nextframe = 1;

                      this.stop();

                       

                      this.b.addEventListener('click',f.bind(this));

                       

                      function f(){

                          createjs.Tween.get(tl).to({x:stage.canvas.width},500).call(completeF);

                      }

                      function completeF(){

                          tl.gotoAndStop(nextframe);

                          tl.x = -stage.canvas.width

                          createjs.Tween.get(tl).to({x:0},500);

                          nextframe = (tl.currentFrame+1)%2;

                      }

                      • 9. Re: HTML5 Canvas - Transitions between frames
                        jrameriz Level 1

                        ok, how about just a simple button that tweens the html5 frame-by-frame movie clip

                        //start event listeners

                        this.slidesTrans.turnOnHeater.addEventListener("click", tryturnOnHeater.bind(this));

                        function tryturnOnHeater() {

                        //this is where i would like to tween slidesTrans movie clip

                         

                        this.slidesTrans.gotoAndStop(1);

                        }

                        • 10. Re: HTML5 Canvas - Transitions between frames
                          kglad Adobe Community Professional & MVP

                          the code's above.