Transition - Revision history

SMIL T.A. at 05:48, 27 June 2014

2014-06-27T05:48:56Z

SMIL T.A.: /* Applicable Models */

2011-02-14T01:45:17Z

‎Applicable Models

SMIL T.A. at 01:44, 14 February 2011

2011-02-14T01:44:26Z

SMIL T.A.: Created

2010-12-27T10:15:24Z

Created

New page

SMIL allows you to quickly put together a slide show. To make your deck of static images look alive, you can use the <tt>transition</tt> tags.

== Using Transition in SMIL ==

A SMIL sample that uses transition effects and applicable to the XDS-104 device is as the following:

<source lang="smil">
<?xml version="1.0" encoding="utf-8"?>
<smil>
<head>
<layout>
<root-layout id="display:0" width="800" height="480" />
<region id="screen" top="0" left="0" width="800" height="480" z-index="0" fit="fill" mediaAlign="center" />
<transition xml:id="bwt" type="barWipe" subtype="leftToRight" dur="1s" />
</layout>
</head>
<body>
<seq region="screen" repeatCount="indefinite">
<img id="I01" region="screen" src="media/001.jpg" fill="transition" dur="7s" transIn="bwt"/>
<img id="I02" region="screen" src="media/002.jpg" fill="transition" dur="7s" transIn="bwt"/>
</seq>
</body>
</smil>
</source>

=== Declaring a Transition ===

In the example above, note the line

<source lang="smil">
<transition xml:id="bwt" type="barWipe" subtype="leftToRight" dur="1s" />
</source>

declares a "barWipe" transition that reveals the next image from the left of the screen towards right.

Popular SMIL transitions include:

{| border="1" style="margin: 1em auto 1em auto"
|-
! Type
! Subtype
! Parameters
! Explanation
|-
| barwipe
| leftToRight
| (none)
| Progressively revealing the object from left to right
|-
| barwipe
| topToBottom
| (none)
| Progressively revealing the object from top to bottom
|-
| fade
| crossfade
| (none)
| Progressively revealing the object by dimming out the previous and showing the new
|-
| fade
| fadeFromColor (black only)
| fadeColor (must be #000)
| Progressively revealing the object by appearing out of black background
|}

''Note'': availability of SMIL transition effects depends on the hardware you use. Consult your hardware vendor on the transitions available on your device.

=== Applying a Transition ===

To apply a declared transition to the beginning of an image object, refer to the id of the transition in the <tt>transIn</tt> attribute of the object and designate <tt>"transition"</tt> as its fill attribute.

<source lang="smil">
<img id="I01" region="screen" src="media/001.jpg" fill="transition" dur="7s" transIn="bwt"/>
<img id="I02" region="screen" src="media/002.jpg" fill="transition" dur="7s" transIn="bwt"/>
</source>

Note that depending on the capability of your hardware player, transition may not be applicable to all media objects (such as video). Consult your hardware vendor for details.

== Related ==

* [[SMIL Media Objects]]: video, image, and audio objects
* [[SMIL Playlists]]: seq, par, and excl playlists
* [[Animation]]: making crawls out of long pictures

@@ Line 78: / Line 78: @@
 == Applicable Models ==
-.10" Digital Signboard (Model Name:XDS-101/XDS-104) from [http://www.iadea.com IAdea Corporation]
+.10" Digital Signboard (Model Name:XDS-101/XDS-104) from [http://www.iadea.com IAdea Corporation] <br>
 .10.4" EPOSTER All-IN-ONE COMMERCIAL DISPLAY ( Model Name:EP1020r/EP1021r ) from [http://www.viewsonic.com ViewSonic]

← Older revision		Revision as of 01:44, 14 February 2011
Line 76:		Line 76:

	Note that depending on the capability of your hardware player, transition may not be applicable to all media objects (such as video). Consult your hardware vendor for details.		Note that depending on the capability of your hardware player, transition may not be applicable to all media objects (such as video). Consult your hardware vendor for details.
		+
		+	== Applicable Models ==
		+	1.10" Digital Signboard (Model Name:XDS-101/XDS-104) from [http://www.iadea.com IAdea Corporation]
		+	2.10.4" EPOSTER All-IN-ONE COMMERCIAL DISPLAY ( Model Name:EP1020r/EP1021r ) from [http://www.viewsonic.com ViewSonic]

	== Related ==		== Related ==

@@ Line 1: / Line 1: @@
 SMIL allows you to quickly put together a slide show. To make your deck of static images look alive, you can use the <tt>transition</tt> tags.
 == Using Transition in SMIL ==
@@ Line 76: / Line 80: @@
 Note that depending on the capability of your hardware player, transition may not be applicable to all media objects (such as video). Consult your hardware vendor for details.
 == Related ==