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




Tutorial: RealSystem G2 and SMIL

By 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.


HTML5 Development Center


Recent Articles