Adobe Animate: stretch element by dragging (interaction)

Community Beginner ,
Nov 30, 2020 Nov 30, 2020

Copy link to clipboard

Copied

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.

unstretched.png


stretched.png

 

 

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).

open.png

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!

TOPICS
ActionScript

Views

77

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 30, 2020 Nov 30, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 30, 2020 Nov 30, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines