 Database Journal: The Knowledge Center for Database Professionals
|
Tutorial: RealSystem G2 & SMILBy Scott Clark Part 4
To create a fade in with your first image, you'll tell the G2 Player when to start the fade and how long to take for the fade to be completed. Since you told the Player when to start the presentation (in the header you told it to start at second zero--immediately), and you told it the time format you'll be using, you can now tell it to start a transition immediately:
<fadein start="0" duration="3" target="1"/>This indicates that the fade-in starts at second 0, that it targets image number "1", (remember that the first image is handle="1") and that the whole transition lasts three seconds. That means that when this entire effect is over, it will be second 3 in the timeline. Time for the next effect--a zoom! <viewchange start="4" duration="3" srcx="64" srcy="64" srcw="128" srch="96"/>A "viewchange" effects the image currently being shown in the G2 Player, which in this case would be image one. Since we finished the fade-in (above) in three seconds, this viewchange should start on second 4, and it should last three seconds (until second 7). The "srcx" and "srcy" indicates the X and Y coordinate of the source rectangle, and the "srcw" and "srch" indicates the width and height of the source rectangle respectively. We could have also specified which section of the viewing area to display the "zoomed" rectangle, but the default is to take up the entire viewing area, which in this case is what I was after anyway. Once we've zoomed in on the image, we want the image to fade into the next image, so we'll use a cross-fade: <crossfade start="6" duration="3" target="2"/>Once again, we have to indicate which image to target, when to start it (we start this one second before the last effect is finished, so we achieve a "movie" type effect), and how long the effect should take. Now that we've finished three effects, you can see how the timeline is achieved. Next we proceed with the second image in much the same manner: <image handle="2" name="shroud.jpg"/> <fadein start="9" duration="3" target="2"/> <crossfade start="14" duration="3" target="3"/>You can see that we target the fade-in to the second image, but we target the cross-fade to the upcoming third image. We do the same for the third and last image, adding another zoom and a couple fades: <image handle="3" name="roots.jpg"/> <fadein start="15" duration="3" target="3"/> <viewchange start="18" duration="3" srcx="64" srcy="64" srcw="128" srch="96"/> <crossfade start="23" duration="3" target="4"/>
[Move on to the next part of the article.]
This article first appeared in May, 1998.
Contact the WebDeveloper.com staff Last modified: 20
|
Refresh Daily
|
and find truth, justice, and a clue or two.
