Coursehero >> South Carolina >> Clemson >> TEXT 863

Course Hero has millions of student submitted documents similar to the one below including study guides, homework solutions, papers, exam answer keys and textbook solutions.

HTML+TIME HTML+TIME (Timed Interactive Multimedia Extensions), first released in Microsoft Internet Explorer 5, adds timing and media synchronization support to HTML pages. Using a few Extensible Markup Language (XML)-based elements and attributes, you can add images, video, and sounds to an HTML page, and synchronize them with HTML text elements over a specified amount of time. In short, you can use HTML+TIME technology to quickly create multimediarich, interactive presentations, easily and with little or no scripting. CpSc 881: Multimedia Systems and Applications Introduction to HTML+TIME James Wang http://msdn2.microsoft.com/en-us/library/ms533099.aspx 2 Benefits Dynamic Content You can use HTML+TIME to add dynamic, interactive content to your Web pages. HTML+TIME Behaviors and Elements HTML+TIME is implemented as a DHTML default behavior, one of the powerful new features introduced in Internet Explorer 5. time2 behaviors syntax: XML <t: PredefinedTag ID=sID STYLE="behavior:url('#default#time2')" /> Ease of Use To add timing to an HTML document, all you have to do is add some new attributes to existing HTML elements. Scripting Support HTML+TIME supports a complete object model that extends the existing DHTML Object Model. Thus, you can use HTML+TIME properties, methods, and events to add even more interactive features to your Web pages. HTML <ELEMENT STYLE="behavior:url('#default#time2')" ID=sID> Scripting object.style.behavior = "url('#default#time2') object.addBehavior ("#default#time2") * sID: String that specifies a unique identifier for the object. 3 4 time2 behavior possible values t: Prefix required by the time2 behavior. This prefix is set using the XMLNS attribute of the HTML. PredefinedTag: animation: Defines a timed animation element in an HTML document. audio: Defines a timed audio element in an HTML document. excl: Defines a time container that allows only one child element to play at any given time. img: Defines a timed image element in an HTML document. media: Defines a generic, timed media element in an HTML document. par: Defines a new timeline container in an HTML document for independently timed elements. ref: Defines a reference to a generic timed element in an HTML document. seq: Defines a new timeline container in an HTML document for sequentially timed elements. video: Defines a timed video element in an HTML document. members exposed by the time2 object ACCELERATE: Sets or gets a value that applies an acceleration to an element timeline. 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. 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. 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. 5 6 1 members exposed by the time2 object (cont.) FILL: Sets or gets the action taken by an element if the element timeline ends before the timeline on its parent element ends. hasMedia: Gets a Boolean value that indicates whether the element is an HTML+TIME media element. isDirectMusicInstalled: Retrieves whether direct music is installed. MUTE: Sets or gets a value that indicates whether the audio is turned on or off. REPEATCOUNT: Sets or gets the number of times an element timeline repeats. members exposed by the time2 object (cont.) REPEATDUR: 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. SPEED: Sets or gets the playback speed of an element relative to its parent time container. 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. 7 8 members exposed by the time2 object (cont.) syncTolerance: Sets or gets the time variance that is allowed on a timeline with locked synchronization. systemBitrate: Gets the approximate bandwidth available to the system in bits-per-second. systemCaptions: Indicates whether to display a text equivalent of the audio portion of the presentation. systemLanguage: Indicates whether a given language is selected in a user's system preferences. systemOverdubOrSubtitle: Specifies whether overdubs or subtitles render during a presentation. members exposed by the time2 object (cont.) 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. VOLUME: Sets or gets the volume of the media file. 9 10 HTML+TIME Timing Model Most traditional animation runtime systems use either rigid timelines or pure, eventbased relationships to model time. HTML+TIME unifies these two timing models, taking the best of each and simplifying the process of authoring timed, interactive content. You can use timeline attributes to describe static, or determinate, timeline relationships. You can author interactive content using a simple variant on the timeline attributes, where the begin and/or end times are tied to an event. Features of HTML+TIME s unified timing model This model unified makes it easy to define an animation that has tightly synchronized media, and to add a number of interactive elements that start when the user does something. The interactive elements can have a duration and repeat count just like other timed elements, even though they begin in response to an event. You can apply a single set of tools for timing and synchronization to any element. This makes the model easier to learn and less complicated, without sacrificing any flexibility. 11 12 2 HTML element TIME behavior HTML elements behave differently when you add time attributes, depending on the HTML element type. Adding HTML+TIME attributes to a content element causes the element to appear and disappear over time. Content elements include all elements that describe content to be displayed on the page, including the media elements introduced with HTML+TIME (t:ANIMATION, t:AUDIO, t:IMG, t:MEDIA, and t:VIDEO. Adding HTML+TIME attributes to a style element causes the style to be applied to and removed from the element over time. Style elements describe the style to be applied to an element. Add Timing to HTML Elements Create an XML Namespace: Declare namespace t: <HTML XMLNS:t ="urn:schemas-microsoft-com:time"> import the time2 behavior into the namespace . <?IMPORT namespace="t" implementation="#default#time2"> Reference the time2 Behavior (not necessary for HTML+TIME elements, such as t:MEDIA, t:AUDIO) Use inline STYLE. <P STYLE="behavior:url(#default#time2)" ...> Define and use CSS class. <HTML> <HEAD> <STYLE> .time </STYLE> </HEAD> <BODY> <P CLASS="time" ...> {behavior: url(#default#time2);} 13 14 </BODY> </HTML> Add Timing to HTML Elements (cont.) Specify Beginning and Ending Times You must specify when the HTML element should appear and for how long. This is accomplished by including the BEGIN , END or DUR attributes on the element. Example: <HTML> <HEAD> <STYLE> .time </STYLE> </HEAD> <BODY> <P>This text appears right away. More lines to follow...</P> <P CLASS="time" BEGIN="2" DUR="5" >This appears after 2 seconds.</P> <P CLASS="time" BEGIN="4" DUR="5">This appears after 4 seconds.</P> <P CLASS="time" BEGIN="6" DUR="5">This appears after 6 seconds.</P> <P>This is the last line.</P> </BODY> </HTML> {behavior: url(#default#time2);} Add Timing to HTML Elements (cont.) Include an action Although including an action is optional, you might want to use the TIMEACTION attribute to specify the action that is taken while the element is active on the timeline. Example: <HTML> <HEAD> <STYLE> .time </STYLE> </HEAD> <BODY> <H1 CLASS="time" BEGIN="0" DUR="11" TIMEACTION="style" STYLE="Color:Red;">timeAction</H1> <P>This text appears right away. More lines to follow...</P> <P CLASS="time" BEGIN="2" DUR="5" TIMEACTION="display">This appears after 2 seconds.</P> <P CLASS="time" BEGIN="4" DUR="5" TIMEACTION="display">This appears after 4 seconds.</P> <P CLASS="time" BEGIN="6" DUR="5" TIMEACTION="display">This appears after 6 seconds.</P> <P>This is the last line.</P> </BODY> </HTML> {behavior: url(#default#time2);} 15 16 Exclusive Time Container excl: create a time container that allows only one element to play at a time. <HTML> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> </HEAD> <BODY> <DIV CLASS="time" TIMECONTAINER="excl"> <DIV CLASS="time" BEGIN="0" DUR="2" TIMEACTION="display">First line of text.</DIV> <DIV CLASS="time" BEGIN="2" DUR="2" TIMEACTION="display">Second line of text.</DIV> <DIV CLASS="time" BEGIN="4" DUR="2" TIMEACTION="display">Third line of text.</DIV> <DIV CLASS="time" BEGIN="6" TIMEACTION="display">Fourth line of text.</DIV> </DIV> </BODY> </HTML> Sequential Time Container seq: You can easily create slide-show-style presentations using timing sequences to display a series of images, one after the other, along with synchronized text. <HTML> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> </HEAD> <BODY> <DIV CLASS="time" TIMECONTAINER="seq"> <DIV CLASS="time" DUR="2" TIMEACTION="display">First line of text.</DIV> <DIV CLASS="time" DUR="2" TIMEACTION="display">Second line of text.</DIV> <DIV CLASS="time" DUR="2" TIMEACTION="display">Third line of text.</DIV> <DIV CLASS="time" TIMEACTION="display">Fourth line of text.</DIV> </DIV> </BODY> </HTML> 17 18 3 Parallel Time Container par: you can use parallel timelines to display and hide elements without any implicit dependencies on other elements. <HTML> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> </HEAD> <BODY> <DIV CLASS="time" REPEATCOUNT="5" DUR="10" TIMECONTAINER="par"> <DIV CLASS="time" BEGIN="0" DUR="4">First line of text.</DIV> <DIV CLASS="time" BEGIN="2" DUR="4">Second line of text.</DIV> <DIV CLASS="time" BEGIN="4" DUR="4">Third line of text.</DIV> <DIV CLASS="time" BEGIN="6" DUR="4">Fourth line of text.</DIV> </DIV> </BODY> </HTML> Use HTML+TIME elements Instead of using the TIMECONTAINER attribute to group HTML elements on a timeline, you can use the t:PAR or t:SEQ elements. For example: <HTML XMLNS:t ="urn:schemas-microsoft-com:time"> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY> <t:SEQ> <DIV CLASS="time" DUR="2">First line of text.</DIV> <DIV CLASS="time" DUR="2">Second line of text.</DIV> <DIV CLASS="time" DUR="2">Third line of text.</DIV> <DIV CLASS="time">Fourth line of text.</DIV> </t:SEQ> </BODY> </HTML> 19 20 More on HTML+TIME Check MSDN for HTML+TIME Animation, DirectMusic, Media, Transition, etc. http://msdn2.microsoft.com/en-us/library/ms533099.aspx 21 4

Find millions of documents here - Study Guides, Homework Solutions, Papers, Exam Answer Keys and more. Course Hero has millions of course related materials that will enable you to learn better, faster and get an A in all your courses.
Below is a small sample set of documents: