• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to make an image flip over and 'curl' - possible even?

Participant ,
Jul 31, 2018 Jul 31, 2018

Copy link to clipboard

Copied

Not sure if this is even possible, so before I spend any more time searching and trying... Imagine you through a photo up in the air and it sort of curled in the wind and fell to the ground. Is it possible to animate that in Animate? The rest of the animation is very cartoon like, but this bit has to be an actual photo, and it'd look a bit rubbish just being flat.

Thank you in advance for any pointers!

Views

1.7K

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

correct answers 1 Correct answer

Community Expert , Aug 01, 2018 Aug 01, 2018

try some of these tutorials. I know they say flash but animate is flash renamed.

You also can do it easily in InDesign.

Page Roll Transition Effect in Adobe Flash - YouTube

https://pageflip-books.com/#meetpageflip/page/10-11

Adobe InDesign CC - How to create a Flip Book - YouTube

Votes

Translate

Translate
LEGEND ,
Jul 31, 2018 Jul 31, 2018

Copy link to clipboard

Copied

If you want to add jquery to your fla if you are doing canvas, there are plenty of libraries that do that.

I had a tutorial and sample done with Edge Animate CC but I am not sure how that would work with ANCC.

Votes

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 Expert ,
Aug 01, 2018 Aug 01, 2018

Copy link to clipboard

Copied

Hi.

Animate CC doesn't have mesh animation tools for bitmaps. You would need to make use of code for this.

In AS3, you have the DisplacementMapFilter.

DisplacementMapFilter - Adobe ActionScript® 3 (AS3 ) API Reference

Adobe Flash Platform * Displacement map filter

In HTML5, the CreateJS suite itself has some features to manipulate bitmaps, like in this official demo:

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

You can search for another JavaScript library as well.

There's the option to create a rectangle shape, turn it into a Drawing Object, set its fill to the bitmap you want to use, and animate it frame by frame with the Free Transform Tool on Envelope mode. The huge disadvantage here is that the bitmap itself won't be affected but depending on the situation you may be able to fake what you want to achieve.

And last but not least you can make the distortions in another program like Photoshop and bring the frames into Animate.

I hope this helps.

Regards,

JC

Votes

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 Expert ,
Aug 01, 2018 Aug 01, 2018

Copy link to clipboard

Copied

Like JC suggested, I'd probably make the curl in Photoshop and bring it in to Animate.

Votes

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 Expert ,
Aug 01, 2018 Aug 01, 2018

Copy link to clipboard

Copied

try some of these tutorials. I know they say flash but animate is flash renamed.

You also can do it easily in InDesign.

Page Roll Transition Effect in Adobe Flash - YouTube

https://pageflip-books.com/#meetpageflip/page/10-11

Adobe InDesign CC - How to create a Flip Book - YouTube

Votes

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
Participant ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

LATEST

Thanks Nick that's awesome. Apologies for delayed response I've been rather unwell.

Votes

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