A First SMIL Document
In this section, you will see a short SMIL document to introduce you to the type of code you need to create to produce a basic SMIL document. Let's look at a suitable SMIL viewer, which is available as a free download.
Note
In the examples in this chapter, all the multimedia files used will be SVG images because they can be created as short, self-contained files that are useful to illustrate principles of how to use SMIL. Of course, many other multimedia objects—such as video, audio, or images can also be used.
The X-Smiles Browser
Throughout this chapter, we will use the X-Smiles XML browser to contain the SMIL documents that we create. The X-Smiles browser can be downloaded free from http://www.x-smiles.org/.
Caution
If you try to access the X-Smiles.org Web site from a corporate location, you might find that access is blocked. There is an unrelated adult site, with a URL that is similar, that might be blocked by the administrator at your organization. You might need to explain that x-smiles.org is a legitimate XML browser developer site.
X-Smiles is, at the time of writing, only at version 0.5 and therefore is very much a tool in the process of development. However, it is already capable of displaying several XML presentation technologies, including SMIL. Because the X-Smiles browser is under ongoing development, it is likely that its capabilities or speed will have improved by the time you read this. Version 0.5 can be slow.
In addition to the X-Smiles browser executable that can be downloaded, there is also an extensive set of demo code, including SMIL code listings. If you have a dial-up connection to the Internet, you will find it more practical to download the zip files of demo code and run code from your own hard drive—some of the SMIL files and their associated images are very slow to download interactively on a dial-up connection.
A Brief SMIL Listing
Listing 24.1 is a brief SMIL listing that will create a pale green background. Displayed against that background is a simple Scalable Vector Graphics (SVG) file—a red triangle on a white background—and a short text message.
Listing 24.1. A Short SMIL Document That Displays an SVG Image and a Short Text Message (FirstSMIL.smil)
Note
Be sure to read http://www.x-smiles.org/xsmiles_faq.html if you are having problems running the X-Smiles browser. For example, some users using J2SE 1.4 have problems running X-Smiles 0.5.
All SMIL documents have a smil element as the document element. The smil element must be written in all lowercase characters because SMIL, like other XML languages, is case sensitive. Within the smil element, the head element contains meta information—such as the document title and authorship, together with layout information—and a body element that contains timing elements such as the par element, which you can see in the example listing.
Figure 24.1 shows the visual appearance produced in version 0.5 of the X-Smiles browser.
Figure 24.1. The positioning of the triangle and the text shown in the X-Smiles browser correspond to the layout elements in the head of the SMIL code.
If you look at the figure and the content of the layout element, you should be able to work out the basics of what is being rendered on screen.
<layout>
<root-layout title="First SMIL Demo" id="SMIL Demo"
width="800" height="600" background-color="#CCFFCC"/>
<region title="image1" height="100" id="image1"
top="50" z-index="1" width="100" left="25%"/>
<region title="image2" height="100" id="image2"
top="176" z-index="1" width="160" left="25%"/>
</layout>
The layout element is a child of the head element. It has, as a nested element, a root-layout element that defines the dimensions of the screen area on which the SMIL presentation is to be presented. Within that overall area, further areas for specific uses are defined within region elements.