ITB Tutorial Lesson 4 – Adding interactive images

Great, now let’s start getting into the fun stuff. You have your background set up on the first page, so how do we add some interactive images? This is any image that you expect the user to have some interaction with. In a later lesson we will cover the interactions (sound effects, movements, showing other images, etc) but for now let’s just get the images set up properly. Let’s get started

• Go to Add Media on the upper toolbar
• Select Add Image from the drop down menu
• Find the image on your hard drive

Image Settings

Now before you click Add, you are going to want to make sure you have the settings for the image properly selected.  Here is a quick explanation of each.

• Is visible on page load? - This setting determines whether or not the user will be able to see the image when the page is first loaded.  Most of the time this will be checked, but you will likely want to have images associated with the page that only appear after the user performs some type of action, like tapping on another image.  In that case you will want to leave it unchecked.  The image will still show up in the authoring tool canvas.
• Is draggable? - We have a built in feature that allows some images to be dragged around by the user.  This is great for creating puzzles and giving an added level of interactivity.  Later we will cover the drag and drop function, but for now if you check this box it means that the reader will be able to move the image around on the screen.
• Is touch transparent? - You will want to use this when you have an image that is NOT interactive, and you want the user’s touch to ignore that layer and pass it to the layer beneath.  For example, if you were to hide a draggable easter egg behind a bush, when the user taps on the bush you would want them to actually interact with the egg hiding beneath it.
• Select an audio (optional) - You can associate an audio file with any image on the screen.  If you do that here, every time the image is touched it will play that audio file.  This is great for character sound effects.  mp3 files work best here.  And if you don’t have the file ready to go when you upload the image, no worries, we will show you how to attach it later.

Alright, now you have all of the correct settings, go ahead and click add.

Positioning Images

Okay, so you have your image uploaded, now you need to place it where you want it.

• On the right toolbar you should see your image under the Image Elements section.  Click the file name to highlight the image.
• Once the image is highlighted, you can use the mouse to grab it and move it to where you want it.
• When you are happy with the position, click the Save icon directly under the file name.

Awesome, now you have your images uploaded and in the right location.  Next we will start adding some interactive features!

And here’s another video that goes through adding a couple of images:

A tip from Deeno: You will see two more icons next to the save button.  The first one is the Edit Image icon.  You can use this if you want to swap in a new image, but maintain all of the interactivity you have already associated with the image.  The second one is the Duplicate image icon.  This just creates another instance of your image, which can then be set up separately from the original.  And if you ever need to adjust the layer that your image is on, just click on the green up or down arrow next to the name of the image.