View source for IBook Author: Creating a simple animation with Hype

--[[User:Thiebaut|D. Thiebaut]] 14:48, 23 January 2013 (EST)
----
<bluebox>
This Tutorial illustrates how to create a simple HTML5 animation with 2 images and two buttons.  When a button is clicked the other images appears on top of the previous one.  The button as well is replaced by a different button.
The video below illustrates the concept.
</bluebox>
<br />
__TOC__

<br />
<center><videoflash>Y_Nur_Sw6IU</videoflash></center>
<br />
<br />
=Reference Material=
The [http://tumult.com/hype/tutorials/ Tumult.com] site has a page with very good and informative video ''tutorials'' that you should be sure to watch first.

'''Tumult''' makes the '''Hype''' application that is used in this tutorial to create the animation.  Hype has a free trial option that is perfect for investigating its features and  playing with it.

=Two Different Images=
Start by generating two different images.  The two shown below were generated with the [http://procreate.si Procreate] app for the iPad.
<br />
{|
|
[[Image:ElectricalCircuitON.jpg|250px]]
|
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
|
[[Image:ElectricalCircuitOFF.jpg|250px]]
|}
<br />

=Create the animation with Hype=

* Open Hype and create a '''New''' project (File/New)
* Import the first image in the design area.  Center it in the middle using the guide lines.
* Click on '''Insert Elements...''' in the top menu of the window, pick '''Button''' and locate button in the place of your choice.  Change its name to "Close Switch".
<br />
<center>[[Image:HypeCloseSwitch1.png|400px]]</center>
<br />
* Click on the '''Show Scenes''' button and create a new scene.  Import the second image in the new scene as you just did for the first image.  Also create a button while you're there, an set its label to '''Open Switch'''.   
* Go back to the first scene.
* While the button is selected (tiny circles appear around it), click on the '''Pressed''' button right above it.  Switch to the '''Inspector Window''' and click on the '''Mouse Inspector''' button (2nd from the right), and click on '''On Mouse Click'''.
* Click on '''Jump to Scene''' as the action to perform, and for the scene pick '''Next''' or '''Previous''' depending on which scene you are currently editing.   Do the same for the other button.
* If you performed these edits correctly, the button on the first scene will take the viewer to the ''next'' scene, and the button on the second scene will take the viewer back to the first scene.  The figure below illustrates the important steps and information that needs to be set up.

<br />
<center>[[Image:HypeButtonSettings.png| 600px]]</center>
<br />
=Saving for iBook=
The animation can be tested in a browser by clicking on the '''Preview''' top-menu button in the main Hype window.  It will load the HTML 5 code in the browser, and it should be fully functional.  If not, go back to the Hype window and check that both buttons have actions associated with the mouse click.


Once the animation works as you want, export it as HTML 5, and pick '''Dashboard/iBook Author Widget'''.  Pick a folder where you will keep your iBook Author ''widgets''.

=Importing into iBook Author=

* On the same computer, open or create an iBook project in '''iBook Author''' and place your cursor where you want to place your new widget.
* Click on the '''Widgets''' icon in the top menu, and select '''HTML'''.   This will create a place holder for your widget in the text.  Leave it where it falls and in the widget window that opens up, click on the widget inspector (last icon to the right), and make sure '''interaction''' is selected.
* Click on the '''Choose...''' button and pick the widget you saved in Hype, with a '''.wdgt''' extension.
* Click on '''Layout''' in the Widget Inspector, and remove the '''title''', '''caption''' and '''background''' to get a clean look for your widget (unless you do want them!)
<br />
<center>[[Image:iBookWidgetInsertion.png|600px]]</center>
<br />
* At this point you can position and resize the widget in your iBook as you wish.

=Preview on iPad=

* Connect your iPad to your computer and click on the '''Preview''' icon in the top menu of iBook Author to download to the iBook app on the iPad.  Open your iBook preview and verify that your animation works.
<br />
<tanbox>Note that a static picture of the animation appears in the text.  To actually see the animation, you must click on the picture, which will force the HTML5 animation to open in full-screen.  Apparently you cannot view the animation along with the text of the iBook...
</tanbox>
<br />
The video below illustrates how this widget looks on an iPad 3 with Retina display.  It was created using the techniques described in the [http://webvideouniversity.com/podcast/ Web Video Secrets] podcasts available in many places, including the iTunes store. 


<br />
<br />
<br />
<center>
<videoflash>uEDTAIumFPs</videoflash>
</center>
<br />
:::::'''Note''': ''The mouse pointer that is visible in the video belongs to the Macbook that was working as a mirror for the iPad, and whose video screen was captured (by SnapZ Pro) to create the video.  iOS (currently) does not support a mouse!''

<br />
=Other Resources=
* A YouTube video on inserting a Hype animation in iBook Author in [http://www.youtube.com/user/TumultHype?feature=watch YouTube's Tumult-Hype channel]
<br />
<center><videoflash>9_3-OWNb6Dg</videoflash></center>
<br />
<br />
<br />
<br />
<br />


[[Category:Hype]][[Category:iBook Author]][[Category:HTML 5]]
[[Category:iBook Widgets]]