flash特效原理 图片滑动放大效果

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

  这几天，都在无所事事，唯一寄托就是在这里记录一下自己研究出来的东西。趁现在有点时间，就把最近看过的一种常用的flash特效记录一下，flash 做特效不是为做特效而做，在make thing move 书里讲了许多的数学和物理原理，通过这些原理，我发现做特效就需要懂原理。懂了这些原理后，特效就会变得轻松容易。

 现在准备一下，讲求一个公式，这个公式对做这个特效很有帮助。公式如下：

 

一、基本基本原理公式

 x轴：

  图片缩放率=最大缩放率-|鼠标的x坐标值-每一张图片的x轴大小|*自定义的比例；

鼠标的x坐标值减去每一张图片的x轴大小的绝对值的差，乘以自定义的比例，然后最大缩放率减去这个值就可以知道结论：

离鼠标越近的图片，缩放比例就会越大，相反离鼠标越远相对缩放率越小。

 

var scale:Number=max-Math.abs(mouseX-pic.x)*ratio; 这样公式就知道了

 简化 scale=max-|mouseX-pic.x|*ratio;

 

同理：

y轴：

图片缩放率=最大缩放率-|鼠标的y坐标值-每一张图片的y轴大小|*自定义的比例；

 

二、制作过程

 

我们制作Mc的时候，Mc里面有一个名为title的动态文本，在其上面铺盖一层透明的色的图像，同时，需要指定底部为注册点，笔者按这种方式处理。然后链接为TestMc 类

 

库链接图：

 

 

 

三、程序实现

接下来，准备了

 

现在我们写一个基础类Effect.as。这个特效基础类，可以设置最大放大率，图片间距，和比率

 

[java] view plain copy print?

1. package   
2. {  
3.   
4.     import flash.display.MovieClip;  
5.     import flash.events.*;  
6.     public class Effect extends EventDispatcher  
7.     {  
8.         private var Ratio:Number;//缩放比率  
9.         private var Max:Number;//设置最大缩放比率  
10.         private var Distans:Number;//图片距离  
11.         public function Effect()  
12.         {  
13.               
14.         }  
15.         //设置最大的缩放比率  
16.         public function set max(value:Number):void  
17.         {  
18.             Max=value;  
19.         }  
20.         public function get max():Number  
21.         {  
22.             return Max;  
23.         }  
24.         //设置鼠标与图片之间距离的差的绝对值的缩放比率  
25.         public function set ratio(value:Number):void  
26.         {  
27.             Ratio=value;  
28.         }  
29.         //设置鼠标与图片之间距离的差的绝对值的缩放比率  
30.         public function get ratio():Number  
31.         {  
32.             return Ratio;  
33.         }  
34.           
35.         //设置图片之间的距离  
36.         public function set distance(value:Number):void  
37.         {  
38.             Distans=value;  
39.         }  
40.         public function get distance():Number  
41.         {  
42.             return Distans;  
43.         }  
44.     }  
45. }  

