JavaScript
Article
By Kevin Yank

Scriptio: It’s Flash without Flash!

By Kevin Yank
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Okay, when the author contacted me to suggest an addition to my roundup of top JavaScript libraries, I’ll admit I was skeptical. But after a brief play, I must say: Scripto is very cool.

Scriptio is a cross-browser framework for building simple presentations made up of animated text, shapes and images, much like the sort of things Flash was used for back when it was “just” an animation tool. With the Scriptio JavaScript library loaded, you can display an animation with one line of code:

new Scriptio({script:'demo.txt', width:500, height:120});

Scriptio will then read the animation script you specify (demo.txt in this case). This text file contains a series of instructions that describe the animation that will be displayed. Here’s a simple example:

--ADVERTISEMENT--

:picture "slide1.jpg" at {0,0} size {500,120} label "slide1"
:display "EXPLORE" transparency 20 face "Tahoma, Century Gothic, Arial, Helvetica, sans-serif" size 40 color yellow at {-150,50} label "explore"
:slide "explore" to {500,Top("explore")} duration 5
+1
:picture "slide2.jpg" at {0,0} size {500,120} fade 1 label "slide2"
:layer "explore"
+2
:clear "slide1"

This code displays an image, then slides the word “EXPLORE” (with 20% transparency) horizonally across the display for five seconds. At the one-second mark, it begins a one-second fade-in of a new picture, and makes sure the “explore” text is layered over top of the new image as well. At the two-second mark, because the new image has finished fading in, it clears the first image.

Scriptio sample movie

By default, the animation displays with a media-player-like timeline at the bottom, permitting the user to play, pause, and jump to another part of the animation at will. Though performance appears to suffer a little when jumping to an arbitrary point of a complex animation, the results are generally quite slick. You’d never guess it was all being rendered in pure HTML and CSS!

The only feature that requires a plug-in of any kind is audio soundtrack support. At present, the script uses a hidden QuickTime video, Flash movie or Java applet to play soundtracks in WAV, AU and Ogg Vorbis formats.

Though the basics are solid, Scriptio is still quite new–the project was publicly launched in January and version 0.1 was just released on February 6th. Nevertheless, Scripto claims support for all major browsers (including Opera 8.0). The library is licensed under GPL for free, but a commercial license is also available if required.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?