The quickest and easiest way to create interactive 2D and 3D Java-based titles for the World Wide Web.
Hyperwire is a 3D visual authoring tool for creating 2D and 3D Java-based titles for the World Wide Web. With Hyperwire, the people who are creating the really compelling Web sites --designers-- will be able to create complex Java titles quickly and easily.
Hyperwire is a simple authoring tool that does powerful things. In the hands of programmers, Hyperwire makes the creation of complex applications possible and swift. With the object-oriented nature of Java, it's easy to add functionality to existing titles by integrating them with other titles and applets you have already created. Frequently used objects and program elements can be stored and reused at will. In fact, you can even add functionality to Hyperwire itself with the Web titles you create.
It wasn't long ago when the only folks making Web pages were very technical programmers. Then along came applications like FrontPage™ from Microsoft® and PageMill® from Adobe® that offered designers an elegant way to lay out Web pages without having to learn a single HTML tag. Now we're entering a new phase of Web development: the interactive phase. And the core technology driving this phase is Java.
In this paper, we will attempt to explain the brief history of Web tools starting with HTML and HTML plug-ins, and then get into using Java and Hyperwire, and finally we’ll discuss VRML and exploring 3D worlds on the Web. We'll give you a clear understanding of how Hyperwire is different from the Web tools that are available today, and tell you how to start developing interactive Web titles with Hyperwire right now. We’ll give you a quick step-by-step explanation of how to create a Web title using Hyperwire, some of the key features of Hyperwire, and how Hyperwire fits easily into your Web design process. We’ll also tell you about the unique 3D features of Hyperwire, and what you can expect from us in the future.
The Hypertext Markup Language wins the award for being the most exciting and widely used language that nobody wants to learn. (Esperanto comes in a distant second.) As most folks know, HTML consists of a syntax and collection of tags that define the characteristics of a Web document. The standard has been "extended" by Netscape™, Microsoft, and others through the creation of new tags that these companies support in their browsers. They've basically wired in the ability to interpret these new tags in their browsers so that Web designers can take advantage of these new features without having to wait for the standard as a whole to be updated. Though this has rapidly increased interest in Web-page design, it has also meant that the strength of the standard has been diminished. Just about anyone who's ever built a Web page knows that, just because it looks good when viewed with Netscape Navigator™, doesn't mean it'll look anything like what you intended when viewed with another browser.
Example of HTML code:
<HTML><HEAD>
<TITLE>Kinetix: The Home of Interactive 3D Multimedia</TITLE>
<META name="GENERATOR" content="Kinetix"></HEAD>
<BODY BGCOLOR="black" TEXT="#dfdfdf" LINK="#febf01" VLINK="#e8c500">
<P align=center><IMG SRC="images/logo_n.gif">
<H2><CENTER>Transforming Imagination into Reality</CENTER></H2>
<P><CENTER><IMG SRC="images/title.jpg" lowres="images/title_lr.jpg" WIDTH="400" HEIGHT="279"></CENTER>
HTML has proven to be a very efficient means of describing pages that include basic, static elements like text and graphics. The only interactivity that is effectively served by HTML is the navigational hyperlink-- click, go to a different page or click, go to a different place on the same page-- not very interactive. But Netscape and Microsoft, eager to get Web developers to rally around their browsers, allowed developers to create plug-ins to their browsers. These plug-ins make it possible for the browser to display elements on a Web page that the browser itself cannot interpret. But even these plug-in applications are geared mostly for allowing the integration of animations and three-dimensional elements. Sure, this kind of "eye candy" gives a page more zing, but it doesn't make things much more interactive.
One of the biggest questions facing Web designers is, how do I get people to come to my site, and once they are there, how do I make them stay? For most designers, the answer to this question means creating a compelling, interactive site, one that will keep users interested, and get them to come back to the site, again and again.
Real interactivity is still a rare thing on the Web. Web developers have taken a big step from static, boring pages of unformatted text to more elegant designs and interesting graphics and animation. And there have been advances in integrating databases into Web sites, but most of the major database developers have only come up with products that help Web developers create online catalogs, shopping systems, or user-customized retail systems. Databases are complex and expensive things, and are only one of many possible forms of interactivity. What's really needed is a more general development environment that's accessible to both programmers and designers who have the vision and know-how to develop interactive applications. This is where Java and Hyperwire come in.
If you haven't heard of Java by now, you need to get out more. This programming language, originally developed by Sun Microsystems® for interactive television applications, is well suited to the needs and constraints of the Web. Applications running over the Web need to be compact so they take minimal time to download, and cross-platform so anyone can take advantage of them. To pull this off, Java interpreters were developed to work on all platforms and were integrated into the major browsers, such as Netscape Navigator and future versions of Microsoft's Internet Explorer™. Java enables Web designers to build complex applications into their Web sites and distribute them to any platform without having to create separate versions for each. There's only one problem with using Java -- because it's a programming language, only serious code heads can take advantage of its power today. JavaScript is a scripting language that promises to make the power of Java more accessible. But it's still a scripting language. PERL is a powerful scripting language, but also a testament to the fact that few designers can make heads or tails of scripting languages. What Web designers really need is a visual development tool for creating Java titles for the Web.
Example of Java code
AppletBundle ab = ( AppletBundle ) aModule.getBundle(); OpusPlugInProperties ap = ( OpusPlugInProperties ) ( (
OpusBasicPlugIn ) aModule.getPlugIn() ).getProperties();
ab.setUserData( OpusString.from( "nil" ) ); ab.setBaseFlags( 3 );
ab.setAttributesChanged( false );
ab.setIsClickable( false );
ab.setIsEnabled( true );
ab.setMouseNotify( true );
ab.setIsVisible( true );
ab.setRect( ( new Rectangle( 0, 0, 600, 400 ) ) ); ab.setRepaintWhenOff( true );
ab.setRepaintWhenOn( true );
ab.setReferencePoint( new ReferencePoint ( 8 ) ); ab.setConstrainChildren( true );
ab.setBackdrop( new Backdrop( ( new ImageReference(
"backtile.GIF", null, true, false, true, new Point ( 125,95 ) ) ), false ) );
ab.setAppletInfo( "Another fine Mr. Blue generated
applet.\\nGenerated on 04/05/96 at 09:15:58 AM\\nTo supply your own message here, edit the applet comment." );
String pInfoInitializer[][] =
Not long ago, HTML was viewed with as much fear by the Web design community as Java is today. But then something happened: visual HTML authoring tools like Microsoft’s FrontPage and Adobe’s PageMill -- tools designers could easily understand-- came to market. These tools allowed artists to design and construct Web pages without having to learn a single HTML tag. Hyperwire offers a simple interface that functions in two ways:
Key Hyperwire Features:
1. Hyperwire's interface offers WYSIWYG displays of your title’s interface, as well as the logic behind it. This makes Java programming accessible to the people who need it: designers.
2. A library of sophisticated applets to help get you started quickly.
3. Simple tools and templates for creating sprite-based animations.
4. A ton of ready-to-use buttons for creating form, search, and switching functionality.
5. 100 percent Java output.
6. 3D. With Hyperwire, you can visually connect Java objects from within a 3D world.
Step 1: Create a new application and set up application parameters
Create a new application using CTRL+N, or by selecting the new document icon from the toolbar. Choose Title_Properties from the Title menu. From this dialog you can set the background of the title, set the size of the application, etc. In our example we are setting the application size to 200 x 250.
Step 2: Drag three images from the Windows’ 95 Explorer
Drag and drop three images from the Explorer. Drop them on the top pane. Position them so they overlap (you’ll see why later). Name them appropriately. Note: the images don’t have to be the same size, we’ll crop them later by using a Hyperwire ‘container’.
Notice that at the bottom of the screen, Hyperwire created 3 modules representing your images. Hyperwire automatically names them "Image", "Image 1", and "Image 2". Position these modules so they are visible in the bottom window.
Step 3: Add a ‘simple sequencer’ to your application
Choose Simple Sequencer from the Modules menu, and drop the object in the lower pane of the window. Sequencers are ‘non-visual’ objects, so you won’t see any change in the layout view.
After you drag the sequencer into the lower pane, double-click the Module icon and check the ‘loop’ check box. This makes the sequencer loop indefinitely. Notice that ‘Number of outputs:’ is set to 3, and ‘Base number:’ is set to 1. This sequencer will start counting from 1 (the base number) to 3 (the number of outputs), then will loop back to one.
Step 4: Wire up the sequencer to each image
In this step, wire the Sequencer’s three outputs to the images. In the first screen shot you’ll see the ‘1’ output on the sequencer. On the second screen shot, we are selecting the ‘Bring to Front’ input on the image. On the final screen shot you can see the Sequencer wired to each image.
Step 5: Adding a bitmap button
Now, add a bitmap button and associate an image for both the ‘normal’ state, and the ‘down’ state. Notice from this dialog that you can tell Hyperwire when to load in the images as well as if the image should be loaded asynchronously.
Step 6: Wiring up the button
Wire up the button by connecting the button’s ‘button down’ output to the simple sequencer’s ‘next step’ input. At the bottom of the screen, notice that Hyperwire describes what this wire is connected to:
Button[Button Down] (1) -> Simple Sequencer [Next Step]
Step 7: Align the images
Now select all three images by Shift-clicking the images in the layout view. Once they are selected, click "Align Top", then click "Align Left" in the toolbar.
Step 8: Create the container
Now we will create a Hyperwire container. Containers allow us to group related objects together and treat them like a unit.
To create the container, select the three images and the simple sequencer in the wiring diagram. Then choose Assemble Into Container from the Selection menu. Adjust the container size so that it crops the images, and position it in the application.
Notice --in the wiring view-- that the four icons you selected are grouped into a new icon, called a Visual Container. This container is like any other Hyperwire module: you can name it, associate user data with it, resize and position it, and turn its visibility off and on.
Step 9: Run the Application
Now select the run flag. And you’re done! Your handiwork is a full-blown Java application. It took the author of this article about 2 1/2 minutes to complete these nine steps.
Included with Hyperwire will be a collection of pre-built containers that you can plug in and modify to fit your needs and get you up and running in no time.
Historically, authoring tools have forced new, and often peculiar, production processes upon those who use them. Authoring tools have sometimes forced users to abandon their favorite page layout and the design tools they use regularly. Hyperwire does neither. If you're comfortable with FrontPage, or PageMill, there's no reason to change just because you want to start incorporating Java titles. What Adobe PhotoShop® is to image manipulation or Adobe Illustrator® is to drawing, so Hyperwire is to Java-based applet creation. As you move into the media creation phase of production, you'll use all of those tools to create artwork and interactive applications that will be part of your Web site. Thanks to Hyperwire, Java title creation will be as integrated into the publishing process as creating a graphic is now.
It's important to recognize that the Java language is not a static thing. Even now, Sun is adding greater functionality and support for a wider array of media types. Of course, as Java evolves, so will Hyperwire. With the object-oriented nature of Java, it's easy to add functionality to titles you are creating by integrating other titles you have already created. Frequently used objects and program elements can be stored and reused at will. In fact, you can even add functionality to Hyperwire itself with titles you create. But we at Kinetix™ won't be waiting for you to add cool new titles to our cool new tool. We're already drawing up the list of Web applets we'll be creating and making available to the Hyperwire community.
There's a lot more to this story than just visual Java authoring. Kinetix has also been busy developing new technology that will help bring interactive 3D worlds to the Internet.
Currently, if you want to create VRML worlds, you need to start from scratch with relatively crude and arcane tools, even if you've already got a library of cool 3D elements. This situation is about to disappear. We haven't been saying much but we've been hard at work building VRML export modules for our 3D Studio® and 3D Studio MAX™ modeling and rendering tools. These export modules allow 3D Studio and 3D Studio MAX users to easily create new VRML worlds or convert existing 3D files into VRML elements.
We'll also be releasing our own VRML player, called Topper. Topper is a Netscape-compatible plug-in that allows users to explore 3D worlds. With this plug-in you can view embedded 3D scenes created with 3D Studio and 3D Studio MAX, or any other VRML scene within your browser. We've been hard at work developing something we call VRBL, the Virtual Reality Behavior Language. VRBL is our new specification for playing animations within VRML worlds. VRBL supports creation and playback of line-of-sight, proximity, and pick triggers. This means that users can trigger animations and behaviors based on their location and activity in a 3D scene, such as while playing games over the Web, or any other type of 3D experience. VRBL is an open standard, and Kinetix encourages developers and content creators to use this specification in their 3D worlds. Since our VRML Player supports VRBL, our users will experience dynamic 3D interactive worlds.
As the Moving Worlds specification becomes stable, we'll make it an easy transition for anyone using our VRBL tools to convert their output to the Moving Worlds specification. VRML viewers which do not accept VRBL will ignore the VRBL extensions, so users can create VRBL-enhanced VRML worlds that can be viewed in all VRML viewers. However, the keyframe animations and proximity triggers will only play in VRBL-enabled viewers. The VRML player also supports .3DS and .DXF™ file formats. The VRML Player is based on the core technology we used to build our 3D real-time simulation engine. A programmable version of this engine will be shipped inside Hyperwire in a subsequent release.
As Mark Pesce --one of the visionaries responsible for the creation of VRML-- once said, "VRML is, Java does." With Hyperwire, Web designers will have a tool they can understand, that will enable them to build real interactivity into their sites. With our 3D Studio and 3D Studio MAX exporters, Web developers can build on existing 3D content and apply sophisticated, industry-standard 3D modeling applications to the task of generating VRML worlds. Finally, VRBL offers developers a means for integrating interactivity within VRML worlds. And because we're a part of the Moving Worlds effort, if you're using VRBL, we'll make your transition to the Moving Worlds specification a seamless one. These tools come about because Kinetix wants to create elegant and powerful tools that help streamline your production process, and that offer new flexibility and power to the creative process. Kinetix is busy building tools for the World Wide Web that will help you be as creative as you want.