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

[bryan.gough]

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?

[kglad]

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.gough]

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]

use the 3d rotation tool:

[ClayUUID]

3D transformations aren't available in HTML5 Canvas documents.

[kglad]

oops, out of luck then.

[bryan.gough]

The 3D Transform tool isn't available from the UI in HTML5 projects. However, I'm reading in other places that it can be scripted to work. Maybe I'll move this over to the Actionscript forum.

[JoãoCésar]

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.gough]

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ésar · Accepted solution]

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.gough]

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!