In the previous Hype for iBooks Author tutorial, we setup and added the background image for our iBooks page animation HTML widget. We will continue by adding the elements that we will animate on the page.

At this point, we have our background image on the Main Timeline in our Hype^R document. Let's add our first Christmas ornament on a new timeline and animate the image to rotate slightly from side to side.

1. From the Timeline, click the icon to the right of the Main Timeline and choose New Timeline. Name this timeline "Red Ornament". You should see the new Red Ornament Timeline listed in the Timeline pane.
   
   Although the screen looks the same, we are now working on a secondary timeline to the Main Timeline.
   
   
2. From the Elements menu in the Toolbar, add the Red Ornament png image.
   
   It will open at full size but we are working at half size. So let's scale it to fit.
   
   
3. In the Metrics Inspector, set the Scale value to 50% for both Width and Height.
   
   
4. Drag the ornament to the upper left and place the top of the ornament slightly beyond the screen.
   
   Before we can rotate the ornament, we need to move the anchor point from the center of the ornament to the top of the screen. If we keep it at the center, the ornament will rotate around the center axis. We want the ornament to rotate from a point on the edge of the screen.
   
   
5. Select the element while holding down the Command key. This will display the control handles and anchor point for the image. Drag the anchor point to the top edge of the screen.
   
   
6. With the ornament still selected, go to the Metrics Inspector. In the Rotation section, set the Angle for Z to -10. This will swing the ornament slightly to the right.
   
   
7. With the Playhead at the first frame of the Timeline (00:00:00) and the Red Ornament (redOrn) element still selected, go to the Properties list in the Timeline.
   
   There you will see a few properties for the Red Ornament (redOrn). But we need to use the Rotation Angle Z property. Let's add this to the list.
   
   
8. Click the icon to the right of the Properties header to open the list of available properties for the redOrn element. Choose the Rotation Angle (Z) property.
   
   You should see it added to the Properties list. Now we can add a keyframe to set the beginning position for our animation.
   
   
9. Click the Add Keyframe icon to the right of the Rotation Angle (Z) property. You should see a light blue triangle icon appear on the first frame.
   
   We want the ornament to swing to the left over 20 frames in the Timeline. This will be the first half of the animation.
   
   
10. Move the Playhead to frame 20 (00:00:20). Add a second keyframe
    
    
11. In the Metrics Inspector, set the Z angle to 10. The ornament should swing to the left on the screen.
    
    Now let's make the second half of the animation by swinging the ornament back to the original position on frame 40 (00:01:10).
    
    
12. Move the Playhead to frame 40 (00:01:10). Add a third keyframe and set the Z angle to -10.
    
    Click the Play button to test the animation. The redOrn element should swing to the left and back to the right. Save your work.
    
    

Back | Continue