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

SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

  • Upload
    lynhu

  • View
    215

  • Download
    2

Embed Size (px)

Citation preview

Page 1: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

Digital Multimedia, 2nd editionNigel Chapman & Jenny Chapman

Chapter 15

This presentation © 2004, MacAvon Media Productions

SMIL and SVG

Page 2: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 3: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 4: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 5: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 6: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 7: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 8: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 9: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 10: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 11: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 12: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 13: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 14: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 15: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 16: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 17: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 18: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 19: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 2004, MacAvon Media Productions

15

Rectangles

Element name Attributes Notes

rect

x coordinates of top left cornery

width dimensions of rectangleheight

519

Page 20: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 2004, MacAvon Media Productions

15

Circles

Element name Attributes Notes

circle

cx coordinates of centrecy

r radius

519

Page 21: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 2004, MacAvon Media Productions

15

Ellipses

Element name Attributes Notes

ellipse

cx coordinates of centrecy

rxx and y radii

ry

519

Page 22: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 2004, MacAvon Media Productions

15

Lines

Element name Attributes Notes

line

x1

coordinates of end points

y1

x2

y2

519

Page 23: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 24: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 25: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 26: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 27: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 28: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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

Page 29: SMIL and SVG - Montana State University...... circle, ellipse, line, ... Element name Attributes Notes circle cx coordinates of cy centre ... • SVG could be used as an implementation

© 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