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

  • Published on
    16-Mar-2018

  • View
    214

  • Download
    2

Embed Size (px)

Transcript

  • 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

    498499

  • 2004, MacAvon Media Productions

    15

    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

    499500

  • 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

    500501

  • 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

    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

    502503

  • 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

    503504

  • 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

    504505

  • 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

    505506

  • 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

    506507

  • 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

    508511

  • 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

    511512

  • 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

    512516

  • 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

    ...

    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

    518519

  • 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

    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

    520521

  • 2004, MacAvon Media Productions

    15

    Path segments may be Bzier 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 Bzier 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

    522524

  • 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

    525527

  • 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

    531532

Recommended

View more >