Cutting it Into Smaller Chunks AS3

Question

I want to break my code into smaller bits, for learning and practicality purposes. It's 3 balls. 2 are moving from right to left, everytime they go off screen their speed is increased and they reappear on the right side at randomized height. Same thing for the other ball but it moves vertically.

I did write a separate class for the balls (so I wouldn't have to be sizing and colouring them 3 times) although this class is actually crappy as I can only add more equal balls and not resize or change color!

TL;DR Need to get a better idea on classes!

You can see in my code below (copy n' pasta it to FD if needed)

    package {
    (...)
    import RedBall; 

/** Redball is the custom class I made, its contents are: 
    ball.graphics.beginFill (0xFF0000);
    ball.graphics.drawCircle (0, 0, 50);
    ball.graphics.endFill(); - Not very handy ^^" **/

    public class Example extends Sprite {
    var a:RedBall = new RedBall();
    var b:RedBall = new RedBall();
    var c:RedBall = new RedBall();
    var Aspeed, Bspeed, Cspeed:Number;
    var speedModifier:Number;

    public function Example() {
    Aspeed = 10;
    Bspeed = 10;
    Cspeed = 10;
    speedModifier = 1;

    a.ball.x = Math.random() * stage.stageHeight;
    a.ball.y = 300;
    b.ball.x = Math.random() * stage.stageWidth;
    b.ball.y = 300;
    c.ball.x = 300;
    c.ball.y = Math.random() * stage.stageWidth;

    addChild(a.ball);
    addChild(b.ball);
    addChild(c.ball);

    stage.addEventListener(MouseEvent.CLICK, slow);
    stage.addEventListener(Event.ENTER_FRAME, update);  
    }

    /** After clicking it makes everything 5 times slower,
        no turning back as there is no on/off yet :[**/
    function slow(e:Event) {
    speedModifier = 0.2;
    }

The balls movement.

    function update(e:Event):void {
      a.ball.x = a.ball.x - Aspeed * speedModifier;
      b.ball.x = b.ball.x - Bspeed * speedModifier;
      c.ball.y = c.ball.y + Cspeed * speedModifier;

      if (a.ball.x < -a.ball.width) {
        a.ball.x = stage.stageWidth + a.ball.width;
        a.ball.y = Math.random() * stage.stageHeight;
        if (Aspeed<40) {
          Aspeed += 5;
        }
      }

      if (c.ball.y > stage.stageHeight+c.ball.height) {
        c.ball.y = stage.stageHeight - stage.stageHeight-c.ball.height;
        c.ball.x = Math.random() * stage.stageWidth;
        if (Cspeed<40) {
          Cspeed += 5;
        }
      }
    }

Any ideas on how to split this above into small efficient classes? I did try to minimize repitition with RedBall class and I'll keep reading on it. Though it's also a big help and leap for me if you could point out "Cut that in x, y and z"

Answer 1

You started doing it right - create a class for what you call Ball. Then you can make public functions inside it in order to change it's properties:

function setSpeed(value:Number) {
    this.speed = value; // what used to be Aspeed, Bspeed, Cspeed, now is simply 'speed'
}

function setColor(color:uint) {
    this.graphics.beginFill(color); // used to be `0xFF0000`, now is dynamic
}

speed is a member variable inside this class, and this.graphics is used because the class should extend Sprite.

So you will instantiate the same class, but will simply 'skin' it using one line functions. You can even make a for loop in order to create balls easier.

Answer 2

Instead of the code in the initial post now I have this instead, is it as a good class should?

This is the RedBall class (RedBall is just the name, the balls can have other color).

    public function setColor(color:uint) {
        this.graphics.beginFill(color);
    }

    public function setSize(ballX, ballY, radius:uint) {
        this.graphics.drawCircle (ballX, ballY, radius);
    }

    public function setAcceleration(value:Number) {
        this.accel = value;
    }

    public function setSpeed(value:Number) {
        this.speed = value;
    }

    public function startMovement() {
        this.x -= this.speed;           
    }

There's only one problem now and it's the startMovement function as it is not working! In the function:

function update(e:Event):void {
            a.startMovement();
      }

And no clue :3