Smart Graphics Technologies
 
JavaScript and Smart Graphics
Rich media and smart graphics , like the vector and bitmap graphics of a decade ago are currently driving large segments of Web development. These rich media include animations, streaming video, smart 3D models that interact and respond to user input. JavaScript is the main scripting ingredient behind 3 of 4 major smart graphics systems.
Graphics sold the Web - pure and simple. Now eMail enthusiasts and HTML aficionados might beg to differ - citing the continued drawing power of all sorts of variations on simple email systems like web conferencing, instant messaging and whiteboarding as proof of the power of the communication media. And HTML aficionados will cite the simplicity but growing power vested in hyperlinks and XML based Namespaces, Pointers and Paths as being the one true way. But Web graphic pros will just say tut.tut. The Web in the late 1980's and early 1990's was growing at a respectable 15-25% in various parts of the world with email, and hyperlinked newsnet, but it wasn't until the emergence of the Mosaic browser, with its ability to easily incorporate graphics, that the Web absolutely took off. Growth rates of 30-40% per month were experienced in those heady first few quarters after the introduction of the graphics browser.

Objects = Smart Graphics

Not just any objects, but smart objects and smart graphics have already started to permeate the Web. Okay what are smart objects ? Object oriented programming's key idea is to encapsulate or embed with data and files all of the processing routines and functions needed to activate and utilize that data. So embedded with graphics (a very complex data structure consisting of points, curves, colors , and other components) comes the code or functions to display,animate and interact with the user and the associated graphic objects. These smart smart objects now know how not only to display themselves in different devices (a desktop PC, mobile phone, a Jumbotron) but also how to move, change and interact with other smart graphics or with end users.

You have seen the animated banners ads, the video display boxes, the animations that cavort across a web page - these are all smart graphics. But just the beginning. Cars will have screens that explain themselves - touch/click on the hood and the engine is revealed. Click on the carburetor and a pop screen video explaining how the carburetor works is shown. Click on a sparkplug - and an animation which you can pause , roll back and and roll forward shows the steps needed to remove and replace it. Click on an insurance form - and an audio-visual presentation pops above any of the fields on the form your customer needs more information about. Smart objects, and many of them are smart graphics objects, are coming to the web in a big way.

Four technologies are competing for critical roles in the smart graphics revolution. The four leading technologies are Macromedia's Flash, and the W3C's open XML-based technology, SVG-Scalable Vector Graphics, Microsoft's new Windows Media Player and Viewpoints powerful integration technology, Metastream. All of the technologies technologies have at their core the ability to integrate and control several media or graphic objects in an interactive format over the Web, as network components or standalone programs. Perusal of the Table 1 below shows that the technologies chief characteristics.

Table 1 - Comparison of Rich Media/Smart Graphics Technologies
Category
Flash
SVG
Windows Media
Viewpoint Player
Functionality - remarkably similar in image and audio/video support, diverge in other media
Animations - full, both IDE designer and scripting full, scripting and predefined functions contains html and Flash uses Flash 4 and partial SVG
Bitmap/raster image support gif, jpg, contained internally gif, jpg, png, externally linked gif, jpg gif, jpg, png, psd
Rich Media support Many audio formats supported with edits, control, scripting; video with control and scripting; uses many video formats
audio, video support through SMIL; 3D support through VRML a few tools just adding these interfaces powerful audio and video codecs plus streaming capabilities also powerful video and audio support
3D modeling many 3rd party converters and tools VRML and some 3rd party converters primarily through Flash very strong 3D models support
Draw functions Simple point, line, fill Richest set of functions Good but varies with scripting tool Rich set of functions.
Design tools Strong and many 3rd party tools Good and some 3rd party Just emerging, still low level scripting tools Complete but complex set; few 3rd party
         
Programming Support- Note the prevailing role of JavaScript except for Windows Media Player
Client-side activation JavaScript embed native JavaScript, Java applets, C/C++ JScript, VC++, VC#, VBScript or Perl calls JavaScript
Server side support ActionScript, Cold Fusion, PHP, Perl Java, JavaScript, PHP, Perl, C/C++ VC++, VC#, VB, VBScript or Perl calls JavaScript or C/C++, Java
Scripting language ActionScript (JavaScript subset) JavaScript, Java, any DOM/XML supporting VC++, VB, VC# JavaScript
Add new objects via scripts yes yes yes yes
Components yes, many 3rd party simple in SVG GUI shared code examples skins, presentations, plugins yes JavaScript+XML
GIS support simple broad through scripts through SVG
Database connections yes yes yes through plugins yes through XML
XML support 2 XML objects native through scripting native
         
