Skip to main content
MarinetG
MarinetG
Participant
November 30, 2020
Question

Adobe Animate: stretch element by dragging (interaction)

  • November 30, 2020
  • 1 reply
  • 654 views

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!

This topic has been closed for replies.

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
November 30, 2020

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
MarinetGAuthor
Participant
December 1, 2020

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
Community Expert
kgladCommunity Expert
Community Expert
December 1, 2020

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)

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

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