A Teachers Intro to Using Tumult’s Hype 3 to Create Widgets for iBooks Projects

imagesThis is a guest post by Anthony DiLaura.  Anthony is a good friend who took the time a couple summers ago to get me started with Hype.  He is an Apple Distinguished Educator and hosts an iBook Hack Event for educators each summer.  I am fortunate and thankful to have Tony test out and review Tumult’s newest HTML 5 widget creator: Hype 3 and Hype Professional.  Thank you Tony! Follow Tony on Twitter here @anthonydilaura

Software: Tumult’s Hype 3 + Hype Professional

Website: http://tumult.com

What it is: Software specifically for the Mac OS X that creates key-frame animation and interactive content in HTML5. Easily add content, actions, timelines, scenes and interactivity to your layouts for use in web design and iBooks Author widgets. Hype has a clean UI and perhaps can be likened to a compilation of iMovie, Keynote, and iAd Producer. Objects on the canvas function based on a specific timeline that plays when a scene is loaded.

Who: Teacher/Education

Why: eLearning, mobile learning, HTML content, animation, iBooks Author widgets, instructional design

Ease of Use: Intermediate to advanced

Cost: $49.99 Hype 3, $99.00 Full Hype Pro (or $49 upgrade in App purchases), $29.99 Hype 3 Education Pricing

Purchase for education: http://tumult.com/store-edu/

Overall: Love it!

Review, examples, and tutorials: 

All cards on the table here, I am not a web designer, I don’t know HTML, CSS, or Java scripting. I am a teacher with a passion for learning and technology. I enjoy creating iBooks using iBooks Author. I have turned to Tumult’s Hype to help create HTML5 widgets for my iBooks. I am convinced that I am only scratching the surface of what Hype is capable of doing. However, for my skill set and what I am looking to do, Hype is a wonderful tool. Click below or here for more.

Hype 3 and Hype Pro (added features) are Mac OS X specific software that allows users to create key-frame animation and interactive content in HTML5. Users can easily add content by dragging and dropping elements onto the canvas. These objects can then be animated in Hype by dragging a playhead (keyframe) out to a specific point on a timeline, pressing record, then changing the physical / visual properties of the objects you want to animate on the screen. Hype records all the changes of the objects on your screen and turns them into animations. When finished with making the changes on your canvas, stop the recording and play back your animation to see how it looks or preview the animation on Hypes built in web previewer.

You can add actions to objects on the canvas such has linking to new scenes, playing or pausing additional timelines, or running java scripts. Objects on the canvas function based on specific timelines that play when a scene is loaded or when an action is triggered. Creating additional scenes in your animation is as simple as adding additional slides in Keynote and behave in a similar fashion. Hype has a clean UI and perhaps can be likened to a compilation of iMovie, Keynote, and iAd Producer.

Hype Pro has many new additional features for top end users (unlike myself at this point). I have attempted to use the new physics engine in Hype but have not been very successful. At this point I am not sure how much I’d use it on a regular basis to accomplish what I need it for. The added physics engine and additional ability to create your own motion paths with timing functions is a nice feature that previously only Adobe Edge Animate offered (to my knowledge). With time and inspiration I am sure I will learn to appreciate and use the physics and timing functions to enhance my students learning experience.

Putting together a Hype file can be quite a task. At this point, none of my Hype docs are so involved that they require a deep thought out plan. I do recommend thinking through the flow of your pages, this is one area I think Hype could improve upon by having an option to show linked scenes and scene flow of the overall document instead of just viewing a linear path of scenes on the left side bar. Also as you build your widget think about keeping your pages clean and easily understood from the end user side of things, and building in quality and necessary animation. Too much animation for the sake of animation is unnecessary and maybe distracting for the learner ultimately taking away from the intention of the widget.

When finished creating your Hype file your animations and interactive HTML5 content can be easily exported and uploaded to your web server to enhance your web site layout and add interactivity. Hype files can also be uploaded to self-hosted WordPress websites or exported to Dropbox. Furthermore, and most important to me and other teachers authoring in iBooks Author, Hype files can be exported as widgets that can be brought into your iBook projects.

Objectives: Students will learn to identify the hypotenuse, opposite leg, and adjacent leg of a right triangle. Ultimately this will help them understand the three trigonometric ratios Sine, Cosine, and Tangent.

Learning modes: They will have an opportunity to learn through interaction with elements on the screen. They will receive immediate feedback based on their choice. There is a short video from which to get some direct instruction then a quiz at the end that gives the teacher and student immediate feedback on their understanding.

View widget here: https://dl.dropboxusercontent.com/spa/tj53brjuv5up4xb/Exports/Right%20Triangle%20Exploration/Right%20Triangle%20Exploration.html

Below are 5 short tutorials showing the construction of a very similar widget. Essentially all the interactions are the same, the flow is similar there are just a few less scenes. View the widget here:


Tutorial 1: https://youtu.be/1EJqZrP8Pfg

Creating a new Hype document, adding buttons and text to create a top menu.

Tutorial2: https://youtu.be/xoBTKacrfYU

Adding simple animation to the main timeline.

Tutorial 3: https://youtu.be/sdPckT3PoeI

Tutorial4: https://youtu.be/Xpe5kiRriBE

Adding video and the HTML widget that will stream a specified URL into your widget.

Tutorial 5: https://youtu.be/pKnwJu8Y9zs

Exporting as HTML5 widget for iBooks Author, adding into iBA and previewing.

Again, I am not an experienced programmer or web designer. Using Hype is relatively easy given time and creative inspiration. Tumult does a decent job of providing more advanced tutorials on their website (http://tumult.com/hype/tutorials/) and even the option of downloading practice files to explore the various features mentioned in the tutorials above.

If you are interested in creating HTML5 widgets or even web design in HTML5 I highly recommend pursuing Tumult’s Hype and Hype Pro. The features and ease of use will have you creating engaging and interactive content in no time.


WE Anthony DiLaura

About the Author: Anthony DiLaura is currently a high school mathematics instructor at Zeeland Public Schools in Michigan.   He is an  Apple Distinguished Educator, a proud dad of three and an instructional tech specialist. He is the founder of 

Please note: I reserve the right to delete comments that are offensive or off-topic.

Leave a Reply

Your email address will not be published. Required fields are marked *

One thought on “A Teachers Intro to Using Tumult’s Hype 3 to Create Widgets for iBooks Projects

  1. Just a comment: There’s a difference between greek letters theta θ and phi, φ. Your diagrams are labeled with theta, but the questions refer to phi.