Animating Content

10 Animating Content Applying animation effects

10.1 Using SMIL Animation

Animation elements are placed in the body of the presentation

Animation elements can be placed within an element clip

Change unary clip to binary

Animation elements can be placed within group clips: par , seq and excl

Elements are animated by reference to their ID

Keep animation elements with the clips they operate on

Animation is applied by changing the attribute values of an object

Animation does not change the object itself

10.2 Animation Elements Can be used to set some value of an object/clip with immediate effect <t:set/> <set/> Use to move the object/clip around the presentation area. <t:animateMotion/> <animateMotion/> Used to change the colour of an object/clip from one value to another <t:animateColor/> <animateColor/> Basic animation tag. Attribute set is same across both implementations <t:animate/> <animate/> Description IE v6 RealONE

10.3 <animate/> an object

Identify the element to be animated and the attribute to animate

Multiple attributes are not permitted

Can be applied to:

windows, regions, images, video, brush

Use for horizontal and vertical moves instead of <animateMotion/>

Less CPU intensive

Animate audio for fades in and out

Applied to region element in RealONE

Applied to t:ref , t:media or t:audio in IE v6

Animations can be additive and accumulative

Examples

RealONE: region , video and audio

Internet Explorer v6 video and audio

10.3.1 <animate/> attributes The id of the element that animation is to act on targetElement targetElement Defines how the calculation of the animation is to be applied. Default value is linear calcMode calcMode Sets the duration of the animation dur dur Sets the timing value at which the animation will begin to be applied begin begin Defines the name of the attribute of the targetElement to be animated attributeName attributeName Defines the attribute value that the animation ends at to to List of “;” separated values for use with the animation values values Defines the attribute value that the animation starts from from from Defines a value that the an element attribute is to be increased by by by Animation is applied by adding successive values additive additive Animation is cumulative across repetitions accumulate accumulate Description IE v6 RealONE

10.4 Setting the value of attributes

Without from value the to attribute starts from current value

By adding from :

Initial value is applied to clip

Animation then proceeds from this applied value

Regions cannot be animated in IE v6

Apply animation to the <div> element

<set/> element is non-additive

Does not support accumulate and additive attributes

Has no duration and takes immediate effect

root-layout and top-layout animated with:

Attributes: backgroundColor height width

Regions can be animated using:

backgroundColor bottom height left right soundLevel, top width z-index

Animating z-index creates layering possibilities

10.4.1 Animate attributes (continued)

Animation can proceed using a series of values

Use semi-colons separated list

values=“80%;60%;40%;20%;10%;0%” to fade out audio region

Can be negative, percentages and colour values

values=“red;white;blue;silver;teal”

Animation can to operate by some value

This can be repeated to provide a progression

Examples

RealONE [1] audio fading [2] using by attribute

Internet Explorer v6 [1] audio fading [2] using by

10.5 Animate ref / t:ref Clip Attributes IE animate <div>. Changes the order in which regions are layered. n/a z-index IE animate <div>. Changes the width of the clip. n/a width RealONE animate audio region. Changes volume of audio clip. volume n/a IE animate <div>. Changes the clip bottom offset. n/a top IE animate <div>. Changes the clip right offset. n/a right IE animate <div>. Changes the clip left offset. n/a left IE animate <div>. Changes clips height. n/a height IE animate <div>. Changes offset of bottom of clip from region it is playing in. n/a bottom IE animate <div>. Change background colour of region clip is playing in. n/a backgroundColor Description IE v6 RealONE

10.5 <animateColor/> Changing Colour

Not mandatory for colour animation

Use to distinguish that this is a colour animation

Used to change the colour of:

RealONE: <region/> and <brush/> elements

IE v6: <div> and <span> elements

Change text colours and backgrounds

Produce similar visual effects to fade transitions

Also adds animation

Examples

RealONE region psychedelic!

Internet Explorer [next slide]

10.6 <animateMotion/> Moving Objects

animateMotion

More CPU intentsive for horizontal and vertical motion. [RealONE]

Use only for diagonal motion

Simpler than using two animate elements

Always references 0x:0y of targetElement

Uses values , to , from and by

Defined as comma separated pairs

values=“10,20;20,40”

Additional attributes available with IEv6

autoreverse - plays element in reverse immediately

accelerate - applies acceleration to the element’s timeline

Eases in the element at the end of the animation

Examples

RealONE

Internet Explorer v6

10.7 Review

Three animation elements:

animate animateColor and animateMotion

animate will also do the work of the other two

Animation elements can be used to change the perception of other elements

Visual or auditory

Changing size, colour, location and volume

Animation is effected by manipulating target element attribute values

Manipulations can be done in a variety of ways

from one value to another

Across a range of values

Repeatedly by a number of same sized increments

Animating Content

0 comments

Notes on slide 1

Favorites, Groups & Events