Scripting Html5 Animations

One of the main reasons for using KoolMoves and KoolShow to create Html5 animations is that no programming is required. You add objects to the stage, set properties for the objects, arrange the objects on the timeline, and the software does the rest. For sophisticated animations however, scripting is often required.

The are several hooks in the GUI which provide the user with the capability to add custom scripting.

Under Javascript menu bar, selecting Animation Scripting displays the following screen (javascript code for a finger painting animation is shown):

Clicking on the Edit Code button on the right, opposite Key frame javascript, displays this screen with syntax highlighting for viewing and editing the code:

KoolMoves and KoolShow Html5 export utilitizes the CreateJS javascript framework which interfaces to primitive Html5 commands. Most of what you see above are calls to CreateJS. This may seem daunting but for those of you with prior experience in Flash action script, there is a lot of similarity. CreateJS was created to provide a bridge between Flash and Html5 (minus the strong typing of Action Script 3). As a starting point, you can learn by exploring some of the examples found by selecting Examples under Javascript menu bar. Also there are many CreateJS demos online.

The code blocks shown in the first image of this page export to different locations of the html file and can result in additions to the file that tie the code into the CreateJS framework. For example, in the cases of On Tick, On Mouse, and On Click, additional code is added in the form of addEventListeners. For code associated with a key frame, additional code is added to the file that causes the key frame scripting to execute when the movie advances to the key frame while playing. To summarize, scripting can be added before objects on the stage are created, can be attached to key frames (activated when the key frame starts playing), can define an On Tick function (what happens each time the internal timer advances the animation), or can define On Mouse or On Click functions.

In addition, custom scripting can define a button action (what happens when a button is pressed). For example, on pressing the button in this example, the text changes.

This animation of falling letters is created with the assistance of Box2dWeb physics engine. CreateJS creates the appearance of the letters using a sprite sheet and Box2dWeb provides the physics of motion.

In another example, a sprite sheet is animated in two ways using javascript. On mouse click, the sprite sheet animation sequence changes to its jump sequence. On animation tick, the sprite sheet moves across the stage. The software allows the creator to apply animation scripting to objects that have been added to the stage manually. The sprite sheet image was from a CreateJS demo example.