In this Hype for iBooks Author tutorial, we will build an interactive image gallery. The example we are using is a gallery that I created for an iBooks^R Author project called Children’s Storybook Template User Guide.

A gallery was determined to be the best approach for viewing several large screenshots of the layouts installed in the template. Why would you want to do this in Hype instead of using the iBA Gallery widget? Because we can add interactive animation to the project. Also, by using Hype to create the gallery, we can export the project for both iBooks Author and the template’s supporting website. This will save us a lot of time.

The Specs

We want the gallery to play at full screen in our book, so we will set the dimensions to full bleed (2048 x 1536 pixels). There will be four screenshots. Because we will need a space for some text and back/next buttons, let’s place the screenshots within a product mockup of an iPad. We will place the text and buttons at the bottom of the iPad. Finally, we will need images for the buttons.

There are a few ways to make a gallery in Hype but for this project, we will be using scenes. Each image in the gallery will have its own scene in Hype.

1. Open Hype. We have a default Main Timeline and one Untitled Scene.
   
   
2. Let’s rename this scene “Quizzes” because it begins the quizzes section in the Children’s Storybook Template.
   
   
3. Let’s save the document as “QuizzesSectionGallery”.
   
   
4. In the Scene Inspector, set the Scene Size to the preset iBooks Full Landscape 1024x 768 pixels.
   
   We need to add the buttons and attach actions to the buttons before we start adding more scenes.
   
   
5. We will use the Elements menu to add the first image for the first iPad and the two buttons.
   
   When we import the iPad image it will be automatically scaled 50% to fit within the screen. But the two button images will load at 100% size. But we need to reduce them to 50%.
   
   
6. In the Metrics Inspector - Scale, set the Width and Height to 50%. Repeat for the second button. Drag each button to the bottom area.
   
   

Continue