Scroll

[jond58666664]

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

[kglad]

use a mousewheel event listener, Edit fiddle - JSFiddle

[jond58666664]

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 · Accepted solution]

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);

    }

}

[jond58666664]

Wow, that works perfect.

Thank you, that's very kind.

Except it doesn't work on a touch device (?)

[kglad]

what touch device has a mousewheel?

[jond58666664]

You are right.

But these days there's not much use of a website that doesn't work on touch screens.

Would you happen to know how to make it work on them too so that when you scroll with your finger rather than the mouse wheel, it does the same thing?

[kglad]

you can use mousedown to work on touch screens on computers, start a loop that updates based on the mouse position and use mouseup to terminate the loop.

[jond58666664]

Thanks again kglad, but I'm not sure how to do that as I can't code 😞 Apologies.

And thanks for the advice Clay regarding scrolling sites, I know what you mean. But the goal in my particular case is not "ooh-aah" - this website is telling a story and it's merely to give the viewer more precise control over the timing of it than a play / pause button will ever allow.

[ClayUUID]

Perhaps mobile users would appreciate just having Back and Next buttons.

[kglad]

var this_var = this;

this.ticker = createjs.Ticker;

this.ticker.addEventListener('tick',loopF);

this.ticker.paused = true;

stage.addEventListener('stagemousedown',downF);

stage.addEventListener('stagemouseup',upF);

function downF(){

     this_var.ticker.paused = false;

}

function upF(){

    this_var.ticker.paused = true;

}

function loopF(){

    if(!this_var.ticker.paused){

        console.log(this_var.ticker.paused+": "+stage.mouseX+" "+stage.mouseY);

    }

}

[jond58666664]

Thanks.

But it doesn't seem to work. I tried it on a few different files with no luck.

[kglad]

what doesn't work?

[jond58666664]

It won't scroll on touch screens with the code - I tried it on an iPhone and an iPad.

[kglad]

i supplied that snippet in an effort to teach how to code your project.  is that what you want, or are you looking for someone to code your project for you?

[jond58666664]

I really appreciate all your help.

I'll try and find a coder who can help. I'm not ready to learn code yet, I only started learning the Adobe suite three months ago.

I'm sorry if I came off badly there, I guess I was just hoping that it was a simple case of cut and paste into the actions panel.

Thanks again for your help.

[kglad]

if you're looking to hire someone, send me an email via http://www.kglad.com > contact.

[jond58666664]

Thanks.

Can you send me your email address. Your contact form isn't working (when I hit submit, it says "there's been a problem")

Regards,

Ethan

[ClayUUID]

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.