In the last tutorial, we began working on a simple animation and exploring how to use the Record feature to create our animation. We have the object to be animated, a rectangle, sized and positioned on the screen for the start of the animation. Now we will use the Record feature to finish building the animation.

With your Hype document still open, let’s continue.

1. Place the Time Cursor at frame 1 (timecode 00:00:00)
   
   
2. Click the red Record button on the Timeline Toolbar
   
   
3. Select the rectangle on the screen
   
   Hype will automatically store the position and size values for our rectangle.
   
   
4. Move the Time Cursor to frame 30 (00:01:01)
   
   
5. Select the rectangle and drag it to the right edge of the screen
   
   
6. While holding down the Shift key, use the Transform Handles to reduce the size of the rectangle 50%
   
   Hype will automatically store the new position and size for frame 30.
   
   
7. Click the Record button again to stop recording.
   
   

Let’s take a look at the Metrics Inspector again. As you can see in the Placement section, the Left and Top positions have changed to 495 andn 174 pixels. Also the Width and Height have changed to 52 pixels and the Scale is 50%. These are the values that Hype will store for the ending frame.

Next, you should see an animation bar added to the timeline. This animation bar is the visual representation of our animation.

If you select the rectangle on the screen, you will also notice blue bars under the animation bar. These are a visual representation of the change in the position and size of the rectangle. As we did not change the opacity of the rectangle, there is no bar to the right of that property.

These bars make it easy to adjust the animation. To increase the duration of the animation, we can drag the right edge of the animation bar to the right. To reduce the duration, drag the bar to the left. To keep the animation duration as is but place the animation later on the Timeline, we would drag the animation bar to the right.

Move the Time Cursor back to frame 1 and click the Play icon to watch your first animation.

Back