HTML+TIME: Transitions

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

Introduction to HTML+TIME provides support for Introduction to Filters and Transitions, which enable you to apply multimedia-style effects to your Web pages. Visual filters are extensions to CSS properties that change the display of an object's contents. Transitions are time-varying filters; they affect the way content changes in an object are displayed. You can apply visual filters and transitions to standard HTML controls, such as text containers, images, and other windowless objects. Although filters and transitions can be implemented as script, Introduction to HTML+TIME allows Web authors—without using script—to combine filters and transitions with timeline control and animation.

The following links provide access to the object model exposed by the time2 behavior.

Overviews

Seeking With HTML+TIME

In HTML+TIME (Timed Interactive Multimedia Extensions) various types of media, animation, and other time elements can be played over a period of time. It is often desirable to be able to jump to any point on this time line. This process of jumping to different points on a time element's time line is called seeking.

Using HTML+TIME Transitions

It is now possible to create visual transitions with HTML+TIME easily without any knowledge of scripting.

Using the HTML+TIME Document Object Model (DOM)

All HTML+TIME objects are accessible through script at run time. This article introduces you to the HTML+TIME objects, methods, events, and properties available to your Web pages.

Tutorials

How to Create a Basic HTML+TIME Transition

This tutorial shows you how to use HTML+TIME transitions to allow an element to transition into view and then transition the element out of view. This is an example of using HTML+TIME transitions at a very basic level.

How to Create An Animated Presentation Using HTML+TIME Transitions

This tutorial shows you how to use HTML+TIME 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.

How to Make a Slide Show Using HTML+TIME Transitions

This tutorial shows you how to create a slide show where each slide transitions into view when the user clicks a "back" or "forward" button. Some scripting is used to transition the appropriate slide into view when the user clicks a button. This is an example of integrating scripting with HTML+TIME transitions to make applications utilizing transitions more dynamic.

How to Make An Animated Menu Using HTML+TIME Transitions

This tutorial shows you how to transition a menu in and out of view using a randomly selected type of HTML+TIME transition. Some scripting is used to enable the user to activate the transition by opening and closing the menu and dynamically changing the type of transition applied to the menu. This is an example of integrating scripting with HTML+TIME transitions to make applications that utilize more dynamic transitions.

Incorporate the time2 Behavior

This tutorial explains how to incorporate the time2 behavior in your Web pages so you can begin using timelines, multimedia, and animation with HTML elements.

Transition Elements and Objects

currTimeState

Contains information about an HTML+TIME timeline.

transitionFilter

Animates the progress of a transition on an element or elements with renderable content.

Attributes and Properties

accelerate

Sets or gets a value that applies an acceleration to an element timeline.

activeDur

Gets the total duration of the timeline.

activeTime

Gets the current point in time along the total active timeline, including repeats and time spent in reverse mode.

autoReverse

Sets or gets whether the timeline on an element begins playing in reverse immediately after it completes in the forward direction.

begin

Sets or gets the delay time before the timeline begins playing on the element.

by

Specifies a relative offset value for the progress of the transitionFilter element.

calcMode

Sets or gets the interpolation mode for the progress of the transitionFilter element.

decelerate

Sets or gets a value that applies a deceleration to the end of a simple duration.

dur

Sets or gets a value indicating the amount of time the element remains active or displayed.

dur

Sets or gets a value indicating the amount of time that a transition is applied to an element.

element

Retrieves the dispatch for an animated element.

end

Sets or gets a value indicating the end time for the element, or the end of the simple duration when the element is set to repeat.

fill

Sets or gets the action taken by an element if the element timeline ends before the timeline on its parent element ends.

from

Sets or gets a progress value indicating the point from which to begin the transition.

isActive

Gets a value that indicates whether the element is currently active on the timeline.

isDirectMusicInstalled

Retrieves whether direct music is installed.

isOn

Gets a value that specifies whether the element is active or holding on the timeline in its current state.

isPaused

Gets a value that specifies whether the element is paused on the timeline.

mode

Sets or gets a variable that indicates whether an element transitions in or out.

Sets or gets a variable that indicates whether an element transitions in or out.parentTimeBegin

Gets the begin time of the current element as an offset from the begin time of the parent element.

parentTimeEnd

Gets the end time of the current element as an offset from the begin time of the parent element.

progress

Gets the current progress of the element timeline.

repeatCount

Gets the current iteration in the repetition loop.

repeatCount

Sets or gets the number of times an element timeline repeats.

repeatDur

Sets or gets the number of seconds that an element timeline repeats.

Sets or gets the number of seconds that an element timeline repeats.restart

Sets or gets the conditions under which an element can be restarted on a timeline.

segmentDur

Gets the duration of an element on a timeline in seconds, including autoReverse.

