ITB Tutorial Lesson 6 – Making Images Move

Having fun yet?  I hope so.  These lessons just keep getting more and more fun don’t they!  Today we are going to tackle the MOVE command.  This one is not as intuitive as the rest, so I recorded a few extra videos to demonstrate the various ways to use this action.

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:

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:

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

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!