• First, you do need to create each frame manually, saving each image as a .png.  We highly recommend that the size of each image is the same, even if the character is changing size through the course of the animation.  This will make it easier to line everything up.
• Next you will go to, you guessed it, Add Media, then select Animation from the drop down menu.
• From there it will prompt you to enter the image for each frame.  Note: the animations automatically stop on the last frame, so if you would like to end on the first frame you will have to add that one last as well.
• After you enter each frame you can label the animation (making it easier to find it from the menu), select whether it is visible on page load, and the animation time.  This time is the time to complete the entire animation cycle.  Unfortunately we do not yet have the capability to edit animations, but feel free to bug David about it if this is causing a lot of trouble for you.
• Once you click Add, you can position the animation just like you would an image.
• Super important step: At this point, all you have done is upload the images for the animation, told the system how long it should take to play it, but we haven’t yet told it when to play the animation.  Some animations are automatic, such as the one shown in the video below.  In order to trigger this, you will go to Add Page Action, Play, and select the animation from the menu, then select the delay and repeat count.  If you would like an image to trigger the animation, then select the image that will do the triggering (it can be any image, or even the animation itself) and then select Add Action, Play, and select the animation.  If you do not perform one of these steps your animation will not play and only appear as an image.

Check out the super cool video showing how it’s done in Bunnyfur’s Easter Eggs.

Watch this video on YouTube.

That’s it! But before we go:

A tip from Deeno: Hey authors, one cool thing about animations, is that once they are set up you can have them do almost anything an image does.  They can move, play sound effects, trigger other elements to show and hide, etc.  Feel free to play around a bit with the authoring tool!

Basic MOVE 

Here we are going to set up a very simple move command, where an object moves when it is touched by the user.  We’ll use Bunnyfur again in the video.

• First step, select the image you want to move from the list over on the right.  Once you click on it, it will become highlighted in the canvas.
• Next, move the image to where you would like it to end up after it is touched.  It is very important that you do this now, before you have selected the action.
• Once the image is where you want it to end up, select add action, MOVE from the drop down menu.  The logic here is that the action will move the image TO the location it is at now.  (Check out the tip from Deeno at the end of the post for more insight into why we did it this way).
• For a simple move you will set your duration (remember this is in milliseconds, so 3 seconds = 3000), and leave everything else blank.

Here’s a quick video showing this in action:

Watch this video on YouTube.

Cool, right?  Now you’ll notice in the move menu there were a lot of options.  Let me quickly explain those and give you a couple of examples of how to implement them.

• Specify duration in milliseconds: This sets how long it will take to complete the move action.  You can always go back and change it to get the timing right.  Something that is relatively quick is generally in the 1000-3000 range, whereas slower movements, like clouds in the background or bubbles floating can be in the 12,000-20,000 range.  Feel free to play around
• Reverse?: When you set the reverse flag the image will move back to where it started.  So if A is the starting point and B is the end point, when you set reverse the user will touch the object at A and it will spend the specified time going to B and then reverse path and take the same amount of time going back to A.  Here’s another video example:

Watch this video on YouTube.

• Repeat Count: This sets how many times the action should repeat on one touch, and generally reserved for actions with the reverse flag set or those that go completely off screen (like clouds).  So if you set a repeat count of 2, the user will touch the image and it will move and then repeat two more times, for a total of 3 movements.
• On Page Load?: When you set the On Page Load flag, it means the movement is triggered automatically when the page loads, as opposed to when the user touches something.  This is great for background effects like moving clouds, swaying trees, flying birds, etc.
• Delay: With delay, this is the amount of time the system will wait to perform the action after it is triggered.  For example, if you set a delay of 3000ms and the image is triggered by a touch (on page load unchecked) the user will touch the image, but it will wait for 3 seconds before it moves.  This is generally a bad idea (but not always!) so we recommend using this flag to set up recurring On Page Load actions.

The following video demonstrates how you can use an infinite repeat count, on page load actions, and a delay to create the effect of clouds moving in the background.  Note how the images start and end off of the canvas.  These movements start automatically when the page loads.

Watch this video on YouTube.

Great, now give it a shot in your own book.  We can’t wait to see what you come up with!

