Make your own free website on Tripod.com

SMIL

Web > Essays > SMIL

Have you ever heard of SMIL? Most people haven't. SMIL is a new W3C specification for codeless, integrated animation. The SMIL code is a lot like HTML, resides directly on the page, and gives the page behaviors similar to DHTML, except you don't need to be a programmer to use it. Take this for instance, a SMIL animation to emulate the <blink> element:

Watch me blink!

This simple animation was accomplished with the following SMIL code:

<smil:seq begin="0" repeatCount="indefinite" begin="start.click" end="stop.click">
	<smil:animate targetElement="bob" attributeName="visibility" values="hidden;visible" begin="0s" dur="1s" />
</smil:seq>

In DHTML, your code would look something like this:

<script type="text/javascript" language="JavaScript">
<!--
	function blink() {
		if (document.getElementById("bob")) {
			if (document.getElementById("bob").style.visibility == "visible") {
				document.getElementById("bob".style.visibility = "hidden"; 
			}
			else {document.getElementById("bob").style.visibility = "visible";}; 
		}
		else if (document.all) {
			if (document.bob.style.visibility == "visible") {
				document.bob.style.visibility = "hidden"; 
			}
			else {document.bob.style.visibility = "visible"; }
		}
		else if (document.ids) {
			if (document.ids.bob.visibility == "visible") {
				document.ids.bob.visibility = "hidden"; 
			}
			else {document.ids.bob.visibility = "visible";}
		}; 
	}; 
	function startblink() {
		var interval = setInterval("blink", 1000); 
	}
	function stopblink() {
		clearInterval(interval); 
	}
	if (document.getElementById("bob") {
		document.getElementById("start").onclick = startblink; 
		document.getElementById("stop").onclick = stopblink; 
	}
	else if (document.all) {
		document.start.onclick = startblink; 
		document.stop.onclick = stopblink; 
	}
	else if (document.ids) {
		document.ids.start.onclick = startblink; 
		document.ids.stop.onclick = stopblink; 
	}; 
-->
</script>

It's easy to see which one I'd rather use! The only issue with SMIL is that it has very poor browser support right now (as some of you may have noticed with my blinking example). However, it will make for an excellent alternative to Flash and DHTML in the future, because it is simple, lightweight and powerful. SMIL is the way of the future! If you want to start on SMIL, I recommend Webmonkey; they have an excellent SMIL Tutorial.