Electric Type

Multimedia

About Us

News

Help

SMIL 2.0: Codeless Animation in HTML
by Rodney Reid 14 June 2001

Rodney Reid is a software engineer at Wired Digital. He lives in perpetual threat of expiration at the hands of his towering, topple-tempting stack of glitch-techno CDs. He also runs Toxicorp.

Page 1

Right now, when it comes to creating animation for the Web, Flash is king — people sic it on everything from rollover buttons to entire site interfaces. But will it reign supreme forever? Web developers are a fickle bunch, and Flash could always be dethroned by another multimedia technology as long as it was easy to use, could be viewed all users, and employed by a familiar programming language (thus ensuring speedy development and a friendly learning curve).

Enter the Synchronized Multimedia Interface Language, or SMIL. While the current version, SMIL 2.0, only works on IE5.5 or higher, it's poised to be the next big thing in animation for the Web. SMIL already makes it simple to create both basic and complex animations — it's a markup language that shares much in common with HTML and XML, so it's a quick learn for those who don't have the time or resources to develop extensive programming skills. Also, it runs animations and multimedia presentations right inside your HTML page, so there's no plug-in required. And since SMIL 2.0 became a proposed W3C standard recommendation on June 9, 2001, we should soon start seeing support for it in future versions of Netscape and Opera.

With all of that in mind, there's no doubt that learning the basic applications of SMIL will prove to be a useful (not to mention downright cool) investment for the future. Here are just a few reasons why:

  • SMIL is faster and easier than JavaScript/dHTML when it comes to programming animation and mouse events.
  • It will soon be adopted as a universal Web standard.
  • It's easy to use and learn.
  • SMIL is already supported in IE 5.5, RealPlayer, Windows Media Player, and Adobe's SVG plug-in.
  • SMIL will run even if users have JavaScript turned off in their browsers.
  • You can perform complex actions that JavaScript/dHTML can't handle.
  • SMIL animations are faster than Flash animations for some projects — provided you know your audience.

So, while tricks like mouseover effects, animations, or dynamic page elements once meant learning Flash or JavaScript, now, with a combination of HTML and SMIL, you can do it all without any script coding whatsoever.

SMIL handles all of the standard JavaScript events (onmouseover, onclick, etc.). It also creates starting and ending times for an animation, it defines a timeline for how long animations should run, and it maps paths for complex events, such as moving an object along an oval, zigzag, or loop-dee-loop path. The best part is that it can be "synchronized" — SMIL an be used to synch up audio or video elements on your page. Run a sound clip, then a QuickTime movie, then a JPEG slide show, all at different times.

Before we get started, there are some things you should know, and some reading you might want to peruse:

  • At least take a look at the full spec of the W3C working draft for SMIL 2.0.
  • Microsoft calls the HTML+SMIL support in Explorer 5.5 "HTML+TIME", but I can see little difference between how HTML+SMIL and Microsoft's version should be implemented in the specification. Whatever it's called, however, you should familiarize yourself with the general concepts.
  • The current release of IE 5.5 supports the synchronization and timing module, animation, media object, and SMIL Integration module portions of the specification -- take a look.

OK, got all that? Then crack those knuckles and let's get moving.

next page»


Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.