Highlighted

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

Contributor ,
May 10, 2019

Copy link to clipboard

Copied

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?

Screen Shot 2019-05-10 at 10.40.13 AM.png

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

571

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

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

Contributor ,
May 10, 2019

Copy link to clipboard

Copied

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?

Screen Shot 2019-05-10 at 10.40.13 AM.png

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

572

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
May 10, 2019 0
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
May 10, 2019 1
Contributor ,
May 10, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
May 10, 2019 0
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

use the 3d rotation tool:

Screenshot - 5_10_2019 , 12_29_23 PM.png

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
Reply
Loading...
May 10, 2019 0
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
May 10, 2019 0
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

oops, out of luck then.

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
Reply
Loading...
May 10, 2019 0
Contributor ,
May 10, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
May 10, 2019 0
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 10, 2019 1
Contributor ,
May 10, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
May 10, 2019 0
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 10, 2019 1
Contributor ,
May 10, 2019

Copy link to clipboard

Copied

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!

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
Reply
Loading...
May 10, 2019 0