Sep. 11, 2003 12:00 AM
Have you ever wanted to chat simultaneously with two or more of your friends, but each of you uses a different chatting medium? Have you ever participated in a teleconference where you had the pleasure of waiting for the administrator/moderator's e-mail of presentation modifications? Perhaps you were that moderator, frustrated that the company's chosen third-party collaboration platform had once again crashed, leaving your presentation dead in the water.
Well, my friend, to help solve this problem, Fig Leaf Software (www.figleaf.com) has introduced WysiDraw 1.0 (http://products.figleaf.com/). Formerly known as Davinci, WysiDraw leverages Macromedia's Rich Internet Applications (RIA) (www.macromedia.com/resources/business/ rich_internet_apps/) platform to provide a cross-browser annotation and collaboration solution.
Not Just Another Component
Hey wait a minute, isn't WysiDraw just another cool Flash MX component package that just missed one of Macromedia's DRKs (see Christian Cantrell's July 2003 article, "Macromedia's DevNet Resource Kit: Just the Beginning?" CFDJ, Vol. 5, issue 7). True, fundamentally, WysiDraw is a Flash MX component that allows developers to add colors, scribbles, texts, and geometric shapes as layers on top of background JPEGs.
These layers are in a fully moveable (including forward and backward) stack, providing users with various levels of emphasis. Fig Leaf even embedded functionality to print user annotations. And because it was built with Flash MX technology, WysiDraw is both cross-browser and cross-platform accessible via any device running the Flash 6 player (www.macromedia.com/software/flashplayer/).
Now let's look deeper...
WysiDraw is currently available in two editions: Component and HTML.
The WysiDraw Flash MX component can be embedded into any Flash MX movie and made extensible with a firm knowledge of ActionScript. It includes its own Developer's API that's installed into the Flash MX Reference panel when you run the Macromedia Extensions Manager file (WysiDraw.mxp). Code hints are available in the Actions Frame (Expert View) for object instances named with the "_wd" suffix (see Figure 1). The WysiDraw component can also easily integrate with the Flash Communication Server MX (www.macromedia.com/software/flashcom) to create real-time whiteboard applications. WysiDraw users can then utilize the audio, video, and chat room FlashCom services to create a full collaboration suite.
(Note: WysiDraw is compatible with Flash Communication Server 1.0 and 1.5.)
This is a stand-alone WysiDraw instance that can be embedded into HTML. Developers can either: hard-code images into the HTML source; leverage application server pages (ColdFusion, ASP, etc.) to dynamically load images - Fig Leaf includes custom coding for ASP, ColdFusion, and PHP; or allow users to create their own images in an empty drawing area. Fig Leaf has also created the WysiDraw XML DTD for the purpose of capturing real-time annotations as XML packets (see Listing 1). These packets can be saved to back-end data sources and then dynamically retrieved to regenerate the original image.
WysiDraw includes a fairly intuitive interface (see Figure 2), including tool tips for each button. It is divided into four areas:
Resource menu: Contains functions that control the component, including buttons for such standard commands as New, Copy, and Paste. The layer control buttons (Move Forward, Move to Back, etc.) are great features that empower even novice graphical tool users. An added bonus is the Print feature, which allows users to print their images - including the annotations.
What's missing from this menu is an inherent Open and Close functionality. Sure developers can programmatically load images - including the captured XML renderings. But a native Open/Close feature that allows the uploading of different images without reloading the entire document will make WysiDraw a more powerful collaboration tool. New features in version 2.0, which is due out in October 2003, are Undo, Redo, Zoom, and the ability to load, show, and hide multiple annotation layers.
Properties menu: This menu allows users to control their markup components - i.e., Bold, Stroke, Fill, etc. Items are displayed for all drawing tools other than the Select tool. This allows users to change the display of their annotations; for example, changing text color, point size, and font, or adding arrows to a line or curve.
The properties menu has some setbacks that take away from its functionality. For example, the text tool size is difficult to manipulate. Another detractor is the limited text-editing tools. Fig Leaf should implement alignment (left, centered, right, justify) properties, lists (bullets and numbers), underline, etc., for the text boxes. These are standards in today's graphical interfaces.
Drawing menu: Contains the graphics tools used for image markup. These include the familiar graphic tools such as Select, Line, Oval, Curve, Freehand, Rectangle, Oval, and Text. Select is the default and most utilized tool. The one standard graphical tool missing is the Eraser tool. Fig Leaf should consider adding this tool in the next version to facilitate corrections. Currently you have to use the Cut tool (or the Delete key in the HTML edition) to make deletions.
Drawing area: This is the user's workspace where all markups are made. All images are loaded or created here. Users select the tool from the Drawing Menu at left and mark up the image. When in collaboration mode, a Draw/Release button is displayed to allow a user to grab control of the drawing area while others watch. When the user has finished his or her annotations, clicking Release relinquishes control.
Installation and System Requirements
System requirements are pretty straightforward. Both editions require the Flash 6 player (6.0+) as a client. The latest Flash player is available for download from Macromedia. The Component edition requires the Flash Communication Server; the HTML edition requires only a Web server.
Use the WysiDraw.mxp file to install WysiDraw Component and Developer API into the Flash MX authoring environment. The FLS Components will be available in the Components panel menu. Expand the Reference section of the Actions Frame to reveal the FLS Components help. Next, install the wysidraw.asc file into the Flash Communication Server's Scriptlib\Components directory. This file contains the server-side ActionScript for the WysiDraw objects and functions.
For the HTML Edition, place a copy of the WysiDraw.swf in a directory accessible to your Web and/or application server. Use the HTML <OBJECT> tag with nested <PARAM> and <EMBED> tags for an HTML deployment.
Use the ColdFusion custom tags (<CF_WYSIDRAW>) and ASP subroutine (wysidraw.asp) that are provided, to integrate WysiDraw in those respective environments (see Listing 2).
(Note: WysiDraw is compatible with ColdFusion 5.0 and MX.)
Familiarity with the Flash MX authoring environment and the Flash Communication Server application directory structure is essential to creating applications with WysiDraw. Fig Leaf provides adequate User and Developer references to enable quick deployment.
The basic steps are:
1. Drag the WysiDraw component to the Stage and give it an instance name. (Note: Remember to add the "_wd" suffix to the instance name to enable the coding hints in the Action Frame.)
2. Add the Simple Connect control from the Communication Components panel. Simple Connect is necessary to provide the connection interface to the Flash Communication Server.
3. Register your WysiDraw instance name with the Simple Connect Communication Components array in the Properties panel.
4. Add any other communication components you want to have in your applications: video, audio, or chat; and also register them with Simple Connect.
5. Create a main.asc file with the following commands: load(:components.asc"); load(:components/wysidraw.asc"); and place it in the appropriate Flash Communication Server application directory.
6. Publish your movie (to create the HTML and .swf) and place them on your Web server.
WysiDraw is more than just another component for extending Flash MX movies. It provides a dynamic standalone HTML vector-based imaging tool, and a component architecture for extending Whiteboarding capabilities in Flash Communication Server Rich Internet Applications (see Figure 3).
Although the current 1.0 release supports only JPEG images, the tool performs as advertised, with plenty of functionality to satisfy savvy collaboration tool users. So if you are a long distance-learning student looking for a cool tool to facilitate those online team groups, have your university administrators give WysiDraw a try.