Animation Editor

Animation Introduction

The Booty5 editor / engine handles animation in 4 different ways:

  1. Simple velocity – This is where you simply set a linear or angular velocity to an object and the object will move based on that velocity, this offers a limited sort of animation such as drifting and spinning objects
  2. Bitmap animation – This is frame based bitmap animation that can be accomplished using brushes. The current bitmap animation frame can be changed over time to change the brush that is displayed on the object
  3. Creating animation timelines in code – If you are using the Booty5 engine then you can use the Animation and Timeline classes to create complex re-usable and throw-away animations. Whilst this is very flexible its also not very intuitive from a designers perspective
  4. Create animation using a timeline editor – The editor has a built in animation editor that uses timelines to create and preview animations, making animation creation very simple and easy to use

Animations in the editor are split into the following components:

  • A Property – A property is a specific attribute of an object that is to be animated over time, for example an objects rotation angle. A property has a value that represents its current state, for example 45 degrees
  • A Key Frame – A key frame is the value of a property at a specific time
  • A Timeline – A timeline is a set of key frames that form a complete animation of a specific property, for example, an apple bobbing up and down in the water
  • An Animation – A single animation contains multiple timelines, each one targeting a different property of an object

Actors and scenes can have multiple animations assigned to them that can play either one at a time, all at once or a combination of both

In the editor, each object (scene or actor) can have its own set of animations.

For an example showing a project creating using the animation editor see the Timeline Animation demo.


What is the Animation Editor?

The Animation Timeline Editor is the section of the editor that is located to the bottom of the screen (the tabbed area that contains Output and Animation tabs). In the timeline editor you can create and edit Flash style animations that occur over time.

Scenes and Actors (Sprites and Labels) can be animated over time by creating animations, adding properties and then creating key frames for those properties. A key frame represents the state of a specific property or set of properties at a specific point in time. A property is a specific attribute of the object such as scale, rotation, position etc..

The following properties are currently supported:


  • Position (x, y) – Position of the scene
  • Camera (camera_x, camera_y) – Camera position, cannot be previewed within the editor
  • Opacity – Opacity level of scene
  • Layer – Scenes current visible layer
  • Visible – Visible state of scene


  • Position (x, y) – Position of the actor
  • Angle – Angle of rotation of actor in degrees
  • Scale (sx, sy) – Scale of the actor
  • Origin (ox, oy) – Actors transform origin
  • Depth – Actors 3D depth
  • Opacity – Opacity level of actor
  • Bitmap Frame (frame) – Current bitmap animation frame index (used with animating brushes)
  • Layer – Actors current visible layer
  • Visible – Visible state of actor
  • Velocity (vx, vy) – Current velocity of actor
  • Angular Velocity (vr) – Current angular velocity of actor


  • Position (x, y) – Position of the actor
  • Angle – Angle of rotation of actor in degrees
  • Scale (sx, sy) – Scale of the actor
  • Origin (ox, oy) – Actors transform origin
  • Depth – Actors 3D depth
  • Opacity – Opacity level of actor
  • Bitmap Frame (frame) – Current bitmap animation frame index (used with animating brushes)
  • Layer – Actors current visible layer
  • Visible – Visible state of actor
  • Velocity (vx, vy) – Current velocity of actor
  • Angular Velocity (vr) – Current angular velocity of actor
  • Text – Text to display

Note that you can add custom properties by adding a timeline for an existing property then editing the property name in the timeline property view.


Editor Overview

The animation editor can be seen in the screen shot below:

Booty5 HTML5 animation editor

Booty5 HTML5 animation editor

