Stage / Timeline / Range Slider Control Built with Script.aculo.us

Just click the button to generate a timeline with 30 seconds and 5 resources. Or, enter your own values. After that, you can drag the green and red handles to specify the range. Unless you're a police officer from Hollywood, then green means go, and red means stop.

Number of Seconds
Number of Resources


Explanation

This is a timeline and stage editor built using Script.aculo.us and Gerd Hanselmann's slider modification. I was amazed at how simple it was to make this after a couple of false starts with other approaches. I have not had to look at the Script.aculo.us codebase at all, which is a testament to how well abstracted it is.

The goal of this will be to allow authors to attach resources to a timeline and specify how long each resource should be displayed in the playback of the sequence. This is similar to Macromedia Captivat's timeline editor and Producer for PowerPoint 2003's stage editor.

Here is a picture of the the Macromedia Captivate Timeline Editor looks like:

This is what MS Producer for PowerPoint 2003 looks like in design mode:

I actually like this better. It is strictly for making presentations, unlike Captivate. So, each image resource is on one timeline. The audio is on a separate line and the static HTML on another.

But, most of all, I like Google Calendar (www.kiko.com has a similar interface). I downloaded my Google Calendar page then modified some of the column and row titles by hand. The result is that the Google Calendar interface, which is very slick, can be repurposed to build a timeline sequencer on par with Producer for PowerPoint, in a vertical orientation.

Finally, here is a screenshot of the finished product from Producer for PowerPoint rendered as HTML:

For some reason, I can't get the project to load properly in IE, so here is the link to the direct download of the ZIP file for the output:
Big Brothers and Big Sisters of Atlanta 2003-2004.
That zip file has the combined audio, video, MP3, and static HTML narative. If you just want to see the static HTML and images version of the project, click here:
Big Brothers and Big Sisters of Atlanta 2003-2004 Image/HTML Only.

Here is a prototype of an editing surface made with the dojo Ajax toolkit. I think this may be the way to go.
Timeline Sequencer prototype with Dojo Toolkit.

Hopefully I can get time to make this timeline behave like Google Calendar so that it has a nicer look and feel and make it so that the time span is configurable to a greater degree than simply seconds, and make it display actual minutes and seconds instead of just seconds if you try more than 60 seconds in the timeline. It will also be nice to get some realtime feedback in there while the sliders are moved. Perhaps a panel overlaid between the two handles to show the time span value.
After that the goal will be to generate a sequenced media playback script, or make it capable of exporting to different formats. The main advantage of this would be that the timeline and sequences can be created online with no special software so disparate authors can work together to create a presentation with simple browser-based software and links to resources.

All the code is inline to this page except for the Script.aculo,us libraries which are linked.