In the past tutorial, we discussed the most common terms used in animation software. Now we will explore how these terms apply to the Hype workspace and tools.

As mentioned before, a keyframe animation is made up of one or more scenes and these scenes contain elements and timelines. So how do we control scenes in our Hype document?

The easiest way to work with scenes is to use the Scene menu. As you can see, we have several options from creating a new scene, duplicating a scene to deleting a scene and more.

In Hype Pro, we have the extra features in the Scene Selector which allows you to by pass the Scene menu. For example, we can rearrange (drag and drop) the order of the scenes or double-click to rename a scene.

In the Scene Inspector, we have controls for the scene size, responsive layout, animation timelines, background color, actions and behaviors. When creating animation for iBooks Author, its best to use one of the preset sizes for iBooks.

The basic building blocks of an animation are the elements on the screen. In Hype, these elements can be a shape, text, buttons, images, video, audio and HTML widgets. Elements can be added to the scene using the Insert menu or the Elements icon in the Toolbar.

Text
When working with text, one can add text to the screen by clicking Insert - Text or the Elements Icon. The Typography Inspector has controls for styling the text, including the font family, size, color, alignment, spacing, shadow and of course Google Fonts. One nice feature is the filter option for displaying all fonts or just fonts for web or iOS.

Video and Audio
When creating animation, one usually does not include video but Hype projects for the web and other applications can include video via the HTML5 video tab. Audio is often used in animation projects and Hype supports control and playback of audio.

Shapes
Hype has three preset shape elements: rectangle, rounded rectangle and ellipse. Each can be added via the Insert menu or the Elements icon.

Images
Hype supports the jpg, gif, png and svg image formats and preloading. Preloading is the process of delaying the playback of the animation until all image have downloaded to the webpage or device. One nice feature is the Retina image support for iOS devices. When your Hype project is exported, Hype automatically optimizes your images and labels each for proper use in Retina and standard devices. As with other elements, images can be added via the Insert menu or the Elements icon.