With your keyframes all rendered, it’s time to create the web page that will hold your animation. This consists of three steps:
- Build the URL required to load whoosh and give it information about your animation.
- Assemble the HTML code needed to use that URL.
- Insert that HTML into a web page.
Then you can upload everything to your web site.
Building the whoosh URL
This URL contains all the information whoosh needs to load the keyframes for your animation and any other options you may want. This URL will look basically like this:
/path/to/whoosh.swf?option1=value1&option2=value2…
We will look at each piece separately.
/path/to/whoosh.swf?option1=value1&option2=value2…
The first part of the URL includes the path to the whoosh.swf file somewhere on your web site. If you are certain the whoosh.swf file will always be in the same folder as the web page, you may leave the /path/to/ out. If you are using the free version of whoosh, this will be /path/to/whoosh-free.swf instead.
/path/to/whoosh.swf?option1=value1&option2=value2…
A ? symbol separates the whoosh filename from your options.
/path/to/whoosh.swf?option1=value1&option2=value2…
Each of the options has a name and a value, separated by an = sign. A full list of options is available. The most important ones are basename (which provides the name of your animation image files, without the number) and last, which gives the number of the last frame.
The value of each option should not include any punctuation or spaces, as these are not valid when used in a URL. Instead, you should encode them. Use %20 for spaces, %22 for quotation marks, %2C for commas, %2E for periods, and %2F for slashes. (This is not a problem with whoosh, but is part of how HTTP works.)
/path/to/whoosh.swf?option1=value1&option2=value2…
Use this to separate each option from the others. Do not include this after the last option. (Note that the amp; part is not a mistake; it should be present to prevent the web browser from seeing the & and trying to interpret the following option letters as an HTML entity. If you don’t know what that means, don’t worry, just include it exactly as showing above.)
/path/to/whoosh.swf?option1=value1&option2=value2…
Don’t actually include … at the end of the URL. This just means you can list as many options as you want, as long as they’re separated by &.
Assembling the whoosh HTML
Here is a template you can use:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="[movie width]" height="[movie height]"
>
<param name="movie" value="[whoosh URL]">
<param name="bgcolor" value="[background color]">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
width="[movie width]" height="[movie height]"
src="[whoosh URL]"
bgcolor="[background color]"
quality="high"
allowscriptaccess="samedomain"
>
<noembed>[alternative HTML]</noembed>
</embed>
</object>
Within this HTML you will need to substitute your own information for the highlighted portions. The width and height are given in pixels. The background color is used as the background for the movie until an image is loaded, and is given as an HTML color (e.g. #ffffff for white). The alternative HTML is what will be displayed to users who do not have Flash installed; you can provide a text message or an alternative image.
Note that except for the alternative HTML, all of the information has to be inserted into two different places in the above HTML. One set is used for Internet Explorer, the other set is for every other browser.
Inserting the HTML Into a Web Page
If you’re familiar with writing web pages, you won’t need any help creating a web page. But if you’ve never done it before, here is a template you can use:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title>[movie title]</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, div, object, embed: { margin: 0px; padding: 0px; }
</style>
</head>
<body bgcolor="#666666">
<div align="center">
[insert the whoosh HTML from above here]
</div>
</body>
</html>
Fill in your movie title and the HTML block created in the previous step, and save it with a filename ending in .html
Upload to Your Web Site
You will need to place all the necessary files on your web site in order for your movie to be viewable. That includes your whoosh.swf file (whoosh-free.swf if you’re using the free version), your keyframe images, your audio file (if you are using one), and your web page itself (the .html file).
Once you’ve uploaded your files, you should view the page to make sure the animation loads properly. If whoosh can’t load the images or audio, it will report that.
