Skip to main content
Davince.net
Known Participant
July 31, 2018
Answered

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

  • July 31, 2018
  • 4 replies
  • 2036 views

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!

    This topic has been closed for replies.
    Correct answer Nick Gioia

    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

    4 replies

    Nick GioiaCommunity ExpertCorrect answer
    Community Expert
    August 1, 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

    Davince.net
    Known Participant
    August 6, 2018

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

    Myra Ferguson
    Community Expert
    Community Expert
    August 1, 2018

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

    JoãoCésar17023019
    Community Expert
    Community Expert
    August 1, 2018

    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

    avid_body16B8
    Legend
    July 31, 2018

    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.