How to Create An Animated Presentation Using HTML+TIME Transitions
| Internet Development Index |
This tutorial shows you how to use HTML+TIME (Timed Interactive Multimedia Extensions) transitions to make an animated presentation. This presentation consists of several elements transitioning in and out of view. This is an example of using HTML+TIME transitions to coordinate the transitioning of several elements with one another. No scripting is used. Click the following Show Me button to see the presentation that will be created in this tutorial.
One of the greatest advantages of using HTML+TIME transitions for an application like the preceding is the simplicity of the code. By working through this tutorial, you can discover some basic techniques that enable you to create your own presentations using HTML+TIME transitions.
- Prerequisites
- A Quick Look At the Code
- Setting the Stage
- Step-by-Step Transitions
- Notes About This Sample
- Related Topics
Prerequisites
This article assumes you know how to use Introduction to DHTML Behaviors, specifically, the time2 behavior of HTML+TIME. This article does not go into great detail on how to add a behavior to your page nor does it cover how to declare a namespace and use custom tags, as required by the time2 behavior. These topics are covered in the HTML+TIME Overview and Spice Up Your Web Pages with HTML+TIME. You should have some understanding of HTML+TIME transitions; for an overview, see Using HTML+TIME Transitions.
A Quick Look At the Code
To start, have a quick look at the code of the entire sample. Later on, this code is explained in greater detail, but for now, it might be useful to have a preview of what is needed to make the tutorial sample.
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<!-- The oContainer DIV contains all of the content. -->
<DIV ID="oContainer" CLASS="time" DUR="29">
<t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin" TYPE="ellipseWipe" DUR="1"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe" DUR="2"/>
<!-- When the container DIV transitions out, all of the child elements
transition out with it. -->
Introducing HTML+TIME<BR>
<!-- The transitioning elements appear in the order they appear on the time
line. This SPAN is the first thing to transition in. -->
<SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time" DUR="indefinite">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" />
Transitions
</SPAN>
<P><P>
<!-- Next, this SPAN fades in and then fades out -->
<SPAN ID="oSpan2" BEGIN="oSpan1.begin+3" TIMEACTION="display" CLASS="time" DUR="4">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan2.begin" TYPE="fade" DUR="2" />
<t:TRANSITIONFILTER ID="oSpan2TranOut" MODE="out" BEGIN="oSpan2.end - 1" TYPE="fade" DUR="1"/>
A Fast and Simple way to add visual transitions to your media elements.
</SPAN>
<!-- This SPAN transitions into the same area that oSpan2 was. -->
<SPAN ID="oSpan3" BEGIN="oSpan2TranOut.end" CLASS="time" DUR="indefinite">
<t:TRANSITIONFILTER ID="oSpan2Tran" MODE="in" BEGIN="oSpan3.begin" TYPE="pushWipe" DUR="2" />
All Types of Media Can Be Transitioned Using HTML+TIME Transitions
</SPAN>
<!-- This is the caption to appear over the image. -->
<DIV TIMEACTION="display" CLASS="caption time" DUR="8" ID="oCaption1"
BEGIN="oSpan2Tran.end+1">
<t:TRANSITIONFILTER ID="oCaption1TranIn" MODE="in" BEGIN="oCaption1.begin" TYPE="fade" DUR="2" />
<t:TRANSITIONFILTER MODE="out" BEGIN="oCaption1.end - 2" TYPE="fade" DUR="2" />
Images
</DIV>
<!-- This is the image. It begins at the same time as the caption above it.-->
<t:IMG TIMEACTION="display" CLASS="showOff" DUR="indefinite" ID="oImage" SRC="../common/samples/author/behaviors/media/ART_fruit_2.gif"
BEGIN="oCaption1TranIn.end" END="oCaption1.end">
<t:TRANSITIONFILTER MODE="in" BEGIN="oImage.begin" TYPE="clockWipe" DUR="2" />
<t:TRANSITIONFILTER MODE="out" BEGIN="oImage.end - 2" TYPE="clockWipe" DUR="2" />
</t:img>
<!-- This is the caption to appear over a DIV -->
<DIV timeAction="display" CLASS="caption time" DUR="indefinite" ID="oCaption2"
BEGIN="oCaption1.end + .5">
<t:TRANSITIONFILTER MODE="in" BEGIN="oCaption2.begin" TYPE="fade" DUR="2" />
And More...
</DIV>
<!-- This is the last DIV to transition in. -->
<DIV TIMEACTION="display" CLASS="time showOff" DUR="indefinite" ID="oDiv"
begin="oCaption2.begin + 2">
<t:TRANSITIONFILTER MODE="in" BEGIN="oDiv.begin" TYPE="ellipseWipe" DUR="2" />
<button>Renderable Elements</button>
</DIV>
</DIV>
</BODY>
</HTML>
Much of the preceding code is inside of the STYLE block. This code is important for this sample to render correctly; it is stored away from the functional elements for clarity. The rest of the code is mostly a collection of DIV and STYLE elements contained inside one DIV. Many of these elements have t:TRANSITIONFILTER elements applied to them. These elements and their corresponding t:TRANSITIONFILTER elements are timed to transition the elements in and out of view one after the other, giving an appearance of a presentation. Notice that no scripting is involved. This tutorial walks through each of the following steps to create the sample.
- Write the miscellaneous code needed for the sample to work properly.
- Write the code that is needed to instantiate the HTML+TIME behavior.
- Write the formatting code that will be needed by the menu in a STYLE tag.
- Build the presentation step by step by demonstrating and discussing the code needed for each transition that occurs on the individual time elements.
Setting the Stage
To use HTML+TIME elements and use the time2 behavior, the following code is needed.
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>
For more information about creating an XML namespace and referencing the time2 behavior, see Authoring HTML+TIME.
Next, add the formatting code inside of the STYLE tags. All of the elements in this sample derive their formatting from here. By separating formatting code from rendered elements, the functional code is simplified.
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
Step-by-Step Transitions
Now I will walk you through each step of building this document. After each step, you can render the code and see the effect.
Make a Container DIV
This sample consists of a larger container DIV (looks like a green chalkboard) that is the background for the display. Inside of this container DIV are several inner timed elements with t:TRANSITIONFILTER elements applied to them that create the display. When the display is over, the container DIV transitions out and ends its active period. All of the inner elements transition out with their parent. Let's first make this container DIV.
<DIV ID="oContainer" CLASS="time" DUR="29"> </DIV>
The DUR attribute is set to 29 seconds; this is the total duration of the presentation.
The DIV must have layout in order to have an HTML+TIME transition applied to it. This DIV gains layout by having its width and height specified from the upper STYLE tag.
#oContainer
{
.
.
width:500px;
height:450;
.
.
}
All of the elements that are transitioned in this sample gain layout in this way. For more information about what is needed to gain layout, see What Can Be Transitioned?.
To transition this element into view, we apply a t:TRANSITIONFILTER to the DIV with a MODE attribute value of in. Note that the value of in did not have to be included because this is the default value. It is included merely for clarity.
<!-- The oContainer DIV contains all of the content. --> <DIV ID="oContainer" CLASS="time" DUR="29"> <t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin" TYPE="ellipseWipe" DUR="1"/> <!-- When the container DIV transitions out, all of the child elements transition out with it. --> </DIV>
Notice that the BEGIN attribute for the t:TRANSITIONFILTER directly specifies the beginning time of the element that the t:TRANSITIONFILTER is applied to.
<!-- The oContainer DIV contains all of the content. --> <DIV ID="oContainer" CLASS="time" DUR="29"> <t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin" TYPE="ellipseWipe" DUR="1"/> <!-- When the container DIV transitions out, all of the child elements transition out with it. --> </DIV>
This is a clear and simple way to coordinate the beginning of a t:TRANSITIONFILTER to the beginning of the transition element that is being transitioned into view and is used throughout the sample.
To transition this element out of view, we apply a second t:TRANSITIONFILTER to the DIV with a MODE attribute value of out.
<!-- The oContainer DIV contains all of the content. --> <DIV ID="oContainer" CLASS="time" DUR="29"> <t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin" TYPE="ellipseWipe" DUR="1"/> <t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe" DUR="2"/> <!-- When the container DIV transitions out, all of the child elements transition out with it. --> </DIV>
This t:TRANSITIONFILTER begins 2 seconds before the container ends.
BEGIN="oContainer.end - 2"
We do this because the duration for the t:TRANSITIONFILTER as specified by the DUR attribute is set to a value of two. This facilitates a complete transition out that ends exactly when the active period of the container DIV ends. By timing the elements this way, the transition out appears as a smooth transition from visible to invisible. This same type of timing is done on all of the elements that transition out of view in this sample.
Let's take a look at the sample so far.
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<!-- Here is the code of the last step -->
<!-- The oContainer DIV contains all of the content. -->
<DIV ID="oContainer" CLASS="time" DUR="29">
<t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin"
TYPE="ellipseWipe" DUR="1"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe"
DUR="2"/>
<!-- When the container DIV transitions out, all of the child elements
transition out with it. -->
</DIV>
<!-- End of the code of the last step -->
</BODY>
</HTML>
Make the Heading Text
Next, add the elements inside of the container DIV that display initially.
Introducing HTML+TIME<BR> <!-- The transitioning elements appear in the order they appear on the time line. This SPAN is the first thing to transition in. --> <SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time" DUR="indefinite"> <t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" /> Transitions </SPAN>
The HTML code stays visible throughout the display so no t:TRANSITIONFILTER with a MODE value of out is needed. Notice that the BEGIN attribute for the t:TRANSITIONFILTER references the end of the t:TRANSITIONFILTER that transitions the previous element into view.
<DIV ID="oContainer" CLASS="time" DUR="29"> <t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin" TYPE="ellipseWipe" DUR="1"/> <t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe" DUR="2"/> Introducing HTML+TIME<BR> <!-- The transitioning elements appear in the order they appear on the time line. This SPAN is the first thing to transition in. --> <SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time" DUR="indefinite"> <t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" /> Transitions </SPAN>
This is a convenient way to time an element's begin time in relation to the active period of a t:TRANSITIONFILTER element, rather than just the active periods of rendered timed elements. In this case, the next element begins just as the previous element finishes transitioning into view.
Let's take a look at the sample after the step.
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<!-- The oContainer DIV contains all of the content. -->
<DIV ID="oContainer" CLASS="time" DUR="29">
<t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin"
TYPE="ellipseWipe" DUR="1"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe"
DUR="2"/>
<!-- When the container DIV transitions out, all of the child elements
transition out with it. -->
<!-- Here is the code of the last step -->
Introducing HTML+TIME<BR>
<!-- The transitioning elements appear in the order they appear on the time
line. This SPAN is the first thing to transition in. -->
<SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time"
DUR="indefinite">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" />
Transitions
</SPAN>
<!-- End of the code of the last step -->
</DIV>
</BODY>
</HTML>
Make the ''A Fast and Simple way...'' SPAN
Next, a span with some text is displayed. The span displays only for a moment and then transitions out of view.
<P><P> <!-- Next, this SPAN fades in and then fades out --> <SPAN ID="oSpan2" BEGIN="oSpan1.begin+3" TIMEACTION="display" CLASS="time" DUR="4"> <t:TRANSITIONFILTER MODE="in" BEGIN="oSpan2.begin" TYPE="fade" DUR="2"/> <t:TRANSITIONFILTER ID="oSpan2TranOut" MODE="out" BEGIN="oSpan2.end - 1" TYPE="fade" DUR="1"/> A Fast and Simple way to add visual transitions to your media elements. </SPAN>
Let's take a look at the sample after the step.
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<!-- The oContainer DIV contains all of the content. -->
<DIV ID="oContainer" CLASS="time" DUR="29">
<t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin"
TYPE="ellipseWipe" DUR="1"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe"
DUR="2"/>
<!-- When the container DIV transitions out, all of the child elements
transition out with it. -->
<DIV ALIGN="center">
Introducing HTML+TIME<BR>
<!-- The transitioning elements appear in the order they appear on the time
line. This SPAN is the first thing to transition in. -->
<SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time"
DUR="indefinite">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" />
Transitions
</SPAN>
<!-- Here is the code of the last step -->
<P><P>
<!-- Next, this SPAN fades in and then fades out -->
<SPAN ID="oSpan2" BEGIN="oSpan1.begin+3" TIMEACTION="display" CLASS="time"
DUR="4">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan2.begin" TYPE="fade" DUR="2"/>
<t:TRANSITIONFILTER ID="oSpan2TranOut" MODE="out" BEGIN="oSpan2.end - 1"
TYPE="fade" DUR="1"/>
A Fast and Simple way to add visual transitions to your media elements.
</SPAN>
<!-- End of the code of the last step -->
</DIV>
</BODY>
</HTML>
Make the ''All Types of Media...'' SPAN
Once the oSpan2?A HREF="../objects/span.html">SPAN transitions out, another SPAN transitions into the same place as oSpan2 was.
<!-- This SPAN transitions into the same area that oSpan2 was. --> <SPAN ID="oSpan3" BEGIN="oSpan2TranOut.end" CLASS="time" DUR="indefinite"> <t:TRANSITIONFILTER ID="oSpan2Tran" MODE="in" BEGIN="oSpan3.begin" TYPE="pushWipe" DUR="2" /> All Types of Media Can Be Transitioned Using HTML+TIME Transitions </SPAN>
Let's take a look at the sample after the step.
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<!-- The oContainer DIV contains all of the content. -->
<DIV ID="oContainer" CLASS="time" DUR="29">
<t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin"
TYPE="ellipseWipe" DUR="1"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe"
DUR="2"/>
<!-- When the container DIV transitions out, all of the child elements
transition out with it. -->
Introducing HTML+TIME<BR>
<!-- The transitioning elements appear in the order they appear on the time
line. This SPAN is the first thing to transition in. -->
<SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time"
DUR="indefinite">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" />
Transitions
</SPAN>
<P><P>
<!-- Next, this SPAN fades in and then fades out -->
<SPAN ID="oSpan2" BEGIN="oSpan1.begin+3" TIMEACTION="display" CLASS="time"
DUR="4">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan2.begin" TYPE="fade" DUR="2"/>
<t:TRANSITIONFILTER ID="oSpan2TranOut" MODE="out" BEGIN="oSpan2.end - 1"
TYPE="fade" DUR="1"/>
A Fast and Simple way to add visual transitions to your media elements.
</SPAN>
<!-- Here is the code of the last step -->
<!-- This SPAN transitions into the same area that oSpan2 was. -->
<SPAN ID="oSpan3" BEGIN="oSpan2TranOut.end" CLASS="time" DUR="indefinite">
<t:TRANSITIONFILTER ID="oSpan2Tran" MODE="in" BEGIN="oSpan3.begin" TYPE="pushWipe" DUR="2" />
All Types of Media Can Be Transitioned Using HTML+TIME Transitions
</SPAN>
<!-- End of the code of the last step -->
</DIV>
</BODY>
</HTML>
Create the image and its Caption
An image with a caption above it is displayed next. Other elements appear in the same space as these elements, so these elements each have t:TRANSITIONFILTER elements assigned to them to transition the elements out of view.
<!-- This is the caption to appear over the image. --> <DIV TIMEACTION="display" CLASS="caption time" DUR="8" ID="oCaption1" BEGIN="oSpan2Tran.end+1"> <t:TRANSITIONFILTER ID="oCaption1TranIn" MODE="in" BEGIN="oCaption1.begin" TYPE="fade" DUR="2" /> <t:TRANSITIONFILTER MODE="out" BEGIN="oCaption1.end - 2" TYPE="fade" DUR="2"/> Images </DIV> <!-- This is the image. It begins at the same time as the caption above it. --> <t:IMG TIMEACTION="display" CLASS="showOff" DUR="indefinite" ID="oImage" SRC="../common/samples/author/behaviors/media/ART_fruit_2.gif" BEGIN="oCaption1TranIn.end" END="oCaption1.end"> <t:TRANSITIONFILTER MODE="in" BEGIN="oImage.begin" TYPE="clockWipe" DUR="2"/> <t:TRANSITIONFILTER MODE="out" BEGIN="oImage.end - 2" TYPE="clockWipe" DUR="2"/> </t:img>
Let's take a look at the sample after the step.
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<!-- The oContainer DIV contains all of the content. -->
<DIV ID="oContainer" CLASS="time" DUR="29">
<t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin"
TYPE="ellipseWipe" DUR="1"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe"
DUR="2"/>
<!-- When the container DIV transitions out, all of the child elements
transition out with it. -->
<CENTER>Introducing HTML+TIME<BR>
<!-- The transitioning elements appear in the order they appear on the time
line. This SPAN is the first thing to transition in. -->
<SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time"
DUR="indefinite">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" />
Transitions
</SPAN>
<P><P>
<!-- Next, this SPAN fades in and then fades out -->
<SPAN ID="oSpan2" BEGIN="oSpan1.begin+3" TIMEACTION="display" CLASS="time"
DUR="4">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan2.begin" TYPE="fade" DUR="2"/>
<t:TRANSITIONFILTER ID="oSpan2TranOut" MODE="out" BEGIN="oSpan2.end - 1"
TYPE="fade" DUR="1"/>
A Fast and Simple way to add visual transitions to your media elements.
</SPAN>
<!-- This SPAN transitions into the same area that oSpan2 was. -->
<SPAN ID="oSpan3" BEGIN="oSpan2TranOut.end" CLASS="time" DUR="indefinite">
<t:TRANSITIONFILTER ID="oSpan2Tran" MODE="in" BEGIN="oSpan3.begin"
TYPE="pushWipe" DUR="2" />
All Types of Media Can Be Transitioned Using HTML+TIME Transitions
</SPAN>
<!-- Here is the code of the last step -->
<!-- This is the caption to appear over the image. -->
<DIV TIMEACTION="display" CLASS="caption time" DUR="8" ID="oCaption1"
BEGIN="oSpan2Tran.end+1">
<t:TRANSITIONFILTER ID="oCaption1TranIn" MODE="in" BEGIN="oCaption1.begin"
TYPE="fade" DUR="2" />
<t:TRANSITIONFILTER MODE="out" BEGIN="oCaption1.end - 2" TYPE="fade" DUR="2"/>
Images
</DIV>
<!-- This is the image. It begins at the same time as the caption above
it. -->
<t:IMG TIMEACTION="display" CLASS="showOff" DUR="indefinite" ID="oImage" SRC="../common/samples/author/behaviors/media/ART_fruit_2.gif"
BEGIN="oCaption1TranIn.end" END="oCaption1.end">
<t:TRANSITIONFILTER MODE="in" BEGIN="oImage.begin" TYPE="clockWipe" DUR="2"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oImage.end - 2" TYPE="clockWipe" DUR="2"/>
</t:img>
<!-- End of the code of the last step -->
</DIV>
</BODY>
</HTML>
Create the Display DIV with its Caption
A display DIV with a caption over it transitions into the same place as the last elements. Shortly after these elements transition in, the container DIV transitions out and ends its time line. Naturally, all inner elements still visible transition out with their parent.
<!-- This is the caption to appear over a DIV --> <DIV timeAction="display" CLASS="caption time" DUR="indefinite" ID="oCaption2" BEGIN="oCaption1.end + .5"> <t:TRANSITIONFILTER MODE="in" BEGIN="oCaption2.begin" TYPE="fade" DUR="2"/> And More... </DIV> <!-- This is the last DIV to transition in. --> <DIV TIMEACTION="display" CLASS="time showOff" DUR="indefinite" ID="oDiv" begin="oCaption2.begin + 2" /> <t:TRANSITIONFILTER MODE="in" BEGIN="oDiv.begin" TYPE="ellipseWipe" DUR="2"/> Renderable Elements </DIV> </CENTER>
Let's take a look at the completed sample.
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
.caption
{
font-size:large;
width:300px;
margin-top:20;
margin-bottom:15;
color:gold;
font-weight:bold;
background:#3366CC
}
.showOff
{
width:180px;
height:160px;
padding:10;
background-color:white;
font-size:small;
color:blue;
border-width:3px;
border-style:solid;
border-color:gold;
}
#oContainer
{
background:#3366CC;
border:6px ridge #FFCC99;
padding:10px;
font-family:arial;
color:white;
font-size:x-large;
width:500px;
height:450px;
text-align:center;
}
#oSpan1 {color:gold; width:30px; font-weight:bold; font-size:52pt; background:#3366CC}
#oSpan2 {font-size:large;width:450px; background:#3366CC}
#oSpan3 {text-align:center;color:white;font-size:large;width:450px; background:#3366CC}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<!-- The oContainer DIV contains all of the content. -->
<DIV ID="oContainer" CLASS="time" DUR="29">
<t:TRANSITIONFILTER ID="oContainerTranIn" MODE="in" BEGIN="oContainer.begin"
TYPE="ellipseWipe" DUR="1"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oContainer.end - 2" TYPE="barnDoorWipe"
DUR="2"/>
<!-- When the container DIV transitions out, all of the child elements
transition out with it. -->
Introducing HTML+TIME<BR>
<!-- The transitioning elements appear in the order they appear on the time
line. This SPAN is the first thing to transition in. -->
<SPAN ID="oSpan1" BEGIN="oContainerTranIn.end + 1" CLASS="time"
DUR="indefinite">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan1.begin" TYPE="barWipe" DUR="2" />
Transitions
</SPAN>
<P><P>
<!-- Next, this SPAN fades in and then fades out -->
<SPAN ID="oSpan2" BEGIN="oSpan1.begin+3" TIMEACTION="display" CLASS="time"
DUR="4">
<t:TRANSITIONFILTER MODE="in" BEGIN="oSpan2.begin" TYPE="fade" DUR="2"/>
<t:TRANSITIONFILTER ID="oSpan2TranOut" MODE="out" BEGIN="oSpan2.end - 1"
TYPE="fade" DUR="1"/>
A Fast and Simple way to add visual transitions to your media elements.
</SPAN>
<!-- This SPAN transitions into the same area that oSpan2 was. -->
<SPAN ID="oSpan3" BEGIN="oSpan2TranOut.end" CLASS="time" DUR="indefinite">
<t:TRANSITIONFILTER ID="oSpan2Tran" MODE="in" BEGIN="oSpan3.begin"
TYPE="pushWipe" DUR="2" />
All Types of Media Can Be Transitioned Using HTML+TIME Transitions
</SPAN>
<!-- This is the caption to appear over the image. -->
<DIV TIMEACTION="display" CLASS="caption time" DUR="8" ID="oCaption1"
BEGIN="oSpan2Tran.end+1">
<t:TRANSITIONFILTER ID="oCaption1TranIn" MODE="in" BEGIN="oCaption1.begin"
TYPE="fade" DUR="2" />
<t:TRANSITIONFILTER MODE="out" BEGIN="oCaption1.end - 2" TYPE="fade" DUR="2"/>
Images
</DIV>
<!-- This is the image. It begins at the same time as the caption above
it. -->
<t:IMG TIMEACTION="display" CLASS="showOff" DUR="indefinite" ID="oImage" SRC="../common/samples/author/behaviors/media/ART_fruit_2.gif"
BEGIN="oCaption1TranIn.end" END="oCaption1.end">
<t:TRANSITIONFILTER MODE="in" BEGIN="oImage.begin" TYPE="clockWipe" DUR="2"/>
<t:TRANSITIONFILTER MODE="out" BEGIN="oImage.end - 2" TYPE="clockWipe" DUR="2"/>
</t:img>
<!-- Here is the code of the last step -->
<!-- This is the caption to appear over a DIV -->
<DIV timeAction="display" CLASS="caption time" DUR="indefinite" ID="oCaption2"
BEGIN="oCaption1.end + .5">
<t:TRANSITIONFILTER MODE="in" BEGIN="oCaption2.begin" TYPE="fade" DUR="2"/>
And More...
</DIV>
<!-- This is the last DIV to transition in. -->
<DIV TIMEACTION="display" CLASS="time showOff" DUR="indefinite" ID="oDiv"
begin="oCaption2.begin + 2">
<t:TRANSITIONFILTER MODE="in" BEGIN="oDiv.begin" TYPE="ellipseWipe" DUR="2" />
<button>Renderable Elements</button>
</DIV>
<!-- End of the code of the last step -->
</DIV>
</BODY>
</HTML>
Notes About This Sample
There are two important notes to make about this sample.
First, as already mentioned, all the elements of this sample gain their layout by having their widths and/or heights specified. Alternatively, these elements could have had layout by giving their position property a value of absolute or relative. Doing this can be a convenient way to position elements exactly where you want them. However, there is a trade-off by doing this. Positioning elements in this way takes them out of the flow of the document, and these elements no longer transition with their parent elements. For this sample, this would mean that each inner positioned element would have to be transitioned out independently of the parent. Rather than have these extra transition elements, this sample used other formatting attributes and elements to provide proper positioning such as margins, padding, P tags, and so forth.
Secondly, you may have noticed the following attribute in some of the elements.
TIMEACTION="display"
The timeAction property determines what action is taken on the element while the time line is active. This attribute was included in elements that transitioned out of view and would have another element transition into the same area. A value of display specifies that as the element changes between active and inactive states, the surrounding HTML elements dynamically reflow within the page. Without this, the new element would render as though the inactive element were still there and would not transition into the same area.
Related Topics
- Introduction to DHTML Behaviors
- Introduction to HTML+TIME
- Spice Up Your Web Pages with HTML+TIME
- Using HTML+TIME Transitions
- How to Create a Basic HTML+TIME Transition
- How to Make An Animated Menu Using HTML+TIME Transitions
- How to Make a Slide Show Using HTML+TIME Transitions