Skip to main content
P
Paolo5EF8
Inspiring
May 6, 2021
Question

Complicated interactions in Adobe Animate HTML

  • May 6, 2021
  • 2 replies
  • 596 views

Hello everyone,

I'm working on a project where I have some shapes morphing.

I did the animation in After Effects, exported it as a sequence of JPEGs and then imported the sequence in Adobe Animate.

Here's the thing: this animation should work on scroll, meaning that when the user scrolls down the animation should start, then stop when it reaches the second shape and so on until the sixth shape. It should also be able to scroll up, so that it plays in reverse, going from shape 6 to 5, 5-4, 4-3...

I also have 6 buttons on the left of my canvas, which should let the user go from shape 3 to 6 skipping the ones in between.

Fortunately between the shapes there is always a circle, meaning that to morph it goes from shape one to circle and from circle to shape two.

The best thing to make the buttons work would be cutting the animations in half, so that if I'm on shape 3 and I want to go to shape 6, the animation goes from shape 3 to circle and from circle to shape 6.

Does anyone know how I can accomplish this? The scroll up/down and the buttons? 

If you need more information or clarification let me know.

Thanks in advance

 

    This topic has been closed for replies.

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    May 6, 2021

    Hi.

     

    Very interesting.

     

    Are you able to demonstrate the kind of scroll animation you want to achieve with a GIF, video or other media/method?

     

    Regards,

    JC

    P
    Paolo5EF8Author
    Inspiring
    May 7, 2021

    Here it is, this is the result of the code I attached in the other message.

    In the first part of the video I scroll down, as you see it works properly, despite the fact that if I scroll up the animation won't go backwards. 

    In the second part I use the bottons. They work, but the problem is that the best I could do is to tell the program that if I'm at the second shape and I click on the fifth, it should play the animation from fourth to fifth shape, and it is not smooth.

    I want the shape to go to circle and then to the shape number I clicked. It should "bypass" the frames in between.

    Let's say I go from 1 to 3, I want it to play 1 to 1,5 (circle), and then from 2,5 to 3. 

    Hope it makes sense. 

    Thank you for your help!

    Regards

    P
    Paolo5EF8Author
    Inspiring
    May 6, 2021
    This is the best I could come up with, it works when scrolling down but not up (I know the last if doesn't make any sense), and the buttons do not work the way I want them to.
    one, two, three, four, five and six are the instance names of the buttons, pock is the instance name of the animation.
     
    var _this = this;
     
    _this.one.on('click', function(){
    _this.pock.gotoAndPlay(1);
    });
     
    _this.two.on('click', function(){
    _this.pock.gotoAndPlay(25);
    });
     
    _this.three.on('click', function(){
    _this.pock.gotoAndPlay(50);
    });
     
    _this.four.on('click', function(){
    _this.pock.gotoAndPlay(74);
    });
     
    _this.five.on('click', function(){
    _this.pock.gotoAndPlay(98);
    });
     
    _this.six.on('click', function(){
    _this.pock.gotoAndPlay(122);
    });
     
    _this.pock.stop();
    stage.enableMouseOver();
    stage.addEventListener("mouseover", h);
    function h() {
    document.getElementById('canvas').addEventListener('mousewheel', k);
    }
    function k(e) {
    if (e.wheelDelta < 0) {
    if (_this.pock.currentFrame == 145) {
    _this.pock.gotoAndStop(145);
    } else {
    _this.pock.play();
    }
    }
    if (e.wheelDelta >= 0) {
    if (_this.pock.currentFrame == 0) {
    _this.pock.gotoAndStop(0);
    } else {
    _this.pock.play();
    }
    }
    }
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices