Skip to main content
Paolo5EF8
Inspiring
Jul 1, 2021 7:28 AM UTC
Question

Adobe Animate - Scroll up

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 is closed to new replies. Start a new post to keep the conversation going.

    3 replies

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    Jul 1, 2021 1:17 PM UTC

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

    Translate
    Paolo5EF8Author
    Inspiring
    Jul 5, 2021 9:00 AM UTC

    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?

     

    Translate
    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    Jul 5, 2021 1:20 PM UTC

    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.

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