How to record drawing strokes ?

Question

hi,
My goal is to make a flash application that can do this things :
- basic drawing application (i can handle this part)
- record the strokes of the user
- save the datas that record each strokes in a single file, let's call it my-drawing-data-file
- load my-drawing-data-file back in the flash application
- playback my-drawing-data-file in order to watch a kind of movie which shows the drawing that "draw" itself
A good example of that application can be found on drawingnow.com. So i know it is possible but how...?
Any ideas how they make it ?

Answer 1

Hi,
Here is a very rough idea on how to record and playback drawing.
Capture the drawing:
- the drawing points are stored in an array "_pointArray"
- the json encoded string of "_pointArray" is posted to the server.
- In server-side, save the string to a file or database.
          private function mouseDownHandler(e:MouseEvent):void{
               //start new segment
               moveTo(stage.mouseX,stage.mouseY);
               //mark the point as starting point , "newline=true"
               _pointArray.push({x:stage.mouseX, y:stage.mouseY, time:getTimer(), newline:true});
          private function mouseMoveHandler(e:MouseEvent):void{
               if(e.buttonDown){
                    //draw line
                    drawLine(stage.mouseX, stage.mouseY);
                    //record the points
                    _pointArray.push({x:stage.mouseX, y:stage.mouseY, time:getTimer()});
          private function moveTo(x:Number, y:Number):void{
               this.graphics.moveTo(x,y);
          private function drawLine(x:Number, y:Number):void{
               this.graphics.lineTo(x,y);
          private function saveData():void{
               var json:JSONEncoder = new JSONEncoder(_pointArray);
               var urlVariable:URLVariables = new URLVariables();
               var urlRequest:URLRequest = new URLRequest('{URL_TO_POST_AND_SAVE_POINTS}');
               urlVariable.points = json.getString();
               urlRequest.method = URLRequestMethod.POST;
               urlRequest.data = urlVariable;
               var urlLoader:URLLoader = new URLLoader();
               urlLoader.load(urlRequest);
               urlLoader.addEventListener(Event.COMPLETE, saveCompleteHandler);
          private function saveCompleteHandler(e:Event):void{
               trace("Saved the animation");
Load and replay the animation:
- load the json string
- Decode the json string to array
- Play the animation
                         private function loadData():void{
                    var urlRequest:URLRequest = new URLRequest('{REQUEST_URL_TO_LOAD_POINTS}');
                    var urlLoader:URLLoader = new URLLoader();
                    urlLoader.addEventListener(Event.COMPLETE,loadCompleteHandler);
                    urlLoader.load(urlRequest);
               private function loadCompleteHandler(e:Event):void{
                    var loader:URLLoader = e.target as URLLoader;
                    var json:JSONDecoder = new JSONDecoder(loader.data as String);
                    _pointArray = json.getValue() as Array;
                    //start the animation
                    playAnimation();
               //Playback the drawing on an EnterFrame/Timer event
               private function playBackHandler(e:Event):void{
                    var nextPoint:Object = _pointArray[_currentIndex];
                    var nextMilliSec:Number =  nextPoint.time;
                    var timeLapsed:Number = getTimer() - _startTime;
                    while(timeLapsed >= nextMilliSec){
                         if(nextPoint.newline){
                              //stating point
                              moveTo(nextPoint.x, nextPoint.y);
                         }else{
                              //draw line
                              drawLine(nextPoint.x, nextPoint.y);
                         //next array index
                         _currentIndex++;
                         //reached the end?
                         if(_currentIndex >= _pointArray.length){
                              stopPlayBack();
                              break;
                         }else{
                              nextPoint = _pointArray[_currentIndex];
                              nextMilliSec =  nextPoint.time;
Manjith