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

Jan 28, 2013 by

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
read more

Adding Audio Widgets to iBooks Author Using Tumult’s Hype

Jul 8, 2012 by

At Claxton Creative, LLC in Dallas, we’re working hard each day to develop new technologies to include in iBooks, the new form of publications made possible through the advent of iBooks Author–a program that has changed the very meaning of the word “book” to be something that also includes video, 3-D animations, interactive maps, charts, and of course, text.  (We are nearly completed with Dr. Mark Van Stone’s 2012: Science & Prophecy of the Ancient Maya) But through the great work of Tumult’s Hype program, available for Macs, we have been able to push the envelope of capabilities even further. This  post is meant as a helpful addition to the great tutorial posted on the Tumult Hype support site on July 2, 2012 entitled: Adding Audio to an iBooks Author Widget.

(These directions are written out, but there also is a YouTube video at the bottom of this post!)

I spent nearly a day and a half, off and on, out of frustration trying to add audio widgets to iBooks Author using the directions on the Tumult Hype site.  But after receiving an email from them saying an initial post was flawed and to use this one, I was also able to download two Banana widgets they made available. When I tried to load them into my demo book project, they didn’t work, and that brought me back to the solution eventually–if one tries to load a 3-D widget into iBooks Author and doesn’t have texture files in the same folder, then you’ll wind up with just the frames of the object.

So here is what one must do in order to create a widget that has audio embedded in it and then be able to load it into iBooks Author and it works…..

Step 1:

Per the Tumult site, you’re to drag an .m4a into Hype but don’t place it on the the main scene area.

But before doing this, one needs to create an .m4a file and there are a number of ways to do this.  But I found the quickest one, as you will see in the video, is simply to open a .wav file, etc in Quicktime and then do an Export.  It automatically will default the file into the .m4a format.

Another important note here, I have found files that have no spaces in them seem to work better, e.g. (FileName1.wav converts to FileName1.m4a) (I’ve not had much luck with File Name 1.wav or File Name 1.m4a working)  Tighten it up and don’t even use the underscores_to-link_the_words_together.)

Step 2

Tumult says to drag the .m4a file into Hype and then drag it off the scene.  Once I got it into Hype, I found I couldn’t even move it again, so just save a step here and load it into Hype and drop it off the whitened area of the central scene. (See the video.)

2A One you have it in this state, now go down to the timeline are and change the name of the file to just plain old “video.”  Don’t ask me why. That’s the way it was done in the demo pieces from Hype and hey, it works.

2B Now go up to the Inspector and DELETE the name of the file from the Display Name box and just leave it blank.  You might see N/A pop up.  That’s fine.  It will wind up just being an empty white box.

2C Now go to the lower box and change the Unique Element ID to an arbitrary number. In the Hype demos they made it 11.  I stuck with it.  It apparently has no significance other than you’re going to have to plug that number in elsewhere, so remember what ever it is you use.

Step 3:

Now grab the image you want to make as the hotspot.  In my demo, I used a photo of my friend, Ally. When you load the photo onto the scene, also go up to the top left of the program and change the name of the scene from Untitled Scene to whatever you’re going to call the file.

3B Back to the Inspector tab–the one on the far right–Change the Unique Element ID to 12. (Again, no rhyme or reason known.)

3C Now go to the tab just to the left of the one on the far right–it looks like a gear–and is called the “Mouse Action Inspector.”

3D On the “On Mouse Click” tab, the second one from the top, you are going to need to make a few changes.

3E Pull down to NEW JAVA SCRIPT under Function and a new dialogue box is going to pop up with some code in it.

3F Change the Name of the File in the top line.  Then go down to the final forward slash / and before the bracket } and add the following code: var snd = document.getElementById("sound1"); snd.play();

3G But you’re going to have to make a change.  Change the SOUND1 to that 11 we talked about above.

This is where the Tumult Hype post stops, and I went to Export here under File and kicked out the widget and loaded it into iBooks Author, did a Preview, moved it over to my iPad, and the widget worked–you could tell it was trying to play the file.  Except what it wasn’t telling me is it didn’t know where it was…..

Step 4

Go to File and pull down to Export and then CREATE a new FOLDER.

Inside this folder will be FileName_Resources. In this folder you’ll see the .png, the .m4a file and a couple others.

Step 5

Go to File and pull down to Dashboard/iBooks Author Widget and then create a name for the widget you create.  When this file pops up, I presume on your desktop, it is critical to then take the .wdgt file and ADD it to the FileName_Resources file above.

Step 6

Then go into iBooks Author and add in an HTML widget into your document.  Once the dialogue box pops up, then, and ONLY then, should you pull the FileName.wdgt into iBooks Author.

Step 7

Preview the widget and make sure it’s working by loading the .iba file over to your iPad.

Other Options

If you don’t want the caption, headline or even a background around the .png for the widget, all those can be removed.  Just watch the end of the video posted.

Tumult has done a great job making this widget and all the thanks in the world go out to Daniel from Tumult for his email assistance.

If we can help you with this widget or other matters involving iBooks Author, please let us know.  We are excited about this new field of opportunity and would enjoy the opportunity to work with you on the production of your own iBooks.

 

 

 

 

 

 

Enhanced by Zemanta
read more

Pin It on Pinterest