In this Hype for iBooks tutorial, we will finish our Christmas animation page widget by creating a secondary timeline where we will animate a toy train to move across the scene and export our project as a widget for iBooks Author.

Let's open the project in to Hype^R and get started.

1. Create a new secondary timeline for our train animation and name it "Train".
   
   
2. While still on the Train timeline, use the Elements menu to add the train png to the scene.
   
   
3. As with the Christmas ornaments, reduce the scale to 50%.
   
   
4. Place the train outside the bottom left of the screen.
   
   
5. With the Playhead at the first frame of the Train timeline, go to the Properties list. Click the icon to the right of the Origin Left property to add a keyframe.
   
   
6. Move the Playhead to the 00:09:00 frame and add a second keyframe.
   
   
7. Drag the train png horizontally to the outside of the right edge of the screen.
   
   Now we need to loop this animation with a Timeline Action.
   
   
8. With the Playhead at the 00:09:00 frame, add a Go to Time on Timeline action and set the Time value to 00:00:00.
   
   Now we will tell the Main Timeline to play the Train Timeline animation.
   
   
9. On the Main Timeline and frame one, add a Start Timeline action for the Train timeline.
   
   Now we can export the project as an iBooks widget.
   
   
10. From the Menu, click File - Export as HTML5 - Dashboard/iBooks Author Widget.
    
    

You will use the HTML widget to add the project to your page in iBooks Author^R.

1. In iBooks Author, choose the HTML widget from the Widgets menu.
   
   You will notice that iBooks Author creates a thumbnail image for the widget from the first frame of your HTML widget.
   
   
2. In the Interaction tab, set the widget to Plays Full-Screen.
   
   
3. In the Layout tab, uncheck the Title, Caption and Background options. Set the Margin to 0.
   
   

Back