Can You Use Hype To Create A Parallax Animation For An iBook Widget?

Can You Use Hype To Create A Parallax Animation For An iBook Widget? CC Yellow Books Circle 60 by 60 TR 1

For more than a year now I’ve been working on a sister project–TheWondersExpedition.com and trying to help share some fascinating discoveries I’ve noticed in the study of amazing places around the world.

And to begin telling that story in digital book form, and also online, I’ve been in the process of building various forms of art in Photoshop and Illustrator and trying to decide whether files should be straight vector files–(I’d love to be able to do .SVG but iPad won’t support it) or go for Photoshop creations rendered out as .PNGs.

Clearly I want to be able to tell the story of multiple sites around the globe and use the continuous scrolling effect to help share the findings.  Ultimately, this will require creating some sort of parallax-looking animation that makes it look like the world is turning, day is going from day to night, and cool places are popping up into view as the world turns, along with some sort of geometric lines, trig formulas of sine and cosines, and probably a kitchen sink, too. while I’m at it.

That led me to really look at two creative tool options tonight.  After Effects or Tumult’s Hype, now available as version 1.6.0.

Can You Use Hype To Create A Parallax Animation For An iBook Widget?

The answer to me right now is–I don’t know.

What I did tonight was create a Hype file with the dimensions of 2048 px by 1536, the size of an iPad 3 screen/retina screen. Just trying to see the whole screen on a 17-inch MacBook Pro, early 2012, requires me to shrink the View down to 50 percent and to shove my timeline as far to the bottom of the screen as I can stand.  (That’s not a complaint, it’s just the way it is.)

Just for starters tonight, I went ahead and in Photoshop created a round ball designed to rotate from the center point at the bottom of the animation.  I didn’t do the math, but through a process of lines from each respective corner, then a line down the middle and then a line from the bottom center line to the top left and right corners got me a measurement of about 1555 px.  I set the ellipse tool to form a perfect circle by holding down the shift key when I created a round “globe” in a file that was 3710 px by 3710 px. This way, as the globe rotates in Hype from the center spot at the bottom, there will never be a point where the viewer won’t see either blue for the atmosphere during the day, and black for simulated night time. Mind you, I’m not worrying about anything fancy line stars and the moon right now.  I just want to get the global atmosphere spinning. (Later will come additional layers of stuff.)

Trying to create a rotating "Atmosphere" using Tumult's Hype.

Trying to create a rotating “Atmosphere” using Tumult’s Hype.

With a two-layered .PNG the file for just the atmosphere right now is 39 MBs.  HUGE!

And needless to say, when I put it in the timeline of Hype and then set it to turn 180 degrees in 20 seconds, it really made the MBP, with 8 GBs of RAM, start to creep.  At one point, I could see block pixels where there are none, as the earth’s atmosphere turned from day to night.  Not good.

So at 11:30 p.m. on a Monday night, I’m calling it a day to rethink this as I sleep.  I’m beginning to wonder if Adobe’s After Effects isn’t going to be the better place to do this, but then it is destined to become a .mov and not an interactive HTML5 widget.  So I ponder.

Anyone else done this?  Anyone?  Bueller?

Enhanced by Zemanta

Leave a Reply

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