Creating an Interactive Book

Intro:

This is a tutorial to teach you how to make a basic interactive book using hyperPad. By following this tutorial you will understand the concepts needed to put together a book.

 

Project Structure:

A hyperPad project is broken down into Scenes, Objects, and Behaviors.

Scenes:

Scenes contain all the objects for your app and are a great way to organize the different parts that make up your app.  For example, you can use a new scene for each page of a book.

Objects:

Objects are individual items within the scene. This includes any text or illustrations. Each object can have its own behaviors.

Behaviors:

Behaviors are what make your scene and objects interactive and come to life.

Importing Images:

You can import images and illustrations from the Camera Roll, Photo Stream, and Drop Box. hyperPad will automatically create non-retina images for you, so when you’re creating illustrations make sure you work with a 2048×1536 image size in mind. The maximum image size Tapapbl can import is 2048×2048 pixels.

Additionally, because hyperPad does not currently support fonts, or Rich Texts, you should also import your text as PNGs with transparent backgrounds.

Once you have imported all your images, you can open the Object Drawer to start adding them to your scene.

Adding Behaviors:

Making your objects interactive is easy in hyperPad.

First tap on the object that you want to make interactive. Then from the Object Properties, tap the “Behaviors” Button to launch the behavior editor.

For this tutorial, the interaction we want to create is when a reader touches the object, it moves to a specific position.

From the “Input” category drag the “Started Touching” behaviour onto the canvas.

By default the Started touching behavior automatically selects the current object. But you can change this by taping the object graphic in the behavior properties.

Next drag on a “Move To Point” behavior, and connect it to the “Started Touching” you added in the previous step.  The “Move To Point” behavior will move the object to a selected point on the Canvas.

You can enter the specific location by filling in the X/Y input fields located in the “Behavior Properties”. You can also choose the location to move visually.

To do this visually, tap the object graphic in the behavior properties. Select the object you want to move, then move the blue target to the desired location.

Once you’re satisfied with the position, tap the checkmark Icon to accept the new position. Notice that the X and Y fields in the behavior properties are automatically filled in.

If you press “Play” now, you will see that it works just as the behaviors are laid out. The object will move after you touch it.

Page Turns & Scenes:

Now that you have your first page with interactions set up, you may want to add additional pages, and the ability to swipe between them.

There are a few different ways we can add the swipe gesture. You can add the behavior to a specific object in your scene, or add it to the Global Behaviors so it affects all  the scenes in your book.

For this tutorial lets add the swiping gesture to the Global Behaviors so we don’t have to add it for each new scene.

To Start, open the “Creation Menu” by pressing the icon in the top left corner.

Then tap the “Global Behaviors” button at the bottom to launch the behavior editor. The behaviors you add here will affect your entire project and execute when you load each scene.

Next drag on a “Swipe Left” behavior, and  tap on it once it is added to the canvas to open the behavior properties.

Notice the “Swipe on anything” toggle switch. If this switch is set to “Off”, then you must swipe on a specific object for the event to trigger. Set the switch to the “On” position, so you can swipe on anything and not be restricted to swiping on a specific object.

Note: If you add a “Swipe” behavior to global behaviours, it will not have a specific object selected. The object you are restricted to is the “Background”. If you don’t set the switch to the “On” position, this may look like it works. But if you add other objects covering the background they can interfere with the swiping, especially if they have other touch inputs behaviors added.

Next add a Load Next Scene behavior and connect it to the Swipe behavior. This will automatically load the next scene once you swipe your finger towards the left side of the screen.

If you don’t have any other scenes in your project, then the current scene will reload. Additionally, if you are on the last scene in your project, then the next scene will be the first one in the scenes list.

Now you can add a new scene to your project. If you press play, you will see that your swipe gesture works in both scenes without having to add any additional behaviors.

Conclusion:

That’s basically all you need to know to creating an interactive book on hyperPad. You can experiment with the different behaviors to create a wide level of interactions for your books.