HTML+TIME: Transitions | Internet Development Index |
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.
Seeking With HTML+TIMEIn 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 TransitionsIt 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.
How to Create a Basic HTML+TIME TransitionThis 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 TransitionsThis 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 TransitionsThis 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 TransitionsThis 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 BehaviorThis tutorial explains how to incorporate the time2 behavior in your Web pages so you can begin using timelines, multimedia, and animation with HTML elements.
currTimeStateContains information about an HTML+TIME timeline.
transitionFilterAnimates the progress of a transition on an element or elements with renderable content.
accelerateSets or retrieves a value that applies an acceleration to an element's timeline.
activeDurRetrieves the total duration of the timeline.
activeTimeRetrieves the current point in time along the total active timeline, including repeats and time spent in reverse mode.
autoReverseSets or retrieves whether the timeline on an element begins playing in reverse immediately after completing in the forward direction.
beginSets or retrieves the delay time before the timeline begins playing on the element.
bySpecifies a relative offset value for the progress of the transitionFilter.
calcModeSets or retrieves the interpolation mode for the progress of the transitionFilter.
decelerateSets or retrieves a value that applies a deceleration to the end of a simple duration.
durSets or retrieves a value indicating the amount of time the element remains active or displayed.
durSets or retrieves a value indicating the amount of time a transition is applied to an element.
endSets or retrieves a value indicating the end time for the element, or the end of the simple duration when the element is set to repeat.
fillSets or retrieves the action an element takes if its timeline ends before the timeline on its parent element ends.
fromSets or retrieves a progress value indicating the point from which to begin the transition.
isActiveRetrieves a value that indicates whether the element is currently active on the timeline.
isOnRetrieves a value that specifies whether the element is active or holding on the timeline in its current state.
isPausedRetrieves a value that specifies whether the element is paused on the timeline.
modeSets or retrieves a variable that indicates whether an element transitions in or out.
parentTimeBeginRetrieves the current element's begin time as an offset from the parent element's begin time.
parentTimeEndRetrieves the current element's end time as an offset from the parent element's begin time.
progressRetrieves the current progress of the element's timeline.
repeatCountRetrieves the current iteration in the repetition loop.
repeatCountSets or retrieves the number of times an element's timeline repeats.
repeatDurSets or retrieves the number of seconds that an element's timeline repeats.
restartSets or retrieves the conditions under which an element can be restarted on a timeline.
segmentDurRetrieves the duration of an element on a timeline in seconds, including autoReverse.
segmentTimeRetrieves the current point in time along a segment of time.
simpleDurRetrieves the duration of a repeat iteration.
simpleTimeRetrieves an object's current point along its timeline from zero to its dur value.
speedSets or retrieves the playback speed of an element relative to its parent time container.
speedRetrieves the playback speed of an element at run time, which includes the cascading effect of the speed set for the parent time container.
stateRetrieves the current state of the element's timeline.
stateStringRetrieves the current state of the element's timeline.
subtypeSets or retrieves the name of the subtype that will be applied to the transition.
syncBehaviorSets or retrieves a value that indicates the synchronization rules for the element's timeline.
syncMasterSets or retrieves whether the time container must synchronize playback to this element.
syncToleranceSets or retrieves the time variance allowed on a timeline with locked synchronization.
timeActionSets or retrieves what action is taken on the element while the timeline is active.
timeContainerSets or retrieves the type of timeline associated with an element.
timeParentRetrieves the parent time container element of the current element.
toSets or retrieves a value that indicates the point in the transition's progress at which the transition ends.
typeSets or retrieves the type of transition to be applied.
valuesSets or retrieves a semicolon-separated list of one or more values specifying the progress of the transition.
volumeSets or retrieves the volume of the media file.
activeTimeToParentTimeConverts a value in the element's active timeline to the corresponding point in the parent timeline.
activeTimeToSegmentTimeConverts a value in the element's active timeline to the corresponding point in the segment timeline.
beginElementStarts the element on the timeline.
beginElementAtStarts an element's timeline at the specified time.
documentTimeToParentTimeConverts a value in the document timeline to the corresponding point in the element's parent timeline.
endElementStops the element on the timeline.
endElementAtEnds an element's timeline at the specified time.
parentTimeToActiveTimeConverts a value in the parent timeline to the corresponding point in the element's active timeline.
parentTimeToDocumentTimeConverts a value in the element's parent timeline to the corresponding point in the document timeline.
pauseElementStops playing an element's timeline at the current point.
resetElementRemoves any changes made to the element and returns the element to its original state.
resumeElementRestarts the element's timeline from a paused state.
seekActiveTimeLocates a specified point on the element's active timeline and begins playing from that point.
seekToLocates a specified point on the element's segment timeline, including repetitions, and begins playing from that point.
seekToFrameLocates a specified frame in the object.
segmentTimeToActiveTimeConverts a value in the element's segment timeline to the corresponding point in the element's active timeline.
segmentTimeToSimpleTimeConverts a value in the element's segment timeline to the corresponding point in the element's simple timeline.
simpleTimeToSegmentTimeConverts a value in the element's simple timeline to the corresponding point in the element's segment timeline.
onbeginFires when the timeline starts on an element.
onendFires when the timeline stops on an element.
onmediacompleteFires when the element's associated media finish loading.
onmediaerrorFires when an element's media file causes any error.
onoutofsyncFires when the element loses synchronization with its associated timeline.
onpauseFires when the timeline on an element pauses.
onrepeatFires when the timeline repeats on an element, beginning with the second iteration.
onresetFires when the timeline reaches the value of the BEGIN attribute or when the resetElement method is called on the element.
onresumeFires when an element's timeline resumes from a paused state.
onreverseFires when the timeline on an element begins to play backward.
onseekFires whenever a seek operation is performed on the element.
onsyncrestoredFires when synchronization is resumed between the element and its associated timeline.
ontimeerrorFires whenever a time-specific error occurs, usually as a result of setting a property to an invalid value.