Traditional books have long held a cherished place in our hearts, but the rise of digital technology has paved the way for a new form of storytelling: interactive books. These dynamic creations combine the narrative depth of traditional literature with interactive elements that invite readers to actively participate in the story. From interactive illustrations to branching storylines, interactive books offer a rich and engaging reading experience that captivates audiences of all ages.
In a world where technology continues to redefine the way we tell stories, interactive books stand out as a captivating fusion of literature and interactivity. Whether you're a seasoned developer or a newcomer to the world of app creation, the prospect of crafting your own interactive book can be both thrilling and daunting. With the right tools and guidance, bringing your stories to life has never been more accessible. In this blog post, we'll explore how to create a basic interactive book. We empowers creators like you to unleash your creativity and engage readers in immersive storytelling experiences.
We make it possible for anyone to create immersive interactive books without any prior coding experience. By following this tutorial you will understand the concepts needed to put together an interactive book without coding! Anyone can be an aspiring author with us.
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.
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.
Making your objects interactive is easy with us. 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.
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.
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.
Congratulations! You've successfully created your first interactive book using hyperPad. But don't stop there—experiment with different behaviors and interactions to enhance your storytelling experience further.
Looking to expand your knowledge and skills in app development? Here are some recommended books to help you on your journey:
1. iOS App Development For Dummies by Jesse Feiler
This comprehensive guide offers a beginner-friendly introduction to iOS app development, covering everything from Xcode basics to building user interfaces and integrating features like animations and sound.
2. Swift Programming: The Big Nerd Ranch Guide by Matthew Mathias and John Gallagher
Dive into Swift programming with this hands-on guide, perfect for beginners. Learn the fundamentals of the Swift language and gain practical experience through guided tutorials and exercises.
3. Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell
Explore the principles of interaction design and learn how to create intuitive and engaging user interfaces. This book offers valuable insights and practical tips for designing interfaces that delight users.
With these resources at your disposal, you'll be well-equipped to continue your journey into the world of app development and interactive storytelling.
But, those aren't the only ways. If you are a hands-on learner, just start crafting your own interactive adventures today with us, and let your imagination soar! Our supportive community on Discord can help show you the way and we also offer personalized support, just reach out to us on our socials or marketing@hyperpad.com
Unlock endless game and app creation with hyperPad for a one-time payment. Turn your Procreate designs or digital art into interactive comics, games, and more, then publish directly to the App Store from your iPad. Start your game dev journey with hyperPad today and bring your ideas to life!
Be the first to hear about new blogs, updates and fun events!
