看了 lulu studio和 cloudgramer 的图片展示效果，觉得用Flash做一个也应该不难，于是抽空动手写了一个，下面是效果：

程序原理：

在js中，可以用到left来改变图片的位置，在Flash中，当然是通过X坐标来进行改变了。开始的时候，将图片等分排列，代码如下：

public function arrange():void {
            for (var i:uint = 0; i < numimage; i++ ) {
                addChildAt(images[i], i);
                images[i].setTargetX(stage.stageWidth / numimage * i);//设置图片的X坐标为
                images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame);
                images[i].addEventListener(MouseEvent.MOUSE_OVER, onMouseMove);
            }
        }

这里要注意的地方就是深度问题，要想四张图片都看得见，图片的深度必须是从低到高，也就是从0至图片的个数-1。

当鼠标经过的时候，要重新布局

//重新排列图片的方位
        private function reArrange(flag:uint):void {
            //trace("图片长度为:" + images[0].width);
            //trace("flag:"+flag)
            //初始化第一张图片的地址
            images[0].x = 0;
            images[0].setTargetX(0);
            for (var i:uint = 1; i < numimage; i++ ) {
                var rate:Number = (i - flag) == 1 ?1:0;//判断是否碰到用户点击的那张图片
                var averx:Number = (stage.stageWidth - images[0].width) / (numimage-1);//判断除第展开那张外，其它剩余每张所占距离
                var mytargetX:Number = images[i - 1].getTargetX() + Math.abs(1 - rate) * averx + rate * images[0].width;//要将图片放置的x座标
                images[i].setTargetX(mytargetX);//设置目标X坐标
                images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame);//移动到目标地址
                //trace("rate:" + rate + "  averx:" + averx + "第" + (i + 1) + "张图片x:" + mytargetX);
            }
             
        }

布局的时候分为鼠标经过图片之前与之后两个部分。

不是鼠标经过部分的长度为(stage.width-图片长度)/(图片个数-1)。第一张图片的x座标肯定为0，以后根据前一张的x座标来算出自己的座标。如鼠标经过第三张，那个第二张的x座标为第一张的x座标+(stage.width-图片长度)/(图片个数-1)，第三张的x座标的为第二张的x座标+图片长度。

滑动部分是用缓动来进行的。

所谓的缓动就是物体向目标距离移动，刚开始运行速度快，后来运行速度慢。代码比较简单：

//移动到目标地址
        private function onEnterFrame(event:Event):void {
            var targetX:Number = event.target.getTargetX();
            //trace("从" + event.target.x + "移动第"+event.target.place+"张图片到"+ targetX);
            event.target.x += (targetX - event.target.x) * easing;
            if (Math.abs(event.target.x-targetX)<1) {
                //trace("第"+event.target.place+"已经移到")
                event.target.x = targetX;
                event.target.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
            }
        }

简单的来说就是让sprite.x不断的加上(targetX-sprite.x)*缓动系数。以下是缓动的过程。

文本的内容没弄，跟文本向上移的过程也可以使用缓过效果来实现。大家自由发挥。

程序代码：

+ View Code

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标常用软件Flash频道！