A tip from Deeno: Ok, so the team set up this wonderful platform but the move action just doesn’t make sense right?  Why would you set it up this way?  Well, with this set up, it actually allows you to easily assign multiple move actions to the same trigger.  For example, maybe you want to touch a bee and then he follows a complicated path of buzzing around different flowers.  This way, you can treat each of those movements separately, and all the system has to remember is where the image moves TO, what triggers it, and when it happens.  You can set it up a MOVE where it goes directly to point B in 3 seconds.  Then, you can go back to the original image and set up another MOVE that goes to point C, but has a delay of 3 seconds, and a duration of 4 seconds.  You don’t have to remember where point B is, just that 3 seconds after the image is touched it is going to move TO point C and take 4 seconds to get there.  You can assign as many movements as you want to one specific trigger, keeping track of the delays and durations so that they occur seamlessly one after another.  Yes, these types of movements take some planning, but you can create some pretty cool effects.  If you need extra help just let us know, we’re always here!

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:

Watch this video on YouTube.

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!

• 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:

Watch this video on YouTube.

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.

Adding a background image

Background images are the static backdrop for your interactive book.  There is no interactivity associated with them and they will always show up on the lowest layer.  It is also a good idea to upload these as background images so that we can account for different screen formats (like iPhone vs iPad) by just resizing the background, and not touching any of the foreground images.  To upload a background image:

• Select Add Media from the toolbar
• Select Background Image from the dropdown menu
• Pick the image you would like to use
• Click Add, and you’re done!

Here’s a short video of the process: 

Watch this video on YouTube.

A tip from Deeno: Hey guys, so one of the challenges of creating interactive books is the iPad and iPhone have different aspect ratios. Most authors choose to just stretch the background image for iPhone or add black “letterbox” bars to the side of the book. This works fine, but for the perfectionist we have a third option. When you are done with the iPad version of the book, you can go back and change the background images manually on the iPhone version so they are perfect. You need to plan for this now, though, by creating a separate background image for each page at 960×640 resolution and 300ppi. I wouldn’t worry about the foreground images, they scale fairly well. Hope that helps!

The Create Book screen

Book Title: This is the title of your book.  It will show up in the library and bookstore, as well as in any marketing materials generated with your book.

Book Description:  This is a short blurb to tell users a little about your book.  It is also displayed in the bookstore on the Interactive Touch Books app, as well as our online store.  You don’t need this to get started, and you can come back and change it later if you need to.

Book Thumbnail:  This was discussed in Lesson 1, but in case you don’t remember, this is a 250×250 px image that will serve as the cover of your book for the bookstore, library, online store, and any other marketing materials.

Screenshots: Also in the bookstore, when users go to find out more information about your book, they can see a couple of screenshots so they know what to expect.  You can come back and add these later.  They should be 640 x 480 and saved as png files.  Here’s a hint, the canvas in the Authoring Wizard is actually 640 x 480, so in many cases you can just take a screenshot from there.

Now you’re ready to get started!  But first, another tip from Deeno: “If you ever want to change the information from your book, just look next to the book title in the Authoring Wizard, and click the settings icon (see below) and it will take you back here!”

Click the settings icon to go back to the Book Description page

Next lesson, adding images!

1. Background images

As the name suggests, these images will serve as your background for each of your pages.  Any images that you designate as background images will not have any interactivity associated with them.  You’ll want them to be 1024 x 768 resolution (to match the iPad), 162 ppi, and saved in jpeg format.  Typically each page only has one background image and when you upload it as such it will always be on the lowest layer.

• For images that don’t move or interact
• Always the lowest “layer” on the screen
• 1024 x 768 pixels
• 162 ppi
• jpeg format

2. Interactive images

By rule, anything that is not a background image should be treated as an interactive image.  These are anything that you want to move on its own,  or react to being touched, perhaps by playing a sound effect, moving, or causing another image to appear.  To achieve the desired effect, it is necessary to save each of these images separately, with transparent backgrounds, and cropped relatively closely to the actual image.  Below is an example of what your image will look like in your image editing software, such as Adobe Illustrator or Pixelmator for Mac (the gray boxes mean the background is transparent).  In order to preserve the transparency, you must save this as a .png file.

