Actionscript 3 to vector graphic (16)

, under actionscript.

Actionscript to vector graphicI like to generate art and objects with Flash/actionscript. Mostly I use a bitmapdata for that and export this as a PNG-24. This works perfect in most cases. But sometimes I wish there was a simple way to export my art to a scalable vector graphic. This would save a lot of data, and I’ll be able to create unlimited large and sharp prints.

I started searching and found some nice-to-know options.

Save as PDF
If you have a PDF-printer installed, you could save the vectors as PDF (drawed with lineTo, curveTo etc). Just right-click on your flashmovie, and choose ‘print..‘. Then choose ‘Adobe PDF‘ or another PDF printer. This is very simple!
Downside; My flash movie is becoming very slow when I create a lot of shapes.. After all; That’s the reason I use BitmapData objects. Sometimes I let Flash render a whole night before saving it and maybe it create more then a million shapes. To be realistic; I think a million shapes wouldn’t be cool as vector graphic, I guess my Illustrator doesn’t like that or the printshop-dude starts crying šŸ˜‰ However.. I think there are tools to optimize/clean shapes that could be helpful too.

Open vector formats
I didn’t know this exist (because I never searched for something like this), but there is a lot information about a SVG file format. A lot of vector programs support it already and even modern browser could show SVG file formats too.
I found this and this link. The opposite would be an great idea; It could be cool if we could export SVG. While rendering we could write/add into a file. Then I could use a small bitmapdata object, just show it and render it real-time. Downside; I think SVG doesn’t support blendmodes or filters.

I really think there is a lot more to explore. If anyone have some other suggestions or ideas, feel free to post it.

16 responses to “Actionscript 3 to vector graphic”

  1. Hi Mark,

    I used to use bitmapData.draw() like a camera, taking multiple shots of a very large image and then stitching them together as a byteArray before exporting a single PNG. The actual exporting part was not too bad however, generating artwork across tens of thousands of pixels would cripple performance.

    My new approach is to generate the artwork at screen resolution and save the data as XML (ie: path co-ordinates, line weights, fill colors, etc). I then pass the composition data to a custom-built AIR app that instructs Illustrator and Photoshop to redraw the artwork at full-scale (using Switchboard). The rendering process is very fast and can output a 400Mb TIFF at 300dpi from just 60Kb of XML data.

    Rather than using my own schema, my next aim is to save the composition in FXG format: http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification

    Hope this helps,

    Andy McDonald
    Centre for Advanced Textiles
    Glasgow School of Art

  2. Mark Knol says:

    Hello Andy, thanks for replying and share your thoughts about this subject. If I get it right you only save positions, colors and fills etc as data and render this later as vector file? or as bitmap? I really like the idea of having a set data (xml) which is redoable. How do you exactly redraw the xml-data to photoshop/illustrator? What do mean with switchboard?

  3. Andy McDoanld says:

    Hi Mark,

    Apologies for not getting back to you sooner.

    ExtendScript is an extension of JavaScript that can be used to build custom scripts for Creative Suite tools. Each tool has its own API (ie: the Document Object Model) that provides access to most of the core functionality. Rather than triggering these scripts from the within the tool itself, SwitchBoard (http://labs.adobe.com/wiki/index.php/SwitchBoard) is a utility that allows them to be called from within an AIR app.

    The research centre where I am based specialises in digital printing onto fabric. We need files to be in TIF format (Lab color mode) therefore my AIR app actually instructs Illustrator to re-generate the composition as vectors before passing it over to Photoshop to rasterise and export as a bitmap. Although there are a lot of gaps in functionality, the export options are pretty complete so you can save the artwork in just about any format you wish.

    If you send me an e-mail then I can direct you to a video that shows this workflow in action.

    Cheers,

    Andy McDonald
    Centre for Advanced Textiles
    Glasgow School of Art

  4. Alex says:

    hey I’m very interested in this subject and I was wondering if one of you guys could walk me through. Ive been looking for something like this for a while now

  5. Jeremy says:

    I’m interested in this as well. I was thinking of using Processing to generate the art but a friend told me .fxg might easier since I already know Flash and Flex. Any chance I could see that workflow video? Have you guys made any progress since this was last brought up? Any links to resources would be most helpful.
    Cheers.

  6. ash says:

    I’ve done basic FXG export for my drawing tool:
    http://www.conceptualinertia.net/aoakenfo/fxg
    http://www.conceptualinertia.net/aoakenfo/flash-drawing

    However, last night when I tried importing a dense drawing, Illustrator couldn’t handle parsing the large FXG file and I had to force quit.

    Has anyone had a similar experience? I might try breaking the file up into fragments first and loading them piecemeal into Illustrator. Another option would be to save the drawing in binary format and manually draw paths using the Illustrator SDK.

  7. That’s awesome! *buys you a coffee so you write more* =] haha. Keep up the fantastic work, love your blog, the design is awesome!
    Flag

  8. This is a good post. This post give truly quality information.Iā€™m definitely going to look into it.Really very useful tips are provided here.thank you so much.Keep up the good works

  9. matt_w says:

    I once did a little custom parser to export & save to svg, it worked nicely and opened natively in Illustrator. Though it sounds like the other replies have more sophisticated ideas on this, I can dig out the code if it is of any use. Cool post šŸ™‚

  10. art says:

    @Matt_W

    can you send me the code?
    artur at design2dev com

    I need a way to export SVG data to ImageMagick.

    thanks

  11. Rick says:

    I think I’d like to see that code too! I am really looking for a way to generate any type of vector file from an existing movieclip/sprite that is dynamically generated in flash.

    For instance, I assemble parts from the flash library into a new movieclip, then I want to save a vector file (svg, eps etc) to disk. Oh, I’m not using flex, it’s pure as3!

  12. Jacob says:

    Hi,
    @Matt_W: Is there any posibility to see this code ? It would save my life šŸ˜‰ My mail: fenris85 at gmail.com . Thanks in advance !

  13. Jaf says:

    This is fantastic.
    @matt_w
    could you share your code, so that I can save my head banging in wall. please…
    contact.jaffer@gmail.com
    Thanks in advance dude šŸ™‚

  14. dharapatel says:

    Hi

    Can you share your code, i have a swf, which contain more than one image part, from that i need to export svg. my email id is dharakhachariya@gmail.com

  15. I once did a trifle custom computer program to export & save to svg, it worked nicely and opened natively in artist. although it appears like the opposite replies have a lot of refined concepts on this, I will dig out the code if it’s of any use. Cool post http://www.peoplesplumber.co.uk/plumber-fulham.html

Say something interesting

Please link to code from an external resource, like gist.github.com.