Digital Edition

WysiDraw 1.0
WysiDraw 1.0

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 ( has introduced WysiDraw 1.0 ( Formerly known as Davinci, WysiDraw leverages Macromedia's Rich Internet Applications (RIA) ( 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 (

Now let's look deeper...

WysiDraw is currently available in two editions: Component and HTML.

Component Edition
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 ( 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.)

HTML Edition
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.

The Interface
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.)

    Whiteboard Example
    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.

  • About Sheldon Sargent
    Sarge is Sr. Technical Support Engineer, Adobe Systems, based in Gilbert, Arizona. He has been coding advanced applications in CF since version 2.0.

    In order to post a comment you need to be registered and logged in.

    Register | Sign-in

    Reader Feedback: Page 1 of 1

    Subscribe to the World's Most Powerful Newsletters


    Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: D...
    With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO an...
    Containers and Kubernetes allow for code portability across on-premise VMs, bare metal, or multiple ...
    CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018,...
    @DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22...
    The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news an...
    Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As au...
    Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: D...
    The now mainstream platform changes stemming from the first Internet boom brought many changes but d...
    "We began as about five years ago as a very small outfit. Since then we've transiti...
    DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held Novemb...
    Machine Learning helps make complex systems more efficient. By applying advanced Machine Learning te...
    The Internet of Things will challenge the status quo of how IT and development organizations operate...
    More and more companies are looking to microservices as an architectural pattern for breaking apart ...
    With the proliferation of both SQL and NoSQL databases, organizations can now target specific fit-fo...
    Andi Mann, Chief Technology Advocate at Splunk, is an accomplished digital business executive with e...
    In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and ...
    Adding public cloud resources to an existing application can be a daunting process. The tools that y...
    Organizations planning enterprise data center consolidation and modernization projects are faced wit...
    Serveless Architectures brings the ability to independently scale, deploy and heal based on workload...