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

5 Comments

  1. Thanks for the helpful tutorial. I was able to follow it along easily enough. Now I am able to insert my html widget with audio and don’t get the unsupported file type error, but I still hear no sound when I preview the ibook on my iPad. Any ideas?

    Thanks.

    • Donny Claxton

      The sound should be there if you’re following the tutorial. The key, as noted in the clip, is ensuring that you’ve got the .wdgt in the FolderName_Resources folder of the widget, that the .png and the .m4a also are in that file when you take the widget and move it across to .iba. It did not work for me until I made this important step. In fact, if you down load the widgets Tumult has on their site demoing their tutorial, those files will not load and play in your iBook either because you don’t have the Resources Folder that goes along with them….

  2. John H

    Thanks so much for your tutorial. To the best of my knowledge, I followed your instructions as you demonstrated them. However when I move the widget over to the HTML widget in iBooks Author, I get an error message that the widget contains unsupported file formats. In the resource folder, I have the java script, the audio file in m4a, the widget, the picture in png, the HYPE file, and the PIE file. I have no spaces in the names of the files. Do you have any suggestions about what I may be doing wrong?

    Thanks.

    • Donny Claxton

      John and I talked last night and again this morning. He’s got some good news! And what a fabulous project he’s working on. Fokes, this is why we do what we do. There’s so much positive energy and creativity out there happening in this space.

  3. John H

    After talking with Donny about the problem, he suggested opening the existing audio m4a file with QuickTime and then exporting it as an m4a file. I then went through the process of rebuilding the widget and inserting it into iBooks author. It worked perfectly with the QT version of the audio file!

    Bottom line – open and then export audio files using QuickTime even if they are m4a files.

    Thanks so much for sharing your “discoveries”.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

%d bloggers like this: