In this tutorial, we will create an HTML animation widget that will play full screen in an iBook. One of the most popular ways to animate an iBook is to use HTML5. In fact, HTML5 animation is replacing Flash as the number one animation source on the web and mobile device. Tumult has a reasonable priced HTML5 animation software for the Mac, called Hype and Hype Pro. Hype is still a one-time purchase and you can upgrade to pro with just one more one-time purchase. So, we will be using Hype today.

My latest iBook is a revision of a book app that I created several years ago. At that time, iBooks Author^R was not really good for making children's books but things have changed. We can now use Hype to create HTML animation widgets that can be played full screen or on the page for any page in an iBook .

As our sample widget will be a full bleed (2048 x 1536 pixels), it is best to have it play full screen and triggered by the reader tapping a button on the page. For this animation we have one background image, several smaller images to be animated and two audio files.

Element List

• Full Bleed Background image that covers entire screen - jpg
  
• Four objects to be animated on page - png
  
  • Red Ornament
    
  • Purple Ornament
    
  • Striped Ornament
    
  • Train
    
• Two sound files - mp3
  

Note: The background image should be an .jpg image, as it will cover the entire screen. For those elements that need a transparent background, use the .png format.

1. Open Hype. We have a default blank Main Timeline and blank screen. We also have the default scene titled Untitled Scene. Let's rename this to "Xmas Orn". Also, let's save this document as "XmasOrn".
   
   
2. Go to the Scene Inspector and set the Scene Size to the preset iBooks Full Landscape 1024 x 768 pixels.
   
   We can keep the Background color set to white because we will be covering the screen with a background image.
   
   
3. From the Toolbar, click the Elements icon and choose Image. Choose your background image from the Finder window.
   
   

Note: Even though the preset has 1024 x 768 pixels, we are still using Retina ready images. Our 2048 x 1536 pixels background image will be automatically loaded on a Retina ready iPad. For Standard screen iPads, the 1024 x 768 pixels background image will load.

That's all we need to do for the Main Timeline of our project. It has just one frame. Next, we will create individual timelines for each animated element, which are the three Christmas ornaments and the train. Save your work.

Continue