package { import flash.display.MovieClip; import flash.events.*; public class Effect extends EventDispatcher {  private var Ratio:Number;//缩放比率  private var Max:Number;//设置最大缩放比率  private var Distans:Number;//图片距离  public function Effect()  {     }  //设置最大的缩放比率  public function set max(value:Number):void  {   Max=value;  }  public function get max():Number  {   return Max;  }  //设置鼠标与图片之间距离的差的绝对值的缩放比率  public function set ratio(value:Number):void  {   Ratio=value;  }  //设置鼠标与图片之间距离的差的绝对值的缩放比率  public function get ratio():Number  {   return Ratio;  }    //设置图片之间的距离  public function set distance(value:Number):void  {   Distans=value;  }  public function get distance():Number  {   return Distans;  } }}

 

接下来，我们继承这个Effect.as 类，这个类里面有放大x轴的方法，和放大y轴的方法，同样有还原原来位置的方法

 

[java] view plain copy print?

1. package   
2. {  
3.     //图片滑动效果version 1.0  
4.   
5.     import flash.display.MovieClip;  
6.     import flash.display.Stage;  
7.     public class RollPhoto extends Effect  
8.     {  
9.         private var mc:MovieClip=new MovieClip();  
10.         private var mystage:Stage;  
11.         public function RollPhoto(stage:Stage)  
12.         {  
13.             this.mystage=stage;  
14.         }  
15.           
16.         //图片放大  
17.         public function ZoomPhotoX(array:Array):void  
18.         {  
19.             var mouseposition:Number = mystage.mouseX;  
20.             var length:Number=array[0].width*array.length+super.distance*(array.length-1);  
21.             if (mouseposition<0)  
22.             {  
23.                 mouseposition=0;  
24.             }  
25.             if (mouseposition>length)  
26.             {  
27.                 mouseposition=length;  
28.             }  
29.             for (var i:uint=0; i<array.length; i++)  
30.             {  
31.                 var s:Number =super.max- Math.abs(mystage.mouseX - array[i].x)*super.ratio;//公式  
32.                 s = s < 1 ? 1 : s;  
33.                 array[i].scaleX = array[i].scaleY =s;  
34.             }  
35.             for (var j:uint=1; j<array.length; j++)  
36.             {  
37.                 array[j].x = array[j-1].x + array[j-1].width/2 + array[j].width/2 + super.distance;  
38.             }  
39.         }  
40.         //图片以y轴放大  
41.         public function ZoomPhotoY(array:Array):void  
42.         {  
43.             var mouseposition:Number = mystage.mouseY;  
44.             var length:Number=array[0].width*array.length+super.distance*(array.length-1);  
45.             if (mouseposition<0)  
46.             {  
47.                 mouseposition=0;  
48.             }  
49.             if (mouseposition>length)  
50.             {  
51.                 mouseposition=length;  
52.             }  
53.             for (var i:uint=0; i<array.length; i++)  
54.             {  
55.                 var s:Number =super.max- Math.abs(mystage.mouseY - array[i].y)*super.ratio;//公式  
56.                 s = s < 1 ? 1 : s;  
57.                 array[i].scaleX = array[i].scaleY =s;  
58.             }  
59.             for (var j:uint=1; j<array.length; j++)  
60.             {  
61.                 array[j].y = array[j-1].y + array[j-1].height/2 + array[j].height/2 + super.distance;  
62.             }  
63.         }  
64.         //还原  
65.         public function RestPosition(array:Array,type:String="x"):void  
66.         {  
67.             for (var i:uint=0; i<array.length; i++)  
68.             {  
69.                 array[i].scaleX =array[i].scaleY=1;  
70.                 if (type=="x")  
71.                 {  
72.                     array[i].x = array[0].width/2+i*(array[0].width + super.distance);  
73.                 } else  
74.                 {  
75.                     array[i].y = array[0].height/2+i*(array[0].height + super.distance);  
76.                 }  
77.             }  
78.         }  
79.     }  
80. }  

package { //图片滑动效果version 1.0 import flash.display.MovieClip; import flash.display.Stage; public class RollPhoto extends Effect {  private var mc:MovieClip=new MovieClip();  private var mystage:Stage;  public function RollPhoto(stage:Stage)  {   this.mystage=stage;  }    //图片放大  public function ZoomPhotoX(array:Array):void  {   var mouseposition:Number = mystage.mouseX;   var length:Number=array[0].width*array.length+super.distance*(array.length-1);   if (mouseposition<0)   {    mouseposition=0;   }   if (mouseposition>length)   {    mouseposition=length;   }   for (var i:uint=0; i<array.length; i++)   {    var s:Number =super.max- Math.abs(mystage.mouseX - array[i].x)*super.ratio;//公式    s = s < 1 ? 1 : s;    array[i].scaleX = array[i].scaleY =s;   }   for (var j:uint=1; j<array.length; j++)   {    array[j].x = array[j-1].x + array[j-1].width/2 + array[j].width/2 + super.distance;   }  }  //图片以y轴放大  public function ZoomPhotoY(array:Array):void  {   var mouseposition:Number = mystage.mouseY;   var length:Number=array[0].width*array.length+super.distance*(array.length-1);   if (mouseposition<0)   {    mouseposition=0;   }   if (mouseposition>length)   {    mouseposition=length;   }   for (var i:uint=0; i<array.length; i++)   {    var s:Number =super.max- Math.abs(mystage.mouseY - array[i].y)*super.ratio;//公式    s = s < 1 ? 1 : s;    array[i].scaleX = array[i].scaleY =s;   }   for (var j:uint=1; j<array.length; j++)   {    array[j].y = array[j-1].y + array[j-1].height/2 + array[j].height/2 + super.distance;   }  }  //还原  public function RestPosition(array:Array,type:String="x"):void  {   for (var i:uint=0; i<array.length; i++)   {    array[i].scaleX =array[i].scaleY=1;    if (type=="x")    {     array[i].x = array[0].width/2+i*(array[0].width + super.distance);    } else    {     array[i].y = array[0].height/2+i*(array[0].height + super.distance);    }   }  } }}

第三步：测试，通过复制TestMc。然后就进行鼠标监听，而这里我们采用的是碰撞的方法，而不是鼠标对每一张图片向上监听，为什么？这里留个疑问呢。

 

[c-sharp] view plain copy print?

1. package   
2. {  
3.     import flash.display.MovieClip;  
4.     import flash.events.*;  
5.     import flash.geom.*;  
6.     import flash.system.*;  
7.     import flash.text.*;  
8.     import flash.display.BitmapData;  
9.     import flash.display.Bitmap;  
10.     import flash.display.DisplayObject;  
11.     import flash.display.Shape;  
12.     import flash.display.Graphics;  
13.     import flash.display.GradientType;  
14.     import flash.utils.getDefinitionByName;  
15.     import flash.display.Loader;  
16.     import flash.net.*;  
17.     import flash.display.DisplayObjectContainer;  
18.       
19.     public class main extends MovieClip  
20.     {  
21.         private var array:Array;  
22.         private var list:MovieClip;  
23.         private var myphoto:RollPhoto;//图片滚动对象  
24.         private var contain:MovieClip=new MovieClip();  
25.         private var loader:Loader;  
26.         public function main()  
27.         {  
28.             init();  
29.         }  
30.         private function init():void  
31.         {  
32.             myphoto=new RollPhoto(stage);//初始化对象  
33.             myphoto.max=1.4;//设置最大缩放比例  
34.             myphoto.ratio=0.0025;//设置自定义比例  
35.             myphoto.distance=10;//设置图片间的距离  
36.             createObj();  
37.             addEventListener(Event.ENTER_FRAME,Run);  
38.             addChild(contain);  
39.         }  
40.         //创建物体  
41.         private function createObj():void  
42.         {  
43.             array = new Array();  
44.             list = new MovieClip();  
45.             list.y=60;  
46.             list.x=200;  
47.             list.name = "list";  
48.             addChild(list);  
49.   
50.             for (var i:uint=0; i<10; i++)  
51.             {  
52.                 var myclass:Object=getDefinitionByName("TestMc");                 
53.                 var bit:MovieClip= new myclass() as MovieClip;  
54.                 bit.title.text="Menu"+i;  
55.                 bit.ID=i;  
56.                 bit.mouseChildren = false;  
57.                 bit.buttonMode = true;  
58.                 bit.x =20;  
59.                 bit.y =bit.height/2+i*(bit.height+10);  
60.                 array.push(bit);  
61.                 list.addChild(bit);  
62.                 bit.addEventListener(MouseEvent.MOUSE_DOWN,listdown);  
63.             }  
64.             stage.addEventListener(MouseEvent.MOUSE_MOVE,listmove);  
65.         }  
66.         private function Run(event:Event):void  
67.         {  
68.             memory.text=String(System.totalMemory/1024)+"/kb";//内存监控  
69.         }  
70.         private function listmove(e:MouseEvent):void  
71.         {  
72.             if (list.hitTestPoint(mouseX,mouseY))  
73.             {  
74.                 myphoto.ZoomPhotoY(array);//以y轴为例  
75.             }  
76.             else  
77.             {  
78.                 System.gc();  
79.                 myphoto.RestPosition(array,"y");  
80.             }  
81.         }  
82.         private function listdown(event:MouseEvent):void  
83.         {  
84.             trace(event.currentTarget);  
85.             //removeAllChildren(contain);//删除容器中对象  
86.             //load(event.currentTarget.ID);  
87.         }  
88.         //加载外部图片  
89.         private function load(path:String):void  
90.         {  
91.             loader=new Loader();  
92.             loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);  
93.             loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);  
94.             loader.load(new URLRequest(path));  
95.         }  
96.         private function onComplete(event:Event):void  
97.         {  
98.             loader.removeEventListener(Event.COMPLETE,onComplete);  
99.             contain.addChild(event.currentTarget.content);  
100.             contain.alpha=0;  
101.             contain.x=150;  
102.             contain.y=100;  
103.               
104.         }  
105.         private function onError(event:Event):void  
106.         {  
107.             throw new Error("路径错误");              
108.         }  
109.           
110.         private function removeAllChildren(container:DisplayObjectContainer):void  
111.         {  
112.             while (container.numChildren>0)  
113.             {  
114.                 container.removeChildAt(0);  
115.             }  
116.   
117.         }  
118.     }  
119. }  

package { import flash.display.MovieClip; import flash.events.*; import flash.geom.*; import flash.system.*; import flash.text.*; import flash.display.BitmapData; import flash.display.Bitmap; import flash.display.DisplayObject; import flash.display.Shape;    import flash.display.Graphics; import flash.display.GradientType; import flash.utils.getDefinitionByName; import flash.display.Loader; import flash.net.*; import flash.display.DisplayObjectContainer;  public class main extends MovieClip {  private var array:Array;  private var list:MovieClip;  private var myphoto:RollPhoto;//图片滚动对象  private var contain:MovieClip=new MovieClip();  private var loader:Loader;  public function main()  {   init();  }  private function init():void  {   myphoto=new RollPhoto(stage);//初始化对象   myphoto.max=1.4;//设置最大缩放比例   myphoto.ratio=0.0025;//设置自定义比例   myphoto.distance=10;//设置图片间的距离   createObj();   addEventListener(Event.ENTER_FRAME,Run);   addChild(contain);  }  //创建物体  private function createObj():void  {   array = new Array();   list = new MovieClip();   list.y=60;   list.x=200;   list.name = "list";   addChild(list);   for (var i:uint=0; i<10; i++)   {    var myclass:Object=getDefinitionByName("TestMc");        var bit:MovieClip= new myclass() as MovieClip;    bit.title.text="Menu"+i;    bit.ID=i;    bit.mouseChildren = false;    bit.buttonMode = true;    bit.x =20;    bit.y =bit.height/2+i*(bit.height+10);    array.push(bit);    list.addChild(bit);    bit.addEventListener(MouseEvent.MOUSE_DOWN,listdown);   }   stage.addEventListener(MouseEvent.MOUSE_MOVE,listmove);  }  private function Run(event:Event):void  {   memory.text=String(System.totalMemory/1024)+"/kb";//内存监控  }  private function listmove(e:MouseEvent):void  {   if (list.hitTestPoint(mouseX,mouseY))   {    myphoto.ZoomPhotoY(array);//以y轴为例   }   else   {    System.gc();    myphoto.RestPosition(array,"y");   }  }  private function listdown(event:MouseEvent):void  {   trace(event.currentTarget);   //removeAllChildren(contain);//删除容器中对象   //load(event.currentTarget.ID);  }  //加载外部图片  private function load(path:String):void  {   loader=new Loader();   loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);   loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);   loader.load(new URLRequest(path));  }  private function onComplete(event:Event):void  {   loader.removeEventListener(Event.COMPLETE,onComplete);   contain.addChild(event.currentTarget.content);   contain.alpha=0;   contain.x=150;   contain.y=100;     }  private function onError(event:Event):void  {   throw new Error("路径错误");     }    private function removeAllChildren(container:DisplayObjectContainer):void  {   while (container.numChildren>0)   {    container.removeChildAt(0);   }  } }}

 

四 输出效果图

 

 

 

再看看以x轴的效果是如何;可以根据自己需要还可以增加一些阴影倒影类。

 

 

五、小结

 我们知道，特效是源于数学的理解，有了这一层基础，我们会制作出更多不错的效果，通过研究这些特效，而不要忘记理解背后的原理。同样，这个程序依然可以进行扩展，可以进行其修改以达到自己满意的效果，如增加一些倒影类结合图片这样看起来就更加酷。

好就介绍到这里。如果有意见或者问题处理，请留言。

 

 

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow