How Flash Animation is managed by an SWF to SVG Translation Package
SVG provides three methods of defining animations:
- Using the Synchronised Multimedia Integration Language (SMIL)
- Using SVG's own declarative animation syntax.
As described elsewhere, SWF defines an animation by defining shapes and then applying positional, depth and colour transformations to those shapes when mapping them onto a stage. Each shape is given a unique identifier when it is defined enabling the following types of sequences to be specified within an SWF movie.
Frame 1 Define shape 1 Frame X Apply scaling, rotation and translation (transformation matrix) to shape 1 Place shape 1 at given depth Frame Y Remove shape 1 Apply new transformation matrix to shape 1 Apply colour transformation to shape 1 Place shape 1 at given depthThis enables representations of shapes to be specified and manipulated in a compact manner. For instance, should a given animation require a blue square to move from top left to bottom right of the stage whilst a yellow rectangle moves from bottom left to top right, with the square being displayed on top of the rectangle if the shapes occupy the same area of the stage, then this can be achieved by specifying one shape and manipulating instances of the shape as the animation progresses. A semantic description of how this could be achieved in SWF follows:
N.B. It seems likely that the <symbol> element should be used to defines these shapes, as the SVG specification indicates that this element should be used for defining template objects that will be instantiated multiple times, however current versions of the plug-in do not support this element, therefore work-arounds will be employed until such a time as the <symbol> element can be tested.
As the SWF file is processed a list is maintained of which shapes should be instantiated and at which depth they are to be displayed. Once all the shapes have been defined, instances of these shapes can be instantiated using the <use> tag.
Each shape should have one instantiation for each occurrence of the shape at a given depth. The shapes should be instantiated in depth order, this effectively specifies the stacking order for the shapes in SVG, and has to occur because there is no way to specify the depth of a shape within the SVG syntax. Once all the shapes have been instantiated they should be removed ready for the animation to start. This initial instatiation of the shapes, and then hiding the instantiations by setting the visibility property to hidden, means that it is very simple, in subsequent frames of the animation, to display shape instances at the correct depth.
<svg> <defs> <g id = "1"> <path style="..." d="..."/> </g> </defs> <use id = "instance_of_shape_1_at depth_1" href = "#1" style = "visibility: hidden"/> <use id = "instance_of_shape_1_at depth_2" href = "#1" style = "visibility: hidden"/> </svg>
The mapping of the shapes onto a SVG view-port to produce the animation is controlled by the associated HTML file. This file is generated as the SWF controls are encountered within each frame. The associated HTML file would take the following form:
Using the techniques outlined above the following SVG animations have been produced
Please note: You will need a beta release of Adobe's SVG plug-in to view the SVG. This can be obtained here. To check you have the correct release, view the "About the Adobe SVG Viewer" menu item available by right-clicking in any SVG file. If the version is "Beta Release 1, build 70" then you are OK to download the samples below. If you cannot find the "About ..." menu item, or it specifies a build no. less than 70 then you do not have the required plug-in. Also note that the files do not view properly under Netscape, use IE if possible.
|File name||Flash file||SVG file|
|Fatboy Slim *||SWF||SVG|
Also note that the SVG files linked to above are, with the exception of those markes with an asterisk *, produced by the SWF2SVG converter. You may see some differences in the colours of certain graphical elements, as some very minor editing of the files has to be made by hand in order to get some colour transforms to work correctly (see below). Those files marked with an asterisk have had some minor alterations made where elements where the colour transforms are necessary in order for the graphic elements to be visible.
Some problems still remain. In SWF many shapes have definitions which map into SVG as follows:
Although the software is not yet available for distribution, if you would like to try and convert your own SWF files then the latest beta version of the converter is accessible on-line. This gives you the opportunity to upload a SWF file and be returned a zip file consisting of an SVG file, an HTML wrapper and any associated JPEG file. As mentioned the software is still under development so please send any comments or problems to email@example.com.
Last Updated: 6 January 2000 (Steve Probets)