SMIL Tutorial

[welcomewiki]

Timing is about when to begin and when to stop.
Timelines and Timing

Most SMIL element have timing attributes to define the timeline of the presentation.


Timing attributes defines the start time and the duration of an element.
The following table lists the possible time formats:


Format Examples hh:mm:ss.f 1:50:00 (One hour and fifty minutes)
10:50 (Ten minutes and fifty seconds)
10.5 (Ten and a half second) number
[h|min|s|ms] 3.5h (Three and a half hour)
3.5min (Three and a half minute)
3.5sec (Three and a half second)
35ms (Thirty-five milliseconds) wallclock
(YYY-MM-DDThh:mm:ss+zone) wallclock(2003-08-01T12:10:30+1.00)
(Ten minutes and thirty seconds past twelve, August the first 2003, coordinated universal time plus one hour) The value "indefinite" can also be used to define never ending loops.
Duration

The duration (dur="5s") attribute of an element defines how long the element will be visible:


Example












When To Begin?

The begin (begin="2s") defines when the element will be visible (start playing):
Example

[welcomewiki]

seq - the most common SMIL element - defines a sequence.
The Sequence Element

The seq element defines a sequence. The children elements of the seq element are displayed in a sequence, one after each other.


Use the tag to define a list of images to be displayed, a list of paragraphs, a list or videos, or any other elements.


The seq element can have a number of attributes. The most common attributes are:


Attribute Value Description begin time Sets the delay before the element is displayed dur time Sets the duration for the display repeatCount number Sets the number of repetitions for the display

Displaying a Sequence of Images

Example

















Displaying a Sequence of Text

Example

I will display for one second

I will display for two seconds

I will display for three seconds

[welcomewiki]

Objects inside a par element will be played at the same time (in parallel).


The Parallel Element

The par element can have a number of attributes. The most common attributes are:


Attribute Value Description begin time Sets the delay before the element is displayed dur time Sets the duration for the display endsync "first"|"last"|id(clip) Synchronizes the stopping of elements repeatCount number Sets the number of repetitions for the display

Synchronization

A parallel group of clips can be stopped at the same time using the endsync attribute in the tag.
endsync="first" stops all the clips in the group when the shortest clip are finished regardless of any time parameters set for the other clips.
endsync="last" concludes the group when all clips have finished playing. This is the default.
endsync="id(ID)" concludes the group when the clip with the identified (ID) clip are finished. The ID is referring to the value of the clips id attribute.
Displaying Objects in Parallel

Example

I will display for one second

I will display for two seconds

[welcomewiki]

Transitions can generate effects like "fading" and "wiping" to elements.

Transitions in SMIL 2.0

Transitions are new in SMIL 2.0. Transitions are not a part of the SMIL 1.0 specification.


IE 6 support transitions based on the SMIL 2.0 specification.
Transitions are implemented with the element transitionfilter.


Attributes

The tag can have several attributes. The most common are:


Attribute Description Example type Defines the type of transition filter (see transition filter list) type="clockWipe" begin Defines when the transition should begin begin="0s" mode Defines the transition mode mode="in" from Defines the starting value of the transition from="0.2" to Defines the ending value of the transition to="0.8"


Transition Filters

The following transition filters can be used:
fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe, pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe


Displaying Transitions

In the example below the image will be displayed for 4 seconds. The transition filter will use 2 second to "clockWipe" the image into its place.


Example








begin="keyb.begin" dur="2s" />

width="128" height="107" />

[welcomewiki]

SMIL uses media elements to describe content.
Media Elements

The following media elements can be used to include media objects in a SMIL document:


Element Description Ver Defines an animation 1