LEARN@IGP
11
Sprite Events
Sprites are a core component of any type of animation. AIE enables any number of sprites to be controlled by sequence, and with transforms applied to carry out nearly any action. Updated: 2014-07-18
SPRITE Overview
Sprites are a sequence of images which are manipulated over time to give animated motion. They consist of a specially prepared image loaded into a container. The image can be used as a CSS background or in the foreground.
Reserved Terms for Sprite Events
SPRITE FIXED literal. Sprite creation and declaration.
START Command. Starts the sprite animation
STOP Command. Stops the sprite animation
FPS Command. Change the Frames Per Second
Sprite Definition Syntax
A sprite must be declared using the following structure. The top example is an abstraction, the second an actual definition:
SPRITE spritename spriteID (n-width,n-height) (b-width,b-height) n-steps n-fps SPRITE walkingman sprite1 (1000,160) (100,160) 9 10
SPRITE FIXED AIE Literal
spritename An exclusive identifier for the sprite
spriteID the id of the parent div containing the sprite
(n-width,n-height) The image dimension in width, height (no spaces)
(b-width,b-height) Box dimension in width, height (no spaces)
n-steps Total number of steps in the animation
n-fps frames per second
Sprite Command Event Syntax
Sprite command events are included in standard Event Containers. Sprite animation loops run independently and continuously unless stopped. They can be invoked from any Event Container.
START usage
0 XX SPRITE walkingman START
0 Time in milliseconds at which the animation starts
XX Placeholder. do not change
SPRITE - FIXED value. Do not change
leftman - name of the target sprite
START - command instructing the start of the animation
STOP Usage
0 XX SPRITE leftman STOP
Stop an animation loop. Usage is identical to START. If START has not been invoked it will have no effect.
FPS Usage
0 XX SPRITE leftman FPS 5
FPS - change the frames per second for a sprite. The last integer represents the new frames per second.
17:30 13 November 2011
1. Implementation of RESET and RESETALL
2. Implementation of NAV
3. Implemenation of INCREMENT AND DECREMENT
The Sprite Artwork
The Sprite HTML
<div class="panel-rw interactive-rw" id="pan1" title="Panel Interactive">
<div class="aie-nav-script-rw" title="AIE Panel Nav Script">
<pre class="aie-events">
SPRITE leftman sprite1 (1000,160) (100,160) 9 10
SPRITE rightman sprite2 (1000,160) (100,160) 9 10
EVENT startsprite id=start click
EVENTSTART startsprite
0 XX SPRITE leftman START
0 XX SPRITE rightman START
0 sprite1 25000 "left:0px;"
0 sprite2 25000 "left:650px;"
EVENTEND startsprite
EVENT stopssprite id=stop click
EVENTSTART stopssprite
0 XX SPRITE rightman STOP
0 XX SPRITE leftman STOP
0 sprite1 0 "left:650px;"
0 sprite2 0 "left:0px;"
0 sprite1 COMMAND RESETALL
0 sprite2 COMMAND RESETALL
EVENTEND stopssprite
</pre>
</div>
<div class="title-bar-rw" title="Panel TitleBar">
<h2>Sprite Example LIVE</h2>
<p>Click on Start button to start the SPRITE animation.
Click on Stop button to start the SPRITE animation.</p>
</div>
<div class="frame-rw" id="pan1f01" title="Panel Frame">
<div class="frame-body-rw" title="Panel FrameBody">
<button id="start">Start</button>
<button id="stop">Stop</button>
<div class="aie-sprite sprite-foreground">
<div class="walkingman-left">
<div class="sprite sprite-right" id="sprite2">
<img src="../i/sprite_right_online.png" />
</div>
</div>
<div class="walkingman-right">
<div class="sprite sprite-left" id="sprite1">
<img src="../i/sprite_left_online.png" />
</div>
</div>
</div>
</div>
</div>