You have your Director movie all ready, and now you want to put it on your server for all the world to see. Here is what you need to do, and this chapter explains it all in the following:
To install Afterburner, open the Shockwave folder, and double-click the file named aftrbrnr.exe. This installs Afterburner on your system. The process automatically installs all the Shockwave drivers (Freehand, Director, and Authorware) and asks if you're using the Netscape or Internet Explorer browsers.
Activate Afterburner by double-clicking it, then locate the Director movie that you want Afterburner to compress. When selected, click "OK" to save it along with the name you've chosen. The Afterburner process does not change the original movie but makes a compressed copy of it. Click "OK." You will then see a graphic representation of the progress Afterburner is making on compressing your movie. Then Afterburner closes.
There are a couple of software packages on the market that let users create Web pages without knowing HTML in a WYSIWYG (What You See Is What You Get) environment. One is Macromedia's Backstage Designer, and the other is SoftQuad's HoTMetaL Pro 3. A little later in this chapter, you will see examples of how to do this.
For now, this covers the HTML involved because these two programs do not support all the available options that can accompany your movie (none at the time of this writing do). This is easy for those of you who are familiar with the HTML language and editing HTML documents by hand. Those who aren't so familiar need not despair; the additional options aren't necessary for your movies to work, but they do give you more control as to how the end user interacts and sees the movie.
The markup for inserting a compressed Director movie (*.DCR) into a Web page is as follows:
<EMBED SRC="path/mymovie.dcr" WIDTH="n" HEIGHT="n"
TEXTFOCUS="n"></EMBED>
For the Width and Height parameters, enter the exact size of your movie. Entering a different size results in either a cropped movie, or a crashed or locked-up Web browser.
The TEXTFOCUS argument is
optional. It is used to tell the browser with the installed Shockwave
plug-in when to accept input from the user with respect to the
Shockwave movie when the HTML document is being loaded. The available
parameters for TEXTFOCUS
are:
| Action | |
| This is the setting that Shockwave defaults to if the TEXTFOCUS argument is not used. This tells Shockwave not to accept input from the keyboard until the user clicks anywhere on the movie. | |
| Shockwave responds to keyboard input as soon as the movie loads. | |
| Shockwave ignores all input from the keyboard. |
| Note |
These commands apply only to the movie being loaded and won't affect the Web page itself. |
For example, suppose that you have a compressed Director movie named header.dcr. The movie is 200 by 45 pixels in size. Also, you want the movie to respond from user input as soon as it has finished loading. Finally, the movie is located in the same directory that the document it's embedded into resides. The HTML for what has just been described looks like this:
<EMBED SRC="header.dcr" WIDTH="200" HEIGHT="45" TEXTFOCUS="onStart"></EMBED>
In another example, suppose that you have the same movie with the same dimensions. This time, however, you want to put the movie in a directory called "shockedstuff" that is one directory up from the directory where the HTML document it is a part of resides. Also, you want to use a TEXTFOCUS setting of "onMouse." The HTML would look like this:
<EMBED SRC="shockedstuff/header.dcr" WIDTH="200" HEIGHT="45"> </EMBED>
Note the absence of the TEXTFOCUS argument. If TEXTFOCUS is absent, Shockwave will assume the default parameter for that argument, which is "onMouse."
You may even control which palette the movie uses, either its own or the system palette via HTML. This is something that should be used with caution, though, because forcing the Shockwave movie to use its own palette maps the entire display to that palette, thereby disrupting the display if a custom palette is being used.
The HTML for controlling the palette is a simple argument added within the <EMBED> tag. Here is an example:
<EMBED SRC="header.dcr" HEIGHT="200" WIDTH="45" PALETTE="background"></EMBED>
Specifying PALETTE to equal "background" runs the Shockwave movie using the system's palette. Replacing "background" with "foreground" forces the movie to use its own palette and consequently forces the entire display to use the movie's palette as well. If you plan on using multiple Director movies within a single HTML document, you're better off not playing with the PALETTE argument. In the absence of the PALETTE argument, Shockwave assumes the default setting, which is "background."
There are a few packages on the market that allow for the integration of Shockwave and other multimedia objects within the program itself, instead of creating a Web page, then firing up a text editor to add the specific HTML. It seems only natural, then, to talk about Macromedia's Backstage Designer. Backstage Designer allows for the creation of Web pages in a WYSIWYG environment, without the need to view your Web site in an external viewer.
Another application, from SoftQuad, is HoTMetaL Pro 3. This package offers the same feature set as Backstage Designer but with added support for Netscape Extensions that are Netscape-specific HTML. It even supports Netscape Frames, an impressive feature. This is noteworthy because it is possible to have a Director movie with a number of links targeting any number of frames through Director's Net-specific Lingo, discussed in chapter 13, "Internet Lingo for Shockwave."
Along with running through Backstage Designer and HoTMetaL Pro, you'll also learn what to do if someone uses a browser that doesn't recognize Shockwave. This is referred to as "Catering to other browsers."
A demo copy of Macromedia's Backstage Designer is on the CD-ROM in the folder entitled, "Backstage." Double-click the Setup.exe file to begin the installation process and follow the directions.
Now Backstage Designer is booted up (Figure 3.1).
Figure 3.1 : Backstage Designer.
Click the "Insert Netscape Plug-In" icon (figure 3.2).
Figure 3.2 : Select the "Insert Netscape Plug-in" icon.
Backstage then displays an image that represents a plug-in that you wish to add to your Web page. Double-clicking the icon gives you the Netscape Plug-In Properties dialog box, as shown in figure 3.3, which is where you specify the kind of plug-in you wish to use. This image will always be present even after you embed your Shocked movie because Backstage Designer is incapable of displaying embedded objects. Actually, there are no editors available that can display Shockwave movies, but after you are done, the image that represents the Shocked file will be the same dimensions as the file itself so that you at least have an idea of its placement. Figure 3.3 shows what the representative image looks like.
Figure 3.3 : Backstage Designer inserts an image that represents the movie that you want to embed.
Under "Plug-In Source" (figure 3.4), select "Browser" and locate the *.DCR file you wish to use (your Director file that you have compressed with Afterburner and that will have the DCR extension). After your file has been selected, Backstage automatically inserts the dimensions of the movie into the appropriate fields.
Next, click the Custom tab, as shown previously in figure 3.4. Look at the "Alternate Content" section (figure 3.5) and click in the "Image Source" box. Locate the file you want to use as the alternate image for your movie, should someone happen to view your site without support for the Shockwave plug-in. The appropriate dimensions for your alternate image are placed automatically into your Web page, even though Backstage does not show you the information. You can ignore the rest of the parameters in the Netscape Plug-In Properties dialog box.
Open HoTMetaL Pro by double-clicking its icon. To start on a new document, select "FILE" then "NEW." Next, save the new document in the directory that contains the Shockwave movie that you wish to add (figure 3.6).
Figure 3.6 : HoTMetal Pro Version 3.0.
The first thing you may notice is that HoTMetaL displays icons on the screen that represent HTML tags. As your work progresses, you may wish, at some point, to turn off this feature. To do so, simply press "CTRL+W." Repeating this action toggles the screen back and forth. If you wish, you may continue editing with the "View Tags" (also available from the "VIEW" drop-down list) option off. It is much easier to insert markup, though, with "View Tags" on.
Next, let's insert the <EMBED> tag so that we can insert a Shockwave movie into our Web page. To do so, select the PARAGRAPH element icon from the tool bar. Then, while the cursor is within the <P></P> tags, select either "Markup," then "Insert Element" or press "CTRL+I." You are greeted with HoTMetaL's Insert Element dialogue box. Scroll down the list and locate the element called "EMBED" (Figure 3.7).
Figure 3.7 : HotMetal Pro's Insert Element dialog box.
Double-clicking the "EMBED" element inserts it.
Next, you need to select the director movie to use. To do so,
right-click the <EMBED>
tags and select "Element Attributes."
| Tip |
Right-clicking any element in HoTMetaL Pro gives you a number of options associated with that element. |
The resulting dialog box has a number of options relating to embedded objects (Figure 3.8). You need only concern yourself with the "SRC" (source), "HEIGHT," and "WIDTH," as these are required parameters.
Figure 3.8 : Embed Attributes.
At this point, because you already saved the document in the same directory as the Shockwave movie you are about to insert, you need only type in the name of the movie in the "SRC" field. Type the "Height" and "Width" parameters into their respective fields, then select "OK."
Unlike Backstage Designer, HoTMetaL does not insert an icon that represents the Shockwave movie. Instead it does something that is a little more practical. Because it's considered to be good form to cater to browsers that do not support Shockwave, HoTMetaL Pro places the alternate image, when you specify one, where the Shockwave movie would be. At that point, you may apply a Server-Side and/or a Client-Side Image map to the alternate image using HoTMetaL's Image Mapping option (available by right-clicking any image).
To specify an alternate image for your movie, you must first insert the <NOEMBED></NOEMBED> tags by placing the cursor to the right of the <EMBED></EMBED> icons and then pressing "CTRL+I." The "Insert Element" dialog will then pop up, allowing you to scroll down to locate the "NOEMBED" tag. Insert it by double-clicking. Your screen should now look like figure 3.9.
Figure 3.9 : The EMBED and NOEMBED tags.
Place the cursor in between the <NOEMBED></NOEMBED> tags, if it is not already there, and then select the "Image" button from the tool bar (figure 3.10).
Figure 3.10 : The Insert Image button.
If your alternate image is in the same directory as your HTML document and Shockwave movie, you need only insert the name of the image in the "Image Field." You may also insert alternate text, height, and width information for the image into the appropriate fields as well. When you are done, select "OK."
Now that your alternate image is in place, you may add a Clickable Image Map in the form of either a Client-Side or Server-Side Image Map (both are ideal). If your Shockwave movie is being used as a navigation tool, then your alternate image, which could be a screen capture of the movie, needs to have these image maps applied to it.
HoTMetaL Pro 3 makes it very easy to add image maps. Merely right-click your image, then select "Image Mappings" (Figure 3.11).
An image map editor then appears (figure 3.12).
Figure 3.12: HoTMetal Pro's integrated image map editor.
Simply click an area tool such as the rectangle tool and click and drag an area (figure 3.13) that you would like to be a link.
When you let go of the mouse button, you will be given an opportunity to insert the destination of the link in the form of an absolute or relative URL, as shown in Figure 3.14.
Click "OK" and then select whether you wish to use a Server-Side Image Map (ISMAP), a Client-Side Image Map (USEMAP), or both. In this example, as illustrated in figure 3.15, we are using a Client-Side Image Map. Deselect the ISMAP option so that's the case. That's it, you're done!
When using Server-Side Image Maps, check with your server administrator about what format the generated *.map files need to be in (CERN or NCSA) and where the CGI (Common Gateway Interface) program is that takes care of image mapping.
Also, older browsers do not recognize the "USEMAP" attribute (Client-Side Image Maps) so if you wish to define multiple hot areas on your image, definitely use "ISMAP" (a Server-Side Image Map). Netscape 2 and above, Enhanced Mosaic, and Internet Explorer are a few that do.
The plug-in for Shockwave for Director is included on the CD-ROM. To install the plug-in, open the Shockwave folder and double-click the file entitled sw1b2b32.exe and follow the directions. If you're running Netscape, you have to restart the program for the changes to take effect.
Even though you've been through a couple of examples of how to Shock a Web page, I'm sure you've noticed that in both cases, an icon representing your Director movie was placed in your Web page and not the actual Director movie itself. This may seem odd in a supposedly WYSIWYG environment. These packages are unable to play Director movies and are meant solely as a tool to make it easier to Shock a page without the need to do so through a text editor. So, in order to see how it actually works, you need to preview your Web page in Netscape. At this point, it is not necessary to upload your files to a server to preview them. Simply boot Netscape, click "File" and then "Open File," and locate the document that has the embedded movie in it.
It is a good rule of thumb to view all your HTML documents in an actual Web browser no matter what method of creating them you end up using. The programs mentioned will give you a good idea of what your page will look like, but they are not exact. Different Web browsers put different amounts of space between different HTML elements. A Web page in Backstage Designer will look slightly different than in Netscape, which will in turn look slightly different in Mosaic and in Microsoft's Internet Explorer.
Before you can view a Shocked site from your server, you must first be sure that the MIME (Multipurpose Internet Mail Extensions) type has been set for the compressed Director file so that the server will handle it properly when it is called. If you are unfamiliar with how to proceed or are not familiar with UNIX or your server in general, let the server administrator do the following for you.
For UNIX-based Web servers, the following MIME types need to be added:
application/x-director dcr
application/x-director dir
application/x-director dxr
Alternatively, if there is an application on the server that registers MIME types, the following information is required:
mime type: application
sub type: x-director
extensions: dcr, dir, dxr
You may have noticed that two of the extensions in the preceding paragraphs were DIR and DXR. DIR, being the native Director format, can be opened in Director and edited. The DXR format is a protected movie that can be played, but not opened in Director. These file types, once the proper MIME types have been set, will work exactly like the compressed DCRs except that they will not benefit from Afterburner compression and will consequently take longer to download.
For Macintosh-based Web servers, the MacHTTP.config file needs to have the following lines added:
BINARY .DXR TEXT * application/x-director
BINARY .DCR TEXT * application/x-director
If you're using WebSTAR server software on a Macintosh server, do the following:
If you intend to provide uncompressed DIR or DXR Director files, repeat the process for each of the file extensions.
There are a variety of shareware FTP (File Transfer Protocol) packages on the Web that allow you to transfer files to your server. If your PC runs Windows 95 and you're familiar with a few simple UNIX commands, you may select Start, Run, and then type the following:
ftp www.myserver.com
where "myserver" is your URL. Press Enter. You will then be asked for your user name and password. A DOS-like window will pop up. This is where you type in the commands for navigation, similar to DOS. From there, navigate your way to the directory where you would like to place your files and use the PUT command to begin transferring your files (remember to change the method of transfer to binary). Typing help gives you a list of UNIX commands (assuming your server is a UNIX box). If all this is unfamiliar territory, download something that has a GUI (Graphical User Interface) such as the programs mentioned in the following paragraphs.
A really good FTP package for PCs can be downloaded via your Web browser from various sources, such as:
http://www.jtec.com/
http://www.windows95.com/apps/ftp.html#wsftp
You can download a shareware FTP package for the Mac called Fetch 3.0.1 from the following address:
http://wwwhost.ots.utexas.edu/mac/index-by-date.html
http://wwwhost.ots.utexas.edu/mac/internet-ftp.html#fetch-301
Whenever you transfer files to your Web server, be sure to send the files as binary. Sending as ASCII renders the files useless!
Now that your files are on your Web server, it's time to test the performance of the page. When evaluating the time that it takes to download the page, ask yourself if the average user would wait for your Director movie to come up. Does the movie need to be as large as it is? Can it serve its purpose if some elements are removed to make it smaller? Is there information on the page for visitors to look at while they are waiting? If the movie contains some kind of navigational links in it, are they replicated somewhere else in the page so they can go to another page on your site instead of leaving if they get impatient?
Of course, the average users are probably willing to wait a little longer for a game to download, or for something else just as interesting, if they know that what they're waiting for is going to be worthwhile. So, in that respect, trying to decide whether or not something is going to take too long to download is a subjective thing. Some people would wait, and others might not.
It also helps to test the page in a real-life situation. If you work for a company that has a super-fast T1 line to the Internet right in the office, then testing with that kind of connection would be pointless. Jump on a machine that has your everyday dial-up connection and hardware the average user might have.
Finally, some people don't realize that once they have viewed a Web site, it has been cached on their system. This means that the next time the site is viewed, it won't take as long because the Web browser looks on your computer for the images and such, instead of downloading them all over again from the Internet. This may seem obvious, but I have actually seen a person giving a demonstration on Shockwave without realizing this simple fact. He went on to inform the audience that his 170K movie took only three or four seconds to download when, in fact, it was cached on his computer, having been downloaded weeks before.
If there's one constant on the Internet, it's that it's always in a state of flux. Change is the norm as new technology and new markup appear. Therefore, Web-browser developers are constantly updating their software to take advantage of the latest and greatest, which is a time-consuming and costly task. As a result, there are many browsers in use that will undoubtedly be unable to view your Shockwave masterpiece. What they see, more often than not, though, is up to you.
The previous sections on using Backstage Designer and HoTMetaL Pro showed you how to place an image in place of a Shockwave movie in the event that the movie was not recognized by a browser. You've learned how to do this in a WYSIWYG environment, so let's see what the HTML looks like.
The <EMBED></EMBED> tags allow for <NOEMBED></NOEMBED> tags to be placed within them. Browsers that recognize <EMBED></EMBED> ignore any information that falls in between the start (<EMBED>) and end (</EMBED>) tags. For example, the following has a Director movie with an alternate image placed between the <NOEMBED></NOEMBED> tags:
<EMBED SRC="my.dcr" HEIGHT="20" WIDTH="20"><NOEMBED><IMG SRC="my.gif></NOEMBED></EMBED>
In the preceding example, a browser that recognizes the markup for embedding an object ignores all the information except that which specifically deals with the embedded object in this case, the Shockwave movie. This includes the <NOEMBED></NOEMBED> and anything that is inside them.
A browser that does not recognize the tags for embedding objects, on the other hand, ignores them. This includes not only the "EMBED" but the "NOEMBED" markup as well. However, because the preceding example includes markup for an alternate image within the "NOEMBED" tags, this information will be displayed in place of the movie.
As it turns out, anything that is placed in between <NOEMBED></NOEMBED> will be displayed in place of your Shockwave movie when viewed with a non-supportive browser. If you want text to be displayed instead of an image that represents the movie, you can do so. More importantly, if your movie is meant to be a control panel of sorts for navigating your Web site, you may place the required HTML for a clickable image map along with your alternate image within <NOEMBED></NOEMBED> for the most seamless workaround possible!
You may want the background of your Web page to match a color within your Shockwave movie. In the past, selecting a specific color meant being able to convert the RGB value of that color to Hexadecimal format. Netscape, and consequently all browsers that support background colors, requires that the color combination be in three sets of two, each set representing Red, Green, and Blue (RRGGBB).
How, then, do you get a two-digit value for any Red, Green, or Blue value that can be as high as 255, which is three digits? If you are on any Windows platform, the answer is simple. Fire up your trusty Windows calculator, type in the first value, then click "HEX." You are then greeted by the Hexadecimal value for that particular value. Next, do the same for the rest of the RGB values, once for Green and once for Blue. Conversely, you may first select HEX, type in the two-digit value from a HEX color, and select Dec (decimal) to receive the three-digit equivalent.
Macintosh users aren't so lucky; however, the Mac OS comes with a very basic calculator, unlike the scientific calculator on the PC side. This apparent shortcoming is easy to surmount because there are numerous sites available on the Internet that will convert your RGB values for you. You can find one excellent source here:
http://www.echonyc.com/~xixax/Mediarama/hex.html
Or you may elect to find a Mac-based program for converting RGB values to HEX. One such utility can be found at this address:
http://www.sci.kun.nl/thalia/guide/color/faq.html#color-pickers
Both Macromedia's Backstage Designer and SoftQuad's HoTMetaL Pro 3 offer easy solutions for selecting colors without the need to manually convert RGB values to HEX. They also take care of all the HTML coding for you so that it's simple to accomplish.
If you're a diehard HTML programmer, or you're curious as to what is involved on the programming side, you can find an excellent FAQ (Frequently Asked Question) on using backgrounds in HTML documents at the following Web site:
http://www.sci.kun.nl/thalia/guide/color/faq.html
In this chapter, you learned how to embed Shockwave movies into Web pages by using several different methods. Either of the programs used in this chapter are capable of accomplishing the tasks at hand.
Backstage Designer is designed for the novice. It completely isolates the user from HTML while giving an option to view the "source code" if you want to edit the page in a basic word processor-like environment. HoTMetaL Pro 3 is meant more for the advanced HTML programmer/designer who wants to see and is not confused by seeing all the HTML on the screen. It also offers increased functionality and much broader support for HTML 3.2 and Internet Explorer-specific extensions.
You also learned how to cater to Shockwave-ignorant browsers, how to send files to your Web server, and what needs to be changed on a Web server before that server is capable of delivering Shocked movies (changing the MIME type):