Complicated interactions in Adobe Animate HTML

[Paolo5EF8]

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

[Paolo5EF8]

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

}

}

}

[JoãoCésar]

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

[Paolo5EF8]

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

[Paolo5EF8]

I came up with this idea:

this.three.addEventListener("click", goThree.bind(this));

function goThree() {

this.pock.gotoAndPlay(25);

if (this.pock.currentFrame == 37) {

this.pock.gotoAndPlay(61);

}

}

But it just plays it, however I think this might be a good idea, that's why I'm sharing it with you