Hype has a very nice feature for the beginning animator, called the Record feature. To use this feature, just click the big red Record button. That’s what we will do in this tutorial.

As we have learned, to create an animation, we only need a start and stop frame. For example, to decrease the size of a rectangle while it moves across the screen, we would tell Hype on which frame to start the animation and on which frame to stop. Because we are working with timeline-based animation, we can talk to Hype by using keyframes on the Timeline. And, you guessed it, we will place these keyframes on those two special start and stop frames.

When Hype sees a keyframe, it takes note of the properties of an object, such as a rectangle, on the screen. Just a few of the properties that Hype will take note of are Opacity, Origin Left, Origin Right, Size Height and Size Width. These properties correspond to CSS style properties in an HTML5 document. Hype stores the values of these properties along with the corresponding position or frame on the timeline.

Our first step in creating this sample animation is to tell Hype what size to make the rectangle and where to place it on the screen at the start and end of the animation. We can do all this with the Record button.

1. Click File - New to start a new document in Hype, using the default settings.
   
   Let’s add the rectangle to the screen.
   
   
2. Click the Elements icon in the Toolbar and choose Rectangle. Hype will place a new rectangle at the center of the screen.
   
   Let’s place the rectangle where we want it to be for the beginning of the animation. We will keep the default size, so all we need to do is move the rectangle.
   
   
3. Drag the rectangle to the left edge of the screen.
   
   
4. Take a look at the Metrics Inspector. The rectangle is now 7 pixels from the left edge and 149 pixels from the top edge. Also, it is 102 x 102 pixels.
   
   

Now, we want the rectangle to move to the right edge and reduce 50%. Also, we want this to happen over just 30 frames. Let’s tell Hype this information via the Record feature in the next tutorial.

Continue