Home / tips / Few tricks in animations

Few tricks in animations

If you follow my personal blog (www.asouza.com/blog – Twitter: @alexandres), you probably have read already I am working on a personal illustrated book for children, called Candice (see the characters studies and the overall story plot at the blog).

My intention is to share a few tricks here, while building my book project (when published, I will share also part of the files). The first one I used in a demo I used at SCBWI workshop in Orlando this past weekend, is explained below.

Let’s see the final result first:

Final animation

 

The Photoshop file is pretty simple, containing only 3 layers (sky, witch and Candice – the title).

The first trick is the background movement. To simulate the gain of altitude (the same process applies for horizontal backgrounds), create the background with the double size of the device height. In this example, the device target is the iPad, landscape orientation  –> meaning the original resolution was width: 1024 x height: 768. The background image has width: 1024 x height 1536 (768 times 2). The dotted line shows the original iPad screen size.

Screen shot 2011-06-28 at 5 54 23 PM (2)

The biggest the height, better the sensation of altitude.

This is the animation setting:

Screen shot 2011-06-28 at 6 01 06 PM

The end position moves from –670 to 0, meaning the image will go to its original 0,0 coordinates (showing the moon). The delay is just to show people that a “boring” cover page could be just the screenshot of the witch, with the title, on top of a background. For the duration, it will depend of the speed of the witch flying you want to simulate.

For the little witch, I used a simple linear animation, with a few add ins:

Screen shot 2011-06-28 at 6 01 46 PM

I used the outQuad easing, to simulate a long flight path till the moon. Also, I scale down the character to 30% to simulate distance. Same trick was used with the Alpha settings (you don’t see many details when an object is far way). The final position (in front of the moon), was a simple homage to Amblin/ET/Spielberg.

The Candice title followed the altitude trick (moving it a little higher, also provides the idea of the title getting elevation).

Hope you have enjoyed! Ideas? Just comment them here!

Alex

10 comments

  • Cute, simple and clever. Can’t wait to see the finished piece Alex. I’m just about there with my first. 😉 Fingers crossed. Couldn’t have done it without you.

    • Thanks a lot for the words Camille. Mine is going to take a little longer as I am doing it only in spare time (which hasn’t been very much). I am the one willing to see yours. The bit I had few months ago was enough to get me excited!

      • Kwik keeps getting better, so my book/app keeps getting better. 😉 I’m giving myself a deadline of Friday, the 8th or I’ll end up adding new features every time you add new features to Kwik!

  • Alex,
    Congrats on Candice! It sounds like a wonderful story and I love the sketches. My wife and I were SCBWI members too and it was a great organization and inspiration that led us to start our own publishing and development company, Raining Popcorn Media. We’re in the process of converting all our bilingual children’s books into interactive books and developing new ones using your awesome Kwik plugin and the amazing Corona SDK. We hope to launch our first book in a few weeks or less… we’ll keep you posted.

    Again, great job and I can’t wait to see future Candice updates!

    • Art, thanks a lot for the encouragement words. In fact, after fighting with the new export system for version 1.4 for a few days, yesterday I could draw 2 scenes for the upcoming book (they are on paper yet). Anyways, it will take a little longer yet but, I am still looking forward to make it happen.

      By the way, I loved your art. Counting days to have your app in my iPad!
      Alex

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Preference Center

Strictly Necessary

these coolies are for WP-SpamShield, gdpr-wp, woocommerce, paypal

PHPSESSID, SJECT16, JCS_INENREF, JCS_INENTIM, gdpr, woocommerce_cart_hash, woocommerce_items_in_cart, woocommerce_recently_viewed, wordpress_, wordpress_logged_in_, wordpress_sec_, wordpress_test_cookie, wp_woocommerce_session_, AKDC, akavpau_ppsd

Functionality

WordPress cookie created when auto-saving a post in the editor.

wp-saving-post, wp-settings-, wp-settings-time-

Performance

google analytic

__utma,__utmb,__utmc,__utmz,_ga,_gid,_gat

Advertising