Action script 3 drawing app undo and redo function

Question

Can anyone show me how can I make undo and redo function? so this is my current action script. I cant figure how to do it and i see some example in some web site, the action script is to long to under stand. Pls show a simple way that i can make this work..

sorry for bad grammar...

import flash.display.MovieClip;
import flash.events.MouseEvent;

var pen_mc:MovieClip;
var drawing:Boolean = false;
var penSize:uint = 1;
var penColor:Number = 0x000000;

var shapes:Vector.<Shape>=new Vector.<Shape>(); 
var position:int=0;
const MAX_UNDO:int=10;


function init():void{

pen_mc = new MovieClip();
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_MOVE, isDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, finishedDrawing);
addChild(pen_mc);

}

init();

function startDrawing(e:MouseEvent):void{

trace("Pen Has started drawing");

drawing = true;
pen_mc.graphics.lineStyle(penSize, penColor);
pen_mc.graphics.moveTo(mouseX, mouseY);


}

function isDrawing(e:MouseEvent):void{
if(drawing){

    pen_mc.graphics.lineTo(mouseX, mouseY);
}

}


function finishedDrawing(e:MouseEvent):void{

     trace("finished drawing");
     drawing = false;

     var sh:Shape=new Shape();
     sh.graphics.copyFrom(pen_mc.graphics); // put current state into the vector
     shapes.push(sh);
     if (shapes.length>MAX_UNDO) shapes.unshift(); // drop oldest state
     position=shapes.indexOf(sh);
}
function undo():void {
    if (position>0) {
        position--;
        pen_mc.graphics.copyFrom(shapes[position].graphics);
    } // else can't undo
}
function redo():void {
    if (position+1<shapes.length) {
        position++;
        pen_mc.graphics.copyFrom(shapes[position].graphics);
    } // else can't redo
}


 function btn_undo(e:MouseEvent):void
        {
            undo();
        }

 function btn_redo(e:MouseEvent):void
        {
            redo();
        }

undo_btn.addEventListener(MouseEvent.CLICK, btn_undo);
redo_btn.addEventListener(MouseEvent.CLICK, btn_redo);

score 0 · Answer 1 · answered Feb 12 '13 at 09:41

0

You can use copyFrom() in Shape.graphics to store current condition, and the same to "redo", as your canvas is a Shape.

var shapes:Vector.<Shape>=new Vector.<Shape>(); 
var position:int=0;
const MAX_UNDO:int=10;
...
function finishedDrawing(e:MouseEvent):void{

     trace("finished drawing");
     drawing = false;

     var sh:Shape=new Shape();
     sh.graphics.copyFrom(penMC.graphics); // put current state into the vector
     shapes.push(sh);
     if (shapes.length>MAX_UNDO) shapes.unshift(); // drop oldest state
     position=shapes.indexOf(sh);
}
function undo():void {
    if (position>0) {
        position--;
        penMC.graphics.copyFrom(shapes[position].graphics);
    } // else can't undo
}
function redo():void {
    if (position+1<shapes.length) {
        position++;
        penMC.graphics.copyFrom(shapes[position].graphics);
    } // else can't redo
}

This approach lacks some features, as to drop part of undo/redo stack if first undone to a certain point, then drawn. You can try adding this function yourself.

answered Feb 12 '13 at 09:41

Vesper

18,599
6
39
61

it not working the line still there. it should erase the current and the previous drawing line right? i really need this function to work... – Nasharuddin Shahabuddin Feb 12 '13 at 11:25
If you have troubles implementing this, edit the question and put current code inside. – Vesper Feb 13 '13 at 05:18
above there is my current action script pls check it.. i am really not sure what to do. it not work the way i hope so... – Nasharuddin Shahabuddin Feb 13 '13 at 05:52
Please add the behavior you experience and the behavior you desire to experience. – Vesper Feb 13 '13 at 05:58
you can copy the action script and past it. i am thinking that it work when the users click a undo and redo button. – Nasharuddin Shahabuddin Feb 13 '13 at 06:30
So. The function set works as intended, but you seemingly want a different behavior. What do you want from this code? Explain in details please. – Vesper Feb 13 '13 at 07:05
i am thinking that when the user draw and if they mistakenly draw the previous line, the app have a button that the user can undo they mistake. but when i try my current code the line is still there. the last line should being clear when the button being hit. and when the user want redo the undo action the line back on stage(canvas). – Nasharuddin Shahabuddin Feb 13 '13 at 07:36
i am sorry making this hard to understand but you can gust it work like undo and redo button just like in windows paint. – Nasharuddin Shahabuddin Feb 13 '13 at 07:43
I told you, this functionality is missing from this sample. You have to alter it in a way for it to work, by yourself. A hint: When you process "finished drawing" event, check if the current undo position is not the topmost, if so, drop everything above, then push new state. – Vesper Feb 13 '13 at 08:00

Action script 3 drawing app undo and redo function

1 Answers1

Linked