Difference between revisions of "Animation"

Latest revision as of 10:01, 11 November 2010

SMIL provides the ability to change a given attribute of a media object over time. This allows one to achieve the effect of a crawl across the bottom of the screen by animating the "left" attribute of an image item, or a scrolling-up message by animating the "top" attribute.

Why not use smilText

Pre-rendering text into PNG or JPEG to show on-screen instead of using smilText has several advantages:

• Rendering text into an image (PNG or JPEG) allows you royalty-free use of the font
• Pre-rendering fonts gives you device-independent control over lines and character spacing. You know how bad your PowerPoint may look if you try to play it on a different computer (lines will wrap in the wrong places, causing entire screen to be offset, for example).
• Pre-rendering fonts allows you to add enhanced effects that are not supported via smilText, such as: gradient colors, shadowing, mirroring, font outline, etc.

SMIL is not very strong in fonts. Please consider pre-rendering them into a picture.

How to Crawl using <animate>

Animations are only available on players that support positioning of media items. Some full-screen players will not support this feature. When using crawls, experiment with the hardware capability you have to determine the optimal size and shape of the animated object.

An example of a ticker crawling across the top of a region can be achieved by the following SMIL segment.

  <seq repeatCount="indefinite">
    <img src="ticker-segmentAB.png" dur="16s" region="crawl" left="0" top="0" width="2560">
      <animate attributeName="left" from="0" to="-1280" begin="0s" dur="16s" fill="freeze" />
    </img>
    <img src="ticker-segmentBC.png" dur="16s" region="crawl" left="0" top="0" width="2560">
      <animate attributeName="left" from="0" to="-1280" begin="16s" dur="16s" fill="freeze" />
    </img>
    <img src="ticker-segmentCA.png" dur="16s" region="crawl" left="0" top="0" width="2560">
      <animate attributeName="left" from="0" to="-1280" begin="32s" dur="16s" fill="freeze" />
    </img>
  </seq>

The example assumes screen width is 1280px and we use a pre-rendered graphics of 2560px in width to ensure the width of the screen is always filled during the animation.

The speed of the crawl can be adjusted by the "dur" parameter of the animate element. In this example, the "left" edge of the image changes from 0 to -1280 (1280 pixels to the left of the display region) to crawl the second segment of the image (the right-hand portion) into the screen.

By concatenating several overlapping crawling segments together, the user can achieve the effect of a continuous text ticker.

Related

• SMIL Playlists: seq, par, and excl playlists
• SMIL Screen Layout: multi-zone, multi-layer layout
• Sending SMIL to Player