Question

I’m working on a tutorial on youtube to learn some action-script 3. I’ve got my finished product which is basically a symbol that is known as ball and it has an instance called _ball. The finished product from the tutorial is shown here.

Tutorial Video – Youtube

So basically what I want to achieve is the ball to rotate, depending on which way the ball is moving how would I go about achieving this? I’m new to action-script so some code samples would be appreciated or a in depth explanation.

Incase anyone wants a copy of the code – this is it – I’ve edited it about in some ways but it doesnt effect much.

package
{
    import flash.display.MovieClip
    import flash.text.TextField
    import flash.events.Event
    import flash.events.MouseEvent

    public class DocumentMain extends MovieClip
    {
        public const GRAVITY:Number = 2; // Declaring a const variable known as gravity
        public const BOUNCE:Number = 0.8;
        public const HIT:Number = 15;

        public var _bounces:TextField;
        public var _highscore:TextField;
        public var _ball:Ball;

        private var _vx:Number; // Declaring a variable known as _vx
        private var _vy:Number; // Declaring a variable knwon as _vy

        public function DocumentMain(): void
        {
            _vx = Math.random(); // Initalising _vx
            _vy = Math.random(); // Initalising _vy

            _ball.buttonMode = true;

            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
        }

        private function enterFrameHandler (e:Event):void
        {
            // Gravitate the Ball
            _vy += GRAVITY; // The ball is effected by gravity each frame

            // Move The Ball
            _ball.x += _vx;
            _ball.y += _vy;

            // Check Stage Boundaries For Collisions
            checkBoundaryCollision();
        }

        private function mouseDownHandler (e:MouseEvent):void
        {
            // Hit the ball if it has been clicked
            if (e.target == _ball)
            {
                hit(e.target.mouseX, e.target.mouseY);
            }
        }

        private function checkBoundaryCollision():void
        {
            var left:Number;
            var right:Number;
            var bottom:Number;
            var top:Number;

            left = _ball.x - (_ball.width / 2);
            right = _ball.x + (_ball.width / 2);
            bottom = _ball.y + (_ball.height / 2);
            top = _ball.y - (_ball.height / 2);

            if (left < 0 && _vx < 0)
            {
                _ball.x = (_ball.width / 2)
                _vx  *= -1;
            }
            else if (right > stage.stageWidth && _vx > 0)
            {
                _ball.x = stage.stageWidth - (_ball.width / 2)
                _vx  *= -1;
            }

            if (top <= 42.70 && _vy < 0)
            {
                _ball.y = (_ball.height / 2)
                _vy  *= -1;
            }
            else if (bottom > stage.stageHeight && _vy > 0)
            {
                _ball.y = stage.stageHeight - (_ball.height/2)
                _vy *= -BOUNCE;
                _vx *= BOUNCE;

                if (Number(_bounces.text) > Number(_highscore.text))
                {
                    _highscore.text = _bounces.text;
                }

                _bounces.text = "0";
            }
        }

        private function hit(hitX:Number, hitY:Number):void
        {
            // increment bounces
            _bounces.text = String(Number(_bounces.text) + 1);
            // Adjust vertical velocity
            if (_vy > 0)
            {
                _vy *= -BOUNCE / 2;
            }

            _vy -= HIT;

            //adjust horizontal veloity
            if (_vx * hitX > 0)
            {
                _vx *= -BOUNCE;
            }

            _vx -= (hitX / _ball.width * HIT);
        }
    }    
}

Answer 1

I can’t test this right now, but it should be as simple as updating your enterFrameHandler to rotate the ball on each frame by a base value multiplied by the ball’s x velocity:

    public const ROTATION:Number = 1;

    private function enterFrameHandler (e:Event):void
    {
        // Gravitate the Ball
        _vy += GRAVITY; // The ball is effected by gravity each frame

        // Move The Ball
        _ball.x += _vx;
        _ball.y += _vy;

        // Rotate the ball each frame at a speed and direction 
        // related to the ball's current x velocity. A negative
        // x velocity will result in a negative rotation.
        _ball.rotation += ROTATION * _vx;

        // Check Stage Boundaries For Collisions
        checkBoundaryCollision();
    }