Scriptio: It’s Flash without Flash!

Tweet

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:

: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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.waterfallweb.net/ RockyShark

    This looks pretty interesting. Often when we use flash it’s for simple stuff like your example above anyway, so this could be pretty useful.

    Cheers!

  • delb

    Looks pretty shotty to me. I would much rather spend an additional hours to make a classy looking presentation.

  • http://icant.co.uk codepoet

    I agree that it is technically pretty nifty but I really don’t see this taking off.

    The target market is not really thought of. People who create presentations tend to prefer an application with a proper IDE to generate them. I don’t see a Project Manager sitting down and scripting or even altering presentation in this format.

    It is a bit like generating a movie from a transcript.

  • http://www.peterbailey.net beetle

    I agree with code poet. It’s very nifty. But, outisde of a “proof of concept” or just tinkering-about, I don’t see it gaining traction anywhere.

    The author certainly deserves a pat on the back for not only what seems to be a solid implementation, but a fairly unique idea.

  • Susan

    I agree that I would use Flash or Director.

    BUT

    About two years ago, I was working freelance and did not have the $$$ to buy Flash. This would have been a nice tool to demonstrate my skills.

    My other thought is marrying it with PHP to create dynamic scripts. BUT I’d have to play with it more.

  • http://www.cladinblack.com skinjester

    despite a love/hate relationship with Flash, for purely presentational purposes, a significant feature is vector based text + antialiasing. Marketing & actual consumers like to see scaling text with smooth smooth edges. I’m pretty sure I don’t see the value of the Quicktime style movie controller. I’m guessing there’s a way to turn it off?

  • whol019

    This is excellent. I like it very much.

    What about the idea of a web interface for creating scripto script.
    Something like the TimeLine Editor

    From scripto’s reference page, it seems not a small task but should be doable from my point of view.

    Anyway, if in the near future, no one have done it, I will try make one.

  • mclark

    As the Scriptio author, thanks to Mr. Yank’s posting and the constructive comments by others.

    The Scriptio language closely models one used by Data Description for their educational products on desktop applications. They are able to train employees and high school interns how to use the scripting language usually in a matter of hours. They have found the development time (and therefore cost) less than alternatives.

    I did consider trying to write a scalable version, but without a graphical editor for script development then using floating-point locations would be difficult and non-intuitive.

    Matthew Clark

  • blonkm

    I think most people arguing about presentations are missing the point here. This tool is very useful in websites where either
    1) you don’t want the weight of a flash presentation
    2) you don’t want to rely on the flash player being available
    3) you want flexibility and an easily modifyable script
    4) you want to generate the script from PHP

    There’s lots of possible uses for this tool, just probably not for presentations. For presentations I’d still use PowerPoint!

    Well done Matthew!

  • John Dowdell

    you don’t want the weight of a flash presentation

    What weight is that? For comparable media, SWF will usually be smaller and require fewer HTTP connections than an HTML/JS/CSS approach.

    (Tip: For simple animations, some runtime blurring can really help smooth things out, across a range of machines.)

    jd/adobe

  • IceBrain

    You always have Ming, which can make a full scripted flash presentation, so the third and forth point actually don’t apply.

  • dilly

    I like Scriptio from a usability point of view – and also because I have a 64-bit machine and haven’t got around to emulating 32-bit firefox on it – so I can’t see any Flash content anyway!

    One problem – the fade-in doesn’t show up on Konqueror – any tips please?