Andy Boze, Editor
For this issue I thought it would be interesting to take a look at some of the network-based multimedia authoring software that’s available on the market. The three products reviewed here are RealSlideshow Plus 2.0, Viewlet-Builder 2, and Flash 5. They vary widely in purpose, functionality, and cost. About the only thing that they have in common is that they build multimedia presentations primarily accessed via a Web browser.
RealSlideshow Plus and Viewlet- Builder are similar in purpose. They both build presentations that are a series of still slides with a soundtrack and added text. Otherwise, they are quite technologically different.
RealSlideshow presentations are generated into Synchronized Multimedia Integration Language (SMIL, pronounced smile), which is rather like HTML. If you’d like to know more about SMIL, you’ll find plenty of information on the World Wide Web Consortium’s Synchronized Multimedia site at http://www.w3.org/AudioVideo. RealSlideshow presentations are viewed using the RealPlayer. Viewlets created by ViewletBuilder, on the other hand, need nothing more to play back than a Java-enabled Web browser.
Flash is a much more complex product for designing and creating fully animated multimedia projects. It combines drawing tools with sophisticated animation tools and a scripting language to author interactive Web content. The Flash Player is available for all major platforms and operating systems, making Flash content viewable just about anywhere.
84 W. Santa Clara St., Ste. 790
San Jose, CA 95113
fax: (408) 792-3808
Price: $999, quantity and educational pricing available
System requirements: Pentium II 350 MHZ, 64 MB Ram (128+ MB recommended), 16-bit video card with 800x600 resolution or higher for Windows 95/98/ME/NT4/2000/XP and Linux2.x+ (tested on RedHat 7) + Java 1.3. For Solaris 2.5 (32 bits) + Java 1.3, UltraSparc II 360, 64 MB Ram (128+ MB recommended, and 24-bit video card required. MacOSX version in development.
Qarbon’s ViewletBuilder 2 is designed to develop multimedia demos and tutorials quickly and easily. A viewlet is a series of slides with additional items that you can insert, such as notes and balloons with text, sound clips, and interactive elements. The compiled viewlets can be viewed by anyone who has a Java-enabled Web browser. The easiest way to explain the functionality of ViewletBuilder 2 is to describe the process of building a viewlet. This review was done using Windows 2000.
Upon opening ViewletBuilder, two options are presented: to create a new project or to open an existing project. A first-time user would choose a new project, which is what is described here. The screenshot wizard opens and prompts you through several steps. Step one is to choose the screen size of the final viewlet. There are four default sizes, ranging from 640x480 to 1280x1024 pixels, or you can fill in your own numbers for custom width and height. Smaller sizes are preferable to accommodate smaller monitors and for faster loading.
In step two, you are prompted to select a capture method, either full screen or a screen area. I preferred the screen-area method, which marks an area on screen that will be captured during the viewlet creation process. The full-screen method switches back and forth between your screen resolution and the size selected for the viewlet.
Step three lets you define a screen- shot hotkey or assign a new one. I had no need to change the default from the Pause button, but to do so, you just click the Define button and then press the new hotkey on the keyboard.
Step four is when you take your screen shots. In this step, you start the application from which you want to capture shots, which I’ll just call Demo Program. After Demo Program starts, you resize it to fit within the on-screen box you defined in step one. Then you just press the screenshot hotkey every time you want to capture a change to the screen.
Let’s say that you wanted to develop a tutorial to demonstrate how to save a file in Demo Program. At every significant step in the process of saving a file, you only need to press the Pause key on your keyboard to capture the screen. When you’re done, you click on the ViewletBuilder icon, which has been minimized to the system tray. All of the screen shots are then presented as a series of thumbnail slides.
To view or edit any slide, you just double click on the thumbnail. Once you’re in slide view, there are two controls: a player and a toolbar. The player lets you move from slide to slide without having to return to the thumbnail view. The player also lets you play the entire viewlet, much as you would see it after it was compiled. The toolbar lets you quickly insert objects into a slide, although you could use the menus to do this, too. The objects available to place in a slide include balloons, notes, sounds, click zones, text zones, pause zones, hyperlinks, and cursors.
Balloons and notes are very similar. They both contain text that can be formatted in various ways from any of the available fonts installed on the PC. The main difference is that balloons have pointers attached to them, just as in comic strips, so the viewer can easily understand what the balloon text refers to. Notes have a pushpin icon at the top and are reminiscent of a note posted on a bulletin board. You can select from different colors for both notes and balloons, but notes are limited to one of four colors. Each slide can include only one note and one balloon.
You can include sounds in a slide only if a balloon or a note has already been added, and each balloon or note in a slide can have its own sound attached. Using the sound tool, you can choose one of three options: no sound, import sound, or record sound. No sound is the default for balloons and notes. If you already have a sound clip, you can import it if it’s in WAV or AU format, but there are some limitations to the recording parameters that ViewletBuilder will accept. It’s probably easier to record your sound clip directly. Depending upon the functionality of your sound card, you can record from a microphone or various other devices, such as your CD player.
Recording a sound clip is easy enough—just click on the Record button to begin and the Stop button to end. You’ll get a message if the recording level was too loud or too soft so that you can make adjustments and rerecord the clip, if necessary. You can also choose to listen to the clip you recorded to judge the quality for yourself.
There are four interactive objects that you can insert into slides: click zone, text zone, pause zone, and hyperlink. The click zone and text zone can be used for a simple quiz or when you want to check that viewers have understood information in your viewlet. In our Demo Program tutorial, you could use a click zone to ask the viewer to click on a particular spot on the slide. Similarly, with a text zone you could ask the viewer to enter a word or short phrase. For each zone, you can define the number of tries the user gets, as well as the response that the viewer gets for correct or incorrect responses. The viewlet waits to move on to the next slide until the viewer provides the correct response or exceeds the number of tries allowed. A pause zone inserted into a slide simply causes the slide to wait until the viewer clicks a button to continue. This can be useful when you want to be sure that the viewer has had sufficient time to look at all the information you have presented in a slide.
The hyperlink object is somewhat similar to a click zone, but when the viewer clicks on a hyperlink object, the Web browser opens a new page pointing to the URL that you embedded. Although there can be only one instance of each type of zone in a slide, you can have multiple hyperlink objects in a slide.
The picture is an additional object, which is not on the toolbar, but it can be inserted from the ViewletBuilder menu. Into any slide you can insert a graphic in any of three formats: GIF, JPEG, and PNG. After a picture object has been inserted, you can resize it and move it to any spot. A picture object can be useful to create customized buttons. For example, you could overlay the picture with a hyperlink object, so that clicking on the picture would open a Web page.
The final object that can be manipulated is the cursor. When you take your screen shots, the cursor is not captured, but the position of the cursor is. As the viewlet is played, a cursor is drawn on the screen, simulating the movement of a real cursor. As you edit slides, you can see the beginning and ending points of the cursor and the path between them. If these points are not quite where you would like, you can simply drag them to different locations, or you can turn off the mouse cursor on particular slides if you’d rather not show it at all. The final effect is quite nice and enhances the flow of the slides.
In addition to the toolbar, the player control lets you make some adjustments to the viewlet. Viewlet- Builder automatically adjusts the duration of each slide depending upon its content. The more content, the longer the slide will remain before continuing on. If you want to change the duration of any slide, the player will let you add or subtract time in half-second increments.
When you’ve finished working with individual slides, you can return to the thumbnail view. In this view, it’s easy to add additional slides if you found that you forgot something during the initial capture of screen shots. Just click on a slide, then select Insert from the menu. You can insert blank slides, new screen shots, or slides from previous projects. When you’ve made your selection, the new slides will be inserted into the position you chose, and the existing slides will be moved. If you have slides you no longer need, you can simply delete their thumbnails, or you can temporarily hide slides to see how your viewlet would look without them. Slides can also be dragged within the thumbnail view if you need to rearrange them.
The last step in creating a viewlet is to compile it. You can do this either from the menu in the thumbnail view, or you can use the Compile tool in the slide view. Dialog boxes will prompt you for information about your viewlet, and then you’ll be asked for a location and file name for it.
After the compilation has completed, you are prompted to view or to upload your viewlet. If you choose to view, your Web browser opens with a page that gives you the HTML to insert in a Web page so that people can launch your viewlet. There’s also a link you can click on to start the viewlet you just saved so that you can view the finished product. If you select to upload, you’ll be prompted for information about where you want the viewlet to be FTP’d.
Using ViewletBuilder, making demos and tutorials could hardly be easier. A couple of times I found myself wishing that I could add more than a single balloon or note to a slide, or wishing I could add sound to a slide without a note or balloon, but after I thought about it, there are good reasons for these restrictions. The restrictions enforce good design principles.
I did run into some problems. ViewletBuilder requires Sun’s Java Runtime Environment (JRE) 1.3, which it will install if you don’t already have it. I had no problem with the installation, but Viewlet- Builder refused to launch. I had previously installed JRE 1.4, which was recently released, and I had a suspicion that it might be the problem. I uninstalled both ViewletBuilder and JRE 1.4. and then I reinstalled Viewlet- - Builder, which launched with- out a problem afterward. Another problem I ran into was the inability to record sound clips into my viewlets using my microphone, although I could record clips from my CD player. I guessed that it might have something to do with the fact that I was using a USB microphone. A call to Qarbon’s technical support confirmed both of my suspicions. ViewletBuilder doesn’t support JRE 1.4, and there is an issue with USB microphones on Windows 2000, but apparently USB microphones will work with Windows 98. When I connected a standard microphone directly to my sound card, I was able to record clips successfully.
One final problem I encountered also related to sound clips. The sound clips played perfectly when I previewed the viewlets within Viewlet- Builder, but failed to play in the final compiled viewlets. I tried playing the viewlets on two different computers, neither of which would produce a sound from the viewlets I made. I located a viewlet on Qarbon’s Web site that contained sound, and it played perfectly on my office PC. Oddly enough, and for reasons I don’t yet understand, my viewlets did subsequently begin to play sounds on my office PC. I was never able to get sound to play on the other PC, either from Qarbon’s viewlet or from mine. This just underscores the importance of not using sound clips without having equivalent text in your viewlets.
In any case Qarbon’s technical support was always good. I managed to work with the same woman each time I called. She was obviously familiar with the product and always had answers to my questions, or was able to offer appropriate suggestions. She mentioned that the Java and USB microphone problems will be addressed in ViewletBuilder 3, which is currently in beta testing.
ViewletBuilder 2 can be downloaded directly from Qarbon’s Web site, www.qarbon.com. In fact, it is only available as a download, not as a boxed product, thus there are no printed manuals or documentation. Some people may find this a drawback, but the Web site has good documentation and tutorials, which are presented as viewlets. Viewlet- Builder 2 can be purchased online or using more traditional methods, and the Web site describes other related services Qarbon offers.
The only real drawback I found to ViewletBuilder 2 is its hefty price tag. Even with the 50 percent educational discount, it may be out of some people’s price range. However, Qarbon offers a free version of Viewlet- Builder. It lacks a couple of minor features of the professional product, but the only drawback is that the compiled viewlets contain a banner ad for Qarbon. The free version will be good for those on a tight budget or for those who would like to try the product before considering a purchase. Viewlets compiled in the free version can be recompiled in the professional version, which will remove the banner ads. The free version offers one feature not available to users of the professional version. Qarbon maintains a viewlet farm on their own servers, to which users of the free version may upload their viewlets. This will be very handy if you don’t have your own Web server.
RealSlideshow Plus 2.0
P.O. Box 91123
Seattle, WA 98111-9223
System Requirements: 120MHZ Intel Pentium processor or equivalent, 32 MB RAM, RealPlayer G2 (or later) or Real- Player G2 Plus (or later), sound card, microphone, and speakers for Windows 95/98/2000/ME/ NT/XP.
RealSlideshow Plus does exactly what its name implies. You can prepare a series of images and add text and sound to build a multimedia presentation. RealSlideshow has a clean, intuitive drag-and-drop interface, so you don’t have to spend lots of time learning how to use it. In fact, if you’re the least bit adventurous, you can begin building a presentation almost immediately providing you’ve already collected all the media you want to show. First we’ll take a look at the interface, then we’ll go through the process of building a simple slide show.
When you open RealSlideshow, you’ll see several horizontal bars for images and sounds, a timeline, and buttons along the bottom to configure your project’s properties and layout. A standard menu at the top of the window duplicates all the functions within the interface.
The bars for images include one that shows thumbnails of each image, and the thumbnails are sized horizontally along the timeline to show exactly when each slide appears during the presentation and what its duration is. Another bar has a handle for each image that shows how long the image will take to download during playback.
The next two bars show where sounds are inserted in the presentation. The voice bar indicates whether any particular slide has a sound clip attached to it, usually a voice narrative, but it can be anything. The music bar indicates whether a sound track for the entire slide show is present. In both cases, the duration of the sound clips is represented along the timeline.
The last bar is the timeline itself. The timeline can be expanded or contracted, so you can actually see timings down to a fraction of a second, if you need that degree of control over your presentation. Individual slides can be resized along the timeline, and a cursor that runs through the timeline makes it easy to adjust the timing accurately.
Now we’ll build a short slide show to illustrate the process. There is more than one way to accomplish most tasks, but RealSlideshow’s drag-and-drop interface is likely to be the easiest way for most of them, so I’ll concentrate on that.
Let’s start by adding images to your presentation. You can open a Windows Explorer window and navigate to the folder that contains your images, then select one or more of them and drag them onto the images bar. Each image will appear in its own thumbnail. After you add your images, they can be reordered by dragging a thumbnail to a different location. Another easy way to add images is to double click on any empty space on the Images bar. Doing so will open a dialog box where you can enter a file name or navigate to a folder to select image files. A useful feature of this method is that the dialog box offers a preview of an image before you add it to your presentation. RealSlideshow accepts images in JPEG (.jpg), GIF (.gif), PNG (.png), or bitmap (.bmp) formats.
After you add at least one image to the Images bar, a title screen thumbnail appears before all the other thumbnails. If you double click on it, the properties dialog box opens. The properties dialog box is where you set information about your presentation, such as author, title, and description. Here also is where you can select the rate at which your presentation will be streamed, thus you can optimize your presentation for people using a dial-up connection or your local network.
After you have set your project’s properties, you’ll probably want to start editing the individual slides. If you double click on any thumbnail or on the space below it on the Voice bar, you’ll get the properties dialog box for that image. The image properties dialog box contains four tabbed sections: Info, Edit, Transition, and Text and Audio Captions.
The Info tab displays general information about the image, such as its size, download time, and duration. If you’d like the image to be clickable during the slide show, you can enter a URL that the viewer’s Web browser will open.
The Edit tab, not surprisingly, displays an area where you can do some editing on the image, including cropping, rotating, and flipping. There’s also a slider that you can use to adjust image quality against download speed. A preview area displays the effects of any editing you do, and as you use the slider, you get a report of the download time at any particular image quality you select.
The Transition tab provides an area for defining transitions from one image to the next. There are nine transitions to choose from, including a fade, wipes, and pushes. You can set the duration of the transition, and the Play button lets you preview the transition effect.
Text and Audio Captions lets you record a voice caption for an image or select an existing audio file. After you’ve recorded a clip or selected a file, you can click a play button to preview it. You can also enter text for a caption that will be displayed with the image during the slide show.
If you want to have a background sound for the duration of the slide show, you can just drag any .WAV or .MP3 file onto the Music bar. If you don’t have anything prerecorded, double clicking on the Music bar will open the project properties dialog box and allow you to record a track from a CD.
After you have all of the elements of your slide show in place, you can make some final adjustments. Each thumbnail can be resized along the timeline to give you precise control over the timing. RealSlideshow won’t let you reduce the timing of any individual slide to less that the amount of time required to download the next slide, otherwise the presentation would become choppy.
You can also define the layout of your slide show. There is a default layout, but you can choose from among the more than thirty custom layout templates included with RealSlideshow, or you can create your own custom templates. Each slide must include a picture, at a minimum, but may include regions for text, text captions, and a logo.
The layout dialog box lets you define the height and width of the finished slide show. Any type of region you want to include is selected from a list, then you can place and resize the region by dragging it within the layout preview. A text region contains text that stays on screen during the entire slide show. Text captions change as each slide changes. The logo region is often used to provide a background for the slide show, and stays on screen during the entire slide show, just as the text region does.
The final step in creating a slide show is to generate it. When you click the Generate button, you are asked to provide a location to save the finished slide show. RealSlide- show automatically resizes any graphics that are larger than the size you defined in the layout so that they will fit in the picture region without being clipped. After the generation is complete, you can click the Play button to play your finished slide show in RealPlayer, which you must install separately. You can continue to make changes in Real- Slideshow, and just click on the Generate button again to save them. If you are satisfied with the slide show, you click the Send button, which will let you FTP the entire set of files to your own Web server or to any of several commercial services with whom you might have an account. Your work may also be saved as a project file so that you can come back to it at any time.
There were only a couple of features that I’d like to see included in RealSlideshow. The title screen only produces white text on a black background. It would have been nice to be able to select text and background colors. The same limitation applies to the text and text caption regions. The text region does support RealText formatting, which is an HTML-like language, so it is possible to include some text effects with color and scrolling, for example. Those who are adventurous can open and edit the generated SMIL files with a text editor. With some knowledge of SMIL, you can produce some effects that RealSlideshow won’t do.
The background music only holds a single file, and recording from a CD will only get a single track. You need to be sure that your selection is at least as long as your entire slide show, or the music will run out before the slide show does. It would be nice if you could record multiple tracks or use multiple sound files, or at least have the music loop.
I found RealSlideshow Plus very easy to use, especially with its drag-and-drop interface. With a little experimentation, I quickly taught myself how to use it. For those who prefer documentation, the online help is simple and complete. A link on the Help menu to a multimedia tutorial is also included. I used the downloaded version of the program. A boxed version includes a CD-ROM and printed documentation. If you’d like to try the software before deciding to purchase it, a free version is available with a slightly reduced set of features.
600 Townsend St.
San Francisco, CA 94103
fax: (415) 626-0554
Price: $399, educational price $99
System requirements: Pentium 133 MHZ (200 MHZ recommended), 32 MB RAM (64 MB recommended), 40 MB available disk space, color monitor capable of 800x600 resolution, CD-ROM drive for Windows 95/98/ME/2000/NT/XP or Power Macintosh (G3 or higher recommended) running system 8.5 or later.
If you’ve spent any time on the Web, you’ve undoubtedly run into Flash animations or movies. I was always curious how they were done, and now I know. It’s not as difficult as I thought, and using Flash 5, it’s actually fun.
I don’t do a lot of work with drawing programs, but I’ve used several over the years. Flash 5 offers an environment that is immediately familiar and reminiscent of other products, such as Adobe Photoshop. Many options are available from tabbed palettes. Although this makes the options easy to access, I kept feeling a bit claustrophobic, even with a nineteen-inch monitor. Fortunately the palettes can be moved and docked, or closed if not needed. Different layouts for the palettes can be saved and restored later. A launcher bar at the bottom of the main window lets you easily access or hide common tool palettes. Among the items on the launcher bar are icons to change an object’s color, change the properties of text, and associate behaviors with objects.
One thing I thought was a clever design feature is how the palettes behave if the Flash window is not maximized. The palettes can be moved outside the window. Many other programs allow you to do this, too, but then you end up with a lot of clutter on your screen, especially if you want to get to something else on your desktop. Clicking on anything outside the main Flash window automatically hides all the palettes. Clicking on the main window brings back all the palettes.
The tools palette contains most of the drawing tools that are available in any drawing program. The tools include line, text, pen, pencil, lasso, circle, square, and several others. Many of the tools have options that can be selected and configured. Oddly, tools for polygons and other common shapes are lacking.
Working with drawn objects takes a little bit of getting used to. The behavior is different than what I am familiar with in other drawing programs. For example, if you draw a filled circle, the fill and the bounding line are separate objects. Dragging the fill to a different location doesn’t drag the line with it. You have to use the arrow tool to drag a box around all of the objects you want to select, then dragging any one of the selected objects will drag all of the others along with it. There’s nothing wrong with this, and I got the hang of it quickly.
But Flash is much more than a drawing program, and here’s where you’ll notice the difference. One of the palettes is a timeline. You position objects on the timeline, then you define what you want to occur at points along the timeline. This is easier said than done. Fortunately, Flash comes with several lessons and tutorials to teach you how it all works. They are quite good at explaining the basic functionality and concepts, and while you’re working on a lesson, you might even be tempted to think it’s easy to create a Flash movie. What it really takes it lots of time and practice. The well written, printed manual is a good learning and reference tool.
Flash does have lots of features to ease the process of making an animated movie. One of these is tweening. Tweening lets you take an object and define beginning and ending points for it. Flash will take care of moving it along all points between. You can also tween shapes, which produces a morphing effect. All you have to do is define the beginning shape and the ending shape, and Flash will tween the location, size, and shape from one to the other.
Flash lets you share and reuse your objects—referred to as symbols—so that multiple authors can access the objects from symbol libraries that are stored separately from a project. When you change a shared symbol, the change automatically takes place in all the projects that use the symbol. Multiple instances of symbols can also be used within a project, in order to ease making global changes and reduce download time.
Because Flash projects can be large and complex, the Movie Explorer is a useful tool to view their structure. In a way, the Movie Explorer is an outline of a project, so that you can see how the project is organized, enabling you to find individual elements easily. This can be particularly useful if you need to analyze a project done by someone else, or if you are returning to a project of your own after a length of time.
An interesting feature of Flash 5 is its ability to create Web-native printing, or as Macromedia calls it, WYPINWYS—what you print is not what you see. This lets someone viewing a Flash movie, let’s say a banner ad, to print a much larger page of information without needing to view it first. Another great feature is the ability to incorporate external HTML text in a Flash movie. Then, instead of having to redo the movie in order to change the text, all you need to do is revise the HTML file.
As this review was being written, a new version of Flash was released. Called Flash MX, it has several exciting new features. One of these is video support. Flash 5 can only import still images, but the new version can import any standard video file supported by QuickTime or Windows Media Player, including MPEG, digital video (DV), MOV (QuickTime), and AVI. You can manipulate, scale, rotate, skew, mask, and animate video objects, and make them interactive using scripting. There is a new Free Transform tool that allows you to make any of several kinds of transformations to graphic and text objects, and the color mixer has been enhanced.
Laudably, the new Macromedia Flash Player 6 supports assistive technologies such as screen readers. Flash MX integrates tools for creating accessible content so that developers can add descriptive text to animations and user interface elements thus enabling users with disabilities to experience the content.
Flash MX is priced at $499.