-by Kelly Murdock
Client-push, server-pull, and GIF animations work okay for Web pages, but they can task the hardware or just be difficult to use. Often your 3D package conveniently outputs an animation as an AVI, an MPEG, or a QuickTime file. It would be nice to have a browser that could handle these video files without having to load a helper application. Well, someone is listening because this is becoming possible through browser plug-ins.
There are many video and animation plug-ins out there, and they are all very new. As a result, they probably won't produce the results you want right away, especially on machines with slower Internet connections. However, many groups are working on solutions-so surely one of them will get it right.
A majority of the available plug-ins work with Netscape's Navigator browser, but Microsoft is working on their own solutions for Internet Explorer. In this chapter, you'll start by looking at a few of the Netscape plug-ins that will enable you to play your 3D animations on the Web:
Once you've looked into the Netscape corner, you'll be moving over to Microsoft's corner and seeing what they have up their sleeves. The biggest Web thing you'll hear out of Microsoft is ActiveX.
Some great tools are coming onto the market that will make it possible to place your amazing 3D animations easily on your Web page, so take a look at them.
There are many plug-ins available for Netscape Navigator. You won't get a chance to look at all of them in this chapter, but if you check out Netscape's Web site, they keep an up-to-date list of available plug-ins:
http://home.netscape.com/comprod/products/navigator/version_2.0/plugins /Âindex.html
Another good source for plug-ins is the Soup's Up E-zine, which can be found at this site:
http://athos.phoenixat.com/scott/plugins.html
All these plug-ins are fairly new, so they haven't been widely used. This chapter will cover a few of the plug-ins that will most likely be valuable to you as you deal with 3D animations on your Web pages.
First, Macromedia's Shockwave is by far the most popular animation plug-in for Netscape. That's because Shockwave movies are created with Director, which is the tool of choice for a majority of multimedia developers.
Macromedia is really pushing the envelope with Shockwave. Not only is there Shockwave for Director, but Shockwave for Authorware and Shockwave for Freehand are also available. In the future, you can probably expect a Shockwave for Extreme 3D to show up, which will enable users to easily publish their 3D content on the Web.
The Shockwave plug-ins are available from Macromedia at this site:
http://www-1.macromedia.com/Tools/Shockwave/Plugin/plugin.cgi
After installing the plug-in, you can view Shockwave movies as
you navigate the Web, but to create Shockwave movies, you need
Macromedia's Director.
Note |
Shockwave is also available as an ActiveX control. This enables Shockwave to be viewed with Microsoft's Internet Explorer. It can be downloaded from Macromedia's Web site. |
To turn your 3D animations into Shockwave movies with Director, you need to import your animation into Director and have it saved as a Shockwave movie. To do that, follow these steps:
Figure 6.2: A Web page with an embedded Shockwave movie.
With Director, it's fairly easy to include 3D Shockwave movies in your Web pages and build interactivity into your movies. This added feature makes Shockwave a lot of fun to play with.
Another plug-in for Netscape Navigator is called Sizzler by Totally Hip Software. This plug-in enables what is known as streaming animation. The benefit of streaming animation is that it begins playing as soon as the animation file begins to download. The file starts in a very low resolution, and the details fill in as the file continues to download.
The Sizzler plug-in can be found at this site:
http://www.totallyhip.com/sizzler/6b_sizz.html
The Sizzler Editor is also available at the Totally Hip Software site. This editor is simple to use and allows you to convert an AVI file or a series of images in DIB format into the SPRITE format that Sizzler reads. Converting an existing 3D animation AVI file is as easy as this:
Do these HTML tags look familiar? The animation will play for any Netscape browser with the Sizzler plug-in installed. A sample Web page using Sizzler animation is shown in Figure 6.3.
Figure 6.3: A Web page with an embedded animation using the Sizzler plug-in.
Totally Hip Software is working on a cel animation/painting program called WebPainter that will let users create their own animations and a larger multimedia creation product called Object Scenario.
Several plug-ins let you embed video files into your Web page; they can be used to play existing 3D animations saved as video clips. Different video formats are now available, including MPEG, AVI, and QuickTime (MOV). Each has its unique strengths, but luckily, there are plug-ins available for each format. Currently, plug-in makers are working on a single plug-in that will support all the different formats, but until one arrives, you must use several different plug-ins to cover all the different formats.
Iterated Systems has created a plug-in for embedding AVI files into your Web page and streaming them as they play. The advantage of streaming video is that the user can stop the video without having to wait for the entire file to download. The CoolFusion plug-in can be found at this site:
http://www.iterated.com/coolfusn/download/cf-loadp.htm
To embed a video in your Web page, use the <EMBED> tag once again, like so:
<EMBED SRC="filename.avi" WIDTH=xx HEIGHT=yy> <NOEMBED> <IMG SRC="filename.gif"> </NOEMBED>
The video will show up in the Web page as soon as it begins loading. This is a great way to display your existing animations without having to convert them, as shown in Figure 6.4.
Figure 6.4: A Web page with an embedded AVI file, created using the CoolFusion plug-in.
The Action plug-in made by Open2u enables Web pages to be embedded with MPEG videos and WAV files. You can get it from the following site:
http://www.open2u.com/action/action.html
To include the file in an HTML file, the standard <EMBED> tag is used. The syntax looks like this:
<EMBED src="filename.mpg" width=xx height=yy [options]>
Once included in your HTML file, the file is activated with a pop-up menu that appears when the left mouse button is clicked on the movie. The Action plug-in includes some additional options for playing back the video:
All these attributes can be changed by the home page visitor by using the pop-up menu.
Open2u is also developing an Encoder package so that users can combine audio and video into the same file and a Converter package so they can convert other video formats to MPEG.
Apple created QuickTime video as the video format for the Macintosh. It has become so popular and robust that it has been ported to Windows machines and now is available on both platforms, as well as UNIX workstations. Several companies offer QuickTime plug-ins for Netscape Navigator, but the one to watch for won't be a plug-in at all.
Apple has announced that it's working with Netscape to embed QuickTime technology into the Netscape Navigator 3. This will allow users to view QuickTime movies without a plug-in and navigate QuickTime VR worlds with a small plug-in. More details about QuickTime VR are in Chapter 10, "Using Apple's QuickTime VR." Nobody knows QuickTime video better than Apple, so when the plug-in finally shows up, you can expect it to be a strong tool.
Check this site for news about the QuickTime plug-in:
http://quicktime.apple.com/
Although the QuickTime in Netscape Navigator 3 isn't a streaming format, it has a feature called "Fast Start" that loads the first frame of the movie almost immediately, before the rest of the movie downloads. This preview gives you a good idea of what the video shows and lets you decide whether you want to wait for it to download.
To create a QuickTime movie with the Fast Start feature, you need to convert the file by using the Internet Movie Tool available at the QuickTime Web site. Once the movie is converted, embed it in your Web page with the standard <EMBED> tag. Figure 6.5 shows a sample Web page with a QuickTime movie embedded. Several other parameters control the playback options. A complete list of them is at this site:
Figure 6.5: A Web page with a QuickTime movie embedded.
http://quicktime.apple.com/qt/dev/devWeb.html
Of course, Netscape isn't the only browser available; Microsoft is hard at work to add new features to Internet Explorer. Some of these new features will make it easy to embed your 3D animations.
The first solution doesn't use a plug-in at all. Microsoft is incorporating an extension to HTML that will enable users to embed AVI files by using the <IMG> tag. This new attribute called DYNSRC, which stands for Dynamic Source, looks like this:
<IMG DYNSRC="filename.avi" SRC="filename.gif" WIDTH=46 HEIGHT=46 LOOP=INFINITE ALIGN=CENTER>
Browsers that don't support this extension will still see the GIF file, but Internet Explorer will display the animation, as shown in Figure 6.6.
Figure 6.6: AVI videos embedded Intermet Explorer with the <IMG DYNSRC= "filename.avi"> tag.
Besides the common width, height, and align attributes, some special attributes are useful for controlling the animation:
ActiveMovie is a whole family of technologies specifically designed to stream media over the Internet; they include the following:
Currently, the ActiveMovie Add-On for Internet Explorer 3 is available, but the Stream Editor is being updated. The ActiveMovie site at Microsoft provides the latest information on these products. Check it out at this address:
http://www.microsoft.com/advtech/activemovie/amstream.htm
When the ActiveMovie Stream Editor is ready, you can download it from that address.
ActiveMovie is an ActiveX control, so embedding it in your Web page follows the same procedure as other ActiveX controls:
Note |
The value of the filename property can contain either ASF or AVI file formats. |
The chief benefit of ActiveMovie will be its ability to play any video format. With this capability, you can use one control to embed and play any video files, regardless of the type. Microsoft isn't stopping with that, either. They have many other ActiveX controls, including one to create VRML worlds.
Another powerful ActiveX control that Microsoft has been working on is the ActiveVRML control, Microsoft's proposal to the VRML community for the 2.0 specification. The VRML community selected a different proposal, Moving Worlds, as the official 2.0 specification, but this didn't stop Microsoft from developing their product-and it's a good thing.
ActiveVRML has a lot of great features that not only enable 3D VRML worlds to be embedded within the Internet Explorer browser, but also enable controls of 2D animations within Web pages as well.
Even though ActiveVRML wasn't accepted by the VRML community as the 2.0 specification, it's still supported by several companies because of its easy-to-use features. For this reason, it's covered in Chapter 11, "Using Microsoft's ActiveVRML."
With so many different plug-ins to choose from, you might be asking yourself which one is the best to use. Here are some recommendations:
My last bit of advice for plug-ins is that if you're using them, use them extensively or not at all. If visitors to your site have to go through the trouble of downloading and installing a plug-in, then make it worth their trouble by offering several animations throughout your site that use that plug-in.
Once you've created 3D animations, there are several ways to get them on your site. If you use Netscape plug-ins or the functionality built into Internet Explorer, the process becomes rather simple.
Now that you've learned about several tools that will enable you to show off your dazzling 3D animation skills, you're probably going to cast this book aside to try them out. That's fine, but when you come back, here's a list of where to go next:
What if I have a plug-in to play one type of video, but my animations are created in a different format? | |
Well, you could either find and use a different plug-in, or you could convert the video format by using a conversion utility. Video-editing packages like Adobe Premiere let you convert video or animations to different formats. There are also some shareware applications that will work. | |
I've seen the plug-in list for Netscape Navigator, and it's pretty extensive. Which is the best Netscape plug-in for 3D animations? | |
No plug-in is singled out as the best. However, in my opinion, Shockwave is leagues above the others in acceptance and robustness, but it has some serious drawbacks as well. It really depends on the operating system, the speed of your connection, and where you like to browse. Certain Web sites require certain plug-ins to view their content. | |
I've tried to use the more popular plug-ins so that most of the visitors to my site can see my animations, but what if the visitors to my site don't have the plug-in I'm using? | |
Web pages that use a certain plug-in should let the readers know which plug-in the page content works best in. Plug-in companies usually have some kind of icon you can put on your site that will link
back to the plug-in's site so users can download it, much like the Netscape Navigator icons you see everywhere.
Also, there are countermeasures to guard unprepared visitors against seeing a blank screen or a trouble icon, such as the <NOEMBED> tag. The HTML code in the <NOEMBED> tag is executed if the needed plug-in isn't available. This is a good place to explain to the reader what's needed to view the site. Be sure to use these in your pages. |