• For images that move or have interaction
• Use transparent background
• Layer can be adjusted later in ITB Authoring Wizard
• Crop close to active character
• 162 ppi
• Save as .png file

Save your images with a transparent background and closely cropped to the actual image. Do not save with a white background layer.

3. Text

For text, we recommend treating this as an image.  Use your favorite image editing software to take full advantage of the fonts and colors, and then save as a png file.

• For any text that appears on the screen
• Use fonts and colors from image editing software
• Crop close to text
• 162 ppi
• Save as .png file

4. Book Thumbnail

This one is easy, just save the image you want to use as your book cover as a 250×250 pixel jpeg or png image.  If you want a different length to width ratio, that’s fine, just set the largest dimension at 250 pixels.

• For the book cover, shown when users browse the bookstore or their library
• 250 x 250 pixels
• png or jpeg file

A hint from Deeno: “When you prepare your scene, start with a single 1024×768 canvas, and create each image as a separate layer within that canvas.  When you have all of your images done, save each layer as a separate png file and upload them into the Authoring Wizard.  For any uploaded images smaller than 1024×768, we assume this is what you have done, so you won’t have to resize anything!”

Ok, if you want to see how this thing works, go ahead and create a background image, a couple of interactive images, and your thumbnail and check out the next tutorial!

• We have added a LOT of new features since we started.
• The tutorial within the authoring tool is hard to find and out of date.

So I decided to use our blog to communicate the tutorial directly to interested author-illustrators.  This way we can do a better job editing and keeping things up to date (WordPress makes it super simple) and you can add comments to each lesson to ask questions or make suggestions.

We’ll try to keep each lesson focused on doing one thing–this should make it easy to find exactly what you are looking for.  We’ll also add screenshots and videos wherever we can.

Here is a link to the page that will list all of the Tutorial articles: http://www.interactivetouchbooks.com/category/tutorial/

Thanks for checking us out.  And good luck!

And here they are!:

1. Layer Control - Our most popular request by far. You can now control what layer your images are on simply by touching the green arrows next to the image name.

2. Fix off-canvas images from blocking controls - As many of you know, one of the great features Interactive Touch provides is the ability to have images and animations start and end off screen. This is great for creating background effects like moving clouds, as well as having characters enter and leave the scene. Unfortunately, for a while these images would block the controls on the authoring tool making it difficult to edit other images. We have this fixed now!

3. Screen shot management - We ask you to upload screenshots so that they appear in the app and the online store, but did a poor job of making it easy for you to see what you’ve done. We added a new user interface that lets you add, edit, and delete screen shot images for your book. You can access this from the book description page, by clicking the gear icon next to your book title in the authoring tool.

4. Asset replacement - This is another big improvement. Many times when working on the tool you will come up with a great sequence of actions and animations, only to later decide that you want to make a slight change to one of the images. This would require you to reset all of the actions and sometimes redo the entire page. Just click the image name to bring up the action menu, and tap the edit icon (the one with the pencil). This will allow you to upload a new image but maintain all of the actions associated with the old one.

5. Asset duplication - Along with replacing an image, you can also create another copy of the same image right in the authoring tool. This can come in handy when you go back to a page you were working on before and want to add more effects and don’t want to waste time searching for the original image again.

6. Animation labels - Now when you upload a new animation, you can add a custom label for it. This makes it much easier to keep track of what you are doing when tying other actions to the animation.

7. iPhone conversions - The conversion to iPhone process is a necessary evil to make sure that books look good on both devices. The iPhone and iPad have different aspect ratios, and we always maintained that rather than forcing authors and illustrators to stretch their background images or add letterboxes, we would give you a choice. We also wanted to add the ability to create different experiences on iPhone and iPad by doing a separate version for each. This process was a bit clunky and we noticed most people just went in and either stretched their backgrounds or added letter box, so we’ve streamlined this process and added an option to do this for you automatically. When you click the “Phone Version” link, a dialog will pop up asking which you would like to do for your book. Bonus, you only have to select this once and we will always maintain the proper version for you.

Whew, almost there!

8. Page action titles - We added titles to the page level actions (these are actions that trigger automatically at some interval after the page is loaded) to make editing easier. Instead of a list of “play, play, play, play” under the page action menu, you will now see exactly what each action triggers, making it easier to adjust your page.

