Hype interface is a convenient and friendly environment. The scene area takes most of the space, and the bottom third is reserved for the timeline.
Above the scene is a header with a simple toolbar. If you have ever worked in any video editor, you’d find yourself familiar with Hype. Click on the “Show Scenes” button in the upper left corner, will open the a bar where you can manage the named scenes by adding, duplicating or removing them. Every scene takes its own timeline, as it behaves like a traditional footage. The “Insert elements” button is set next to the “Show Scenes” and allows you to add button, image, text, video or similar interactive content on the scene. Some of the elements, like button has a specific treat, as you can set the three states: normal, hover and pressed. Other tools you’d notice in the header are:
- Group/Ungroup (joins or splits selected elements of the scene)
- Front/Back (sets the elements queue in front of the viewer, like layers do)
- Zoom (sets the numerical values of zoom)
- Preview (in the browser)
- Inspector (floating panel, see below)
Animation is still a kind of a film/movie, so it needs a timeline that displays pictures over time. Hype timeline is no different than others, it has layers that holds graphics and text. Whenever you insert an element, a new layer is added. Each layer should contain only a single element in order to animate it properly. Then you make a keyframe – a position in the timeline where visual change occurs. There’s a button on the right, with a red circle inside – it will help you to record the animation and automatically create the keyframe(s). Click on (select) an element, press ‘Record Animation’ button, then move playhead (vertical thin black line with a turned triangle on top) forward along the timeline. Then move the selected element on a new position. Toggle the ‘Read Animation’ button and move back playhead at the timeline beginning (00:00.00 position on the time display). If you press Space tab on the keyboard or ‘play’ button on the Timeline control bar, you’ll see animated move of the selected element.
For advanced users, there’s a property bar at the bottom of timeline that allows you to manage the keyframe position, adding or removing keyframes of the selected layer. All the properties in the list could be controlled simply selecting the item.
Having finished the work in Hype editor, the animation should be exported. Chose menu ‘File’, then ‘Export as HTML5’ where you’ll find options: Folder, Dashboard / iBooks Author Widget and Dropbox.
- Dashboard / iBooks Author Widget is a package you need for an interactive ebook (like our Oblivious Fill). The content of this package is pretty the same as in the above-mentioned type of export, except is compressed into a single archive.
- Dropbox option sends your work to the Dropbox public folder so you can share it with Internet community.