Writing SMIL Web Designing

Explaining every element, attribute, and behavior within the SMIL 2.0specification is beyond however, what follows is a thorough introduction to the basic structures and components of SMIL.

Well-Formed Code
SMIL is an XML-based language, which means that all of its code needs to be "well formed" according to the rules of XML. When writing SMIL (or any XML application), follow these rules:

  • Tags are case-sensitive. For the most part, single-word elements and attributes are in all lowercase (e.g., <region>, <audio>, <switch>).Multiple-word elements and attributes use mixed case, also called camel case (e.g. systemLanguage, <priorityClass>, borderColor). It isimportant to stick to the capitalization structures in the specification.
  • All attribute values must be contained in double quotation marks.
  • All tags must be closed. For container tags, the closing tag must be present (e.g., <tagname>...</tagname>). Empty tags (stand aloneelements that don't have closing tags, such as <img> and <br> inHTML) are closed by the addition of a slash at the end of the tag (e.g., <emptytag />).
  • Nested elements must not overlap (e.g.,<switch> <par> </par> </switch>, not<switch> <par> </switch> </par>).

Document Structure
Like HTML documents, SMIL documents are made up of a head element and body element. The head element contains information about the document, including layout instructions (using the <layout>, <meta>, and <metadata> elements). The body of the document contains the actual media objectelements and timeline instructions regarding the sequence in which theyappear.

It is generally a good idea to begin with a DOCTYPE declaration. The skeletal structure for an SMIL 1.0 document is as follows:

<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN"><smil>
<head>
..layout and meta information goes here
</head>
<body>
...media elements and timing instructions go here
</body>
</smil>

The SMIL 2.0 DTD is broken into 11 separate module-specific DTDs, alongwith two driver DTDs that hold the modules together. The following DOCTYPE declaration for an SMIL 2.0 documents points to the basic language profile driver:

<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN">

Controlling Layout
The layout of a SMIL presentation is defined in the <layout> element, which always goes in the <head> of the document. Within <layout>, you canspecify the size of the main presentation window (<root-layout>) and establish any number of separate display regions (<region>) with in thatwindow. Here's an example:

<smil><head><layout><root-layout width="400" height="400" /><region id="video1" width="320" height="240" top="40" left="40"/><region id="caption" width="320" height="60" top="300" left="40"/></layout></head>

The layout of this SMIL example sets up a root layout that is 400 pixelssquare in which the presentation will be displayed. Within the root layout,there are two regions (one labeled video1, the other labeled caption) thatwill contain actual media elements. Figure shows the resulting presentation layout.

Figure: A simple SMIL presentation layout

A simple SMIL presentation layout

The SMIL 2.0 specification includes a multiple-window layout module which allows you to define multiple display spaces (called top level windows) instead of just a single root layout area. Similar to frames in HTML, it allows for media to remain in view in one window (such as a table of contents), while swapping out the contents of another. Each top level window (as defined by the <toplayout> element placed in the <layout> tag) can contain multiple regions.

Media Elements
There are seven basic media objects that can be placed in a SMILpresentation: audio, video, images, text, streaming text, animation, and ageneric media placement element for other media types. The followingsamples show the minimal code for adding media elements to the document:

<audio src="pathname/soundtrack.ra" /><video src="pathname/movie.mov" /><img src="pathname/illustration.gif" /><text src="pathname/caption.txt" /><textstream src="pathname/marquee.txt" /><animation src="pathname/animation.gif" /><ref src="pathname/special.rt" />

The audio, video, and img (image) objects are fairly self-explanatory; they should be produced appropriately for web delivery and saved in an appropriate file format. Text adds a static text block to the page, while textstream scrolls the text like a marquee. The animation element can be used for animated GIFs for more information on creating them) or animated vector graphics.

TIP
The SMIL 2.0 specification includes a complex animation module for adding motion and change over time to vector graphics and even HTML elements. The animation module of the specification defines the syntax and behavior of the <animate> element, which should not be confused with the basic <animation> media object mentioned previously.

The ref element is a generic placeholder tag for referring to any other type of media. For instance, RealNetworks uses the ref element to add its proprietary RealPix documents (a markup language for defining the presentation and behavior of streaming images) to a SMIL file, as shown in this example:

<ref src="rtsp://realserver.company.com/pix/ads.rp"/>

Putting an element in its place
To place a media object in a particular region (as defined in the <layout> of the document), simply call the region by name within the media element tag using the region attribute as shown in this example:

Timing the Presentation
The SMIL specification provides a number of methods for controlling thetiming and synchronization of the presentation. Each presentation isconsidered to have a timeline along which the playback of various media is referenced.

