flash特效原理：圖片滑動放大效果

  這幾天，都在無所事事，唯一寄託就是在這裡記錄一下自己研究出來的東西。趁現在有點時間，就把最近看過的一種常用的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。這個特效基礎類，可以設定最大放大率，圖片間距，和比率

 

package<br />{</p><p>import flash.display.MovieClip;<br />import flash.events.*;<br />public class Effect extends EventDispatcher<br />{<br />private var Ratio:Number;//縮放比率<br />private var Max:Number;//設定最大縮放比率<br />private var Distans:Number;//圖片距離<br />public function Effect()<br />{</p><p>}<br />//設定最大的縮放比率<br />public function set max(value:Number):void<br />{<br />Max=value;<br />}<br />public function get max():Number<br />{<br />return Max;<br />}<br />//設定滑鼠與圖片之間距離的差的絕對值的縮放比率<br />public function set ratio(value:Number):void<br />{<br />Ratio=value;<br />}<br />//設定滑鼠與圖片之間距離的差的絕對值的縮放比率<br />public function get ratio():Number<br />{<br />return Ratio;<br />}</p><p>//設定圖片之間的距離<br />public function set distance(value:Number):void<br />{<br />Distans=value;<br />}<br />public function get distance():Number<br />{<br />return Distans;<br />}<br />}<br />}

 

接下來，我們繼承這個Effect.as 類，這個類裡面有放大x軸的方法，和放大y軸的方法，同樣有還原原來位置的方法

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

第三步：測試，通過複製TestMc。然後就進行滑鼠監聽，而這裡我們採用的是碰撞的方法，而不是滑鼠對每一張圖片向上監聽，為什嗎？這裡留個疑問呢。

 

package<br />{<br />import flash.display.MovieClip;<br />import flash.events.*;<br />import flash.geom.*;<br />import flash.system.*;<br />import flash.text.*;<br />import flash.display.BitmapData;<br />import flash.display.Bitmap;<br />import flash.display.DisplayObject;<br />import flash.display.Shape;<br /> import flash.display.Graphics;<br />import flash.display.GradientType;<br />import flash.utils.getDefinitionByName;<br />import flash.display.Loader;<br />import flash.net.*;<br />import flash.display.DisplayObjectContainer;</p><p>public class main extends MovieClip<br />{<br />private var array:Array;<br />private var list:MovieClip;<br />private var myphoto:RollPhoto;//圖片滾動對象<br />private var contain:MovieClip=new MovieClip();<br />private var loader:Loader;<br />public function main()<br />{<br />init();<br />}<br />private function init():void<br />{<br />myphoto=new RollPhoto(stage);//初始化對象<br />myphoto.max=1.4;//設定最大縮放比例<br />myphoto.ratio=0.0025;//設定自訂比例<br />myphoto.distance=10;//設定圖片間的距離<br />createObj();<br />addEventListener(Event.ENTER_FRAME,Run);<br />addChild(contain);<br />}<br />//建立物體<br />private function createObj():void<br />{<br />array = new Array();<br />list = new MovieClip();<br />list.y=60;<br />list.x=200;<br />list.name = "list";<br />addChild(list);</p><p>for (var i:uint=0; i<10; i++)<br />{<br />var myclass:Object=getDefinitionByName("TestMc");<br />var bit:MovieClip= new myclass() as MovieClip;<br />bit.title.text="Menu"+i;<br />bit.ID=i;<br />bit.mouseChildren = false;<br />bit.buttonMode = true;<br />bit.x =20;<br />bit.y =bit.height/2+i*(bit.height+10);<br />array.push(bit);<br />list.addChild(bit);<br />bit.addEventListener(MouseEvent.MOUSE_DOWN,listdown);<br />}<br />stage.addEventListener(MouseEvent.MOUSE_MOVE,listmove);<br />}<br />private function Run(event:Event):void<br />{<br />memory.text=String(System.totalMemory/1024)+"/kb";//記憶體監控<br />}<br />private function listmove(e:MouseEvent):void<br />{<br />if (list.hitTestPoint(mouseX,mouseY))<br />{<br />myphoto.ZoomPhotoY(array);//以y軸為例<br />}<br />else<br />{<br />System.gc();<br />myphoto.RestPosition(array,"y");<br />}<br />}<br />private function listdown(event:MouseEvent):void<br />{<br />trace(event.currentTarget);<br />//removeAllChildren(contain);//刪除容器中對象<br />//load(event.currentTarget.ID);<br />}<br />//載入外部圖片<br />private function load(path:String):void<br />{<br />loader=new Loader();<br />loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);<br />loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);<br />loader.load(new URLRequest(path));<br />}<br />private function onComplete(event:Event):void<br />{<br />loader.removeEventListener(Event.COMPLETE,onComplete);<br />contain.addChild(event.currentTarget.content);<br />contain.alpha=0;<br />contain.x=150;<br />contain.y=100;</p><p>}<br />private function onError(event:Event):void<br />{<br />throw new Error("路徑錯誤");<br />}</p><p>private function removeAllChildren(container:DisplayObjectContainer):void<br />{<br />while (container.numChildren>0)<br />{<br />container.removeChildAt(0);<br />}</p><p>}<br />}<br />}

 

四 輸出

 

 

 

再看看以x軸的效果是如何;可以根據自己需要還可以增加一些陰影倒影類。

 

 

五、小結

 我們知道，特效是源於數學的理解，有了這一層基礎，我們會製作出更多不錯的效果，通過研究這些特效，而不要忘記理解背後的原理。同樣，這個程式依然可以進行擴充，可以進行其修改以達到自己滿意的效果，如增加一些倒影類結合圖片這樣看起來就更加酷。

好就介紹到這裡。如果有意見或者問題處理，請留言。