Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
9 Transitions Adding effects to visual content
9.1 About Transitions <ul><li>Defined in the SMIL 2.0  Transition Effects Module  </li></ul><ul><li>SMIL and XHTML+TIME el...
9.2 Types and Implementations <ul><li>Large  taxonomy of transition effects  available </li></ul><ul><li>Based on work of ...
9.3  <transition/>  element <ul><li>Use with clients that implement the SMIL 2.0 Language Profile Basic Transition Module ...
9.4 Modifying  <transition/> ’s <ul><li>Default duration is 1 second </li></ul><ul><ul><li>Change duration with  dur  attr...
9.5  <transitionFilter> <ul><li>Used with XHTML+TIME clients </li></ul><ul><li>Applied to any element with renderable cont...
9.6 Modifying  <transitionFilter/> <ul><li>Default duration is 1 second </li></ul><ul><ul><li>Change with the  dur  attrib...
9.7 Text Transitions: Rendering Bugs <ul><li>Some text transitions do not render well </li></ul><ul><ul><li>An  example  o...
9.8 Review <ul><li>Use of SMIL 2.0 transitions makes presentations more professional </li></ul><ul><li>Not available in SM...
Upcoming SlideShare
Loading in …5
×

Transitions

1,396 views

Published on

Adding visual effects to content

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Transitions

  1. 1. 9 Transitions Adding effects to visual content
  2. 2. 9.1 About Transitions <ul><li>Defined in the SMIL 2.0 Transition Effects Module </li></ul><ul><li>SMIL and XHTML+TIME elements have no inherent transition behaviour </li></ul><ul><ul><li>Media clips simply pay one after the other </li></ul></ul><ul><ul><li>Default transitioning in and out is for no transition to be performed </li></ul></ul><ul><li>SMIL 1.0 has no support for visual effects </li></ul><ul><ul><li>Effects have to be applied within the media clip </li></ul></ul><ul><ul><li>Use RealPix or QuickTime slideshow </li></ul></ul><ul><li>SMIL 2.0 adds special effects to visual content </li></ul><ul><ul><li>Moving from one visual clip to another </li></ul></ul><ul><ul><ul><li>Images, video, animation and text </li></ul></ul></ul><ul><ul><li>Cross fading for an image series </li></ul></ul><ul><li>Allows television or film like composition </li></ul><ul><li>Available for audio content volume </li></ul><ul><li>Applied to the start and end of the clip element </li></ul><ul><li>Examples </li></ul><ul><ul><li>RealONE </li></ul></ul><ul><ul><li>Internet Explorer v6 </li></ul></ul>
  3. 3. 9.2 Types and Implementations <ul><li>Large taxonomy of transition effects available </li></ul><ul><li>Based on work of the Society of Motion Picture and Television Engineers ( SMPTE ) </li></ul><ul><ul><li>ANSI/SMPTE 258M-1993 </li></ul></ul><ul><li>Implementation depends upon client </li></ul><ul><ul><li>RealONE </li></ul></ul><ul><ul><ul><li>Uses the SMIL 2.0 Basic Transition Module </li></ul></ul></ul><ul><ul><ul><li>Implements the entire SMPTE transition set </li></ul></ul></ul><ul><ul><ul><li>Edge Wipes , Iris Wipes , Clock Wipes and Matrix Wipes </li></ul></ul></ul><ul><ul><ul><li>Implements some of the non-SMPTE Transitions </li></ul></ul></ul><ul><ul><ul><ul><li>pushWipe [n] slideWipe [y] and fade [y] </li></ul></ul></ul></ul><ul><ul><li>Internet Explorer v6 </li></ul></ul><ul><ul><ul><li>XHTML implements the SMIL 2.0 Inline Transitions Module </li></ul></ul></ul><ul><ul><ul><li>Smaller sub-set of SMPTE transitions </li></ul></ul></ul><ul><ul><ul><li>Supports use of CSS Filters and Transitions </li></ul></ul></ul>
  4. 4. 9.3 <transition/> element <ul><li>Use with clients that implement the SMIL 2.0 Language Profile Basic Transition Module </li></ul><ul><ul><li>RealONE and GRiNS Player </li></ul></ul><ul><li><transition/> elements are defined in the in the SMIL document <head> </li></ul><ul><li>Include after the <layout> section </li></ul><ul><li>Each transition must have a unique ID </li></ul><ul><ul><li>Create a pro-forma file with pre-defined transition filters </li></ul></ul><ul><ul><li>Name transitions using the SMPTE codes </li></ul></ul><ul><li>Use the type and subtype attributes to define the transition </li></ul><ul><li>Apply transition to element with: </li></ul><ul><ul><li>transIn - applied at the beginning of the elements duration </li></ul></ul><ul><ul><li>transOut - applied at the end of the element’s duration </li></ul></ul><ul><ul><li>Neither attribute extends an elements duration </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>RealONE Image transitions Video transitions </li></ul></ul><head> … </layout> <transition id=“slowfade” type=“fade” subtype=“crossfade” …/> … <img id=“img1” src=“image_file” transIn=“slowfade” …/> </smil>
  5. 5. 9.4 Modifying <transition/> ’s <ul><li>Default duration is 1 second </li></ul><ul><ul><li>Change duration with dur attribute </li></ul></ul><ul><li>Default value is forward </li></ul><ul><ul><li>Change direction with forward or reverse attributes </li></ul></ul><ul><li>Limit extent of transition with </li></ul><ul><ul><li>startProgress and endProgress </li></ul></ul><ul><ul><li>Scale of 0.0 (0%) to 1.0 (100%) [0.4=40%] </li></ul></ul><ul><li>Repeat transition </li></ul><ul><ul><li>horzRepeat and vertRepeat attributes </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>Reverse direction , endprogress and repeated transitions </li></ul></ul><head> <transition id=“ smpte_code ” type=“ type_of transition ” subtype=“ sub_type ” dur=“ nn ” direction=“reverse”endProgress=“ n.n ” hozRepeat=“ n ” vertRepeat=“ n ”…/> … <img id=“img1” src=“ image_file ” transIn=“ smpte_code ” …/> … </smil>
  6. 6. 9.5 <transitionFilter> <ul><li>Used with XHTML+TIME clients </li></ul><ul><li>Applied to any element with renderable content and layout </li></ul><ul><ul><li>images, video, text </li></ul></ul><ul><ul><li>Only exceptions </li></ul></ul><ul><ul><ul><li>XHTML form select and option elements </li></ul></ul></ul><ul><ul><ul><li>tr , tHead , tBody and tFooter elements </li></ul></ul></ul><ul><li>Defined and applied in two ways </li></ul><ul><ul><li>As a child of an element </li></ul></ul><ul><ul><li>Using the targetElement attribute </li></ul></ul><ul><li>Each transitionfilter must have a unique ID </li></ul><ul><li>Can only be applied to a single element </li></ul><ul><ul><li>targetElement attribute </li></ul></ul><ul><li>Use the type and subtype attributes to define the transition </li></ul><ul><li>Examples </li></ul><ul><ul><li>Image transitions , video transitions , text transitions </li></ul></ul>
  7. 7. 9.6 Modifying <transitionFilter/> <ul><li>Default duration is 1 second </li></ul><ul><ul><li>Change with the dur attribute </li></ul></ul><ul><li>Default direction of transition is in </li></ul><ul><ul><li>Use mode attribute to define “in” or “out” </li></ul></ul><ul><li>Limit the extent of progress with three attribute values </li></ul><ul><ul><li>from, to and by </li></ul></ul><ul><li>Cannot repeat transition across an elelment </li></ul><ul><li>Examples </li></ul><ul><ul><li>progression with from and to attributes </li></ul></ul>
  8. 8. 9.7 Text Transitions: Rendering Bugs <ul><li>Some text transitions do not render well </li></ul><ul><ul><li>An example of the problem </li></ul></ul><ul><li>Poor visual quality for the duration of transition </li></ul><ul><li>Suggestions: </li></ul><ul><ul><li>Avoid push and slide wipes </li></ul></ul><ul><ul><li>Use fades, clock or iris wipes to bring in text </li></ul></ul><ul><ul><li>Set a background colour for the text using CSS </li></ul></ul><ul><ul><li>Organise text using block element of <div> </li></ul></ul><ul><ul><li>Try using animation rather than transitions </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>Text with transitions and animation applied </li></ul></ul>
  9. 9. 9.8 Review <ul><li>Use of SMIL 2.0 transitions makes presentations more professional </li></ul><ul><li>Not available in SMIL 1.0 clients </li></ul><ul><ul><li>QuickTime and RealPlayer G2/8 </li></ul></ul><ul><li>By default elements have no transitions applied </li></ul><ul><li>Wide range of transitions available </li></ul><ul><li>Many based on the SMPTE standards </li></ul><ul><li>Attributes used to customise transitions effects </li></ul><ul><li>XHML+TIME clients can also use CSS transitions (Dynamic HTML) </li></ul><ul><li>Definition and application differ according to client implementation </li></ul><ul><li>Some text transitions in IEv6 can be problematic </li></ul>

×