McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. SMIL Ellen Pearlman Eileen Mullin Programming the Web Using XML

12-2 Learning Objectives 1.Investigating SMIL in terms of both multimedia and XML development Interpreting the critical differences between SMIL 1.0 and SMIL 2.0 and the correct ways to view them 2.Assembling the components of a basic SMIL statement 3.Linking multimedia within a SMIL presentation

12-3 An Introduction to SMIL SMIL (Synchronized Multimedia Integration Language, pronounced “smile”) lets one write interactive audiovisual presentations under the umbrella of XML-enabled standards of the W3C. SMIL was developed partially to work around the issues of bandwidth limitations and partially it was developed to stitch together sound, text, video, and images in a simple format.

12-4 An Introduction to SMIL (2) Another forward-looking feature of SMIL is that it can be created and subsequently stored in a different language, bandwidth rate, sound format, and other versions. SMIL does not require a complex programming language like Java, though it can incorporate Java servlets or CGI scripts to access information stored in a database.

12-5 A RealOne Player SMIL Presentation on the Getty Museum

12-6 A Brief History of SMIL: SMIL 1.0 The first SMIL recommendation came out from the W3C in June It focused around issues such as how media was delivered over time with tags like for sequence (one unit played after another) and for parallel (units playing together). Interestingly enough, Real Networks was an early supporter of SMIL but Microsoft was not, and wanted to incorporate SMIL into standard HTML.

12-7 A Brief History of SMIL: SMIL 2.0 The second version of SMIL was endorsed by W3C in August 2001, though work on it started as early as It was written to expand the capabilities of version 1.0. Instead of just one DTD, it now contained 10. These DTDs function as “modules”, part of the official specification and contain many more new elements and attributes.

12-8 Modules in SMIL 2.0 The modules are: –Animation –Content Control –Layout –Linking –Media Objects –Metainformation –Structure –Timing and Synchronization –Time manipulations –Transition Effects

12-9 XML Spy Fails to Locate the SMIL 2.0 DTD

12-10 Viewing SMIL The best way to actually see a SMIL file, especially a SMIL 2.0 file in action is by using the RealPlayer from Real Networks. Apple Computer has the QuickTime multimedia player that can be used on both Macs and PCs. Internet Explorer also can use SMIL though its HTML+TIME (Timed Interactive Multimedia Extensions for HTML) SMIL-like language, which was first introduced in IE 5.

12-11 Basic SMIL: Core Elements The three core SMIL elements are: – opens and closes the actual statement and is the root element. – is always contained within the root element. The header defines the structure of the presentation. –The element defines the content and timing and if appropriate, linking information.

12-12 Media Elements The media elements allowed in SMIL include: – - Animation (.swf,.anim) – - Audio (.rm,.wav,.mp3,.aiff) – - Image (.jpg,.gif,.png) – - Reference, points to anything not covered in the list (i.e..rp) – - Text (.txt,.html) – - Streaming text (.rt,.mov) – - Video (.rm,.mpg,.mov)

12-13 SMIL Syntax for Media Elements

12-14 SMIL Components Overview

12-15 Anatomy of SMIL Code <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "

12-16 Module Module Though contained within the section of a SMIL document, layout elements and attributes give a name to, and define the position of windows and regions for media presentation. The module is not essential in a SMIL presentation, but if it is not included the location of visual elements fall into the default position of the viewer upon which they are being presented through.

12-17 Module (2) Module (2) states a group of regions where media elements are displayed through their position, size and scale. This is done through the attribute. A basic syntax for the element would look as follows:

12-18 Root Layout and Regions

12-19 Code for Root Layout and Regions <root-layout backgroundColor="blue" height="180" width="180"/> <region id="Region1" left="41" top="40" height="100" width="100" z-index="1" backgroundColor="yellow"/> <region id="Region2" left="0" top="0" height="180" width="180" z-index="0" backgroundColor="red"/>

12-20 Simple Validator

12-21 Element Element The element indicates what media elements to present as well as what regions they should be presented in, and also what the timeline should be for the different aspects. Events that show up one after the other, or in sequence, use the and tags. Parallel, or concurrent presentations use the and tags.

12-22 Element Element Different elements can be presented to different viewers with. The attributes under it are color depth, language, maximum data rate and language.

12-23 Linking Module Within a SMIL presentation it is usual and customary to link to other SMIL or non-SMIL objects or plug-ins. This also means different servers can be accessed simultaneously, both locally and externally. Links are uni-directional, which means they are enabled to work in only one direction, target to source. Also SMIL elements try to conform to the same language as Xlink with some differences depending on the type of media, as well as XHTML.

12-24 Linking Linking The element, part of the SMIL 2.0 linking module, and also a part of SMIL 1.0 is the basis for hyperlinking in SMIL. It ties together a link with any kind of media enabled visual object. These links, which must at least have the href attribute (similar to HTML’s href statement) and can link to either other SMIL internal and external presentations, Web pages, XML documents.

12-25 Elements Elements In SMIL 1.0 defined just a part of a media object’s display area to activate. In SMIL 2.0 this was expanded to include. Area in SMIL 2.0 is most useful in defining just a part or section of the presentation, something could not do. <area id="NumberOneToday" shape=rect" cords="0,0, 200, 250" href="HitMovie.html"/>

12-26 The End