Shape defined symbols

1. a single or series of shapes which consists a series of lines/curves, defined in a SVG file;
2. as an array of commands which specify fill, stroke, and drawing commands which can be used to efficiently re-create the movieclip.

In my case i worked with an SVG file in which a series of shapes is defined by groups containing paths. I used one of the drawing commands to built up the shapes frame by frame. An example is available on http://actionscript-toolbox.com/shapeDefinedMC.php. There are also commands to move or place external movie clips along a defined path, or draw along the defined paths.

The SVG-files can be created by exporting an Adobe Illustrator file to SVG. Note: in Illustrator 10 you need to delete all CRLF's in the d attribute in order to make the parsing work.

The SVG-tags are being parsed and put in arrays of groups containing paths, which are displayed one frame at a time. The building of each path is triggered by an onEnterFrame event, thus the speed of building can be changed by changing the frame-rate of your movie.

Each group tag (containing paths) in the SVG-file defines one object in the movieclip. These group tags can not be nested. In SVG they can, but Flash can not interpret them.

I found out that the shapes defined in ths SVG-file can not be too complicated. If they are, Flash can not parse the file; it results in a stack-overflow because of too many recursive calls. Also some bugs occured in displaying the parsed paths, showing other shapes in Flash then originally created in Illustrator.

It's a matter of "trial and error" to see if your shape is fit and simple enough for Flash to parse and display. I didn't check or debug the functions that parse and draw the shapes, they are way too complicated and mathematical (Bezier curves, etc) for this small research.

• SDS_test.swf
• people.svg

-- ChielPauw - 23 Jun 2003

I see that SDS_test is too slow to render in my browser - I get the famous time out error. Solutions can be:

• Do parsing in an onEnterFrame loop instead of one recursive function. Don't know if this is doable.
• Separate the parsing of 1 one people.svg file in 4 separate files

Chiel, how do you create SVGs from Photoshop images?

-- ArthurClemens - 23 Jun 2003

You can not directly generate SVG files from Photoshop. SVG means Scalable Vector Graphics, so it means you have to convert your photoshop-shapes to paths. Then you can import these paths into Illustrator and then export them to a SVG-file.

-- ChielPauw - 23 Jun 2003