LEARN@IGP
8
Timeline Events
Timeline events allow the construction of elaborate animations and demonstrations of any length and complexity over time at millisecond accuracy. This uses the native CSS rendering abilities of the target browser or Reader. Updated: 2014-07-18
Timeline Events
One of the strengths of AIE is that any event can incorporate timeline scripts of any length. These can be used for delays, multiple object syncronization and animation.
There are some slight similarities to CSS Animation, but the Storyline module allows control over multiple elements simultaneously and also allows time to be defined in milliseconds.
Timeline events can be freely intermixed with COMMAND events.
Timeline Command Event Syntax
+ t-offset t-start element-id t-duration "property:value;" t-start .class t-duration "property:value;"
+ t-offset Time offset before a block of timeline events starts. This allows the building of very large animation scripts in controlled segments.
t-start Start-time of the instruction in milliseconds. Within an event these should be built in numerical sequence.
element-id an id or class statement that is the manipulation target. IDs are placed with just their value Eg: id-27.
CSS selectors can also be used in this position use CSS selector dot notation. Eg: .hide
t-duration the time within which the instruction must execute in milliseconds. The time is linear by default (there is no ease-in-out properties).
"property:value;" The actual CSS properties and value which are to be manipulated. These can be concatenated but there must be no spaces between the selectors.
Usage
<pre class="aie-events-rw">
EVENT timeline1 XX ONSTART
EVENTSTART timeline1
+2000
0 box1 500 "height:200px;width:200px;"
500 box1 500 "background-color:rgb(255,0,0);"
1000 box1 3000 "left:1000px"
EVENTEND timeline1
</pre>
<div class="aco-presentation">
<div class="element-rw" id="box1"></div>
<div class="element2-rw" id="box2"></div>
</div>
Interpreting this script:
The starting box sizes were set from the CSS as 100px X 100px, coloured blue and red and set in the top left of its panel.
There is a two second delay set by the +2000 offset
Then in a half-second the box doubles it size to 200px. It then changes from blue to red in the next half-second.
Next it moves across the screen 1000px in three seconds.
Standard HTML comment syntax can be used anywhere to comment a script.
All EVENT COMMANDS can be used in standard Timeline scripts.
<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">EVENT timeline1 id=play click EVENTSTART timeline1 +1000 0 box1 1000 "height:200px;width:200px;" 1000 box1 1000 "left:550px;background-color:rgb(255,0,0);" 2000 box1 1000 "top:250px;background-color:rgb(0,0,255);" 3000 box1 1000 "left:0px;background-color:rgb(255,0,255);" 4000 box1 1000 "top:0px;background-color:rgb(255,255,0);" 5000 box1 500 "height:100px;width:100px;background-color:rgb(0,0,255);" +1000 0 box2 500 "height:200px;width:200px;top:250px" 500 box2 500 "top:0px;background-color:rgb(0,0,255);" 1000 box2 500 "left:550px;background-color:rgb(255,0,255);" 1500 box2 500 "top:250px;background-color:rgb(0,255,0);" 2000 box2 500 "left:0px;background-color:rgb(255,0,0);" 2500 box2 500 "top:350px;height:100px;width:100px;background-color:rgb(255,0,0);" EVENTEND timeline1 </pre> </div> <div class="title-bar-rw" title="Panel TitleBar"> <h2><a href="#">Timeline Example LIVE</a></h2> <p>After clicking on the Play button there is a one second delay then the animation starts. First the size of both boxes is doubled. Next both boxes traveling around the edges of the box with their color changing and return to their start position and size. The red box moves at twice the speed as the blue box.</p> </div> <div class="frame-rw" id="pan1f01" title="Panel Frame"> <div class="frame-body-rw" title="Panel FrameBody"> <button id="play">Play</button> <div class="element-rw" id="box1"> </div> <div class="element2-rw" id="box2"> </div> </div> </div>