ITB Tutorial Lesson 7 – Animations

Today we are going to tackle animations.  We like to remember our audience and keep things simple, so for animations we allow you to loop through 10 frames.  Although we think this is plenty for our target audience if you really need more just let us know!  Ok, here’s what you need to do to create a basic animation.

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

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!