The animation editor is split into 4 sections:

  • Animation / Properties list – This area is situated to the left hand side and contains the following controls:
    • Add / Remove / Clone animation buttons and animation selection box – These allow you to create, remove and clone entire animations as well as select the currently active animation for the object
    • Add / Remove property buttons and property category selection box – These allow you to add new properties and remove old ones from the animation. To add a new property, select the property from the property drop down box then click the “Add property” button, this will add a new property to the timeline and insert a key frame at time 0 in the timeline. To remove a property from the timeline, select the property in the animation property list then click the “Delete selected property” button.
  • Control panel – This area is situated in the middle top area of the animation editor and contains the following controls:
    • Add key frame button – Adds a new key frame at the currently selected time. Note that at least one property must have already been defined for the animation, also a key frame at the current time will be generated for all properties in the timeline
    • Record button – Starts recording mode, in recording mode changes to objects on the canvas / resource properties areas will create / change key frames in the timeline
    • Play button – Starts / stops animation preview
    • Play children – If ticked then the object will also play the animations of all its children
  • Scrub area – This is the long area in the middle that shows time. You can click or drag the mouse around on this area in playback or record mode to adjust the currently viewed frame
  • Key frame area – This area is the section just below the scrub area which shows and allows the editing of key frames. Here you can double click on the timeline to add new key frames (or right click a key frame to delete it) as well as drag existing key frames around. You can also use the middle mouse button to drag the entire timeline around
  • Key frame properties – This area is situated over to the right and shows the properties of the currently selected key frame
  • Timeline properties – This area is situated over to the lower right and shows the properties of the currently selected timeline

The editor has 3 modes:

  • Recording mode – In this mode changes to objects on the canvas will generate or update key frames in the timeline. Note that if you change an object that has no animation created for it then one will automatically be created for you. Changing the timeline scrub will show changes to object(s) allowing you to preview the changes at different times
    Playback mode – In this mode the animation is played back allowing you to see a preview of how the animation will look in real-time
    Passive mode – In this mode (not recording or playing) changes made in the editor will not affect any animations

Its important to note that many functions such as changing scene, saving / loading etc will stop recording automatically. Its also important to note that animation changes cannot be applied to multiple selected objects, only the first selected object will be affected. In fact switching between the various modes will cause selections to be lost


Editing Flow

General editing flow in the timeline happens in this sequence:

  • Click the record button to switch into record mode
  • Select an object on the canvas that you wish to animate
  • Add a new animation by clicking the add animation button in the animation editor
  • Add properties that you would like to change using the add property button and property selection box (all at once or as and when you need them)
  • Add key frames for those properties at the time values you would like them to take affect, adjusting the values for the properties as you create them
  • Preview the animation using the play button or by scrubbing the timeline
  • To make adjustments switch back to record mode and make changes to key frames then hit play again to preview changes


Animation and Timeline Properties

Key frames and timelines have a variety of different properties which can be adjusted that affect how the animation behaves when played back / exported.

A key frame has the following properties:

  • Value – The value of the objects property at a specific time, this is adjusted by changing the various properties of the object
  • Time – The time at which the key frame will be active
  • Ease – Determines how values are tweened between key frames
  • OnHit – When the animation time hits this frame, script that is present here will be called

A timeline (a collection of key frames for an objects property) has the following properties:

  • Key frames – A collection of key frames
  • Property – A property that will be changed by the associated key frames
  • Tween – If set to true then key frame values will be smoothly tweened
  • Time Scale – The speed at which to play back the key frames
  • Start Delay – The number of seconds to delay play back of the key frames
  • Destroy – If set to true then this timeline will be destroyed when it has finished playing
  • Auto Play – If set to true then this timeline will automatically play when the object is created, otherwise it will need to be started manually in code
  • Repeat – The number of times to repeat play back of this timeline
  • OnEnd – Actions / script that will be called when the animation ends
  • OnRepeat – Actions / script that will nbe called when the animation repeats

An animation (a collection of timelines) has the following properties:

  • Timelines – A collection of timelines that animate various different properties of an object
  • Name – The name of the animation that can be used to refer to it in script / actions. You can change the name of an animation by clicking the animation selection box then clicking the button at the side of the animation name


Creating an Animation Walk-through

Here is a quick example that walks through the creation of a quick timeline animation:

  • Start a new project
  • Right click on the scene in the world tree and add a new sprite
  • Select the new sprite by clicking on it on the central canvas
  • In the Animation window click the “Create animation” button to create a new animation called anim1
  • Select “Position” from property type drop down and click the “Add property” button to add the new property. Note that this will add the x and y properties to the timeline
  • If the record button is not toggled on then toggle it on now
  • Move the timeline scrub to time 00:05 (5 seconds)
  • Select the sprite on the canvas and move it to somewhere else, notice how a new key frame will be added at time 00:05 as you move the sprite
  • Now click the play button to play back the animation. You will see that the sprite will move from its original position to the new position over the space of 5 seconds.

Next topic:

7,942 total views, 2 views today