Make a boundary in flash with as3

Question

I have this code that generates circles and makes them float within the boundaries of the stage. Although it stays in the stage it also has some give and let's the circles push through a small amount which I like.

Is it possible to do this but with a custom shape and have the circles confined inside this shape?

Here is the code I have:

//number of balls
var numBalls:uint = 200;
var defaultBallSize:uint = 8;
var colors:Array = [0x79B718, 0x2D91A8, 0xB019BC, 0xF98715, 0xDB1616];

//init
makeDots();

function makeDots():void {
//create desired number of balls
for (var ballNum:uint=0; ballNum<numBalls; ballNum++){
var c1:Number = randomColor();
var c2:Number = randomColor();

//create ball
var thisBall:MovieClip = new MovieClip();
thisBall.graphics.beginFill(c1);
//thisBall.graphics.lineStyle(defaultBallSize, 0);
thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
thisBall.graphics.endFill();

addChild(thisBall);

//coordinates
thisBall.x = Math.random() * stage.stageWidth;
thisBall.y = Math.random() * stage.stageHeight;
//percieved depth
thisBall.ballNum = ballNum;
thisBall.depth = ballNum/numBalls;
thisBall.scaleY = thisBall.scaleX = 
////thisBall.alpha = 
ballNum/numBalls;
//velocity
thisBall.vx = 0;
thisBall.vy = 0;
thisBall.vz = 0;

//ball animation
thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
}
}

var dampen:Number = 0.90;
var maxScale:Number = 1.3;
var minScale:Number = .3;
var maxAlpha:Number = 1.3;
var minAlpha:Number = .3;
function animateBall(e:Event):void{
var thisBall:Object = e.target;
//apply randomness to velocity
thisBall.vx += Math.random() * 0.2 - 0.1;
thisBall.vy += Math.random() * 0.2 - 0.1;
thisBall.vz += Math.random() * 0.002 - 0.001;

thisBall.x += thisBall.vx;
thisBall.y += thisBall.vy;
//thisBall.scaleX = thisBall.scaleY += thisBall.vz;
//thisBall.alpha += thisBall.vz;
thisBall.vx *= dampen;
thisBall.vy *= dampen;
thisBall.vz *= dampen;

if(thisBall.x > stage.stageWidth) {
thisBall.x = 0 - thisBall.width;
}
else if(thisBall.x < 0 - thisBall.width) {
thisBall.x = stage.stageWidth;
}
if(thisBall.y > stage.stageHeight) {
thisBall.y = 0 - thisBall.height;
}
else if(thisBall.y < 0 - thisBall.height) {
thisBall.y = stage.stageHeight;
}

if (thisBall.scaleX > maxScale){
thisBall.scaleX = thisBall.scaleY = maxScale;
}
else if (thisBall.scaleX < minScale){
thisBall.scaleX = thisBall.scaleY = minScale;
}
if (thisBall.alpha > maxAlpha){
thisBall.alpha = maxAlpha;
}
else if (thisBall.alpha < minAlpha){
thisBall.alpha = minAlpha;
}
}

function randomColor():uint
{
return colors[int(Math.random()*colors.length)];
}

Code credit:

Originally from here: Circle Cube

Additional help here: Random colour within a list of pre-defined colours

Answer 1

Yes, you can. What is happening is that when each circle moves, it is checked to see if it is within the stage bounds on the x and y axis and is 'corrected' if it goes out. You can modify that part of the code that determines this to check if a circle is within your custom shape or not.

The complexity of this will depend on your custom shape as well as the method to go about detecting if a circle/object is within your custom shape.

The 'easiest custom shape' you could try would be a rectangle or square, since the stage is already a big rectangle. To start this, look through your given code to find the lines of code that limit the x and y position of the stage dimensions and change them to the dimensions of your custom rectangle/square. You may have to add in position offsets if your custom shape rectangle/square does not originate from 0, 0 like the stage. I suggest factoring this part out (which is actually basic collision detection) into a method if you want to experiment with other shapes.

---

Edit

I edited my answer to include the original code reworked to use a random square as the custom shape -the easiest shape to try as mentioned in my original answer. Hopefully you can compare the two and see the changes I made to try and figure out the logic behind it.

For a circle, or any other totally random shape, it would be a bit more difficult, but same idea/concept.

//number of balls
var numBalls:uint = 200;
var defaultBallSize:uint = 8;
var colors:Array = [0x79B718, 0x2D91A8, 0xB019BC, 0xF98715, 0xDB1616];

// new custom shape bounds, a square that is 200, 200 px and is at 175, 100 on the stage
var customSquare:Rectangle = new Rectangle(175, 100, 200, 200);