Deployment - options vary the most here starting with proprietary, binary versus open, text based
Deliverable file format proprietary, binary file format .swf open, text-based file format .svg combo .asf file format combo .mtx, .mts files
Standalone executable .exe for Win, Mac, Linux, some PDAs user responsible for creating .exe with C/C++ user responsible for creating with wizards utility
Encryption, compression only binary format, proprietary codecs XML Encryption, GZ zip mime standard proprietary codecs user encrypt,proprietary codecs
Browser support plugin for all browsers on Linux, Mac, Solaris, PDAs, Symbian, several Unix versions many plugin sources, Adobe the most advanced supports Linux, Mac, Solaris, Wins standalone IE 5.x, 6 Netscape 4.7, 6
Plugin penetration 95%++ of all browser users 10-20% of all browser users 80%++ of all desktops 10-20% of all browser users
Plugin size, ease of install 200K, very easy and fast varies with plugin -2-8MB; not as easy or fast 5MB, not as easy or fast easy, fast
OS platforms All Wins, Mac, Linux Win 9x, 2000, XP, Mac, Linux, Solaris, HPUx Win 9x partial, Win 2000, XP for complete Win 9x, 2000, XP, Mac

The Tradeoffs

As can be seen in each major category, each of the 4 smart graphics systems have some advantages and disadvantages. A clear cut winner from a technical and programming stand point is hard to come by. But in the area of deployment Flash has some clear advantages although SVG has more cross platform coverage. We shall look at each category in turn and see that there are inevitable trade-offs for the web and JavaScript developer.

First it is worthwhile to note that all of these technologies are fairly new, less than 6 years old except in the case of Flash which has about a decade of development. But even in the case of Flash it has seen rapid development within the past 3 years adding much improved video, scripting and component support while maintaining its well-deserved reputation for delivering very compact integrated media files across most major OS and now PDA/mobile platforms. SVG comes from the XML boiling pot and also has seen rapid increase in functionality within the last 2 years and the new SVG 1.2 spec will add more animation and audio/visual, and forms capabilities. Not to be outdone, Microsoft is clearly positioning WMP-Windows Media Player to be a major selling point in Windows XP and the new OS-rewrite, Longhorn due out in 2005. WMP had a bit of a hiccup with HTML and scripting having to be turned off due to the security risks; however since the trusted computing and ultra safe .NET runtime engine will be a part of the new Longhorn OS, these problems should be worked out by 2005. Finally, Viewpoint has one of the most impressive line ups of media integration since it supports all the basic media types that Flash, SVG, and WMP supports plus the broadest selection of 3D models plus its able to use SVG and Flash 4 or earlier animations. Viewpoint is the great integrator; however its lack of easy standalone delivery and weak browser support are critical stumbling blocks.

If we look at core functionality - the ability to support bitmap and vector graphics plus audio and video is uniform across all the smart graphics technologies. Flash supports more audio formats and allow more in its designer editing of audio than the other tools while ViewPoint leaves all the other tools way behind in its support of advanced 3D models from most of the major players including Alias Maya, Discreet 3DS and Softimage. Thus for highend demos and conceptual prototyping Viewpoint is in a league by itself. But smart graphics has tended to cluster around animations and audio/visual applications. And here Flash and SVG are the leaders with good design tools (Flash Mx, Adobe LiveMotion and Corel RAVE for Flash; Corel Smart Graphics, Jasc Webdraw and in-gmbh SphinxSVG for SVG). However, WMP and Viewpoint may have neatly finessed these advantages by incorporating Flash (and SVG in the case of Viewpoint) in their players.

However, a lot depends on how much control users want of the rich media they are incorporating. Flash and SVG have the better designer tools and a richer set of import functions for 2D and animations. Also the built in scripting to control the graphics and their interactions with users are better in Flash and SVG. Viewpoint is not far behind while Windows media Player relies primarily on major development languages - C++, Visual Basic and the new C#. This delivers more powerful coding and potential performance advantages but at the price of serious software development efforts.

Programming Support and Deployment

