Alright, now you have a few images uploaded. In the next couple of lessons I am going to show you how to create the basic foundation for an interactive book. Today we will cover hiding and showing images, otherwise known as the peekaboo effect. Tomorrow we will go over creating different types of movements for your characters and backgrounds, and early next week we will tackle animations. Let’s go!
Creating a hide and show effect
You can create a pretty spectacular book using only this feature. Some of the best uses of this feature are found in Bunnyfur’s Easter Eggs and Mr. Magic’s Magic. You would use this feature when you are looking to recreate the effect of a pop-up picture book–the reader touches one image and it causes another image to appear. The second image will usually be in place of the first one, but it certainly doesn’t have to. You can make an image appear anywhere you want. So how do you do it?
For this case I am assuming that you have 2 images, we’ll call them Image 1 and Image 2, where Image 1 is initially visible and touching it causes Image 2 to appear in its place. We’ll go one step further and say that when Image 2 is touched, it also disappears, revealing Image 1. The process can go on and on as much as the user likes.
- Upload Image 1 by going to add media, image.
- This image is going to trigger the action and will be visible to the user, so be sure to check the “visible on page load” box
- Upload Image 2, which will NOT be visible at first, so uncheck the “visible on page load” box. Position it where you would like it to appear
- Now select Image 1 from the menu on the right, click add action, SHOW. That will pop up a dialog box, select Image 2 from there and save it. When this is done, tapping Image 1 will make Image 2 appear.
- To make Image 2 now disappear when touched, select it from the right hand menu, click add action, HIDE. When the dialog box pops up, select Image 2 again. Make sure that you are selecting to hide the same image that is triggering the action.
- Go to preview and check your work.
Here is a quick video of what the process should look like:
A tip from Deeno: When following this tutorial, make sure Image 1 is on the bottom layer, which means it will actually be listed first in the menu of images on the right hand side of the canvas. Alternatively, you can put both hide and show actions on EACH image, and then the layer order will not matter. Give it a shot!