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).
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 ] | | 