9. Page-level preview - Now when you click the preview button the interface sends you straight to that page in the preview engine. A huge time saver if you are working on a big book with a slow connection.

10. Coloring book preview - The coloring book process was always a bit of a mystery to our authors, so we added a preview function to show how it will look in your book. You won’t be able to color, but at least you will see what the coloring book icon looks like, where it is placed, and what your black and white coloring book image looks like.

And last but not least…

11. “On-snap” for draggable images - This is a bit of a game changer and we will be showing off its capabilities with a few new titles in the next couple of weeks. The idea here is that you can now specify where a draggable image should be dragged to, AND launch new actions based on the final placement. So you can imagine creating a puzzle where your reader drags a piece of clothing onto a doll, and when it is released in the right position (we built in some leeway to account for baby fingers) an animation or a sound effect can play.

When you upload an image and make it draggable, you will see a “link” icon over the image. When you highlight the image to edit it, simply drag it to where you would like it to end up and click the “link” icon. Now when the user drags this near that location and let’s go, it will “snap” into place. Great for dress up pages! Then, if you would like to associate an action with this, you can highlight that image and go to the action menu just like you would normally. Now there will be an option to make the action play “on touch” or “on snap”. This promises to be a really fun feature and we can’t wait to see what you come up with!

We have another batch of updates planned before the end of the year, including some improvements to the ones listed here. As always, reach out to us at admin@interactivetouchbooks.com and let us know what else you would like to see!

San Francisco, CA – October 18, 2011– Today Interactive Touch announced a groundbreaking platform that has enabled the company and its partners to bring 30 kids iPad apps to market in just 6 months, without writing a single line of custom code.

This game changing online platform allows authors and publishers to create fully interactive titles – filled with touch-triggered effects like sounds, animations, puzzles, and peek-a-boo – free of charge and in less time than it takes to create the art itself.  Contrast this to a typical $25,000  development budget and it is easy to see why publishers have been lining up to try out this platform.

Red Chair Press (RCP), a award-winning children’s book publisher whose mission is to create learning through laughter,  teamed up with Interactive Touch to develop six interactive titles–the Funny Bone Readers’ series launched a mere six weeks after the two companies agreed to work together.

“Children love a good story and when an educator or a parent is reading to a child, it’s natural to ask the child to point to the pictures, touch the character,” said Keith Garton, president of RCP.  ”And the Interactive Touch Books really bring the experience of interacting with a story alive.”  Because the titles are created with tremendous speed and nominal cost, RCP anticipates releasing the remaining 18 titles from their series before Christmas.

This is the first of what Interactive Touch expects to be a long line of content partnerships, and is off to a great start.  “The Funny Bone Readers’ series has already been a huge hit with our users,” said Ameen Saafir, founder and CEO of Interactive Touch.  “In Red Chair Press we found an award-winning partner with a similar vision for children’s media.  We look forward to working together on the rest of the series.”

In addition to this partnership, the company has also signed over 100 authors to agreements for future work and expects to have as many titles available on the Interactive Touch Books by the end of the year.

About Interactive Touch
Founded in December 2010, Interactive Touch is revolutionizing media creation and distribution by enabling anyone to author truly engaging children’s content for mobile devices. Using the company’s free online tools, authors can create and publish interactive books in a matter of hours, without writing a single line of code. Their work is published through the Interactive Touch Books app, which has achieved 60,000 downloads since its April 2011 launch, and is available on iPad and iPhone.

To learn more visit http://www.interactivetouchbooks.com

Contact: Ameen Saafir – ameen@interactivetouchbooks.com- 805.708.7398

About Red Chair Press
Red Chair Press is committed to learning, literacy, and laughter.  With over 50 years’ experience writing and illustrating children’s books, developing and researching educational materials, and collaborating with teachers and parents around the world, Red Chair is committed to providing materials that inspire children to be the best they can be, to be positive contributors to their communities, and to have fun while learning.  The company recently won Gold honors for family-friendly products from The Mom’s Choice Awards.

Learn more at http://www.redchairpress.com.

Contact: Keith Garton – keith@redchairpress.com