The best way to learn about animating in Hype is to create a simple animation, such as moving a circle across the screen. Let’s start our first Hype document and see what happens. You will soon realize that the tools in the Hype workspace control the CSS properties in our HTML5 based animation.

1. Open Hype Pro. You will first see the Welcome screen. Notice the links on the right that will take you to the online resources at Tumult.com.
   
   In the Scene Inspector, you will notice that the default Scene Size is a basic web size of 600 x 400 pixels.
   
   As my tutorials are mainly for creating animations for iBooks Author, let’s change this to the Preset Size for iBooks Fullscreen Landscape (1024 x 768).
   
   As you can see, under the Toolbar, we have one Untitled scene in the Scene Selector. If you don’t see the Scene Selector, click the Scenes icon in the Toolbar. To the right is the Scene Area where we will design our animation. Under the Scene Area is the Timeline and to the right are the Inspectors. Let’s add a circle to the Scene Area.
   
   
2. Click the Elements icon and choose Ellipse from the Elements menu. You should see a new grey circle at the center of the screen.
   
   Let’s learn about the Element Inspector.
   
   
3. With the circle selected, click on the Element icon in the Inspector.
   
   

As you can see, we have controls for the Fill Style for the Background, we can set a Border and add a Drop Shadow. We can also control the Visibility, Reflection and Filter Effects. These are visual controls for telling Hype what CSS code to generate.

You have three choices for the Background Fill style. Our circle has the default solid fill color. We also have the option to fill the circle with a gradient or image.

The Visibility controls include an Opacity slider. Also we have control over the CSS Display property by using the Hidden and Visible radio buttons. When an element has the Display property set to Hidden, you will not see it on the screen and the element will not be exported when you publish your animation.

On the other hand, both the Opacity and Display properties can be animated. For example the Display property is good for creating a blinking object on the screen and the Opacity property is great for fade effects.

In this tutorial, we learned about the basic Element properties that we can animate. In the next tutorial, we will examine the Metrics Inspector.

Continue