Download presentation
Presentation is loading. Please wait.
1
SMIL and SVG Digital Multimedia, 2nd edition
Nigel Chapman & Jenny Chapman Chapter 15 This presentation © 2004, MacAvon Media Productions
2
SMIL Synchronized Multimedia Integration Language
498–499 SMIL Synchronized Multimedia Integration Language Markup language for specifying temporal structure of time-based media productions SMIL 2.0, W3C Recommendation, 2001 Used in RealPlayer G2; supported by QuickTime Defined by an XML DTD
3
Document Structure <?xml version="1.0" encoding="UTF-8"?> <! DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" " <smil xmlns=" <head> … </head> <body> … </body> </smil>
4
Document Head meta elements as in HTML Layout information
499–500 Document Head meta elements as in HTML Layout information SMIL Basic Layout Language or CSS2 Defines size and position of named regions Elements have a region attribute, used to determine the region in which element is displayed
5
Synchronization Elements
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
6
Media Elements animation, audio, img, text, textstream and video
501 Media Elements animation, audio, img, text, 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
7
<video src="movies/m1.mov" type="video/quicktime"/> <seq>
501 <body> <par> <video src="movies/m1.mov" type="video/quicktime"/> <seq> <img src="images/image1.jpeg" type="image/jpeg" dur="5s"/> <img src="images/image2.jpeg" type="image/jpeg" dur="10s"/> type="image/jpeg" dur="15s"/> </seq> <audio src="sounds/sound1" type="audio/aiff" begin="5s" end="20s"/> </par> </body>
8
Duration Use dur attribute to specify duration explicitly
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)
9
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
10
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) repeatCount attribute of any element can be used to make it loop repeatCount = "indefinite" makes it 'fill up' enclosing par
11
Time Two ways of measuring time during playback
505–506 Time Two ways of measuring time during playback e.g. clip1 plays at 15fps, when is clip1.begin+3s? Media time: when playback reaches frame 46 Presentation time: 3 seconds after start of clip1, as measured by an external clock Should be the same, but may not be because of transmission or playback delays
12
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 syncBehaviour = "locked" Soft synchronization – elements have independent clocks Elements may 'slip' but will be played in their entirety syncBehaviour = "canSlip"
13
Links a elements can enclose synchronization and media elements
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
14
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
15
512–516 Animation Primitive animation facility that allows you to interpolate properties of elements animate element uses attributeName 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 targetElement 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 calcMode
16
SVG Scalable Vector Graphics
517 SVG Scalable Vector Graphics Markup language for describing two- dimensional vector graphics Vector graphic shapes, images and text Grouped, styled and transformed Defined by an XML DTD
17
517 Document Structure <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " /DTD/svg10.dtd"> <svg xmlns=" ... </svg>
18
Shapes Each simple shape has its own element
518–519 Shapes Each simple shape has its own element Rectangle, circle, ellipse, line, polyline, 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)
19
Rectangles Element name Attributes Notes rect x
519 Rectangles Element name Attributes Notes rect x coordinates of top left corner y width dimensions of rectangle height
20
Circles Element name Attributes Notes circle cx coordinates of centre
519 Circles Element name Attributes Notes circle cx coordinates of centre cy r radius
21
Ellipses Element name Attributes Notes ellipse cx
519 Ellipses Element name Attributes Notes ellipse cx coordinates of centre cy rx x and y radii ry
22
coordinates of end points
519 Lines Element name Attributes Notes line x1 coordinates of end points y1 x2 y2
23
Polylines and Polygons
519 Polylines and Polygons Elements polyline and polygon have attribute points whose value is a list of points 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="#697FBA" stroke="none" />
24
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
25
Curves Path segments may be Bézier curves
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
26
522–524 Gradients Defined by linearGradient and radialGradient 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
27
525–527 Transformations Any element may have a transform attribute, whose value is a string of transformation specifications Transformation-name(arguments) translate, scale, rotate, skewX, skewY Arguments are offsets, scale factors, angles Use g element to form a group and apply transformations to it
28
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
29
Animation Any element may contain an animate element, as in SMIL
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
Similar presentations
