Tutorial 8 - Multimedia

Tutorial 7 - Animation - Tutorial 9 - Cookies

Multimedia covers audio, video and print presentations. Animation is the process of making text and/or graphics to move or appear to move. It does not add content to a webpage but properly used, can be an important attractor of viewers or highlighter of material needing emphasis.

Image Transitions

Image transitions are changes from one image to another. The basic transition is an abrupt switch. If done quickly enough with appropriate shifts in object position you get apparent movement. These images are normally created with either graphics or morphing packages and then sequenced by making a gif animated file or by using a slideshow technique.

More complex transitions such as wipes and curtains are available if you are content to limit viewers to MSIE browsers (actually the images will change - only the fancy effect is lost). The transitions available within MSIE are Barn, Blinds, CheckerBoard, Fade, GradientWipe, Inset, Iris, Pixelate, RadialWipe, RandomBars, RandomDissolve, Slide, Spiral, Stretch, Strips, Wheel, and Zigzag.

Slide Shows

Presentations are linear structured events that focus on transfering facts to the audience in an effective and memorable way. Presentation slide shows enhance this experience with lists and graphics. In some cases interactivity and animation are included. The most commonly used presentation slideshow is PowerPoint_Ž but this program uses proprietary techniques and bulky files. In addition style is intermixed with content in the design process. Many Open Source Code utilities use a combination of CSS and JavaScript to duplicate the functionality of PowerPoint_Ž. Two popular solutions are Meyer's S5 and Raggett's slidy.

A different approach to slideshows is available for those who intend showing non-interactive slides but who need a slick interface with an auto-sequencing timer and perhaps audio for stand-alone kiosk type operation. Herdejurgen's JSViewer and Maricopa College's JClicker emphasise the attractive user look.

As an JavaScript learning experience I developed SlideShow which you may download and modify as needed.

Music is Media

To have multimedia, you must have more than a visual component! And that usually means audio. The usual way of getting music to play in all major browsers is with the embed element like:

<embed src="canyon.mid" hidden="true" loop="true" autostart="true">
</embed>

The problem with the embed element (as well as the object element) is that they are not acceptable within the XHTML recommendation and validators will complain about them being invalid. There is a sneaky solution using JavaScript which actually allows a great deal of flexibility to be added to the use of music or other embed and object applications.

The toggle button example from a previous tutorial has already shown how the content of a div element can be rewritten dynamically. Well the content could be the embed element! By providing an empty div element in the body and an onLoad function to place the embedded sound, you now have a document that verifies but still plays background.

function turnon(entry) {
musicFile="canyon.mid"
text='<embed src="' + musicFile;
text+='" hidden="true" loop="true" autostart="true">';
document.getElementById(entry).innerHTML=text;
}
...
<body onLoad="turnon('musicdiv');">
...
<div id="musicdiv"></div>

Couple this with the toggle button and a second function that turns the audio off (ie autostart="false") and you give the user control of his speakers. Hint: Start with the music off! Use a set of radio buttons to control which tune is played. This is done by making the src="x" attribute a variable which is set by the radio controls. Don't forget to make one of them an OFF button. Add a file selection control so that the user can select any file on the site (or drive if the program is put on a cd).

Click To Print Effect

Suppose you have a page with an image such as a directions map on it. You want the reader to be able to click on the image to print a copy. You can start with the onclick event tied to the image element. It would call the window.print() method to do the actual printing of the page.

<img src="location.jpg" onclick="window.print();">

But what if you only want to print the image and not the rest of the page. This takes a bit more work but mostly a bit of thought. Since window.print() does a whole page, why not put a copy of the image on its own page. You can even scale the image, center it, and add information if needed. A fragment of the second page is:

<script type="text/javascript">
function doit() {
window.print();\\ does the print of this page
top.location.href='first.htm';} \\ returns to original page
</script></head><body onload="doit();">

The only additional component you need besides the two pages is a method of transferring from one to the other. Transferring to another page can be done by setting the top.location.href property

<img src="location.jpg" onclick="top.location.href='second.htm';">

Tutorial 7 - Animation - Tutorial 9 - Cookies