User drawing multiple ellipses

[flashpipe1]

Alright...I've got a program that needs to let the user draw ellipse a on the stage and I need to track the positions so I can re-draw them when they come back. I've got that mostly working, except, I need to let them draw up to 5 ellipses and be able to delete ones that they have already drawn so they can draw new ones.

I'm having difficulty managing the children, object numbering/naming, etc.

Here's the code that's working as far as drawing the ellipse:

import flash.display.Sprite;
import flash.events.*;
import flash.ui.Mouse;
import flash.net.URLRequest;

stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorFollow);

var drawCircleOn:Boolean = false;
var initX:Number;
var initY:Number;
var circleNum:Number = 0;

function cursorFollow(evt:MouseEvent):void
{
    if (drawCircleOn)
    {
        circle.graphics.clear();
        circle.graphics.lineStyle(2, 0x000000);
        circle.graphics.beginFill(0xFFF500,.3);
        circle.graphics.drawEllipse(initX, initY, mouseX-initX, mouseY-initY);
        circle.graphics.endFill();
        addChild(circle);
    }
    evt.updateAfterEvent();
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, setCircle);
stage.addEventListener(MouseEvent.MOUSE_UP, releaseCircle);

function setCircle(evt:MouseEvent):void
{
    drawCircleOn = true;
    initX = mouseX;
    initY = mouseY;
}
function releaseCircle(evt:MouseEvent):void
{
    drawCircleOn = false;
    trace("ell "+initX+" , "+initY+" , "+(mouseX-initX)+" , "+(mouseY-initY));
}

var circle:Sprite = new Sprite();

I tried doing something like:

for(var i:int=1;i<=5;i++){
        var circle:Sprite = new Sprite();
    circle.name = "circle" + i;
}

and then using a variable in the cursorFollow function, but that didn't let me create multiple circles...

TIA!

[flashpipe1]

Alright, making some progress...

Now, the trick will be managing the ellipses so they can remove the ones they created and add new ones, up to the limit...

any ideas??

import flash.display.Sprite;
import flash.events.*;
import flash.ui.Mouse;
import flash.net.URLRequest;

stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorFollow);

var drawCircleOn:Boolean = false;
var initX:Number;
var initY:Number;
var circleNum:Number = 0;

function cursorFollow(evt:MouseEvent):void
{
    if (drawCircleOn)
    {
        (sprites[circleNum] as Sprite).graphics.clear();
        (sprites[circleNum] as Sprite).graphics.lineStyle(2, 0x000000);
        (sprites[circleNum] as Sprite).graphics.beginFill(0xFFF500,.3);
        (sprites[circleNum] as Sprite).graphics.drawEllipse(initX, initY, mouseX-initX, mouseY-initY);
        (sprites[circleNum] as Sprite).graphics.endFill();
        addChild((sprites[circleNum] as Sprite));
    }
    evt.updateAfterEvent();
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, setCircle);
stage.addEventListener(MouseEvent.MOUSE_UP, releaseCircle);

function setCircle(evt:MouseEvent):void
{
    drawCircleOn = true;
    initX = mouseX;
    initY = mouseY;
    circleNum++;
}
function releaseCircle(evt:MouseEvent):void
{
    drawCircleOn = false;
}

var sprites:Array = new Array();

for (var i:Number=0; i<10; i++)
{
    var circle:Sprite = new Sprite();
    sprites.push(circle);
    addChild(circle);
    circle.name = "circle_" + i;
    trace(circle.name);
}

[5TonsOfFlax]

Forget the name property. Seriously, remove that circle.name line. You should not use naming schemes to keep a collection of objects. Since you've already got a sprites array with all your circles in it, giving your circles names is redundant and useless.

Whenever you need to use the same object lots of times, get a reference to it and save that in a local variable. Do not repeat

sprites[circleNum] as Sprite)

6 times in a row. Every time you do that, it looks up the entry in the array, then casts it to Sprite. It's also a lot to type.

I don't quite get when an ellipse should be removed. If it's just when they try to make one more ellipse than they're allowed, then use the shift method of Array to remove the first element, and use removeChild to remove it from the display. Or, just clear it and have them draw into that one again.

If you do the shift method, you will need to change your circle/sprite creation code to happen on MOUSE_DOWN instead, and you will not need circleNum (but you will need a maxAllowed variable). If you reuse your existing circle sprites, you will still need a maxAllowed variable, and you will need to alter circleNum when it gets bigger than the max allowed.

[flashpipe1]

5TonsOfFlax,

Thanks! Appreciate the help. I took the .name reference out and set up the variable Sprite reference.

I'm letting the user draw the circle in one mode (the "+" button) and then, in another mode (the "X" button), letting them click on the other circle to remove it. Not sure the best way to handle the creation/deletion of the circle reference in the array. I also need to track the coordinates of each circle (when they click a "finished" button) so I can re-load them when the user comes back to the screen. Should I set up a separate array for that and just grab them all when they hit the button?

I suppose I should just remove the circle from that position in the array and, when the draw a new circle, test the array for an empty element and fill that? Not sure the best way to handle that...

Thanks for the help! I attached the file if you want to take a look at it so far and offer any other advice. I initially wanted to set this up in external .as packages, but I still find it faster/easier to build right in flash.

Still trying to switch my mind to the as3 oop conventions.

[5TonsOfFlax]

Create a Circle class (or Ellipse, since that's what they really are), which will extend Sprite and keep track of position, width, height, and anything else necessary to reconstruct the items. That class should have a way of serializing itself to be stored wherever you are storing them, and a way of initializing itself from that serialized form. When the user clicks "finish", have each Ellipse generate its serialized form, and save those somewhere.

To find an item (such as your Ellipses) in an array, you can use indexOf. To remove an element from the array, you can use splice.

I wouldn't pre-fill the array, I'd just make Ellipses on demand.

And I can't open fla files, so I can't look at your code.

[5TonsOfFlax]

Enjoy. I've not done the removal stuff, but I bet you can get it going.

[flashpipe1]

Beautiful! Thanks. I'll need some time to go through the code and see what you did, but I certainly appreciate your time and help on this.

Definitely some learning from this.

Thanks again!