SMIL code can be written by using a text-editor. An XML editor or better
SMIL editor will save you some time and effort.
The files must be run in an SMIL
player. We are testing in
Ambulant
player.It is also execute in realone player
A D V E R T I S E M E N T
This first example "Looping Zebra" will end up looking like a simple gif
animation except we use the SMIL language and jpg-files. It is a looping
sequence of zebra images where we learn a little bit about timing.
Just as we are used to in HTML, SMIL have <head> and <body> tags . It should be
no surprise that the head contains mostly meta-information and that the body
contains media content and timing. Lay-out is placed in the head.
Let's start with <layout></layout>. It must be placed between the <head> and
</head> tags, and it is recommended that you always use it unless you want to be
surprised by how the different implementations deal with it. You will also
usually use the <topLayout> tag which describe properties of the window for
your presentation. topLayout goes inside layout. topLayout has some familiar
attribute like height,width and backgroundColor. You also have the open and
close attributes for describing when the window shall open or close.
In synchronized multimedia timing is an important element . SMIL 2.0 defines
three types of time containers: par, seq and excl. par is for parallel timing and seq is
for sequential timing. excl is a mix of the two former a mix of the two former
tags, and was introduced with SMIL 2.0 because it was needed. Attributes for the
time tags are begin, end, dur(ation) etc.
Media object most important attribute is src. Just as in html this is an [URI]
so you can either use filename or an URL. Time to look at the body in our
example. seq has the attribute repeatCount set to indefinite, so it will loop.
The image files have the well-known alt attribute and I've used the dur
attribute to time each images duration. Since we use seq they will be played
sequentially. The first image will start, and play for 2 seconds as its dur is
set to "2s". Then the next image will start.
