Tutorial 8 - MultiMedia
MultiMedia adds audio, graphics, video and print presentations. Properly used, these effects can be important viewer attractors or content highlighters.
JukeBoxes and Radios
Jukeboxes and radios play tunes from playlists using media players (eg MediaPlayer or QuickTime). The difference is that a radio continues on to the next song automatically. Radio playlists are often shuffled (random ordered) before starting or after a certain percentage has been played.
Form controls such as a group of radio buttons or a selection list can set a pointer to the music file's URL. The selection can be started with an onchange event or with a toggle button / onclick event. ondblclick is yet another option. A Now Playing xxx message would add a bit of flash!
Constructing a jukebox or radio requires assembling these components:
- a media player object
- functions to access the player's controls
- a GUI for selection/play control
- a playlist database
Here is an example script for a JukeBox
Image Strips and Viewports
Many designs such as advertisement banners can use a slidestrip where several images are displayed as a group. showImg offers non-repeated random image selection from user prepared trays or lists. Trays provide unique groups for a slidestrip. Settings can be made for: clicked image is link (isLink), hovered image pops larger version (isPop), randomization (isRandom) and redisplay of new selection is on timed basis (isTimed). Tray image database entries are of the form image, redirection url, alt value. Document calls define elementName, numberOfImages, folderName [default is none], stripOrientation [default is horizontal], trayName [default is hAds or vAds depending on orientation]. The last three parameters are optional. Images are dynamically written to divisions that can be inserted anywhere in the page using calls like onload="showImg(divId,numImg,folder,dirn,trayName);".
A viewport is an image viewer that allows transition selection by hovering on a related menu item. It is set up similar to a rollover effect with event initiators onmouseover and onmouseout. The onclick event can be added to link to an appropriate page (perhaps full screen view). Viewport.zip is a working example that can be tailored with css and script. Be sure to consult the readme.txt file for setup information.
Transitions and Slide Shows
Image transitions are changes from one image to another. The basic transition is an abrupt switch from one to another. Several methods can be used to make the transition more attractive. These methods include:
- fades using the CSS opacity property.
- multi-browser fades and wipes.
- a Javascript applet using a java fader class.
- sequenced images created from morphing software. Downside:Complexity and filesize bloat.
- MSIE proprietary filters to do transitions such as fades, wipes and curtains. Downside: Limits viewers to MSIE browsers (the images will change - only the effect is lost).
Presentation slide shows are linear structured events that focus on transferring facts to the audience in an effective and memorable way, often enhanced 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 Open Source slideshows including S5, S5 Reload and slidy use a combination of CSS and JavaScript to duplicate the functionality of PowerPoint.
A different approach to slideshows is available for those who are showing non-interactive slides but need a slick interface with an auto-sequencing timer, transitions and perhaps audio for stand-alone kiosk type operations. Maricopa College's JClicker emphasize the attractive user look. My own S3 (Simple Slide Show) can be a start point for those who want to roll their own slideshow.
Charts and TimeLines
Simple bar charts or graphs can be used to show the results of a survey or as a progress bar. Lines are drawn from a database of start, stop, text and color. An extension that would give a better look to the bars is to add shadowing by redrawing with x&y offsets and either a black or lighter shade of the bar color. Other obvious extensions are to generalize the data entry mechanism and to add a vertical drawing option. For cut/paste progress bars, google on javascript progress bars.
A special charting/graphing application is a TimeLine where the origin for each timeline bar is not at a single edge but is based on the start time of an event. Gantt charts also have this requirement but include the complexity that the bars are interrelated.
My simple solution for timelines is to draw timeline bars from a database with fields for start, stop, group, infolink. Styles are set for the chart, header and individual timelines. You can view a demo at Timelines of Cryptology. Both the HTML and the script source can be ripped and reused. A needed extension is popups for events occurring within any lifeline. Another possible extension to the project would be to include Gantt chart dependencies.
An alternative timeline char approach is used by EasyTimeLine which generates an image and an imagemap from supplied data. It scales much better than my program and is very easy to customize but there are some inflexibilities that are inherent in a non-DHTML solution. Currently these include link color selection and inability to use an image as background canvas. But this is a small price to pay for scalability and the ease of use! A more complex charting utility that you can use simply by linking your page and data to is TimeLine.