Skip to main content
jond58666664
jond58666664
Participating Frequently
July 4, 2017
Answered

Scroll

  • July 4, 2017
  • 2 replies
  • 1754 views

Anyone know how to make an Animate CC HTML5 animation become a scrolling site rather than a movie that plays?

Like this (or the hundreds of other sites that advance when you scroll)?

Make Your Money Matter

    This topic has been closed for replies.
    Correct answer kglad

    use something like,

    this.stop();

    canvas.addEventListener("mousewheel", MouseWheelHandler.bind(this));

    canvas.addEventListener("DOMMouseScroll", MouseWheelHandler.bind(this));

    function MouseWheelHandler(e) {

        if(e.wheelDelta>0){

            this.gotoAndStop(this.currentFrame+1);

        } else {

            this.gotoAndStop(this.currentFrame-1);

        }

    }

    2 replies

    C
    ClayUUID
    Legend
    July 5, 2017

    jond58666664  wrote


    Like this (or the hundreds of other sites that advance when you scroll)?

    Make Your Money Matter

    Usability expert Donald Norman has an expression that can be applied to sites designed like that: "It probably won an award."

    It's not a compliment.

    Something like that should have just been turned into a video. The need to constantly crank on the scroll wheel like an organ grinder monkey adds nothing positive to the experience. But it does have an immediate ooh-ahh effect on clients, which is probably why sites like it keep getting made.

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    July 4, 2017

    use a mousewheel event listener, Edit fiddle - JSFiddle

    jond58666664
    jond58666664Author
    Participating Frequently
    July 4, 2017

    Thanks for the quick reply.

    That code works well.

    Only problem is that I don't know how to edit the code to make it scroll the timeline rather than scale an object. I don't know how to code.

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    July 4, 2017

    use something like,

    this.stop();

    canvas.addEventListener("mousewheel", MouseWheelHandler.bind(this));

    canvas.addEventListener("DOMMouseScroll", MouseWheelHandler.bind(this));

    function MouseWheelHandler(e) {

        if(e.wheelDelta>0){

            this.gotoAndStop(this.currentFrame+1);

        } else {

            this.gotoAndStop(this.currentFrame-1);

        }

    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices