Question

I am trying to move the red circles (bcircle.rcircle) within the blue circles (bcircle) in a clockwise motion each second. I have tried changing the x and y coordinates of the red circles (bcircle.rcircle) in the timer event handler (redClockwise). I wouls appreciate any help on this. Thanks.

My current code follows..

package
{
    import flash.display.*;
    import flash.utils.Timer;
    import flash.events.TimerEvent;


    public class blueCircles extends MovieClip
    {
        public var bcircle:MovieClip = new MovieClip();
        public var rcircle:MovieClip = new MovieClip();
        private var timer:Timer = new Timer(1000,10);

        public function blueCircles()
        {
            createCircles();
            timer.start();
            timer.addEventListener(TimerEvent.TIMER, redClockwise);

        }
        private function createCircles():void
        {

            for (var i:Number=0; i<=9; i++)
            {
                var bcircle:MovieClip = new MovieClip();
                var bxpos:int = 20;
                var bypos:int = 20;

                bcircle.graphics.beginFill(0x0033CC);
                bcircle.graphics.drawCircle(bxpos,bypos,15);
                bcircle.graphics.endFill();
                bcircle.y = (30 + 10) * i;
                addChild(bcircle);

                //var rcircle:MovieClip = new MovieClip();
                bcircle.rcircle = new Shape();
                var rxpos:int = 15;
                var rypos:int = 25;

                bcircle.rcircle.graphics.beginFill(0xFF0000);
                bcircle.rcircle.graphics.drawCircle(rxpos,rypos,5);
                bcircle.rcircle.graphics.endFill();
                rcircle.y = (30 + 10) * i;
                bcircle.addChild(bcircle.rcircle);
            }
        }
        public function redClockwise(e:TimerEvent):void 
        {
            trace("Call");

            //bcircle.rcircle.rotation += 50;
            bcircle.rcircle.x += 50 * Math.PI/180;
            bcircle.rcircle.y += 50 * Math.PI/180; 
            //rcircle.rotation = 50;

        }

    }

}

Answer 1

A few points:

1. You need to store reference to bcircle at a class-level so that you can reference it within the redClockwise() method. You’ve kind of done that, however if you pay close attention you’ll notice that what you’re actually doing within createCircles() is creating a new local variable called bcircle and using that, rather than referring to the class-level definition.
2. Because you have multiple circles, a single class-level definition will not work. You’ll need to create an Array, and store each circle within that so that you can loop over that array and update all of the circles.
3. Your timer will only run 10 times. That may be intentional but I thought I would point that out.
4. Your logic for movement along a circular path is invalid. All you’re doing here is moving southeast of the starting location. You need to use sin and cos to move the way I’m assuming you want. The idea will be positioning the red circles so that they’re in the centre of the blue, then using a value (perhaps rotation) to offset the position of the red circle away from the centre of it’s blue parent based on its radius and the aforementioned value to get the angle from the centre right.
5. You’re doing too much in a single class. Create a class “DualCircle” or something like that, and in there manage the movement of the red circle as well as the appearance of each. Use the document class only to create and position each of these elements. This will reduce the complexity of what you’re trying to do greatly.