Animation - Revision history

SMIL T.A. at 10:01, 11 November 2010

2010-11-11T10:01:47Z

SMIL T.A.: Added reasons to pre-render instead of using smilText

2010-11-11T10:00:01Z

Added reasons to pre-render instead of using smilText

SMIL T.A.: Minor correction

2010-10-28T08:32:37Z

Minor correction

SMIL T.A.: Improved example for creating text ticker

2010-10-28T08:30:51Z

Improved example for creating text ticker

SMIL T.A.: Added related links

2010-09-29T11:52:03Z

Added related links

SMIL T.A.: Created

2010-09-29T11:50:10Z

Created

New page

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.

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.

<source lang="smil">
<seq repeatCount="indefinite">
<img src="ticker.png" dur="16s" region="crawl" left="0" top="0">
<animate attributeName="left" from="0" to="-1280" begin="0s" dur="16s" fill="freeze" />
</img>
</seq>
</source>

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 image (assumed to be 1280 pixels in width) out of the screen.

@@ Line 5: / Line 5: @@
 Pre-rendering text into PNG or JPEG to show on-screen instead of using smilText has several advantages:
-* Rendering text into PNG allows you royalty-free use of the font
+* 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, shadows, mirroring, font outline, etc.
+* 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.

← Older revision		Revision as of 10:00, 11 November 2010
Line 1:		Line 1:
	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.		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 PNG 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, shadows, 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.		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.

@@ Line 21: / Line 21: @@
 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 image (assumed to be 1280 pixels in width) out of the screen.
+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.

← Older revision		Revision as of 11:52, 29 September 2010
Line 14:		Line 14:

	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 image (assumed to be 1280 pixels in width) out of the screen.		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 image (assumed to be 1280 pixels in width) out of the screen.
		+
		+	== Related ==
		+
		+	* [[SMIL Playlists]]: seq, par, and excl playlists
		+	* [[Layout\|SMIL Screen Layout]]: multi-zone, multi-layer layout
		+	* [[Transport\|Sending SMIL to Player]]

@@ Line 7: / Line 7: @@
 <source lang="smil">
    <seq repeatCount="indefinite">
-     <img src="ticker.png" dur="16s" region="crawl" left="0" top="0">
+     <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>
    </seq>
 </source>
 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 image (assumed to be 1280 pixels in width) out of the screen.
 == Related ==