This is some basic documentation for the code I wrote for running animated presentations using JavaScript in a browser. The code is on my machine in WorkData/presentation, and will be in a similar location on Rutabaga.
1. ABOUT THIS PROJECT
This is my codebase for creating an animated presentation that runs in a browser. It was first developed for the Colonial Despatches launch in June 2010, and the materials for that launch serve as the demo application for developing the codebase.
2. HOW TO CREATE AN AUTO-TIMED PRESENTATION
2.1 The header and footer
The index.htm file contains all the content used in the presentation, and it is a standard XHTML 1.1 file.
The header and footer of the presentation are encoded as divs at the beginning and end of the body, like this:
<div class="header">
<img src="images/bg_green_gradient_2.png" alt="gradient"/>
<h2>The Colonial Despatches</h2>
</div>
<div class="footer">
<img src="images/bg_green_gradient_2.png" alt="gradient"/>
<h4>http://bcgenesis.uvic.ca</h4>
</div>
The header and footer classes are defined as static in the CSS. Tweak the CSS or override it in a style attribute to change the appearance and behaviour of the header and footer.
2.2 The animated elements
Each independent element (a picture, a line of text, etc.) in the presentation is encoded as a div in the following way:
<div id="slide_stats_vessels" class="hcmcSlide" title="1,3,4950,-1" style="top: 60%; left: 50%; width: 45%;">
<p>Over 1,000 vessel names have been tagged.</p>
</div>
- Each slide should have a unique id.
- Each slide should have a class of startSlide (the first slide, which is usually empty) or hcmcSlide (normal slides).
- Each slide has a style attribute which defines its position and appearance. For instance, style="top: 25%; left: 5%; width: 40%;" will place this element (when it is displayed) so that it's positioned 5% from the left, and is 40% of the browser window width. These settings should always be in percentages or ems, so that they're scalable.
- Each slide has a title attribute which defines how it behaves, like this:
title="1,-1,8000,3000"
The four components are as follows:
- Id of transition effect used to show the slide.
- Id of transition effect used to hide the slide.
- Length of time (in ms) to display the slide, before starting to hide it.
- Length of time (in ms) before triggering the display of the following slide.
These are the constant values for the first two items (from the JavaScript file):
var SHOW_FADE_IN = -1; //default value.
var SHOW_UNROLL = 0;
var SHOW_FROM_TOP = 1;
var SHOW_FROM_RIGHT = 2;
var SHOW_FROM_BOTTOM = 3;
var SHOW_FROM_LEFT = 4;
var HIDE_FADE_OUT = -1; //default value.
var HIDE_SHRIVEL = 0;
var HIDE_TO_TOP = 1;
var HIDE_TO_RIGHT = 2;
var HIDE_TO_BOTTOM = 3;
var HIDE_TO_LEFT = 4;
2.3 Timing slides
Each "slide" is not actually a slide in the sense of a PowerPoint slide; it's an individual element that may be part of a composition of several elements. At any given time, several elements will normally be displayed, so timing has to be carefully managed. For instance, if you want to display a header/title, and then reveal a series of items below it, you'll have to remember to set the display time for the header so that it's long enough so that it stays on the screen while all the elements below are slowly being revealed.
2.4 Sizing and positioning
It's impossible to predict the parameters of the eventual display device, so it's a good idea to size and position everything in percentages, and then set the font size in the browser for optimal display. Images can be sized by width only in percentages, and the browser will handle the scaling correctly.
2.5 Handy tools for developing
There are two URL parameter switches you can use to help develop a large presentation:
- startFrom=30
This means "start the presentation from the 30th slide"¸ so you don't need to see all the previous ones before checking that the one you're working on is OK.
- timeDivider=2
This means "divide all timing values by 2", which will of course make the presentation run twice as fast. That's handy if you want to run through the presentation quickly to test it, or more slowly because the audience are slow readers.