Adding Audio Widgets to iBooks Author Using Tumult’s Hype
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…..
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.)
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.
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…..
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.
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.
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.
Preview the widget and make sure it’s working by loading the .iba file over to your iPad.
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.