SMIL and SVG Digital Multimedia 2 nd edition

  • Slides: 29
Download presentation
SMIL and SVG Digital Multimedia, 2 nd edition Nigel Chapman & Jenny Chapman Chapter

SMIL and SVG Digital Multimedia, 2 nd edition Nigel Chapman & Jenny Chapman Chapter 15 This presentation © 2004, Mac. Avon Media Productions

15 498– 499 SMIL • Synchronized Multimedia Integration Language • • Markup language for

15 498– 499 SMIL • Synchronized Multimedia Integration Language • • Markup language for specifying temporal structure of time-based media productions SMIL 2. 0, W 3 C Recommendation, 2001 Used in Real. Player G 2; supported by Quick. Time Defined by an XML DTD © 2004, Mac. Avon Media Productions

15 Document Structure <? xml version="1. 0" encoding="UTF-8"? > <! DOCTYPE smil PUBLIC "-//W

15 Document Structure <? xml version="1. 0" encoding="UTF-8"? > <! DOCTYPE smil PUBLIC "-//W 3 C//DTD SMIL 2. 0//EN" "http: //www. w 3. org/2001/SMIL 20. dtd"> <smil xmlns="http: //www. w 3. org/2001/SMIL 20/Language"> <head> … </head> <body> … </body> </smil> © 2004, Mac. Avon Media Productions

15 499– 500 Document Head • • meta elements as in HTML Layout information

15 499– 500 Document Head • • meta elements as in HTML Layout information • • • SMIL Basic Layout Language or CSS 2 Defines size and position of named regions Elements have a region attribute, used to determine the region in which element is displayed © 2004, Mac. Avon Media Productions

15 500– 501 Synchronization Elements • Compound elements par (parallel) and seq (sequence) •

15 500– 501 Synchronization Elements • Compound elements par (parallel) and seq (sequence) • • • Elements within a par may overlap in time Elements within a seq are displayed sequentially May appear in document body May be nested (par within par or seq, seq within par or seq) May contain media object elements © 2004, Mac. Avon Media Productions

15 501 Media Elements • • • animation, audio, img, textstream and video All

15 501 Media Elements • • • animation, audio, img, textstream and video All empty elements All synonyms for ref (catch-all element for any type of media) • • type attribute used to specify MIME type of actual media data src attribute gives URL of media data © 2004, Mac. Avon Media Productions

15 501 <body> <par> <video src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="movies/m 1. mov" type="video/quicktime"/> <seq> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="images/image 1. jpeg"

15 501 <body> <par> <video src="movies/m 1. mov" type="video/quicktime"/> <seq> <img src="images/image 1. jpeg" type="image/jpeg" dur="5 s"/> <img src="images/image 2. jpeg" type="image/jpeg" dur="10 s"/> <img src="images/image 1. jpeg" type="image/jpeg" dur="15 s"/> </seq> <audio src="sounds/sound 1" type="audio/aiff" begin="5 s" end="20 s"/> </par> </body> © 2004, Mac. Avon Media Productions

15 502– 503 Duration • • Use dur attribute to specify duration explicitly Use

15 502– 503 Duration • • Use dur attribute to specify duration explicitly Use begin and end attributes to specify start and end times relative to enclosing synchronization element • • par: times measured relative to start of the whole par element seq: times measured relative to end of the preceding element (can introduce pauses) © 2004, Mac. Avon Media Productions

15 503– 504 Syncbase Values • • Each element may be uniquely identified by

15 503– 504 Syncbase Values • • Each element may be uniquely identified by giving an element-id value for its id attribute Syncbase value: element-id. begin or element-id. end identify start and end times of element with id = element-id • Can append + or - clock-value to specify offsets from start or end © 2004, Mac. Avon Media Productions

15 504– 505 par Elements • par element may end when first or last

15 504– 505 par Elements • par element may end when first or last enclosed element ends • • • Use endsync attribute to specify first, last (default) or an element-id Use fill attribute to specify what happens to elements within the par which finish prematurely (remove or freeze) repeat. Count attribute of any element can be used to make it loop • repeat. Count = "indefinite" makes it 'fill up' enclosing par © 2004, Mac. Avon Media Productions

15 505– 506 Time • Two ways of measuring time during playback • •

15 505– 506 Time • Two ways of measuring time during playback • • e. g. clip 1 plays at 15 fps, when is clip 1. begin+3 s? Media time: when playback reaches frame 46 Presentation time: 3 seconds after start of clip 1, as measured by an external clock Should be the same, but may not be because of transmission or playback delays © 2004, Mac. Avon Media Productions

15 506– 507 Synchronization • • • Elements within a par may not play

15 506– 507 Synchronization • • • Elements within a par may not play at exactly the same speed Hard synchronization – synchronize to a common clock (match presentation times) May require introduction of delays or dropping of frames sync. Behaviour = "locked" Soft synchronization – elements have independent clocks Elements may 'slip' but will be played in their entirety sync. Behaviour = "can. Slip" • • © 2004, Mac. Avon Media Productions

15 508– 511 Links • a elements can enclose synchronization and media elements •

15 508– 511 Links • a elements can enclose synchronization and media elements • • • Like HTML a elements and XLink attributes, href, show and actuate attributes Effectively has duration of enclosed elements, hence links are time-based Fragment identifiers point to individual elements, hence to points in the timeline • Following link is like fast-forwarding to start point of the linked element © 2004, Mac. Avon Media Productions

15 511– 512 Image Maps • • area elements with shape and coords attributes

