Hype makes life easier when it comes to publishing HTML5 for iBooks Author
The past couple weeks have been a busy one for Kinetic Media. We have been producing a 3D commercial for a Pest Control company and have been knee deep in learning one of my new favorite applications Appcelerator Titanium. I plan on doing some posts to show why this has become my new favorite application but I wanted to first off review some of the new features that Hype released a couple weeks ago.
One of my more popular posts was how to create an HTML widget for iBooks. In that post I show you how to take any HTML5 content and convert it over to an dashcode widget that can be easily imported into iBooks. In that tutorial I export an interaction using Tumult Hype.
Creating the Dashcode Widget for iBooks was not too hard to do but was not too intuitive. Hype has taken matters into their own hands and made our lives much easier. Instead of having to create an XML file along with placing everything in a folder now all we have to do is export to iBooks. Here is how you do it.
Create your animation
The first step of course is to create your Hype animation. For this post I am just going to start with a box going from one side of the screen to the other.
Now that we have created our animation lets now go to export this to our iBooks widget
Exporting to iBooks
The export to iBooks is found in the same location as you would export any other Hype animation. Go to File > Export as HTML5 > Dashboard/iBooks Author.
Once you have chosen that option you will now have to save your interaction in your desired location. For now I will just place mine on my desktop. The file is then exported as a Dashboard widget.
The nice thing about this is you can create your own Mac Dashboard widget so if you want to have something in your dashboard it is pretty easy to create it in Hype and then if you double click on the output it will install it to your Dashboard which you can then share with others.
Now you are ready to bring this widget into iBooks Author so pull up iBooks Author.
Insert into iBooks Author
With your iBooks Author project up go ahead and click on page you want the HTML interaction on. Go up to widgets on the menu and select HTML.
This will insert an HTML widget inside of your iBook. You can position and resize your widget on the stage.
After you have resized the widget on the stage navigate to your inspector and on the last icon tan you will see the properties for the html widget.
Choose your File
All you have to do from here is click the Choose button and find the exported HTML widget from Hype. Once you select the file and click insert you will notice the widget changed its image. Hype uses a screen shot from your interaction for the image.
Modify the .wdgt file
If you wish to change that image there is a work around. In finder or on your desktop go to the widget. What you first need to do is remove the extension on the interaction. Do a slow double click on the name just as if you were going to rename your interaction.
Instead of renaming the interaction select the .wdgt part and delete that part. Once you do that click off the icon and then go back to that interaction and right click on the interaction and select the option for “Show Package Contents”.
This will open up the folder contents of the file. In the folder you will see an image titled Default.png. This is the default image that iBooks uses to display before the learner taps on the icon. Swap this out for whatever you want. Once your done rename your interaction so it has the .wdgt extension on it again.
No you can re-insert it into iBooks. That is it! Preview your interaction in on your iPad!