//init
makeDots();
function makeDots():void {
    //create desired number of balls
    for (var ballNum:uint=0; ballNum < numBalls; ballNum++){
        var c1:Number = randomColor();
        var c2:Number = randomColor();

        //create ball
        var thisBall:MovieClip = new MovieClip();
        thisBall.graphics.beginFill(c1);
        //thisBall.graphics.lineStyle(defaultBallSize, 0);
        thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
        thisBall.graphics.endFill();

        addChild(thisBall);

        //coordinates - this part of the code is setting the initial positions of the circles based on the stage size
        //thisBall.x = Math.random() * stage.stageWidth;
        //thisBall.y = Math.random() * stage.stageHeight;
        //
        // changed so they use the "customSquare" rectangle instead, note that the custom shape has an x and y pos now that doesn't start at 0 (unlike the stage)
        thisBall.x = (Math.random() * customSquare.width) + customSquare.x;
        thisBall.y = (Math.random() * customSquare.height) + customSquare.y;

        //percieved depth
        thisBall.ballNum = ballNum;
        thisBall.depth = ballNum / numBalls;
        thisBall.scaleY = thisBall.scaleX = ballNum / numBalls;

        //velocity
        thisBall.vx = 0;
        thisBall.vy = 0;
        thisBall.vz = 0;

        //ball animation
        thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
    }
}

var dampen:Number = 0.90;
var maxScale:Number = 1.3;
var minScale:Number = .3;
var maxAlpha:Number = 1.3;
var minAlpha:Number = 0.3;

function animateBall(e:Event):void{
    var thisBall:Object = e.target;

    //apply randomness to velocity
    /*thisBall.vx += Math.random() * 0.2 - 0.1;
    thisBall.vy += Math.random() * 0.2 - 0.1;
    thisBall.vz += Math.random() * 0.002 - 0.001;*/
    // increased velocity ranges to add more speed to see the effects easier
    thisBall.vx += Math.random() * 1.2 - 0.6;
    thisBall.vy += Math.random() * 1.2 - 0.6;
    thisBall.vz += Math.random() * 0.012 - 0.006;

    thisBall.x += thisBall.vx;
    thisBall.y += thisBall.vy;
    //thisBall.scaleX = thisBall.scaleY += thisBall.vz;
    //thisBall.alpha += thisBall.vz;
    thisBall.vx *= dampen;
    thisBall.vy *= dampen;
    thisBall.vz *= dampen;

    // =====================================================================================================================================
    // this part of the code is determining if each ball is going outside of the bounds of the stage and repositioning them if they are
    // this part is the 'collision detection', changed to use the bounds of the "customSquare" rectangle instead
    //
    // this part is detecting the position going out of bounds along the X axis
    /*if(thisBall.x > stage.stageWidth) {
        thisBall.x = 0 - thisBall.width;
    } else if(thisBall.x < 0 - thisBall.width) {
        thisBall.x = stage.stageWidth;
    }*/
    if(thisBall.x > (customSquare.width + customSquare.x)) {
        thisBall.x = customSquare.x - thisBall.width;
    } else if(thisBall.x < customSquare.x - thisBall.width) {
        thisBall.x = customSquare.width + customSquare.x;
    }

    // this part is detecting the position going out of bounds along the Y axis
    /*if(thisBall.y > stage.stageHeight) {
        thisBall.y = 0 - thisBall.height;
    } else if(thisBall.y < 0 - thisBall.height) {
        thisBall.y = stage.stageHeight;
    }*/
    if(thisBall.y > (customSquare.height + customSquare.y)) {
        thisBall.y = customSquare.y - thisBall.height;
    } else if(thisBall.y < customSquare.y - thisBall.height) {
        thisBall.y = customSquare.height + customSquare.y;
    }
    // =====================================================================================================================================


    if (thisBall.scaleX > maxScale){
        thisBall.scaleX = thisBall.scaleY = maxScale;
    } else if (thisBall.scaleX < minScale){
        thisBall.scaleX = thisBall.scaleY = minScale;
    }

    if (thisBall.alpha > maxAlpha){
        thisBall.alpha = maxAlpha;
    } else if (thisBall.alpha < minAlpha){
        thisBall.alpha = minAlpha;
    }
}

function randomColor():uint{    return colors[int(Math.random()*colors.length)];    }

Answer 2

From animating in flash I can tell you the flash-way of doing something like this is through layer masks. This should is possible in code too. Something loosely like this:

addChild(thisBall);

var layermask:Shape=new Shape();
addChild(layermask);
thisBall.mask=maskingShape;

Answer 3

Assuming all you are asking is for a border around the confined area, You could do something like:

var container:MovieClip = new MovieClip;
container.graphics.lineStyle(1,0,1);
container.graphics.drawRect(0, 0, container.width, container.height);
container.graphics.endFill();
addChild(container);

And Replace :

addChild(thisBall);

With :

container.addChild(thisBall);