For years, people have used every trick imaginable to approximate 3D in Flash. From "Flipper Movies" which use old Quicktime VR tricks to navigate among dozens of photos of a product, to the Swift3D approach of pre-rendering video using a cartoonish style that can be represented efficiently in vector graphics, the results can be compelling. But they are never as interactive, flexible, or lean as genuine client-side 3D rendering.
Several 3D viewing platform vendors have tried to address this technology gap by adding support for Flash movies in their 3D players. But this completely misses the mark: Flash is great because so many people know how to use the tools to author complete movies, and because the player is ubiquitous. By requiring the Flash developer to work with a completely different player, with its own authoring environment and questionable distribution, they have effectively eliminated all the advantages of Flash. Combine this with the fact that the 3D players are just Flash emulators, none of which support the MX feature set, and each of which has various rendering bugs, and you've made Flash a pretty bad choice for injecting vector graphics into the 3D experience.
The demo above is something completely different — we call the technique . The bulk of this demo is Plain Old Flash, built with the standard Flash development tools, and deployed in the standard Flash player. The 3D graphics are generated by Kaon's Meson platform, integrated into the Flash container using a combination of CSS, DHTML, and JavaScript. Communications are seamless in all directions:
Since both Flash and Java are nearly universally available, this technique works pretty much everywhere. On Windows, the technique works with Internet Expolorer, Netscape 7+, Mozilla, Firefox, and Opera. On Mac OS X, it works in Safari, Mozilla, and Firefox. On Mac OS 9, it works in Netscape 7. (A variation of the technique using LAYER elements works on Netscape 4.7, but it's probably not worth the trouble...)
The communications and transparency techniques used are available in Version 6 of the Flash Player for Windows Internet Explorer. Version 7 of the Flash Player is required for other browsers, because of the use of wmode=transparent.
On Mac OS X, transparency in Flash works poorly, resulting in flickering whenever the Flash movie repaints. Hopefully this will be fixed in a future version of the Flash player. Other OS X issues: Java integration in Opera is currently a one-way pipe, so everything works in Opera/OSX except messages from the applet back to the Flash movie; Mozilla/Firefox on OSX require the Java Embedding Plugin for robust Java support.
The technique does not work in Linux using the Mozilla browser, because transparency in Flash is not supported. The slightly less powerful approach of putting the Flash and 3D areas side-by-side (without gaps, and with matching background images), would allow use on Linux and would eliminate the flicker in OS X. Hopefully, improving transparency support on non-Windows platforms is on Macromedia's to-do list.
The only limitation of the technique is that the Flash graphics cannot overlap the 3D area. However, we have found that designing the Flash movie to avoid overlap is generally quite easy. And, of course, the 3D component has access to the complete Meson language, which means that overlapping controls can be implemented in the 3D viewer, as necessary. For example, the 3D viewer could use a Meson-based toolbar that overlaps the 3D scene. The illusion of Flash overlapping the 3D scene can be achieved by carefully matching the Flash and Meson elements.
When we first implemented this technique, we were concerned that since Flash and Meson both are processor intensive, that animation in each might suffer. However, we have been pleasantly surprised with the results, as the above demonstration shows. It is certainly possible, however, that using interactive 3D at the same time as video rendering, could overtax the machine and lead to jerky update rates.
The 3D content is built using standard tools, in this example, LightWave. That content is imported into vSpace Master where it is tuned for the web. It is then exported to the highly compressed 3D representation used by the Meson viewing platform (the 3D ring is just 8K). At this point, we have an interactive 3D "movie" which we want to embed into the Flash movie.
As the video at right shows, a basic Flash movie wired to talk to the interactive 3D applet is generated completely automatically by vSpace Master. The description here explains how it all works, but the average Flash user doesn't really need to worry about these details -- all the ActionScript commands are written automatically.
When the time comes in the Flash movie when 3D is desired, a rectangular "hole" is placed in the background image. Using the wmode=transparent technique, the Flash player knows not to render anything into that hole, which is important for avoiding flicker. Flash then asks JavaScript, using a getURL call, to display the 3D applet over the rectangular hole. This is accomplished by dynamically setting CSS style properties. A seamless visual integration is achieved by carefully matching the background image or color of the 3D applet against the background of the Flash movie.
The 3D applet is hidden using the opposite technique: using getURL to request that JavaScript hide the applet, and changing the Flash background to cover the transparent hole. For maximum compatibility, hiding the applet is done by moving it just outside the viewable area, leaving a 1x1 pixel corner still displayed. This works around various browser quirks:
All this logic lives in a .JS file, which can be easily reused without modification.
Getting the Meson viewer to run a script, or do anything else for that matter, is done via JavaScript. Flash calls getURL to invoke a JavaScript function called sendMeson. This function locates the Meson Java Applet using the DOM, and uses a getParameter call to pass Meson language instructions into the applet. These instructions can cause any behavior desired. In this example, we use them to run scripts and change rendering mode between realistic and illustration.
Sending information from Meson to Flash uses a similar mechanism. Meson can talk to JavaScript, to send requests through to Flash. On Windows Internet Explorer, this leads to setVariable calls to set variables in the Flash movie. In Safari and Mozilla-based browsers, a more obscure technique based on LocalConnection technology is used. But, as with showing / hiding the applet, all the communications complexity is tucked away in the reusable .JS file.
With the introduction of the Meson platform, Kaon has eliminated all obstacles to the use of client-side, fully rendered, real-time 3D in Flash. The techniques Kaon has developed work across all modern browsers. Kaon has started to use these techniques in their own creative services projects, and we expect that most vSpace customers will start doing this soon as well.