These days we’re leaving an unforgettable era of an exciting Internet experience. Everyone would admit that Adobe Flash had brought a lot of beauty and innovations built in the base of today’s Internet. Now, we’re meeting HTML5 and Javascript as an advantageous, but in the same time, a pretty compromise solution. One of the things that Flash had injected in many great web sites was the (easy going) animation. Some developers would say that Javascript as well brings ability to make animation easily. But, what if you are not a developer? This is the point where the certain software tools could help. Opening this topic, here at iCandobetter blog, we’ll give you a glimpse to the picture of a few HTML5 animation tools available on Internet. In the first post, we’ll discuss about Tumult Hype, a very nice piece of software whose output can be either a pure HTML5 + Javascript or an useful iBook Author widget.

Hype interface

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.

Tumult Hype User Interface.

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)
• Colors
• Fonts

Hype Toolbar.

Inspector panel

Managing the elements goes through the “Inspector” floating panel. If you are familiar with iBooks Author, you’ll find out Hype “Inspector” pretty much the same. There are seven inspector tabs that refer to the document, scene, metrics, element, text, mouse action and identity. If you’re making a widget for iBooks, set the size 1024x768px in the Document inspector or choose iBooks Standard Widescreen from the combo box named “Default Sizes”. The Scene inspector is important for the action that will happen after loading/unloading the scene or after animation is completed (if it goes automatically). The Metrics inspector sets the size and position of a selected item on the scene, while the Element tab gives a power to improve the visual sensation of each – adding the border, shadows, setting the background color or decreasing the opacity. Playing with the Text inspector controls reflect changes immediately on text blocks. If you have selected the element that imply a mouse click, then you’ll be able to define the application behavior in the Mouse Action inspector. Choose what action you’re catching up, then select the menu item will trigger as a next action: Jump to scene (which scene), Play timeline (select timeline), Run Javascript (if you’ve got any piece of code that begins with a function), Go to URL (address) or Compose an Email. The last Inspector tab defines identity IDs in case you’d extend the features of the application adding some extra javascript code.

Hype Inspector Panel.

Timeline

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.

Hype Timeline.

Export

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.

• Export to ‘Folder’ option is great for having a stand-alone solution that can easily become part of a website. It gives you html and javascript files, including all (graphic, video, sound) the resources used in the animation.
• 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.

Exporting the HTML5 Widget or Animation.