developer.com - Reference Click here to support our advertisers SOFTWAREFOR SALE BOOKSFOR SALE SEARCH CENTRAL JOB BANK CLASSIFIED ADS DIRECTORIES REFERENCE Online Library Reports TRAINING CENTER JOURNAL NEWS CENTRAL DOWNLOADS DISCUSSIONS CALENDAR ABOUT US Journal: Get the weekly email highlights from the most popular online Journal for developers! Current issue developer.com developerdirect.com htmlgoodies.com javagoodies.com jars.com intranetjournal.com javascripts.com All Categories : VRML Chapter 6 Using Animation Plug-Ins in Your Web Page -by Kelly Murdock CONTENTS Animation Plug-Ins for Netscape's Navigator Creating 3D Shockwave Movies Converting AVI Movies to Sizzler Animations Using Existing Video Animations with the Netscape Plug-Ins Embedding and Playing AVI Files with CoolFusion Animation Using Microsoft's Internet Explorer Using the ActiveMovie Control and ActiveMovie Stream Plug-In Recommendations Workshop Wrap-up 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: Perhaps the most popular Netscape plug-in for doing animation is Macromedia's Shockwave; you'll see how to create Shockwave movies. 3D animations can be converted and embedded into Web pages using the Sizzler editor and plug-in. Several different plug-ins enable you to embed video files, including plug-ins for AVI, MPEG, and QuickTime video formats. 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. The X in the first case stands for "Movie." ActiveMovie is a streaming animation player built into the browser. Another X is for VRML. This chapter introduces ActiveVRML, but the really interesting material is covered in Chapter 11, "Using Microsoft's ActiveVRML." 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. Animation Plug-Ins for Netscape's Navigator 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. Creating 3D Shockwave Movies 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: In Director 5, you can import video clips by using the File | Import command. Once the Open dialog box comes up, select Video clips from the file type box and click the OK button. This loads the clip into the Cast window. Select the video clip in the Cast window and drag it onto the Stage. The Stage is the rectangle in the background; it represents the edges of the actual Director movie. (See Figure 6.1.) The Stage size and position can be changed with the Modify | Movie | Properties command. Figure 6.1: The Director environment, showing the Stage window in the background, the Score window in the upper left, the Control Panel upper-right, and the Cast window at the bottom. To see what the movie looks like, press the Play button on the Control Panel, which can be opened by using the Windows | Control Panel command. Once the movie has played, click the Rewind button to return it to the first frame. Save the file as a Director movie (DIR) with the File | Save As command. Use the Afterburner utility, available at Macromedia's Web site for no charge: http://www.macromedia.com/Tools/Shockwave/Director/aftrbrnr.html This utility compresses Director movies so they can run quickly over the Web. The format for Afterburned files is DCR. Within your HTML file,place the following tag line: <EMBED SRC="filename.dcr" WIDTH=xx HEIGHT=yy> <NOEMBED> <IMG SRC="filename.gif"> </NOEMBED> filename.dcr is the saved Shockwave movie,and xx and yy are the width and height values. The <NOEMBED> tag isn't needed, but it replaces the selection with the filename.gif image if the Shockwave plug-in isn't available. An example is shown in Figure 6.2. 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. Converting AVI Movies to Sizzler Animations 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: Download and set up the Sizzler Editor program from the address given above. Use the Objects | Insert Images | AVI File command to load the individual AVI frames into the Editor. You can use the Objects | Insert Modifier | Goto URL on Mouse Click command to make the animation a link to another Web page. Save the file as filename.SPR in the same directory as your HTML file. Add the following lines to your HTML file: <EMBED SRC="filename.spr" WIDTH=xx HEIGHT=yy> <NOEMBED> <IMG SRC="filename.gif"> </NOEMBED> 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. Using Existing Video Animations with the Netscape Plug-Ins 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. Embedding and Playing AVI Files with CoolFusion 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. Embedding and Playing MPEG Videos with the Action 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: palette=foreground or background-controls whether the video should impose its palette (foreground) or submit to the current palette (background). The default is background. autostart=true-tells the movie to start as soon as the page is loaded. loop=true-causes the movie to play continuously. sync=true-enables synchronizing audio and video. size=double-causes the video to be displayed twice its actual size. color=mono-plays the movie in gray scale. debug=on-enables the debug mode. 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. Using QuickTime Plug-Ins for PCs and Macs 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 Animation Using Microsoft's Internet Explorer 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: CONTROLS-This attribute displays start, stop, and pause controls underneath the video clip. LOOP=x, LOOP=INFINITE-This causes the video to loop x number of times, or infinitely. START=FILEOPEN, START=MOUSEOVER-FILEOPEN causes the video to begin playing as soon as the file is opened. MOUSEOVER starts the animation when the user moves the mouse over the video. Using them together, START=FILEOPEN, MOUSEOVER causes the video to play once, stop, and play again when the user moves the mouse over the video. Using the ActiveMovie Control and ActiveMovie Stream ActiveMovie is a whole family of technologies specifically designed to stream media over the Internet; they include the following: The ActiveMovie streaming format (ASF) is a new streaming video format specifically designed for low-bandwidth Internet connections. The ActiveMovie player is a helper application that lets you play ASF files over the Web. The player is also designed to play back other media formats, such as AVI, MPEG, and QuickTime. The ActiveMovie Stream Editor lets you create ASF files optimized for various bit rates. 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: The main tag is the <OBJECT> tag. Within that tag is the classid, which is unique for ActiveMovie. You can also specify several other properties, such as height and width. <OBJECT      classid="clsid:{05589FA1-C356-11CE-BF01-00AA0055595A}"      id=VideoWindow      width=400      height=250> Below the <OBJECT> tag can be several <PARAM> tags that define the control of the movie: <PARAM name="FileName" value="filename.asf"> <PARAM name="ShowControls" value="true"> <PARAM name="AutoStart" value="true"> </OBJECT> Note The value of the filename property can contain either ASF or AVI file formats. The ActiveMovie control also has methods, like Run, Stop, and Pause, and events, like Error and Timer, associated with it. They can be called by using VBScripts in the HTML file. For example, you can build a button and attach the Run method to it to build your own interface. 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. Introducing ActiveVRML 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." Plug-In Recommendations 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: If you want to use full-size animations with interactive elements built in, then look into Shockwave. Shockwave also has the benefit (or curse) of downloading the entire file before playing it. This results in the animation being played as close to your original as possible. If you're dealing with smaller animations that will loop continuously, check out the Sizzler plug-in, but you should also consider GIF animations because they don't require a plug-in. Sizzler does stream the animation, however. If you plan to use existing animations on a Netscape browser, consider converting them to QuickTime format and playing them natively. For the Internet Explorer browser, use the DYNSRC tag to embed AVI files directly or the ActiveMovie control if you want streaming files. 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. Workshop Wrap-up 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. Next Steps 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: To see a real-life example of how this is done, move on to the next chapter, Chapter 12, "Real-Life Examples: Creating a MYST-like Adventure on the Web." If you're fascinated with 3D animations and are anxious to learn more advanced techniques, skip to Chapter 9, "Creating Advanced 3D Animations for the Web." If you're intrigued by ActiveVRML, then Chapter 11, "Using Microsoft's ActiveVRML," is the place for you. If all this 3D stuff is fine, but you really want to get into VRML, jump to Chapter 13, "Exploring VRML Browsers and Development Tools." Q&A Q:What if I have a plug-in to play one type of video, but my animations are created in a different format? A: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. Q: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? A: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. Q: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? A: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. Use of this site is subject to certain Terms & Conditions. Copyright (c) 1996-1998 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read the Acceptable Usage Statement. Contact [e-mail] with questions or comments. Copyright 1998 Macmillan Computer Publishing. All rights reserved.