Squeezing the power of a high-end multimedia authoring program into a rich, easy-to-use Java RAD tool like Hyperwire probably wasn't easy, but thankfully someone did it. No surprise that that someone is Kinetix, a division of Autodesk and maker of 3D Studio MAX, a company with years of experience designing for designers. For anyone working to create interactive, visual content for the Java virtual machine, Hyperwire is, quite simply, a dream come true.
That said, Hyperwire isn't for everyone. In insulating users from seeing even a single line of Java code, Kinetix has clearly built Hyperwire for those who don't know what the java.awt package is and don't want to know. Nonetheless, even experienced Java coders will appreciate the control and time savings afforded by this package.
The central metaphor here is that of "wiring" modules (Kinetix-speak for objects) together to create interactions and handle events. Each new module is dragged into the Wire view, the lower half of the Hyperwire display, where it is represented by a tile with a blue sphere and a green arrow at the bottom. Click on the blue sphere and a menu pops up listing the module's input ports -- the actions the module is equipped to perform (its methods). Click the module's green arrow and you'll see its output ports, the events a module recognizes as cues to activate the input ports of other modules. Drag a line from – oh, excuse me – wire up the "Button Up" output port of a Button module to an Image module's "Visibility On" input port and you've got instant interactivity.
One of the most impressive aspects of Hyperwire is its well-designed interface. As in other Java RAD tools, a Layout View displays the visual representation of each module, letting users arrange how graphic images will appear in the applet window, and a module panel makes for easy dragging and dropping of modules into a project. But while other development environments present object properties in the form of a flat spreadsheet, Hyperwire neatly arranges property lists in tabbed panels, grouping property descriptions that logically belong together. Double-click, for example, on Image module and you'll see a panel with six tabs: image (file names, etc.), label, state (initial settings, etc.), size/location, transitions ("fade out," "wipe in," etc.) and custom ports. For the tab panel headings, and in Hyperwire in general, beginners will wish they had the option of seeing text labels to help decipher the ubiquitous, sometimes cryptic, icons, but a few minutes of poking around and it quickly becomes obvious what's what. After a while, you realize that the icons make it easier to find things and that they contribute to making using Hyperwire an incredibly fun experience.
Animation Power Tools
Hyperwire ships with pre-defined modules specialized for controlling graphics and animation. The Sprite module, for instance, allows for animating a series of image frames along a spline curve path. To help reduce media transfer and loading times, Hyperwire provides the option of using one .gif file that contains concatenated sub-images for the animation frames. The WHIP! module lets CAD users display drawings saved in .dwf format (see Figure 1) and a group of 3D modules (still in beta release but part of Hyperwire 1.0), including lights and cameras, makes it possible for developers to deliver navigable 3D worlds in their Java applets. In offering the 3D features, Kinetix is clearly anticipating a desire on the part of its 3D Studio MAX (and Autodesk's AutoCAD) users to distribute their work via the Java platform.
The really exciting stuff, of course, happens when you tell modules how to interact. To direct the action, Hyperwire provides sequencers, modules with multiple output ports that synchronize the action of other modules. These can be set up to fire commands at prescribed timings, to create looped actions–even to generate action randomly.
Building a Java Applet With
To get a feel for how Java applets are developed using Hyperwire, I've chosen a simple example. There's no "slide projector" module in Hyperwire. Instead, you get the parts of a typical slide projector - the image holders, the changer (the sequencer) and a button - and you get to build your own. While that might sound like extra work, the control gained in being able to connect these components is invaluable for more complex applications. Hyperwire actually provides the images we'll use to build a slide projector as one of its tutorial exercises: .gif files of a pear, a lampshade, a cup and a screwdriver. Our slide projector will be an applet with a button that, when pressed, shows the next image in the series of four slides.
Once the project window is open and the project directory is specified, the first step is to drag the modules we'll need into Hyperwire's Wire view. In this case, there are seven: a Button module, a Simple Sequencer module, four Image modules and a Label module (to tell users to click the button). With the modules in Wire view, you can change their names to indicate what they will do (such as "Pear" for the first Image module, "Lampshade" for the second and so on).
Now that the modules are assembled, we'll need to set their properties. To do that, we'll open them by double-clicking their tile icons. For each of the images, we'll use the property window to specify the image's associated media (.gif) file. The Button module's property window lets you display an image instead of the standard rectangle (images can be specified for the button's up, down, mouse over and disabled states). We'll add the label text to appear below the button - "Click here for the next slide" - in the properties window of the Label Module.
The visual representation of each module appears in Hyperwire's Layout view, a WYSIWYG display of the applet window that fills the upper half of the Hyperwire screen. For the slide projector, we'll want to drag the Button module's icon off to the side of the applet window and place the images in the center, one on top of the other, so that when one is displayed the others are covered. In this case, the action of displaying a slide will actually be bringing it to the forefront to hide the other slides. Finally, we'll position the Label module text just below the button.
Now comes the fun part. All of our modules are in place and we're ready to add the wires that will let the modules talk to each other. The central control in this example will be provided by Hyperwire's Simple Sequencer module. Switching back to the Wire view, we open up the Sequencer's properties window, where we can set the number of output ports to four, one for each image. Choosing output port 1 (by clicking on the sequencer's green arrow), we drag a wire over to the input port (blue ball) of the Pear module. When the connection is made, a list of Pear's import ports pops up. In this case, we want the sequencer to bring the image to the front of the pile, so we choose the "Bring to Front" input port. The same connections are made from the sequencer to the other images, using output ports 2, 3 and 4.
With the images wired, all that remains is controlling the sequencer. This is done by wiring the Button module's "Button Up" output port to the Sequencer's "Next Step" input port so that every time a button up event occurs, the sequencer will fire off the next of its numbered output ports (and bring the next image to the front).
To test the applet, Hyperwire generates and compiles Java code (inaccessible to the user) and runs the applet in an applet viewer. The code building and compiling took only a matter of seconds on a 90 MHz Pentium and was even snappier on a new 266 MHz Pentium II. Once an applet is finalized, Hyperwire's publish command creates a directory that contains the applet code, an HTML file with the appropriate tag for running the applet and all necessary media and class files. The media and class files are also created in compressed formats - as .cab files for Microsoft Internet Explorer and as .zip files for Netscape Navigator - to optimize delivery over networks where possible. The Publish command can also be directed to create a standalone Java application instead.
Of course, try building a large, complex application in Hyperwire and pretty soon your screen starts to look like the circuit diagrams for a new microprocessor. The Bundle Wire command removes some clutter but takes away important connection information at the same time, making it harder to locate bugs. More valuable is the ability to establish wire layers, so that groups of wires can be viewed independently. Still, for large-scale application development, Hyperwire probably isn't the best choice. Nonetheless, for quickly and easily building Java applets that incorporate cutting-edge 2D and 3D graphics, Hyperwire can't be beat. And at only $249, there's not much to stop Hyperwire from fast becoming the Java tool of choice for multimedia authors.
About the Author
Andrew Raskin is a freelance writer and Java programmer based in New York City.