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