Inspiring

Answered

Free Transform / Distort a Movie Clip in HTML5/Canvas project

Forum|Forum|7 years ago
May 10, 2019
3 replies
1761 views

I am trying to create a "folding card" effect in an HTML5 web ad project.

I want to create the illusion that the top half of the ad folds down over the bottom half.

I've read in some places that this can only be done with scripting... but I'm unclear as to how old that information is...

Solutions attempted with Movie Clip and Graphic Symbols:

Modify > Transform > Distort (greyed out)

Modify > Transform > Free Transform

This only allows parallel transformations, can't do opposing/mirrored skewing of the top corners as they approach the midline.

Any chance there's a simple solution to this?

This topic has been closed for replies.

Correct answer JoãoCésar17023019

Got it.

The link is a reference for the code principle not for the exact effect. If you mix skew, scale, and rotation you may be able to achieve the effect like this user did here: javascript - EaselJS perspective image transformation - Stack Overflow (second answer).

But an even easier way will be to use a WebGL-glTF document and animate the rotationX property with code.

Regards,

JC

bryan.goughAuthor

Inspiring

So... until I find some code remedy—our current workaround (which loses the crispness of vector images) is to build the animation in After Effects and export to PNG sequence—then import the PNG sequence and just deal with the 'meh' factor.

Update: hmm, I'm not sure if we can use WebGL with our project or not... I don't know why we could, or couldn't. I'll look into that as well. Thanks!

JoãoCésar17023019

Community Expert

Hi.

What exactly do you want to fold? A bitmap, shape, or symbol instances (Movie Clips, Graphics, Buttons)? I'm asking because maybe you don't really need symbols.

If it's a shape, you can fake it with shape tweens using the IDE.

If are symbols or bitmaps, you're certainly gonna need code. There is an official demo in the CreateJS website:

https://createjs.com/demos/easeljs/transform

Regards,

JC

bryan.goughAuthor

Inspiring

Thanks @JoāoCésar

I am going to have some text in the top half (so multiple objects) saved into a Movie Clip or Graphic (depending on whatever works). I have been able to do this with a shape tween using IDE, but only for non-symbols.

Thanks for the easeljs link. I can do that too with the skew tool in the IDE. What I need to be able to do is have the top left and top right corners BOTH move away from center to simulate that z-space move.

JoãoCésar17023019

Correct answer

Community Expert

Got it.

The link is a reference for the code principle not for the exact effect. If you mix skew, scale, and rotation you may be able to achieve the effect like this user did here: javascript - EaselJS perspective image transformation - Stack Overflow (second answer).

But an even easier way will be to use a WebGL-glTF document and animate the rotationX property with code.

Regards,

JC

kglad

Community Expert

that's a 3d rotation about the x-axis. you could do that in the ide but if you have more than a few of those, it would be easier to do with code.

bryan.goughAuthor

Inspiring

thanks, yeah x-axis rotation is the goal.

We only have it happening once, to reveal/transition from the two different states of the ad: Hook > Call to Action.

I am not a coder, so I'm hoping if it can't be done with the IDE (which I haven't figured out how to do that) then I need some code support...

kglad

Community Expert

use the 3d rotation tool:

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded