Move and Scale a MovieClip smoothly between multiple points

Question

I have a set-up of 3 horizontal rows with a button aligned to each of them and a character (centered to each row) that I want to move between these rows (think of Little Big Planet). I was able to program it so the character moves between the 3 rows and has a set scale when it does, but I want to see the character actually moving between the points; not just watch it teleport to the location. I've tried everything I can think of: Loops, Boolean on/off, some velocity/distance/difference shenanigans, etc., but I'm having no success getting it to move at a button click and continue moving until it reaches its point. I'm also not sure if it can be set-up to scale incrementally until it reaches a desired end scale size or not. I saw a slightly similar problem asked on a site, but solution they gave uses the Point class and a lot of math, and I have never had success getting my Flash to use Points. Any suggestions would be appreciated.

package
{
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class Main_Test_5 extends MovieClip
    {
        private var cam:MovieClip = new MovieClip();
        private var player:Player = new Player();
        private var topPosition:uint = 170;
        private var centerPosition:uint = 270;
        private var bottomPosition:uint = 370;
        private var UI:UserInterface = new UserInterface();
        private var testBackground:TestBackground = new TestBackground();

        public function Main_Test_5():void
        {
            player.x = 100;
            player.y = 370;
            cam.addChild(player);
            addChild (UI);

            // add event listeners
            stage.addEventListener(Event.ENTER_FRAME, checkEveryFrame);
            UI.topButton.addEventListener(MouseEvent.CLICK, topButtonClick);
            UI.centerButton.addEventListener(MouseEvent.CLICK, centerButtonClick);
            UI.bottomButton.addEventListener(MouseEvent.CLICK, bottomButtonClick);
            addChild (cam);
        }

        public function checkEveryFrame(event:Event):void
        {
            cam.x -= player.x - player.x;
            cam.y -= player.y - player.y;
        }
        public function topButtonClick (event:MouseEvent):void
        {
            trace ("Top Click");
            if (player.y > topPosition) // 170, player.y starts at 370
            {
                player.y -= 100;
            }
            else if (player.y <= topPosition)
            {
                player.y = topPosition;
            }
            if (player.y == topPosition)
            {
                player.scaleY = 0.8;
                player.scaleX = 0.8;
            }
            else if (player.y != topPosition)
            {
                player.scaleY = 0.9;
                player.scaleX = 0.9;
            }
        }
        public function centerButtonClick (event:MouseEvent):void
        {
            trace ("Center Click");
            if (player.y > centerPosition) // 270
            {
                player.y -= 100;
            }
            if (player.y < centerPosition)
            {
                player.y += 100;
            }
            if (player.y == centerPosition)
            {
                player.scaleY = 0.9;
                player.scaleX = 0.9;
            }
        }
        public function bottomButtonClick (event:MouseEvent):void
        {
            trace ("Bottom Click");
            if (player.y < bottomPosition) // 370
            {
                player.y += 100;
            }
            if (player.y >= bottomPosition)
            {
                player.y = bottomPosition;
            }
            if (player.y == bottomPosition)
            {
                player.scaleY = 1;
                player.scaleX = 1;
            }
            else if (player.y != bottomPosition)
            {
                player.scaleY = 0.9;
                player.scaleX = 0.9;
            }
        }
    }
}

Answer 1

Sounds like you'd like something simple. So I would suggest using a Tweening library. The most prolific of which is Greensocks TweenLite, which is now part of their Animation Platform

Using tweenlite, you would just do the following:

In place of:

player.y += 100;

You would do:

TweenLite.to(player, 1,{y: player.y + 100, ease: Quad.EaseInOut});

This would tween (move gradually over time) your player object from it's current position to the specified y (player.y + 100). It would do it over 1 second and with a nice in and out ease.

You can add more properties to the tween (scaleX/Y, x) anything really.

---

Do note, there are many Tweening platform alternatives, including one baked into Flash Professional. TweenLite is not free to use if you charge your end users a fee for your application. Be sure to review their license if you use it commercially.