So the web and JavaScript developer may say - "Fine, I know all four technologies give me good 2D and audio visual basic support; Viewpoint seems to integrate more rich media and especially 3D models while Flash and SVG excel in user interactions and animations. But what about the programming environ?". Glad you asked.

First and foremost, Windows Media Player is a standalone application that can be embedded in Web applications while the other three technologies are primarily Web applications that can be made into stand alone applications with varying ease: Flash easiest - Viewpoint hardest. All four technologies allow JavaScript to invoke their services with SVG and Viewpoint easiest and most flexible, Windows Media Player the most difficult.

JavaScript (or its subset, ActionScript, in the case of Flash) is the internal scripting agent or language for all the technologies but Windows Media Player. However, that may change as JScript is a full .NET language and it may "come along for the ride" in later incarnations of WMP that incorporate more .NET based functionality. On the server-side Flash and SVG have nearly the same options including Perl, PHP as well as JavaScript while WMP is confined to Windows 200x deployment but supports a full array of languages including VB, VC++, and Perl.

It is interesting to note that all four technologies have well defined APIs and their scripting languages allow the creations of both new and inherited smart graphic objects. This is reflected in the fact that only WMP lacks some sort of components support; but that should change as WMP plugins and skins get incorporated into Visual Studio as either UI components or wizard-based predefined objects. Finally, the ancillary functions like database connections, GIS support, and XML support varies considerably so be careful if these are important in your requirements.

On the deployment side, there are mixed approaches as well. Flash employs a proprietary but openly published SWF format that reduces everything to binary fields in a carefully managed and compressed space. Ditto for Windows media Player which has equally impressive compression technologies and incorporates Flash files directly. Viewpoint and SVG use a text catalog or metafile with linked compressed files.

These two approaches have have advantages. SVG proponents argue their files are open to search engines and allow for ready for richer search experiences. they also argue that their design and coding can be more readily vetted and learned. Flash and WMP respond that that their systems are less likely to get lost in transit and afford immediate protection from unauthorized access. SVG and Viewpoint reply that XML Encryption technology can easily keep away unwanted prying eyes. And both claim that their open standards XML base ensures that all users/developers are afforded a level playing field and great extensibility options.

But on deployment reach, Flash and WMP have much stronger messages - each have greater than 80% market penetration of their players, so users are not likely to have to download their players. But Viewpoint can rightly claim that it has a very fast and easy download process and auto update at a much more granular, on-demand basis.

But all three of the Web based vendors are negatively impacted by Microsoft freezing its Internet Explorer technology. IE6, despite being 3 years old and weakest in browser features and most vulnerable to hacker attacks, it has still managed to command about a 90% marketshare. But what happens with the new proprietary, part of the Longhorn OS browser? Will plugins still be "free" ? All bets are off as Microsoft does all to ensure that Longhorn is a blockbuster seller with WMP playing a critical role in that event. Ahh yes, the plot thickens.

Fortunately for SVG, Mozilla will probably release SVG natively in the next edition of this browser - this should give SVG a boost. This developer must admit that getting rival Adobe, Apache, and Corel SVG viewers to work in various IE, Mazola and Opera browsers was a thankless chore. As noted above, Viewpoint has the narrowest reach with platforms and browsers supported. This is the Achilles heal to an otherwise excellent smart graphics technology.

Summary

So once again, JavaScript developers are well positioned to take advantage of a new and fast evolving Web technology. JavaScript is at the core of three of the four major tools with Flash's ActionScript being a subset of JavaScript but adhering to JavaScript syntax, control flow and programming constructs. But all of the technologies interface to JavaScript in its Web HTML scripting role. And there can be no doubt with proliferation of animated banner ads, wider use of streaming audio visual presentations and growing use of smart graphics based demos - the days of static graphics just like static websites of 5 years ago are clearly numbered

Jacques Surveyer is a consultant and writer, see more about Flash and XML at his www.theOpenSourcery.com

Resources:

SVG at W3C - all the news fit to print on SVG, the specs, test suites, and new candidate recommendations
Corel Smart Graphics Studio - The first complete SVG IDE
Macromedia - Flash Mx and Flash Remote information for developers
Viewpoint - all that you need to know about Viewpoint's impressive smart graphics player and technology
Windows Media Player - the complete lowdown and documentation on Windows Media Player and its SDKs


 Top of Page  Open Sourcery Home Tips & Tutorials   
©Imagenation 2001-2004