• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

164

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
Community Expert ,
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);
}
}

Votes

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?

 

Votes

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
Community Expert ,
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.

Votes

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