WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Realtext and SMIL Part 2

Realtext and SMIL
Part 2

by Scott Clark
First published: June, 1998

The rest of the SMIL Wizard simply asks you to fill in the author's name, email address, the title of the presentation, etc. Once you are done, you can view the SMIL source, play your presentation, or call it quits at this point. If you quit now, though, you still will not have a viewable presentation. Below is how the presentation looks in the G2 Player at this stage (See Figure 2).


SMIL Presentation Wizard's Classified Template
Figure 2. The SMIL Wizard's original SMIL presentation.

Below is the code from the above SMIL file (lines may be truncated so they will fit in the browser window):

 <smil> <head> <meta name="title" content="WD Real Text Demo" /> <meta name="author" content="scott@internet.com" /> <meta name="copyright" content="©1998" /> <layout type="text/smil-basic-layout"> <region id="TextChannel1" title="TextChannel1"
left="0" top="0" height="240" width="240"
background-color="#888888" fit="hidden"/> <region id="ImageChannel1" title="ImageChannel1" left="240" top="0" height="240" width="240"
background-color="#888888" fit="hidden"/> </layout> </head> <body> <par title="multiplexor"> <text src="file:///C:\WDSite\categories\advhtml\marquee.rt" id="Text" region="TextChannel1" title="Text"/>
<img src="file:///C:\Real\feedit.rp" id="Image
Stream" region="ImageChannel1" title="Image Stream"/>
<audio src="file:///C:\Real\davidslicks\guitar3.rm"
id="Soundtrack" title="Soundtrack"/> </par> </body> </smil>

Of course the next question is "what do we change to get it to display like we intend?" The part we need to focus on is the "layout" section:

 <layout type="text/smil-basic-layout"> <region id="TextChannel1" title="TextChannel1"
left="0" top="0" height="240" width="240"
background-color="#888888" fit="hidden"/> <region id="ImageChannel1" title="ImageChannel1" left="240" top="0" height="240" width="240"
background-color="#888888" fit="hidden"/> </layout>

First we have to make sure that the height and width listed in the layout area is indeed the actual height and width specified in the RealText file. In our case, it is not, so we'll need to change those to reflect the actual size, 20 pixels high and 240 pixels wide. The left position is correct--we want it to start at the left edge of the display window. The top position, however, needs to begin 220 pixels from the top, so that the RealText file will be visible in the lower 20 pixels of the display window.

We must do the same thing for the section of the display which will show the RealPix images; since the RealPix display will start at the top left (top=0 left=0), the image will be displayed from the top down 220 pixels, and the full width of the display window. Here is the code as it is in the working example:

 <layout type="text/smil-basic-layout"> <region id="TextChannel1" title="TextChannel1"
left="0" top="220" height="20" width="240"
background-color="#888888" fit="hidden"/> <region id="ImageChannel1" title="ImageChannel1"
left="0" top="0" height="220" width="240"
background-color="#888888" fit="hidden"/> </layout>

Of course you'll have to play with it a bit to get it just right, but now our demo is working and ready to present to the world. You can also set it up so that the RealText file begins playing at a certain time within the presentation, and control various other aspects of the production, using parameters within the elements. Perhaps now it's time for you to go over the RealText Tags Reference again to understand more about these details.

Next week, WebDeveloper.com will look at the various tools that are available for creating SMIL/G2 presentations. We'll point out some excellent SMIL sites, examples, and tutorials to take you even farther in the world of streaming multimedia on the Web! See you then!

[ < RealText and SMIL:
Part 1 ]




HTML5 Development Center


Recent Articles