Basic SMIL

SMIL resources

• The official SMIL 2.0 specification
• SMIL tag summary from Real.com

The SMIL skeleton

• view skeleton.smil (won't do anything)
• view source of skeleton.smil
• Surround with <smil></smil> pair
• Use namespace attribute to specify smil 2.0
• comments just like HTML

Creating a basic blue presentation

• view simpleBlue.smil
• view source of simpleBlue.smil
• <layout> is used to house spatial design elements
• <root-layout> describes entire scene
• <root-layout must have height and width attributes
• backgroundColor attribute changes background color

Adding regions

• view addingRegions.smil
• view source of addingRegions.smil
• each <region> tag describes a place content can go on screen
• define position (of region's top left corner) with left and top attributes
• define size with height and width or right and bottom attributes
• measurements can be in pixels (default) or percentages
• background color can be useful in testing
• define and test regions before adding content!

Incorporating images and text

• view imgText.smil
• view source of imgText.smil
• use <par></par> tags to indicate content will be run in parallel
• <img> tag defines an image
• <text> tag defines text
• <rel> is generic; will work with any supported media
• use region attribute to describe where element should go
• use duration attribute to describe how long element should be there

Modifying the text

• view modifyText.smil
• view source of modifyText.smil
• text can be directly entered into SMIL
• use "data:," (must include colon and comma)
• No spaces are allowed in text!
• Replace all spaces with "%20"
• Text can be modified with param tags
• params can modify font size, color, other characteristics

Generating a sequence

• view seq.smil
• view source of seq.smil
• place <par> elements inside a <seq></seq> pair
• you can also nest <seq> inside <par>

Improving the presentation

• view improve.smil
• view source of improve.smil
• Use <meta base> tag to simplify web delivery
• Use fit attribute of region to improve how media fits inside regions
• Use regPoint and regAlign attributes of media clips to center clips inside regions