Examples for Chapter 6

Animation

Normally, we would not present three such different animations together on a single page. They are only here so you can see the examples from the book in motion.

Figure 6.4

Please note that this example of an animated button is presented only for illustrative purposes connected with the text in the book. We do not recommend the use of throbbing or flashing buttons in Web page design.

Figures 6.5 and 6.6

Download the animated GIF files. Zip archive, 784kB.

Open these files in ImageReady or import them into some other suitable application to see how the animation is made up of still image frames.

Markup

In the following code fragments, ffff represents the file name, wwww the width and hhhh the height of the movie. The text textual alternative should be replaced by a suitable alternative for screen reader users and other people who cannot play the movie or choose not to. We have provided two versions of the markup for each type of movie: one that uses nested object elements, according to the XHTML specification, and one that uses an embed element inside an object element, to cope with IE6's botched implementation of nested objects. Note that this latter form is not valid XHTML, and should only be used as long as compatibility with IE6 remains important.

These fragments only show a minimum set of parameters, for expository purposes. For practical use, you will probably find that your Web authoring application or editor provides some way of automatically including the code for embedding a movie, with additional parameters that you can set. This will usually be a better way of doing the job than copying and pasting the code from here.

Flash

Nested Objects

<object
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
 width="wwww" height="hhhh">
  <param name="movie" value="ffff.swf" />
  <param name="quality" value="high" />
  <object data="ffff.swf" 
    type="application/x-shockwave-flash"
    height="hhhh" width="wwww">
    <param name="quality" value="high" />
	   <p>textual alternative</p>
  </object>
</object>

Embed

<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 width="wwww" height="hhhh" >
  <param name="movie" value="ffff" />
  <param name="quality" value="high" />
  <embed data="ffff" type="application/x-shockwave-flash"
    height="hhhh" width="wwww" quality="high"
     alt="textual alternative" />
</object>

QuickTime

Nested Objects

<object
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  width="wwww" height="hhhh">
  <param name="src" value="ffff.mov" />
  <param name="autoplay" value="true" />
  <param name="controller" value="true" />
  <object data="ffff.mov" type="video/quicktime"
  width="wwww" height="wwww">
    <param name="autoplay" value="true" />
    <param name="controller" value="true" />
    <p>textual alternative</p>
  </object>
</object>

Embed

<object 
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  width="wwww" height="hhhh">
  <param name="src" value="ffff.mov" />
  <param name="autoplay" value="true" />
  <param name="controller" value="true" />
  <embed data="ffff.mov" type="video/quicktime"
    height="hhhh" width="wwww"
    autoplay="autoplay" controller="controller"
    alt="textual alternative" />
</object>

Windows Media Video

Nested Objects

<object
  classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
  width="wwww" height="hhhh">
  <param name="url" value="ffff.wmv" />
  <object data="ffff.wmv" type="video/x-ms-wmv"
  height="hhhh" width="wwww">
    <p>textual alternative</p>
  </object>
</object>

Embed

<object
  classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
  width="wwww" height="hhhh">
  <param name="url" value="ffff.wmv" />
  <embed data="ffff.wmv" alt="textual alternative" />
</object>