Adobe Animate: stretch element by dragging (interaction)

[MarinetG]

Hi everyone!

I'm really stuck and need some help/advice/directions. I want to create a Christmas cracker animation with Adobe Animate to put on a web app (HTML5 Canvas). When you pull one of the sides of the cracker (with mouse or touch) I want both sides to stretch out up to a certain point. Both sides are just plain images/symbols.

Then when the side of the cracker (or mouse?) hits a certain point (side of the canvas) it should break open and animate some exploding confetti, a sound and a button (that goes to the next page).

This little animation will be put in a .html doc and the button will go on to another page (with no animations/interactions).

I've worked with Flash and ActionScript about 10 years ago, but I've forgotten about everything and are very useless with it currently. I can hack my way around Javascript, but again, not a coder.

Any help would be SO MUCH appreciated!

Thanks!

[kglad]

the fact you have a pattern on that central roll of crackers is going to complicate things.  but if you have an image with the max roll, it's doable. 

if you had an unpatterned object to "stretch" or didn't care about deforming the pattern, it would be much easier.

[MarinetG]

Hi kglad,

The stretching of the pattern (and distortion/deforming) is not an issue since it will be such a small effect and contribute to the overall "realness" of pulling the cracker. I created the cracker in Illustrator, so everything is available as svg's too.

Is it going to be easier to create this interaction with a plain shape?

Thanks!

[kglad]

it's a design decision whether it looks good with a pattern or not.  here's the way the animation looks with a pattern doing it the easy way:

cracker (kglad.com)

[MarinetG]

Cool, yeah I see what you mean with the pattern. What I have been struggling with, however, is getting it to stretch out like that on mouse drag (interaction), and not just happening automatically. Or am I misunderstanding the solution entirely?

[kglad]

it won't happen automatically.  you'll need to use code (createjs/actionscript) for that.

but once your have the animation, the rest is just housekeeping.  in this situation, i'd use mousedown and mouseup listeners to start and end a loop (createjs.Ticker - EaselJS v1.0.0 API Documentation : Ticker (createjs.com)), resp.

in the tick listener update which frame of your animation should show based on the mouse position.