Adobe Animate - Scroll up

Explorer ,
Jul 01, 2021 Jul 01, 2021

Copy link to clipboard

Copied

Hi guys,

I'm working on a project where I have an animation that activate when scrolling down. I have different shapes, when scrolling down the shape morphs into the next one. 

My problem is that I can't figure out how to make the shapes morph bacwards, so basically I need the piece of code who tells the timeline to go backwards when scrolling up.

I attached the piece of code I wrote to make it scroll down (it works exactly I want it).

Thanks in advance!

var f = this;
stage.enableMouseOver();
stage.addEventListener("mouseover",h);
function h(){
	document.getElementById("canvas").addEventListener("mousewheel",k);
}
function k(e){
	if(e.wheelDelta < 0){
		if(f.pock.currentFrame == 145){
			f.pock.gotoAndStop(145);
		}else{
			f.pock.play();
		}
	}
	if(e.wheelDelta > 0){
		if(this.pock.currentFrame == 0){
			f.pock.gotoAndStop(0);
		}else{
			f.pock.play();
		}
	}
}

Views

71

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 01, 2021 Jul 01, 2021

Copy link to clipboard

Copied

this.reverse = reverseF.bind(this);

 

function k(e){
	if(e.wheelDelta < 0){
		if(f.pock.currentFrame == 145){
			f.pock.gotoAndStop(145);
		}else{
			f.pock.play();
		}
	}
	if(e.wheelDelta > 0){
		if(this.pock.currentFrame == 0){
			f.pock.gotoAndStop(0);
		}else{
			startReverse.bind(f)();
		}
	}
}

 

function startReverseF(){
f.pock.addEventListener("tick",this.reverse);
}
function reverseF(){
if(f.pock.currentFrame==0){
f.pock.removeEventListener("tick",this.reverse);
} else {
f.pock.gotoAndStop(this.mc.currentFrame-1);
}
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

Thanks for your answer Kglad.

What I can see from the code you wrote is that when I scroll up the timeline goes back one frame. 

The point is that it is not what I need (my fault, I didn't specified it in my first message).

I want the animation to play backwards when I scroll up, then it stops when needed (already have some stop keyframes).
Another way to make this work might be to write a code that plays from frame x to frame y (eg. play 45 to 35), do you know if it is possible?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

LATEST

sure it's possible, just add the "stop" frames to the code.  ie, right now the code is checking for frame 0 to stop.  if you want a different frame, put that number in place of the 0.

 

if a timeline needs to play in reverse (to say  35) starting not from the current frame, but from another frame (eg, 45) that will take more work.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines