How to translate SVG documents
for viewing them with any Flash player

Presented with 3 examples of SVG source code, compiled to SWF machine code

G. Trébaol works in the R&D of automated mechanic and hydraulic industrial systems.
He has a M.S. degree in mechanical engineering

Abstract

This document shows how the field of applications of SVG can be expanded
by reusing the SWF Flash players already installed on most computers and mobile devices.

This Web page is available in http://gtrebaol.free.fr/doc/svgopen/2008/presentation/.
This is an enhanced version of a similar paper presented at the SVG OPen 2008 conference, in zzzz.

Table of Contents

SVG versus Flash

Competing or complementary ?

Now, Flash works anywhere…

Advantage of using the SVG to SWF translation

SVG is easier for generating 2D graphics

Flash also provides XML-oriented or script-based generation tools, but not so easy

SVG is a convenient source code for producing SWF machine code

Demonstrations of SVG to SWF translations

Demo #1: programmed shapes, programmed animations

Demo #2: generated SVG shapes, programmed animations

Demo #3: generated SVG shapes, generated SVG animations

Flash & ActionScript reference documentation

Is Flash a proprietary standard or an open standard ?

How to choose between the ActionScript Version 1, Version 2 or Version 3 ?

How to get the PDF documentation for ActionScript V1 ?

Where to find the HTML documentation for developing with ActionScript V1, V2 or V3 ?

SVG versus Flash

Competing or complementary ?

For 10 years, Vector Graphics have been an issue for Web designers and publishers:

• When the W3C defined the new SVG standard in 1999,
  it triggered a competition with the other possible standards for Vector Graphics on the Web:
• Flash, that appeared in 1995.
• VML, published by Microsoft in 1998 ( the origin of VML seems to be a translation to XML
  of the graphics primitives already specified in the MS-Office format RTF 1.5 ).
  
• For comparing SVG and Flash, different papers were published,
  mostly related to geographic information systems (GIS):
• Once available on http://www.carto.net/papers/svg/comparison_flash_svg/
• http://www.dryade.net/navimap_gb/svg.htm
• http://www.geoclip.net/an/p35_flashsvg.htm
• But even if many comparisons granted a technical advantage to SVG, Flash is still the most popular !

Now, Flash works anywhere…

The Flash SWF format has won against SVG, especially after Adobe acquired Macromedia:

• Althought Mozilla / Firefox is back on the rising edge and supports SVG,
  the SVG documents are accessible only for a small minority among the users of Internet Explorer.
• Moreover, the availibility of SVG is still declining on the Web browsers.

Table 1. Statistics of the plugins installed on Web browsers

Figure 2. 2003: Flash 98% SVG 17%	Figure 3. 2004: Flash 98.2% SVG 11.9%
Figure 4. 2006: Flash 96% SVG 11.3%	Figure 5. 2008: Flash 99% SVG 7.9%
Source : NPD - Media Metrix	www.adobe.com/products/player_census/flashplayer/

Advantage of using the SVG to SWF translation

SVG is easier for generating 2D graphics

Despite a lack of interest for Web designers, SVG is still very convenient for technical applications:

• The syntax of SVG is elegant and self explanatory.
• The underlying XML format is rational.
• For those who prefer to use the POSIX fprintf() instead of the W3C Document Object model,
  the generation of a well formatted SVG document is fast and pleasant.
• Even machine-generated SVG documents are human readable.

Flash also provides XML-oriented or script-based generation tools, but not so easy

For generating Flash files from XML, Macromedia proposes the FLEX tool:

• Flex is mainly designed for making graphical user interfaces (GUI).
• Flex is competiting with many other XML-based GUI builders: for a quick overview,
  you can see http://xul.sourceforge.net/talk/mtd-may-2004/slides.html.
• If you want to generate mainly graphics,
  I think that SVG is still a richer, more efficient and more concise standard.

For generating Flash files from script files, the simplest way is to use the Ming package for PHP:

• You can find exhaustive tutorials in http://www.gazbming.com/
• However, if you want to edit or to generate complex vector graphics,
  PHP scripts are probably not as easy as SVG

SVG is a convenient source code for producing SWF machine code

The SVG format can be considered as a high level language for 2D graphics, whereas
the SWF format can be considered as a universal machine code for 2D graphics:

• SVG and Flash SWF are both used for vector graphics,
  just like the C/C++ language and the 80386 assembly code are both used for programming computers.
• Like those who prefer to develop in C/C++ langage instead of assembly code,
  you can use SVG for the source code of vector graphics,
  and then translate it to SWF binary code with a compiler tool.
• For doing that, the SVG to SWF compiler is fast and easy.

Demonstrations of SVG to SWF translations

The 3 following examples are mixing vector graphics that are:

• Either programmed with a scripting language
• Or defined by SVG shapes

Demo #1: programmed shapes, programmed animations

This first example uses an advanced Flash programming technique. It shows:

• How to use the SVG to SWF compiler for developing Flash movies using complex programmed animations.
• How to use SVG for designing a simple user interface containing 2 buttons, 3 sliders, 4 text boxes, 1 canvas area
• How to insert dynamically created spline curves in a SWF document containing static shapes defined in SVG.

Explanations about this example :

• For a more detailed description, see in http://gtrebaol.free.fr/doc/flash/soda_reader/
• It is based on an original Flash application :
  • Developed in 2004 by Jim Bumgardner with Flash MX 2004.
  • Published in his Flash Bestiary: a collection of Flash movies mainly developed in ActionScript.
• In 2007, I regenerated the same application with the SVG to SWF compiler:
  • The user interface and the animation logic are programmed in 3 ActionScript files,
    containing nearly the same code as the original Flash MX application.
  • The user interface is redesigned in this MS-Word file, saved in HTML format.
  • The MS-Word design is translated the to SVG with the office2xml tool.
  • Next, the generated SVG file is translated to SWF:
    svg_render -w t -s 24 -i soda_reader.svg
• The resulting SWF movie produced with the SVG to SWF compiler
  is similar to the original SWF movie produced with Flash MX 2004.

Demo #2: generated SVG shapes, programmed animations

This second example uses a medium level Flash programming technique. It shows:

• How to use SVG for making SWF movies, for web site introductions, banners, slide show effects, etc.
• How to design with MS-Word a SVG image containing texts, shapes, images, gradients, textures.
• How to develop a sequencer program for animating the SWF document generated from the SVG document.

Explanations about this example:

• For a more detailed description, see in http://gtrebaol.free.fr/doc/flash/mulholland_drive/
• It is based on 2 pictures published in a magazine.
• The different animation sequences are programmed in ActionScript:
  • At the beginning, the movie sequence is non interactive,
  • Then the animation stops, until the user clicks on the key lying on the ground.
  • The source code of the sequencer can be modified for producing other animations.
• The SVG to SWF compiler is called by the Office to SVG compiler:
  • The Flash movie is generated from the source MS-Word document.
  • The usage of office2xml for translating .doc to .SWF
    is presented in a previous presentation at SVG open 2005

Demo #3: generated SVG shapes, generated SVG animations

This third example shows how to use SVG for generating a sequence of computed images,
and displaying it with a movie viewer embedded in a Windows application.

This technique is useful in CAD or engineering tools, for displaying animated simulation results:
the recorded sequence is smaller and more accurate with vector graphics than with a video format like AVI, MPG or FLV.

For using vector graphics embedded in an engineering application:

• In the past, you could use the Adobe SVG viewer, but it is no more maintained.
• For the same purpose, now you can use the Adobe Flash player, working with the SVG to SWF compiler.

Explanations about this example :

• For a more detailed description, see in http://gtrebaol.free.fr/doc/flash/four_bar/doc/
• It is inspired by a simulation program of four bar linkages:
• Written in 1995 by Jean-Pierre Merlet and published by the INRIA (a French research institute).
• The original program was developed in C language on UNIX, using X11 graphics.
• In 2007, I rewrote this software for Windows, with a new simulation logic:
  • The simulation program uses neither the SVG DOM nor the Windows GDI primitives.
  • Instead, the graphic primitives are replaced with a SVG file writer:
    fprintf( svg_file, "<rect class='frame' x='%g' y='%g' width='%g' height='%g' />\n", x, y, w, h );
  • Each step of the animation is nested in a group of shapes, identified by a sequential integer index:
    <g id='a12052' style='visibility:hidden;'>
  • The generated SVG file includes 2 utility files:
    1. A file for configuring the colors, containing a CSS stylesheet and gradient definitions.
    2. A file containing an animation script:
       • The animation code for SVG is included in the file animation.js.
       • The SVG to SWF compiler checks if a corresponding ActionScript file exists.
       • If so, instead of the file animation.js compatible with the SVG object model, it compiles the ActionScript file animation.as compatible with the SWF object model.
• The simulator is a conventional Windows application:
  • The buttons, sliders, text boxes are made with standard Microsoft Win32 controls.
  • The Flash player is integrated through a standard OCX interface:
    • If you want to use it, you can search a programming tutorial about CLSID_ShockwaveFlash
    • For making this demo, I used the tutorial in http://files.codes-sources.com/fichier.aspx?id=33091
• For every simulation cycle:
  • A new SVG file is generated, compiled to SWF and loaded in the embedded Flash player.
  • The SVG compiler is loaded and executed as an external program with the Windows system call
    spawnvp() that is equivalent to the POSIX system calls fork() and execvp().
  • The cycle is fast, because the SVG to SWF compiler works in a fraction of second.
  • The same principle of operation could be used on UNIX / Linux systems.
• The code of the animation sequencer is short and similar for the SVG and SWF versions:
  • The sequencer is implemented in a JavaScript function called every 33 milliseconds.
  • The SVG + JavaScript version uses the setTimout() timer primitive:
    setTimeout( sequencer_tick, 33 );
  • The Flash + ActionScript version uses the built-in sequencer of the flash player:
    this.onEnterFrame = sequencer_tick;
• Then, the performances of the generated SVG and SWF files can be compared on a standard PC :
  • A Pentium 4 at 3GHz, with a RAM of 1GB.
  • Windows XP SP2.
  • Mozilla SeaMonkey V1.1.7.
  • Adobe Flash Player V9.0.
• As a result, the simulation converted to the SWF format is much smaller and faster than the SVG source file :

Flash & ActionScript reference documentation

Although Flash and ActionScript are not official Web standards, both Flash and ActionScript have a widely accessible reference documentation.

Is Flash a proprietary standard or an open standard ?

Flash is surely less open than SVG, and since Flash is a commercial property of Adobe, you may be afraid of depending on an opaque standard. Fortunately, the technical strategy of Macromedia and Adobe is open, and the successive versions of the Flash (SWF) file format specification are published:

• SWF File Format Specification Version 7
• SWF File Format Specification Version 8
• SWF File Format Specification Version 9
• Up to now, the newer versions are always backward compatible.

These specifications are used by independent teams, for developing many Flash-compatible tools:

• Examples for SWF generators:
  • The SVG to SWF compiler uses the Ming library : http://www.libming.org/ (available on the Source Forge).
  • For other conversions (e.g. PDF to SWF or PNG to SWF), you can use SwfTools: http://www.swftools.org/
  • For compiling ActionScript V2, you can use the MTASC compiler: http://www.mtasc.org/
• Example for SWF players:
  • SWF movies with ActionScript can be viewed on Windows or Linux with gameswf,
    a SWF player written by Thatcher Ulrich (available on the Source Forge).

Figure 9. A SWF movie containing ActionScript,
generated with the SVG compiler and viewed with GameSWF

These independent initiatives are probably not a threat for the Adobe Flash commercial products,
but they show that Flash SWF can be considered as a reliable de facto standard.

How to choose between the ActionScript Version 1, Version 2 or Version 3 ?

The current Flash players for Windows or Linux are compatible with the different versions of the ActionScript language,
corresponding to different programming styles:

• ActionScript V1 is close to the traditional JavaScript or ECMAScript standards:
  • This language uses dynamic object creation and untyped variables containing variant data types.
  • For a developer using SVG or HTML , it is quite easy to use it.
• ActionScript V2 and V3 are evolving in the direction of strongly typed languages, like Java or C#.
  • These languages use traditional object and data type declarations.
  • An algorithm compiled in ActionScript V2 and V3 is probably safer than with ActionScript V1.
  • But the versions V2 and V3 may seem heavier, for those who prefer C language and JavaScript...
• Consequently, ActionScript V1 is still interesting for developing simple animations,
  having nearly the same syntax in ActionScript V1 for Flash, or in ECMAScript for SVG.

How to get the PDF documentation for ActionScript V1 ?

• The documentation files are accessible on the Adobe (formerly Macromedia) Web site.
• The size of these files is about 6MB.
• To download them, right click on the link and choose "Save Target As"

Where to find the HTML documentation for developing with ActionScript V1, V2 or V3 ?

If you prefer HTML, rather than PDF, the Adobe Web site provides online documentation for developing with the ActionScript object model:

• For example, the interface of the fundamental MovieClip object :
  • In ActionScript V1 - flash 7/main_7_2/00001484.html
  • In ActionScript V2 - flash 8/main/00002436.html
  • In ActionScript V3 - flash 9/ActionScriptLangRefV3/flash/display/MovieClip.html
• Currently, the Adobe Web site provides information for the 3 versions of the ActionScript object model :
  • The current Flash homepage - http://www.adobe.com/support/documentation/en/flash/
  • For the HTML help about ActionScript V1, you can download a zipped archive.

Conclusion and future work

I hope that the SVG to SWF compiler presented in this paper will help
SVG to develop like the other Web standards promoted by the W3C.

A possible evolution would be the integration of XML 2D and XML 3D graphics :

• For engineering applications using both 2D and 3D graphics,
  it would be interesting to use XML documents combining:
• 2D graphics, conformant to the SVG standard.
• 3D graphics, conformant to the X3D standard.
• Internally, the SVG to SWF compiler is built around a fast XML DOM library, designed for:
• Identifying efficiently the information belonging to different XML namespaces.
• Storing geometric data in native number formats (short/long integers, IEEE floating point, etc.).
• Recycling the memory cells and chasing memory leakages.
• The SVG to SWF compiler can be upgraded for generating machine code in different formats:
• The existing code generator produces SWF code.
• A second code generator is in development, for generating OpenGL display lists.

Currently, the SVG to SWF compiler is a beta version software, developed as a hobby project.
The code is written in ANSI C language. It is mostly system-independent for the portability on Windows, POSIX, Linux and MacOS platforms.
If you are interested in commercial applications or in the development of this tool, your suggestions and comments are welcome !