Time containers
Media elements are placed in special time container elements (<par>,<seq>, and <excl>) that define how the media should be played. The <par> element (short for "parallel") defines a group of elements that play at the same time. The <seq> element defines a sequence of elements that play one after another, in the order in which they appear in the SMIL document.

When media elements are placed in the <excl> time container (short for"exclusive"), only one of those media elements can play at any given time.

Time control attributes
SMIL defines a number of attributes for indicating the specific timing of media elements and groups of elements (defined by time containers).

<par dur="15s"><audio src="audio_file.mp3" begin="0s" id="audio_1" /><seq><img src="image_1.jpg" begin="0s" /> <img src="image_2.jpg" begin="5s" /><img src="image_3.jpg" begin="10s" /></seq></par>

The dur attribute of in the <par> element specifies that the display of theelements in that group will have a duration of 15 seconds. The dur (duration) attribute can also be applied to specific media element tags. Some media, like audio and video, have implicit durations. Others, like text and images, require you to specify a duration. If you want an image to stay onthroughout the presentation, set the value of dur to indefinite.

The media elements (<audio> and <img>) contain the begin attribute, which specifies at what point in the timeline the display or playback should begin. There is also an end attribute (not shown) for specifying the end time of the media element.

It is helpful to sketch out the intended timeline for a presentation to help plan the timing elements. The simple timeline for our narrated slideshow is illustrated in Figure.

Figure: The timeline for our simple SMIL slideshow example

The timeline for our simple SMIL slideshow example

Relative timing
There are several ways to control the beginning and end of the playback of a media element. In our example, all time measurements are relative to the beginning of the timeline. Timing may also be based on the begin or endpoint of another media element (for example, the second image could havebeen specified to begin playing five seconds after the audio begins asfollows:

<img src="image_2.jpg" begin="audio_1.begin+5s" />

In addition, you can base playback on user input using event namescommonly used in HTML and CSS, such as click, dblclick, onMouseOver, andso on. In the following example, a video stops playing when a user clicks onan image of a "Stop" button:

<par><img src="stop.gif" dur="indefinite" id="stop_button" /><video src="myvideo.rm" dur="1min" end="stop_button.click" /></par>

Controlling Content Display
The <switch> element allows an author to list a number of media options, of which only the first acceptable option gets played; the remaining options are ignored. A media element is deemed "acceptable" when it passes specified test criteria. An example will make this clear.

In the following code, the player will play one of the listed audio files based on the user's connection speed (bit rate) to the Internet. The systemBitrate attribute performs a test of the user's connection speed, measured in bits per second. If the bit rate of the user's connection matches thesystemBitrate value, it plays that media element. If not, it goes on to the next one until it finds one that matches the specified speed. Only one media in a <switch> element can be played.

Because the player uses the first media element in the list that passes the test criteria, you should list the options from most desirable to least desirable.

In the SMIL 1.0 specification, test criteria were hyphenated (e.g., system-bitrate and system-screen-size). This was deprecated by the SMIL 2.0specification in favor of camel case attributes to be consistent with otherdeveloping standards. The following is a list of the predefined test attributes defined in SMIL 2.0.

systemAudioDesc=on|off
New in SMIL 2.0. Specifies whether or not closed audio descriptions should be played. Closed audio aids sight-impaired users to understand videocontent the same way closed captioning supplements audio for the hearing impaired.

systemBitrate=number (bits per second)
Sets a target bit rate at which the media may be displayed.

systemCaptions=on|off
Specifies whether a text caption appears in conjunction with an audio file.

systemComponent=text
New in SMIL 2.0. Tests for the various components of the SMIL player, for example, whether it supports JavaScript.

systemCPU=cpu-code
New in SMIL 2.0. Tests for the type of CPU on the user's machine (for example, X86 or PPC).

systemLanguage=two-letter language code
Tests the user's language preference so the proper language file can be served.

systemOperatingSystem=defined operating system abbreviation
New in SMIL 2.0. Tests for the user's operating system. Example valuesinclude win9x, winnt, macos, beos, linux, unixware, etc.

systemOverdubOrSubtitle=overdub|subtitle
Specifies whether overdub or subtitles are rendered. The SMIL 1.0 version,system-overdub-or-captions, has been deprecated.

systemRequired=xml namespace prefix
Compares the name of the XML namespace to those that are supported by the SMIL player.

systemScreenDepth=number (monitor color bit depth)
Tests the number of colors the user's monitor is capable of displaying. Typical values are 1, 4, 8, 16, 24, and 32.

systemScreenSize=heightXwidth
Tests the size of the user's screen so customized content can be displayed to fit the available space. Typical values are 640X480, 800X600, and1024X768.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Web Designing Topics