Skip to main content
P
Paolo5EF8
Inspiring
July 1, 2021
Question

Adobe Animate - Scroll up

  • July 1, 2021
  • 1 reply
  • 347 views

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();
		}
	}
}
    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    July 1, 2021

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

    P
    Paolo5EF8Author
    Inspiring
    July 5, 2021

    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?

     

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    July 5, 2021

    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.

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