Action script 3 drawing app undo and redo function - actionscript-3

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);

Answer 1

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.