Copy link to clipboard
Copied
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)?
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);
}
}
Copy link to clipboard
Copied
use a mousewheel event listener, Edit fiddle - JSFiddle
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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);
}
}
Copy link to clipboard
Copied
Wow, that works perfect.
Thank you, that's very kind.
Except it doesn't work on a touch device (?)
Copy link to clipboard
Copied
what touch device has a mousewheel?
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Perhaps mobile users would appreciate just having Back and Next buttons.
Copy link to clipboard
Copied
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);
}
}
Copy link to clipboard
Copied
Thanks.
But it doesn't seem to work. I tried it on a few different files with no luck.
Copy link to clipboard
Copied
what doesn't work?
Copy link to clipboard
Copied
It won't scroll on touch screens with the code - I tried it on an iPhone and an iPad.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
if you're looking to hire someone, send me an email via http://www.kglad.com > contact.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
jond58666664 wrote
Like this (or the hundreds of other sites that advance when you scroll)?
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.