Upload
lynhu
View
218
Download
2
Embed Size (px)
Citation preview
Digital Multimedia, 2nd editionNigel Chapman & Jenny Chapman
Chapter 15
This presentation © 2004, MacAvon Media Productions
SMIL and SVG
© 2004, MacAvon Media Productions
15
• 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
SMIL
498–499
© 2004, MacAvon Media Productions
15
<?xml version="1.0" encoding="UTF-8"?><! DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN""http://www.w3.org/2001/SMIL20/SMIL20.dtd"> <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> … </head> <body> … </body></smil>
Document Structure
© 2004, MacAvon Media Productions
15
• 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
Document Head
499–500
© 2004, MacAvon Media Productions
15
• 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
Synchronization Elements
500–501
© 2004, MacAvon Media Productions
15
• 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
Media Elements
501
© 2004, MacAvon Media Productions
15
<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"/> <img src="images/image1.jpeg" type="image/jpeg" dur="15s"/> </seq> <audio src="sounds/sound1" type="audio/aiff" begin="5s" end="20s"/> </par></body>
501
© 2004, MacAvon Media Productions
15
• 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)
Duration
502–503
© 2004, MacAvon Media Productions
15
• 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
Syncbase Values
503–504
© 2004, MacAvon Media Productions
15
• 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
par Elements
504–505
© 2004, MacAvon Media Productions
15
• 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
Time
505–506
© 2004, MacAvon Media Productions
15
• 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"
Synchronization
506–507
© 2004, MacAvon Media Productions
15
• 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
Links
508–511
© 2004, MacAvon Media Productions
15
• 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
Image Maps
511–512
© 2004, MacAvon Media Productions
15
• 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
Animation
512–516
© 2004, MacAvon Media Productions
15
• 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
SVG
517
© 2004, MacAvon Media Productions
15
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
Document Structure
517
© 2004, MacAvon Media Productions
15
• 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)
Shapes
518–519
© 2004, MacAvon Media Productions
15
Rectangles
Element name Attributes Notes
rect
x coordinates of top left cornery
width dimensions of rectangleheight
519
© 2004, MacAvon Media Productions
15
Circles
Element name Attributes Notes
circle
cx coordinates of centrecy
r radius
519
© 2004, MacAvon Media Productions
15
Ellipses
Element name Attributes Notes
ellipse
cx coordinates of centrecy
rxx and y radii
ry
519
© 2004, MacAvon Media Productions
15
Lines
Element name Attributes Notes
line
x1
coordinates of end points
y1
x2
y2
519
© 2004, MacAvon Media Productions
15
• 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" />
Polylines and Polygons
519
© 2004, MacAvon Media Productions
15
• 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
Paths
520–521
© 2004, MacAvon Media Productions
15
• 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
Curves
521
© 2004, MacAvon Media Productions
15
• 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
Gradients
522–524
© 2004, MacAvon Media Productions
15
• 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
Transformations
525–527
© 2004, MacAvon Media Productions
15
• 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
Links
528
© 2004, MacAvon Media Productions
15
• 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
Animation
531–532