Using the Dashcode HTML5 widget inside of iBooks Author
For the most part, I’ve found iBooks Author easy to use (simply drag in your Word Doc or insert a Keynote widget inside your book). However, there’s one thing I’ve found to be less straightforward than everything else: using the Dashcode html widget in iBooks Author.
At first, I thought it necessary to create something in Apple’s Dashcode application (which is not terribly easy to do), but I recently discovered that things are much simpler, and I’d like to share. At any rate, I hope this post will be helpful for those looking to do the same thing I was trying to do.
First, to create an HTML5 animation–just a simple one for testing. I’ll use Tumult Hype to create a simple HTML5 animation of a box moving from one side of the screen to the other. (If you need help with Hype refer to this post.)
Now this animation has to be exported as HTML5. Create a folder on your desktop into which you can export the file. (When we package this up for iBooks Author, we’ll need to have everything in a folder.)
Here’s the folder I created with the name HTML Sample. And I’ve named the exported HTML index. The reason for the name? To get this ready for iBooks Author, it’ll be necessary to create a p-list. (A p-list is something used in mobile programming which provides a list of all the files and information used in your app.) iBooks requires that your HTML and all the files with it be packaged up into a widget (extension: .wdgt). I’ll be going over how to do that in just a second.
Now that I’ve exported my HTML (index.html) to my newly created folder, I’m ready for the next step. iBooks requires two files. The first is the p-list I just mentioned. It’s an xml file required for any kind of iPhone or iPad development. I found a good example you can use (see the link below this paragraph). The second file you need to have in the folder is a PNG file called Default.png. From what I’ve been able to tell, there’s no size requirements (but keep in mind that it won’t take up the full iBooks page, so plan accordingly). You can easily make this yourself by taking a screen shot of your HTML5 animation when you preview it in your browser. (Just press Command + Shift + 4 to take a screen shot.) Or you can download a sample along with a p-list at the following link:
Alright. Now you should have four things in your folder:
- index.html (produced from Hype)
- index_Resources (also produced from Hype–it has all your HTML5 resources)
- info.plist (downloaded from the link above–make sure you unzip it!)
- Default.png (created by taking a screen shot of your index.html file or downloaded from the link above)
Now it’s time to rename your folder. This may seem an unnecessary (or downright weird) step, but to bring HTML into iBooks Author it needs to be a .wdgt extension–and that’s what we’re going to make happen in renaming the folder. So we add .wdgt to the end of the folder (which, you’ll remember, I called HTML Sample). I slowly double-click the name of my folder on my desktop, as if I meant to rename my folder, but instead of changing the name, I’m just going to add a .wdgt at the end of HTML Sample, and I get HTML Sample.wdgt.
As soon as I hit enter, I’m asked whether I want to add that extension onto the folder. The answer, of course, is yes, so I click Add.
That’s exactly what we’re after, since now can enter the widget into iBooks. Naturally, the next step is to pull up iBooks and insert the HTML widget onto a page:
Now, with the widget in your page, move it to where you want it (and make other necessary adjustments).
Next, pull up your inspector and make sure you’re on the last tab, widget settings.
Select the HTML widget on your page (if you don’t have it selected already). You’ll see you can now click the Choose button on the settings. This will pull up the file browser, and you can now find the widget you created: HTML Sample.wdgt. Select it and hit Insert.
And that’s it! You now have the HTML widget working inside your iBook. Preview it on your iPad, and it’ll play perfectly inside your book.
Watch the video below: