In the previous tutorial, we built a simple gallery in Hype for use in iBooks^R Author. In this Hype for iBooks Author tutorial, we will add the interactivity and animation that makes Hype widgets great for iBA.

Now we can add the On Mouse Click action to the Back and Next buttons.

1. Select the Back button image. In the Actions Inspector, click the Plus icon next to On Mouse Click. Set the Action to Jump to Scene. Set the Scene to Previous Scene. Set the Transition to Crossfade and keep the default Duration.
   
   
2. Repeat for the Next button but set Scene to Next Scene.
   
   Now that we have the buttons, we can duplicate the scene for the other three images in the gallery.
   
   
3. Right-click on the scene, and choose Duplicate Scene. Repeat twice. Rename the scenes to “Layout1”, “Layout2” and “Layout3”.
   
   Let’s change the iPad image for each new scene.
   
   
4. Select the Layout1 scene and right-click the iPad image and choose Delete.
   
   
5. Use the Elements Menu to import another iPad image. From the Menubar, click Arrange - Send to Back, to move the iPad image below the buttons.
   
   
6. Repeat the previous step for the other two scenes.
   
   Click the Preview icon to test your project in the Browser. If all goes well, you should be able to browse through the gallery. Now we need to make a few adjustments to the buttons. We will remove the Back button from the first scene and replace the next button on the last scene with a new Return button.
   
   
7. Select the first scene. Right-click on the Back button and choose Delete.
   
   
8. Go to the last scene. Right-click on the Next button and choose Delete.
   
   
9. Use the Elements Menu to import the Return button. Reduce the Scale to 50% and place at the right.
   
   Now we need to add an action to the Return button that will take the user back to the first scene.
   
   
10. Select the Return button. In the Actions Inspector, add the On Mouse Click action. Set the Action to Jump to Scene. Set the Scene to the first scene (Quizzes) and the Transition to Crossfade.
    
    Let’s test again. If all is well, we can export for use in iBooks Author.
    
    
11. From the Menubar, click File - Export as HTML5 - Dashboard/iBooks Author Widget.
    
    

PSD Covers- iPad Mockup
https://www.psdcovers.com/

Back