Previous Lecture Introduction to SMIL 2 • Introduction to W3C and XML • Introduction to SMIL • Writing a SMIL file • Adding Media Objects Martin Halvey • Clipping media files January 2008 • Timing and Synchronising • Layout Today’s Lecture Naming Convention SMIL • More about layout and regions • SMIL DOM follows HTML DOM • Animation • Names are one or more English words concatenated into a single string • User Interaction • A property or method name starts with • Providing metadata for you presentation the initial keyword in lowercase, and • Examples of SMIL in action each subsequent word starts with a capital letter
Region and Layout Region and Layout <head> • We have seen how to declare regions <layout> and a layout <region id="half-center" left="25%“ • Region describes a rectangular area of top="25%" width="50%" height="50%"/> your SMIL file </layout> • Layout groups a number of regions </head> together <body> <img src="photo.jpg" alt="picture of a • But how do we use them? snowman in a blizzard" region="half center"/> </body> Region and Layout Region and Layout • What happens if size of region and Fit values van be used to ensure that a media do not match media object fits into a region, these include • By default media is starts in top left corner, remaining space is in –Slice background colour –Scroll • If object doesn’t fit it isn’t rendered –Fill • There are a number of fit values that –Meet can be used to ensure that an object fits a region
Region and Layout Region and Layout As we have seen with other attributes it • Other than 3-D media objects SMIL is possible to nest regions in SMIL does not have many 3-D capabilities <region id="two-column" width="100%“ • Child regions are rendered on top of height="100%"> ancestor regions <region id="column1" left="0%" top="0%“ • It is possible to override this using z- width="50%" height="100%"/> index <region id="column2" left="50%" • If object have the same z-index, the top="0%" width="50%" height="100%"/> object created later will have a higher </region> position Region and Layout Example Region and Layout Example • Going to create a presentation which <layout> looks like picture-in-picture television <topLayout width=“400px" height=“300px"> <region id="main-video" left="0%" top="0% • Going to use two video sources width="100%" height="100%"> • One will occupy the entire screen <region id="corner-video" left="75%" top="75%” width=“25%" height=“25%" fit="scale“ • The other will be displayed in the soundLevel="0%" /> bottom right corner </region> </topLayout> </layout>
Region and Layout Example Region and Layout Example • Didn’t need any special software <par> <video id=“big-video" src=“big.mpg“ • We can easily change the layout, i.e. alt=“our big video" region="main-video"/> size and position • Don’t need to know the size or duration <video id=“small-video" src=“small.mpg“ of the files alt=“our small video" region="corner- • The files don’t have to be on our server video" end=“big-video.end"/> or machines </par> User Interaction User Interaction • SMIL provides a number of different • Can use the <a> element just like in methods for interacting with users HTML • We will cover basics of hyper linking • As in html it has the attribute href which and click events contains the target URI of the link • Most of this uses the anchor elements • SMIL contains <a> by adding a number that are available of attributes that are unique to SMIL • Can also add alt information to <a>
User Interaction User Interaction The unique attributes include: The unique attributes include: – Show – accesskey – Target – tabindex – External – sourceLevel – destinationPlaystate – destinationLevel – sourcePlaystate – actuate • Play • Stop • pause User Interaction User Interaction <a href="http://www.w3.org/" alt="the World Wide <a href="pause.smil" alt="simple animated Web Consortium"> pause loop" show="new" <text src="w3.txt" alt="a brief of the W3C"/> sourcePlaystate="pause" accesskey="p"> </a> <img src="pause.png" alt="two vertical <a href="second.smil" alt="the next presentation in bars"/> the series" show="replace"> <animation src="credits.svg" alt="the </a> names of the makers of this presentation"/> </a>
User Interaction User Interaction • Possible to divide up media objects to <video src="ads.mpg" alt="a series of ads" link to more than one target dur="01:30"> <area href=http://ad1.com/ begin="00:00" • You can divide the object spatially or end="00:30"/> temporally <area href=http://ad2.com/ begin="00:30" • To divide the object spatially user the end="01:00"/> <area> element <area href=http://ad3.com/ begin="01:00" • <area> takes the same attributes as end="01:30"/> <a>, plus shape and coords </video> User Interaction User Interaction • SMIL presentations can behave like • Mainly use the <a> element just like in GUIs if the appropriate events are HTML handled • However SMIL provides some • SMIL only specifies three events additional attributes • It is not mandatory for players to handle • It is possible to divide a media object these events into more than one target link • The events are • SMIL can handle some user click events – .beginEvent – .endEvent – .repeat
Animation Animation • It is possible to animate media objects The four animation elements in SMIL in SMIL are: – <animate> • Animation in SMIL requires a lot of maths – <animateMotion> – <animateColor> • Using a dedicated editor can alleviate this problem – <set> Each element animates it’s parent • Animation elements are nested within object by manipulating the parent the media object they are animating objects attributes • We are going to use the BasicAnimation module Animation Animation In addition to the timing attributes, Animation for pot falling from window sill animations have a number of other attributes <video src=“pot.mpg" alt=“flower pot"> – attributeName <animateMotion values="0,0; 0,9; – targetElement 0,27; 0,54" calcMode="linear“ – from,to and by dur="4s"/> – values </video> – calcMode
Animation Animation TV set turning off straight away Can use more than one animation on single object <video src="television.mpg" alt=“television"> <video src="television.mpg" alt="the news"> <set attributeName="width" to="0“ <animateMotion values="0,0; 0,3; 0,0; 0,7; 0,0" dur="1s" repeatDur="indefinite"/> begin="5s" dur="indefinite"/> <animateMotion values="0,0; 4,0; 0,0“ <set attributeName="height" to="0“ dur="2s" repeatDur="indefinite"/> begin="5s" dur="indefinite"/> </video> </video> Animation Animation Animation for a TV screen fading to • It is possible to animate media objects black in SMIL <video src="television.mpg" alt="bright • Animation elements are nested within television"> the media object they are animating <animateColor to="#000000“ • The change the value of attributes to dur="10s"/> cause the animation </video> • This can happen over a duration of time and/or a set of values
Recommend
More recommend
