实现拖动带阴影的效果的方法

实现拖动带阴影的效果的方法

今天整理了个类似的，我用的是图片容器内套的一个背景MC，通过它来实现阴影效果
先见效果，和原作者的有点差别，主要就是效果的微调了，因为是模仿，所以我就是把原理弄了下，我还是比较懒，没有用xml+外部调用的，就是简单的自定义了一个路径外部调用图片了，xml部分对大家来说也不是很大的问题了，供大家参考。

因为效果比较简单，我就只用了一个外部文档类
复制内容到剪贴板代码:
package {
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.*;
    import flash.filters.*;
    public class Main extends Sprite {
        private var tempPic:Container;//这个是库元件里的链接名称
        private var rotaArr:Array = [-30,-20,-10,10,20,30];//这个是用来实现点击后的旋转角度
        private var friction:Number = 0.8;//模拟的一个阻力值
        private var filter:DropShadowFilter;
        private var filter1:BlurFilter;//这两个是滤镜
        private var intX:Number;
        private var intY:Number;//这两个是图片容器内的阴影MC，运动时后的偏移量
        private var picNum:uint = 16;//图片数量
        private var easingSpeed:uint = 3;//缓冲的系数
        public function Main() {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;//这两个是。。。不用我废话了
            addPic();//添加图片
        }
        private function addPic() {
            for (var i:uint = 0; i<picNum; i++) {
                var tempPic:Container = new Container();//从库里调用这些元件
                tempPic.txt.text = "dog";//里面有文本，随便取的名字
                tempPic.Loader.source = "thus\\"+(i+1)+".jpg";//外部图片路径，偷懒，直接用了UILoader了:)
                tempPic.x = tempPic.width/2 + Math.random()*(stage.stageWidth - tempPic.width);
                tempPic.y = tempPic.height/2 + Math.random()*(stage.stageHeight - tempPic.height);//初始位置
                tempPic.buttonMode = true;//手性
                tempPic.rotation = rotaArr[Math.floor(Math.random()*rotaArr.length)];//角度
                tempPic.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);//鼠标事件
                addChild(tempPic);//添加到显示列表里
            }
        }
        private function MouseDown(event:MouseEvent):void {
            /*清除上一次图片自身的事件*/
            if (tempPic!=null) {
                if (tempPic.hasEventListener(Event.ENTER_FRAME)) {
                    trace("has");
                    removePicEvent();
                }
            }
            tempPic = event.currentTarget as Container;//引入一个变量，指引当前所点击的图片
            /*让点击的图片最上层显示*/
            setChildIndex(tempPic,this.numChildren -1);
            intX = tempPic.shadower.x ;
            intY = tempPic.shadower.y ;
            /*变换角度*/
            while (true) {//为了让每次点击，旋转不同的角度
                var tempR:int = rotaArr[Math.floor(Math.random()*rotaArr.length)];
                if (tempPic.rotation !=tempR) {
                    tempPic.rotation = tempR;
                    break;
                }
            }
            /*添加缓冲效果*/
            stage.addEventListener(Event.ENTER_FRAME,EnterFrame);
            stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp);
        }
        private function EnterFrame(event:Event):void {
            tempPic.x +=(stage.mouseX - tempPic.x)/easingSpeed;
            tempPic.y +=(stage.mouseY - tempPic.y)/easingSpeed;//缓冲效果
            if (tempPic.orgX!=null) {
                tempPic.vx = tempPic.x -tempPic.orgX;//瞬移时的速度，近似值，模拟效果
                tempPic.vy = tempPic.y -tempPic.orgY;
            }
            tempPic.orgX = tempPic.x;
            tempPic.orgY = tempPic.y;
            tempPic.shadower.x = intX+Math.abs(tempPic.vx);//背景阴影的偏移量的设定，和图片瞬移的大小值有一定的关系
            tempPic.shadower.y = intY+Math.abs(tempPic.vy);
            filter = new DropShadowFilter(Math.abs(tempPic.vy),45,0x999999,0.8,tempPic.vx,tempPic.vy,100,3,false,false,true);//这些参数是模拟效果时，微调的
            filter1 = new BlurFilter(Math.abs(tempPic.vx*5),Math.abs(tempPic.vy*5),3);//同上
            tempPic.shadower.filters = [filter,filter1];//如果没有这个，一切徒劳，所以还是把滤镜加上吧:)
        }
        private function MouseUp(event:MouseEvent):void {
            if (stage.hasEventListener(Event.ENTER_FRAME)) {//移除事件帧听，释放一些资源
                stage.removeEventListener(Event.ENTER_FRAME,EnterFrame);
            }
            if (tempPic.vx!=0||tempPic.vy!=0) {//这个就是模拟生活中的物理现象了，如果拖动释放后，让其自身继续按原有的速度移动
                tempPic.addEventListener(Event.ENTER_FRAME,picEnterFrame);
            }
            tempPic.shadower.filters = [];//滤镜释放
            tempPic.shadower.x = intX ;
            tempPic.shadower.y = intY ;//阴影恢复原始位置
            stage.removeEventListener(MouseEvent.MOUSE_UP,MouseUp);
        }
        private function picEnterFrame(event:Event):void {
            tempPic.vx*=friction;//释放时的速度所遇到的摩擦力
            tempPic.vy*=friction;//同上
            tempPic.x+=tempPic.vx;
            tempPic.y+=tempPic.vy;//当前速度加上同方向的加速度
                                               // 位置设定了，让其在舞台上显示
            if (tempPic.x-tempPic.width/2<0) {
                tempPic.x = tempPic.width/2;
                removePicEvent();
            } else if (tempPic.x+tempPic.width/2>stage.stageWidth) {
                tempPic.x=stage.stageWidth-tempPic.width/2;
                removePicEvent();
            }
            if (tempPic.y-tempPic.height/2<0) {
                tempPic.y = tempPic.height/2;
                removePicEvent();
            } else if (tempPic.y + tempPic.height/2>stage.stageHeight) {
                tempPic.y = stage.stageHeight-tempPic.height/2;
                removePicEvent();
            }
                                                //如果其加速度都近似为0后，应该移去其自身的事件，一是没必要，二是需要释放资源
            if (Math.abs(tempPic.vx)<0.1&&Math.abs(tempPic.vy)<0.1) {
                removePicEvent();
            }
        }
        private function removePicEvent() {
                                               // 对应方向上的加速度为0，移除事件，同时清除这个变量
            tempPic.vx = 0;
            tempPic.vy = 0;
            tempPic.removeEventListener(Event.ENTER_FRAME,picEnterFrame);
            tempPic = null;
        }
    }
}