15 511– 512 Image Maps • • area elements with shape and coords attributes define hotspots (as in HTML) May also have begin, end and dur attributes, which define temporal regions area elements may appear within the content of media elements May have id attributes, whose values may be used as fragment identifiers For temporal regions, this allows links to points within an element's duration • © 2004, Mac. Avon Media Productions

15 512– 516 Animation • • Primitive animation facility that allows you to interpolate

15 512– 516 Animation • • Primitive animation facility that allows you to interpolate properties of elements animate element uses attribute. Name attribute to specify what is to be animated, from and to attributes to specify start and end values, dur etc to specify time over which animation occurs • • May use target. Element attribute to specify the element whose attribute is animated, or apply to its parent element (by default) Can also specify a set of values and a calc. Mode © 2004, Mac. Avon Media Productions

15 517 SVG • Scalable Vector Graphics • Markup language for describing twodimensional vector

15 517 SVG • Scalable Vector Graphics • Markup language for describing twodimensional vector graphics • • • Vector graphic shapes, images and text Grouped, styled and transformed Defined by an XML DTD © 2004, Mac. Avon Media Productions

15 517 Document Structure <? xml version="1. 0" encoding="utf-8"? > <!DOCTYPE svg PUBLIC "-//W

15 517 Document Structure <? xml version="1. 0" encoding="utf-8"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 1. 0//EN" "http: //www. w 3. org/TR/2001/REC-SVG 20010904/DTD/svg 10. dtd"> <svg xmlns="http: //www. w 3. org/2000/svg">. . . </svg> © 2004, Mac. Avon Media Productions

15 518– 519 Shapes • Each simple shape has its own element • •

15 518– 519 Shapes • Each simple shape has its own element • • • Rectangle, circle, ellipse, line, polygon Each element has its own distinctive attributes for specifying the size and position &c of the shape Common attributes are used to specify stroke and fill colours (stroke, fill attributes) and stroke width (stroke-width) © 2004, Mac. Avon Media Productions

15 519 Rectangles Element name Attributes Notes x coordinates of top left corner rect

15 519 Rectangles Element name Attributes Notes x coordinates of top left corner rect y width height dimensions of rectangle © 2004, Mac. Avon Media Productions

15 519 Circles Element name Attributes Notes cx circle coordinates of centre cy r

15 519 Circles Element name Attributes Notes cx circle coordinates of centre cy r radius © 2004, Mac. Avon Media Productions

15 519 Ellipses Element name Attributes Notes cx coordinates of centre ellipse cy rx

15 519 Ellipses Element name Attributes Notes cx coordinates of centre ellipse cy rx ry x and y radii © 2004, Mac. Avon Media Productions

15 519 Lines Element name Attributes Notes x 1 line y 1 coordinates of

15 519 Lines Element name Attributes Notes x 1 line y 1 coordinates of end points x 2 y 2 © 2004, Mac. Avon Media Productions

15 519 Polylines and Polygons 1. Elements polyline and polygon have attribute points whose

15 519 Polylines and Polygons 1. Elements polyline and polygon have attribute points whose value is a list of points 2. Sequence of coordinate values separated by white space, commas or both • Convention: two coordinates of a point separated by a comma, points separated by space <polygon points="50, 10 66, 10 76, 27 66, 42 50, 42 40, 25" fill="#697 FBA" stroke="none" /> © 2004, Mac. Avon Media Productions

15 520– 521 Paths • • path element's d attribute takes a string of

15 520– 521 Paths • • path element's d attribute takes a string of path data as its value Set of instructions for drawing the path • • M (move to) x, y sets the current position L (line) x, y draws a line from current position to x, y • • l x, y draws the line from the current position to point offset by (x, y) H or h, V or v draw horizontal and vertical lines © 2004, Mac. Avon Media Productions

15 521 Curves • • Path segments may be Bézier curves C followed by

15 521 Curves • • Path segments may be Bézier curves C followed by six values, taken as coordinates of three control points – current point is used as fourth control point (starting point) • • c uses relative coordinates S followed by four values, taken as coordinates of two control points – current point and last direction point of previous segment are missing points. Used to draw segments of smooth Bézier paths © 2004, Mac. Avon Media Productions

15 522– 524 Gradients • • • Defined by linear. Gradient and radial. Gradient

15 522– 524 Gradients • • • Defined by linear. Gradient and radial. Gradient elements, which must have an id attribute Content of gradient elements is a collection of stop elements, each with an offset and stop-color attribute (cf. gradient palette in Illustrator) Use by setting fill attribute of a shape to "url(#gid)", where gid is the value of a gradient element's id attribute • Hence, can define a gradient once and re-use it © 2004, Mac. Avon Media Productions

15 525– 527 Transformations • Any element may have a transform attribute, whose value

15 525– 527 Transformations • Any element may have a transform attribute, whose value is a string of transformation specifications • • Transformation-name(arguments) translate, scale, rotate, skew. X, skew. Y Arguments are offsets, scale factors, angles Use g element to form a group and apply transformations to it © 2004, Mac. Avon Media Productions

15 528 Links • • XLink attributes may be used in SVG documents (with

15 528 Links • • XLink attributes may be used in SVG documents (with suitable namespace declaration) a element with xlink: href attribute works like HTML link • Usually, the content of an a element will be some graphic shape, so the effectis to turn the shape into a hot spot © 2004, Mac. Avon Media Productions

15 531– 532 Animation • • • Any element may contain an animate element,

15 531– 532 Animation • • • Any element may contain an animate element, as in SMIL Changes the value of some attribute of the parent element over time SVG could be used as an implementation language for Web animation (cf SWF) • Generate automatically by some program © 2004, Mac. Avon Media Productions