How to embed interactive CSS3 animations in an iBook

Like everybody else on the US west coast, this morning we woke up in a world where Apple is poised to transform the way we consume textbooks. One of the compelling features of this new and exciting medium is the ability to easily publish interactive books through iBook Author.

iBook Author lets you embed interactive content in your books to create more engaging experiences for learners, and our first thought here at the Sencha HQ was to try using Sencha Animator to create that interactive content.

So after a few minutes of fiddling, we found a fairly straightforward way to embed an Animator project in an iBook.

Step 1: preparation in Animator

The first step requires to create a new project, or use an existing one and create a “cover” for the animation, and rename it “Default.png”. This cover image will be used to show the animation in the page when inactive, and needs to be of the same size as the stage.

Sencha Animator Rocking Boat project

The next step is to export the project as you would normally do, then move the previously created Default.png to the output’s folder.

Step 2: a little hacking…

Now comes the tricky part: you will need a .plist descriptor file in your output folder, so we provided one made for you to download.

Edit the .plist file to match the dimensions of your animation, the BundleName to match the export folder’s name (e.g. myExportFolder), then add the extension “.wdgt” to the folder.

If you’re working in MacOS, the icon of the folder will change to that of a Dashboard widget. If you’re on Windows or Linux, you can create a widget but you will need Mac OS Lion in order to complete the process, since iBook Author only runs on that version of Apple’s operating system.

Finishing up in iBook Author

iBook Author and Sencha Animator in action

Now that you have an animation file ready, you just need to add an HTML widget to your book, then drag the .wdgt file in the widget’s properties like shown in the screenshot.

Now you’re ready to export your book and enjoy the results of your work! You can download our demo book from this