In a previous Hype for iBooks Author^R tutorial, we built an image gallery with interactive buttons and animated transitions. The project turned out so well that I decided to create a few more for the Children’s Storybook Template User Guide project. Of course, the first step was to create a Hype template. So, in this tutorials we will convert the previous gallery widget project to a Hype template.

The Specs

If you followed the previous tutorial, you know that each image in the gallery has its own scene in Hype. The project was a small gallery of 8 images. Let’s add two scenes for a larger gallery and set up a placeholder image for each scene. We can use a generic placeholder graphic and, to tell the user the size of the image, let’s put some text on the image stating the dimensions in pixels of 2048 x 1536. We will also need to replace the text in each scene in the original project with placeholder text.

The Tech

Hype has a nice feature in the Elements Inspector for replacing images in the screen. Our template will only have the one placeholder graphic and the user can use this feature to easily replace the placeholder graphic with their own images.

For the placeholder text, we can use something that will tell the user what scene they are editing, such as "Scene X - Your Text Here".

The Process

As we have already created our gallery widget for our iBooks Author project, we can open the project into Hype, make our adjustments and save as a Hype template.

Open your gallery project into Hype. As you can see, our project has 8 scenes with a screenshot on the bottom layer, the screen title text and two buttons on each scene. If you wish to change the graphic for the buttons, now is a good time. Once you have made your adjustments for the template, let’s save it as a template file, so that we won’t make changes to the original project.

1. Click File - Save Template and save the file in the .hypetemplate format.
   
   Our template will have 10 scenes, so we need to add two. As scenes 2 through 7 have buttons that will move the gallery to the default previous and next scenes, we can duplicate any of them.
   
   
2. Let’s rename Scene 8 to Scene 10. Double-click on the scene title under the thumbnail and rename the scene.
   
   Now we can duplicate a scene twice to get 10 scenes in all.
   
   
3. Right-click on Scene 7 and select Duplicate Scene from the pop-up menu.
   
   
4. Double-click the title and rename the duplicate scene to "Scene 8".
   
   Repeat to create scene 9. Now we can add our placeholder graphic to our scenes.
   
   
5. On Scene 1, select the background graphic. In the Elements Inspector, click the Choose button to open the Finder window and choose your placeholder graphic. Hype will replace the existing graphic with the new placeholder.
   
   Repeat the previous step for all ten scenes. Now we are ready to set up the placeholder text.
   
   
6. On Scene 1, double-click on the text at the bottom of the placeholder graphic and type "Scene 1 - Your Text Here". Repeat this for each scene.
   
   

We now have our placeholders set, so we can save the project.