segmentTime

Gets the current point in time along a segment of time.

simpleDur

Gets the duration of a repeat iteration.

simpleTime

Gets an object's current point along its timeline from zero to its dur value.

speed

Sets or gets the playback speed of an element relative to its parent time container.

speed

Gets the playback speed of an element at run time, which includes the cascading effect of the speed set for the parent time container.

state

Gets the current state of the element timeline.

stateString

Gets the current state of the element timeline.

subtype

Sets or gets the name of the subtype that will be applied to the transition.

syncBehavior

Sets or gets a value that indicates the synchronization rules for the element timeline.

syncMaster

Sets or gets whether the time container must synchronize playback to this element.

syncTolerance

Sets or gets the time variance that is allowed on a timeline with locked synchronization.

timeAction

Sets or gets the action that is taken on the element while the timeline is active.

timeContainer

Sets or gets the type of timeline associated with an element.

timeParent

Gets the parent time container element of the current element.

to

Sets or retrieves a value that indicates the point in the transition's progress at which the transition ends.

type

Sets or gets the type of transition to be applied.

Sets or gets the type of transition to be applied.values

Sets or retrieves a list of one or more values specifying the progress of the transition.

volume

Sets or gets the volume of the media file.

Methods

activeTimeToParentTime

Converts a value in the element's active timeline to the corresponding point in the parent timeline.

activeTimeToSegmentTime

Converts a value in the element's active timeline to the corresponding point in the segment timeline.

addFragment

Adds a fragment to the composer site. Consults the registered composer factories to find the proper composer.

beginElement

Starts the element on the timeline.

beginElementAt

Starts an element's timeline at the specified time.

buttonActivate

Activates the currently-selected button.

detachFromComposer

Notifies the fragment to detach itself from the animation composer.

Notifies the fragment to detach itself from the animation composer.documentTimeToParentTime

Converts a value in the document timeline to the corresponding point in the element's parent timeline.

endElement

Stops the element on the timeline.

endElementAt

Ends an element's timeline at the specified time.

enumerateFragments

Enumerates the fragments on the composer registered for the given attribute name.

get_value

Retrieves an animated attribute's current value.

gotoMenu

Navigates to menu.

insertFragment

Inserts a fragment into the composer site at the specified index.

item

Retrieves an object from the element collection by name or index.

leftButtonSelect

Selects the button to the left of the current button.

lowerButtonSelect

Selects the button below the current button.

parentTimeToActiveTime

Converts a value in the parent timeline to the corresponding point in the element's active timeline.

parentTimeToDocumentTime

Converts a value in the element's parent timeline to the corresponding point in the document timeline.

pauseElement

Stops playing an element's timeline at the current point.

registerComposerFactory

Registers a new composer factory with this site.

removeFragment

Removes a fragment from the composer site.

resetElement

Removes any changes made to the element and returns the element to its original state.

resumeElement

Restarts the element's timeline from a paused state.

rightButtonSelect

Selects the button to the right of the current button.

seekActiveTime

Locates a specified point on the element's active timeline and begins playing from that point.

Locates a specified point on the element's active timeline and begins playing from that point.seekTo

Locates a specified point on the element's segment timeline, including repetitions, and begins playing from that point.

seekToFrame

Locates a specified frame in the object.

segmentTimeToActiveTime

Converts a value in the element's segment timeline to the corresponding point in the element's active timeline.

segmentTimeToSimpleTime

Converts a value in the element's segment timeline to the corresponding point in the element's simple timeline.

simpleTimeToSegmentTime

Converts a value in the element's simple timeline to the corresponding point in the element's segment timeline.

tags

Retrieves a subcollection containing only the elements of this collection that have the specified tag name.

unregisterComposerFactory

Unregisters a composer factory on this site.

upperButtonSelect

Selects the button above the current button.

Events

onbegin

Fires when the timeline starts on an element.

onend

Fires when the timeline stops on an element.

onmediacomplete

Fires when the element's associated media finish loading.

Fires when the element's associated media finish loading.onmediaerror

Fires when an element's media file causes any error.

onoutofsync

Fires when the element loses synchronization with its associated timeline.

onpause

Fires when the timeline on an element pauses.

onrepeat

Fires when the timeline repeats on an element, beginning with the second iteration.

onreset

Fires when the timeline reaches the value of the BEGIN attribute or when the resetElement method is called on the element.

onresume

Fires when an element's timeline resumes from a paused state.

onreverse

Fires when the timeline on an element begins to play backward.

onseek

Fires whenever a seek operation is performed on the element.

onsyncrestored

Fires when synchronization is resumed between the element and its associated timeline.

ontimeerror

Fires whenever a time-specific error occurs, usually as a result of setting a property to an invalid value.