In the two previous Hype for iBooks Author tutorials, we have created our first animation for our iBooks HTML widget in Hype. Now we will coordinate the playback of the animation between the main and secondary timelines.

At this point, we have only the background image on the Main Timeline in our Hype^R document. On a secondary timeline, we have the red Christmas ornament, which has been animated to swing from left to right. Now, how do we get the two timeline to work together?

We have two goals.

1. The first goal is to get the animation on the secondary timeline to loop continuously.
   
   
2. At this point, the secondary animation will not play at all. Only animations on the Main Timeline play automatically. We need to fix that.
   
   

We need to add two Timeline Actions. One action on the Main Timeline will tell the animation on the secondary timeline to start playing. The second action on the secondary timeline will loop the animation.

Open your project into Hype and let's get started. First we will loop the animation on the secondary timeline.

1. Go to the secondary Red OrnamentTimeline by selecting it in the Timeline list.
   
   
2. Select the ornament element (redOrn).
   
   We will place a timeline action on the last frame of the animation that will tell the animation to go back to the first frame and do it all over again.
   
   
3. Place the Playhead at the last frame (00:01:10).
   
   
4. To add the action to the timeline, click the triangle icon to the right on the Timeline Actions.
   
   
5. In the popup menu, choose the Go to Time in Timeline and set the Timeline to Red Ornament. Set the Time to the first frame (00:00:00).
   
   Now that we have looped our animation on the secondary timeline, we still need to tell the Main Timeline to start playing the animation. We will do this by adding a Timeline Action on the first frame of the Main Timeline.
   
   
6. Go back to the Main Timeline by selecting it in the Timeline list.
   
   
7. With the Playhead at the first frame, click the icon to the right of Timeline Actions. From the popup menu, choose the Start Timeline action and set the Timeline to the Red Ornament Timeline.
   
   

Now that we have finished the first animation, we can do the same for the other two ornaments. However, set each ornament's animation to a different duration.

Back | Continue