Lined drawn at stage appear on the next and previous frames - actionscript-3

Question

I am using code for matching objects by drawing lines, the code working well but the lines drawn appear on next and previous frames when pressing next and previous buttons
`
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.geom.Point;
var p1:Point = new Point();
var p2:Point = new Point();
stage.addEventListener(MouseEvent.MOUSE_DOWN, setP1);
function setP1(e:MouseEvent):void {
p1.x=mouseX;
p1.y=mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE, draw);
s=new Shape();
stage.addChild(s);
}
var s:Shape;
function draw(e:MouseEvent):void {
s.graphics.clear();
s.graphics.lineStyle(4,0xff0000, 1);
s.graphics.moveTo(p1.x, p1.y);
p2.setTo(mouseX, mouseY);
s.graphics.lineTo(p2.x, p2.y)
}
stage.addEventListener(MouseEvent.MOUSE_UP, end);
function end(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, draw);
if (MC_1.hitTestPoint(p1.x,p1.y) && MC_1_1.hitTestPoint(p2.x, p2.y))
{
}
else {
s.graphics.clear();
}
}
`

Answer 1

Ok, I put a bit of thought into it and found out that you
attach the Shapes directly to the stage rather then to the current context
don't bother to keep track of them
I enhanced your script a bit so that it keeps everything you create there (I don't know if you are working with multiple lines, so just in case), and there's a cleanUp() method you should call to undo literally everything the rest of the script does.
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.geom.Point;
var P1:Point = new Point;
var P2:Point = new Point;
// A list of Shapes that will probably stockpile here.
var Slist:Array = new Array;
// The Shape to work with.
var S:Shape;
// Subscribe to the event to start drawing.
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
function onDown(e:MouseEvent):void
{
// Subscribe to the relevant events.
stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
// Create an object for drawing.
S = new Shape;
Slist.push(S);
stage.addChild(s);
P1.x = S.mouseX;
P1.y = S.mouseY;
// First draw.
onDraw(e);
}
// Draw the line every time the mouse moves.
function onDraw(e:MouseEvent):void
{
// Memorize the endpoint coordinates.
P2.x = S.mouseX;
P2.y = S.mouseY;
// Drawing routine.
S.graphics.clear();
S.graphics.lineStyle(4,0xff0000, 1);
S.graphics.moveTo(P1.x, P1.y);
S.graphics.lineTo(P2.x, P2.y);
}
// End the drawing process.
function onUp(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
// Last draw,
onDraw(e);
// Convert Points to stage coordinates. I know they are identical in
// the present setup, but it is not the reason to ignore the operation.
var GP1:Point = S.localToGlobal(P1);
var GP2:Point = S.localToGlobal(P2);
var aHit1:Boolean = MC_1.hitTestPoint(GP1.x, GP1.y);
var aHit2:Boolean = MC_1_1.hitTestPoint(GP2.x, GP2.y);
if (aHit1 && aHit2)
{
// Whatever you need to do here.
}
else
{
// Erase the unneeded Shape.
stage.removeChild(S);
var anIndex:int = Slist.indexOf(S);
if (anIndex > -1) Slist.splice(anIndex, 1);
S.graphics.clear();
S = null;
}
}
// Call this at the same time you go to another frame.
function cleanUp():void
{
// Clean the stockpiled objects if any.
while (Slist.length)
{
S = Slist.pop();
if (!S) continue;
if (!(S is Shape)) continue;
S.graphics.clear();
if (!S.parent) continue;
S.parent.removeChild(S);
}
// Destroy all the relevant objects.
S = null;
P1 = null;
P2 = null;
Slist = null;
// Finally, unsubscribe from DOWN handler (and the rest just in case).
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onUp);
stage.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}