saving dynamic drawing, then re-loading

Question

ok, i've spent a good bit trying to figure out the best way to approach this ... and i'm kind of at a loss. google has NOT been much help.

the short version of what i need to do - via AS3 and PHP - is a user can come to this project and draw something. drawing's no problem, that's done. my issue is figuring out how to take that drawing data, converting it into something i can save to my database ... then reload said data and recreate it on the stage when the user "loads" it.

i guess i'm just searching for a way to take drawn data (just using typical as3 drawing methods) and breaking it down to a string, then bringing that string back in and recreating it. i'm not super versed in ByteArrays - which i suspect is where my answer lies.

user doesn't need to adjust any of this after it's loaded, fwiw. i'd just like to send this drawing data out - then bring it back in and place it back on the stage.

any ideas are greatly appreciated.

Answer 1

If you're using Flash Player 10, you can use the new classes and methods in the new Drawing API:

GraphicsBitmapFill
GraphicsEndFill
GraphicsGradientFill GraphicsPath
GraphicsPathCommand GraphicsPathWinding GraphicsShaderFill
GraphicsSolidFill
GraphicsStroke

you can use them to store data for the user generated drawings, then use drawGraphicsData() method to 'restore' a drawing from a set of saved commands.

Here is a sample from the documentation:

package{
    import flash.display.*;
    import flash.geom.*;

    public class DrawGraphicsDataExample extends Sprite {
    public function DrawGraphicsDataExample(){    
    // establish the fill properties
    var myFill:GraphicsGradientFill = new GraphicsGradientFill();
    myFill.colors = [0xEEFFEE, 0x0000FF];
    myFill.matrix = new Matrix();
    myFill.matrix.createGradientBox(100, 100, 0);

    // establish the stroke properties
    var myStroke:GraphicsStroke = new GraphicsStroke(2);
    myStroke.fill = new GraphicsSolidFill(0x000000);

    // establish the path properties
    var myPath:GraphicsPath = new GraphicsPath(new Vector.<int>(), new Vector.<Number>());
    myPath.commands.push(1,2,2,2,2);
    myPath.data.push(10,10, 10,100, 100,100, 100,10, 10,10);

    // populate the IGraphicsData Vector array
    var myDrawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
    myDrawing.push(myFill, myStroke, myPath);

    // render the drawing 
    graphics.drawGraphicsData(myDrawing);
    }
    }
}

Senocular has a long, but well explained article on the Flash 10 Drawing API.

HTH, George

Answer 2

For pre-flash10, if by "typical AS3 drawing methods" you mean operating on a flash.display.Graphics object with, for example, lineTo() and curveTo(), then you have to save the calls you do on the Graphics objects yourself along with the parameters.

See http://www.senocular.com/?id=0.156 for the idea (unfortunately the project doesn't seem to be hosted, but you'll get the idea).