by Brad Smith Sprucing Up the Web Without Java Or JavaScript March 15th, 2001 Have you ever found yourself surfing quickly around the Web when suddenly your browser grinds to a halt, revealing those dreadful words, "Loading Java," at the bottom of your browser window? Have you ever arrived at a Web page only to find that nothing looks right at all? These are all too common scenes on the Internet today. The culprits? Java and JavaScript. Web page designers use Java and JavaScript to create things as complex as applets (such as chat, games, animations, etc.) or as simple as rollovers (using JavaScript). The problem with both of these technologies, however, is that they can look different on different operating systems and even within different browsers on the same operating system. This is potentially disastrous for any Web developer trying to create a uniform experience on the Internet. Try visiting Britannica Online in Netscape Communicator and drag your mouse over the menu on the left. You'll notice a nice rollover effect created through JavaScript. As you will observe, this rollover seems relatively quick and responsive. Everything seems very smooth and how the Web page designer intended it to be. Now try visiting the same site in Internet Explorer 5 and drag your mouse over the menu. Ouch! It works, but it's painfully unresponsive. This is definitely NOT the way the designer intended it to look. In many instances where Internet Explorer is required to use Java or JavaScript on my iMac, the application becomes suddenly very unstable. Just moments before I wrote this column, the Britannica Online website caused the program to unexpectedly quit. This is simply only one example of the pitfalls of Java. There are many other sites that don't look or function properly on the Internet today. Why do people still use Java, then, if it is so problematic? For one thing, it is theoretically cross-platform, and for another Java, in particular, can really extend the things your browser can do. It even looks great, when it works. There is only one way to make sure that anything will look the same across multiple browsers and multiple platforms, and that is through an architecture that is consistent across all possible configurations. While nothing in existence today can claim to be perfectly consistent in any situation, QuickTime comes the closest. Whoa! QuickTime can do rollovers? Like I said in my first column, QuickTime is a whole lot more than just streaming. QuickTime comes pre-installed on most of today's computers and is available as a free download from Apple, therefore making it a technology readily available on consumer machines all across the world. The best thing about QuickTime, however, is that it is the same on Macintosh as it is on Windows, and runs independent of Web browsers as a media plug-in. A Web page designer can design a menu as a QuickTime movie and be assured that it will look and function exactly the same on both platforms. In addition to rollovers, there is much more that designers can harness QuickTime to do. Let's Do It! Now comes the simple tutorial. To accomplish a rollover effect for a Web site is quite simple and can be done without using JavaScript. This tutorial requires LiveStage Professional from Totally Hip and a basic understanding of how the program works. Step 1: To begin, launch LiveStage Professional and create a new project. Go ahead and save it in it's own folder. Create a sprite track that will contain your buttons from the Tracks menu. Sprite tracks store information on graphic objects that can be manipulated by QuickTime. Double-click on the sample in the sprite track and drag your images into the sample. Note that for this tutorial, you need to have different images for each state. For example, you need an up, down, and over state for each button. Creating the images is the hardest part of the process, unlike Java, where the scripting is the hardest part. Step 2: Now that all your images are in the sample, you need to create the sprites. Each individual sprite will use three images, one for each state. While still in the sample's window, click on the sprite tab and click on the "New Sprite" button to create a new sprite. In the properties tab of each new sprite you create, select the "up" image for the image index. This is the image that will be identified with this sprite. Step 3: Next, in the buttons tab, select from the drop-down menus the images you want to have appear when the user's mouse is over the object, when the user clicks on the object, and when the user's mouse is not over the object. Step 4: Finally, to link these buttons to another Web page, go into the Scripts tag. Here you must select the Mouse Down handler to indicate that the action will take place on mouse down. Next, type the following into the text box to the right of the handler list: GotoURL("http://www.macobserver.com/"). Repeat: Repeat this procedure for all buttons, inserting the proper links for each button. Step 5: The final step before saving this movie is to place the sprites you've created in their proper positions. To do this, press the Stage button (second from right at the top of the window) to bring up the stage. This is a visual representation of your project. Drag each sprite to the position desired, then press the top right button to preview you're movie. If everything looks fine, save your file and then pull down to "Export Wired Movie…" from the File menu to export your movie. Step 6: You now have a finished menu with rollovers that you can embed in a Web page. To embed this movie into a Web page, use the following HTML code: <embed src=”sample.mov” width=”200” height=”200”> Be sure to include the correct filename as well as the correct width and height. Now you should be ready to load up your new Web page, equipped with a menu with rollovers! Below is my final product, a menu for a project on the Battle of Gettysburg that I have been working on. Each button, for the purposes of this tutorial, links to The Mac Observer's main page. Hope you enjoyed the tutorial! iResources for iQT Sorry, I couldn't resist the iNaming again. In each of my weekly columns I will include a section with links to various news and resources regarding interactive QuickTime. This week I will provide a list of basic resources available to anyone who is interested in getting involved with interactive QuickTime. Totally Hip Software - Totally Hip's Web site provides news and information about the company and their products. They are the creators of the industry's leading interactive QuickTime authoring environment, LiveStage Professional, as well as other great programs such as LiveSlideShow, WebPainter, and their newly announced compression programs HipFlics and HipClips. LiveStage Developer Network - Totally Hip also provides a resource site for users of their LiveStage Professional software. Ironically, at the top of the developer network site you'll find a QuickTime movie with drop-down menus and rollovers that truly demonstrate the usefulness of QuickTime for great-looking menus. They provide links to many examples of interactive QuickTime, developer Web sites, and other community links. You'll also find instructions on how to subscribe to the LiveStage Pro Talk discussion list, a must for anyone working with LiveStage Professional. Employees of Totally Hip and many top interactive QuickTime developers from around the world participate on the list, providing tips, suggestions, help, collaboration, and new, unique ideas. QuickTime Talk Discussion List - Apple provides a useful discussion list for topics related to QuickTime development at their Web site. This is a useful companion to the LiveStage Pro Talk list. QuickTimers.com - QuickTimers provides a whole bunch of useful examples and source for various projects. I think you'll be quite amazed at some of the projects available at this Web site! ici Media Inc. - ici Media is an amazing interactive media development company. Their Web site has links to many demos of their projects. It's a must-see site. That concludes this weeks installment of interactive resources, and, for that matter, this weeks iQT. See y'all next week! You are encouraged to send me your comments, or to post them below. Most Recent iQT Columns Using Sprite Tracks & LiveStage Pro April 20th Understanding Components In QuickTime March 30th Enhancing The QuickTime Web Experience March 23rd iQT Archives Back to The Mac Observer For More Mac News! Brad Smith is currently attending school in Lincoln, Nebraska, and has used Macintosh computers since 1984. Brad is a member of the National Association of Photoshop Professionals, and an interactive media devotee, by hobby. In middle school, Brad and three other students from Lincoln, NE, were recipients of the ISTE MultiMedia Mania international multi-media contest in the middle school division. You'll typically find Brad going all out on a simple twenty-point school project by making an interactive QuickTime movie in LiveStage Professional. In other words, he has no life! Brad has three brothers and is a big fan of the Dave Matthews Band. His enjoyment for music is evident in the vast collection of CDs he possesses and the fact that music is required to do any sort of work on the computer. He welcomes your comments at brad@macobserver.com.