flash特效原理 圖片滑動放大效果 2
阿新 • • 發佈：2018-12-04
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
flash特效原理：圖片滑動放大效果(1) http://blog.csdn.net/hero82748274/archive/2009/10/22/4715312.aspx
最近看了一些關於動態註冊點更加的辦法，順手牽羊把他下載了，感覺挺好用。再把一個倒影類給下載了，結合上次一個做法，做了一個簡單demo 。這一次，我們採用外部載入的辦法來製作。這樣更加合理的。鑑於這只是一個簡單demo ，只是知道了原理就能夠把握到的東西，所以這樣只是希望討論怎樣優化這種效果。下面的一個程式碼是加了一點倒影類的影子，效果看起來很不錯，至於效能就有待改進。在這裡只是提出一種demo，如果有心人能夠完善，也可以發表一下意見，共同完成這個事情。事不宜遲，講解怎樣外部匯入多張圖片。
我們不使用那些開源的類，內部類就可以簡單解決這個問題。
載入多張圖片：Loader 是一個容器，可以載入外部的圖片，但是多張圖片的時候，我們就需要進行多次線性迴圈。計算多少個loader 裝放我們的圖片。下面採用一中不確定的像無限引數的形式來寫。這種是一種偷懶的做法，所以不需要見怪，至於好不好見仁見智。為載入的容器安裝兩個監聽器，如果出錯就報告，完成了就去除一部分的監聽，將載入到的內容，儲存在數組裡面。可以是Vector 也可以是Array. 在cs4兩種都可以。鑑於圖片數很少，所以這種做法也勉強的完成了載入外部圖片的功能。
private function addImages(...args):void{}
[c-sharp] view plain copy print ?
- private function addImages(...args):void
- {
- count=args.length;
- for(var i:int=0;i<args.length;i++)
- {
- var loader:Loader=new Loader();
- loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
- loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);
- loader.load(new URLRequest(args[i]));
- }
- }
- private function onComplete(event:Event):void
- {
- var bitmap:Bitmap=event.currentTarget.content as Bitmap;
- imageList.push(bitmap);
- event.currentTarget.removeEventListener(Event.COMPLETE,onComplete);
- count--;
- if(count==0)
- {
- trace(imageList.length);
- createObj(imageList);
- }
- }
- private function onError(event:Event):void
- {
- throw new Error("路徑錯誤");
- }
完成之後，我們對圖片使用容器安裝，並且分佈其位置。和其他互動等的設定。建立一些空白的影片剪輯容器，也有利於建立倒影效果。
[c-sharp] view plain copy print ?- private function createObj(images:Array):void
- {
- for (var i:uint=0; i<images.length; i++)
- {
- var bit:MovieClip=new MovieClip();//空白影片剪輯
- bit.addChild(images[i]);
- bit.buttonMode=true;
- bit.x=i*(bit.width+8);
- bit.y=150;
- var r1:Reflect = new Reflect({mc:bit, alpha:30, ratio:60, distance:0, updateTime:-1, reflectionDropoff:0});
- array.push(bit);//陣列管理
- list.addChild(bit);//容器管理
- Contain.RegPoint(bit,new Point(50,140));//重新更改註冊點
- bit.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
- }
- stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
- }
完成之後，我們還需要對其進行倒影設定，這次採用網上一些倒影類的做法，輔助我們完成這個功能
var r1:Reflect = new Reflect({mc:bit, alpha:30, ratio:60, distance:0, updateTime:-1, reflectionDropoff:0});
Reflect類就是一個倒影的類，在adobe 核心類庫當中也存在的。效果也不錯。第一個引數指定影片剪輯，第二是透明度，第三個顯示的多少，第四個距離。其他是一個偏移等。日後有時間會補充這種講解。
完成之後，也會發現這個類其實不一定適合我們這種效果，因為我們所做的並不是希望註冊點在左上角，而是希望在其底部。這樣會造成這個類本身設計一些缺陷，不得不最後設定他的位置。因此需要通過更改他的註冊點，否則會看不到效果
下面程式碼清單：
其中import com.image.RollPhoto;
import com.image.Reflect;
import com.image.tool.Contain;
這一次和上次做法差不多，增加我們使用了Reflect 這個類。Contain類當中，有一個更加註冊點的做法，來源於6DN的做法。效果很不錯。拼合了就可以出現上面的圖片效果。
總的程式碼：主要分為載入圖片的部分，這一部分可以單獨分開出去的。建立圖片的部分，還有運算部分。
[c-sharp] view plain copy print ?
- 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.Loader;
- import flash.net.*;
- import com.image.RollPhoto;
- import com.image.Reflect;
- import com.image.tool.Contain;
- public class Main extends MovieClip
- {
- private var array:Array= new Array();//用於管理的陣列
- private var list:MovieClip=new MovieClip();//圖片容器
- private var myphoto:RollPhoto;//圖片滾動物件
- private var count:int=0;//圖片載入的計數器
- private var imageList:Array=new Array();
- public function Main()
- {
- init();
- }
- private function init():void
- {
- myphoto=new RollPhoto(stage);//初始化物件
- myphoto.setPorperty(1.4,0.0025,8);//設定屬性
- addEventListener(Event.ENTER_FRAME,Run);
- addImages("./image/1.png","./image/2.png","./image/3.png","./image/4.png","./image/5.png","./image/6.png","./image/7.png");//外部載入圖片
- addChild(list);
- list.y=60;
- list.x=20;
- }
- //建立列表物體
- private function createObj(images:Array):void
- {
- for (var i:uint=0; i<images.length; i++)
- {
- var bit:MovieClip=new MovieClip();//空白影片剪輯
- bit.addChild(images[i]);
- bit.buttonMode=true;
- bit.x=i*(bit.width+8);
- bit.y=150;
- var r1:Reflect = new Reflect({mc:bit, alpha:30, ratio:60, distance:0, updateTime:-1, reflectionDropoff:0});
- array.push(bit);//陣列管理
- list.addChild(bit);//容器管理
- Contain.RegPoint(bit,new Point(50,140));//重新更改註冊點
- bit.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
- }
- stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
- }
- private function Run(event:Event):void
- {
- memory.text=String(System.totalMemory/1024)+"/kb";//記憶體監控
- }
- private function mouseMoveHandler(e:MouseEvent):void
- {
- if (list.hitTestPoint(mouseX,mouseY) && mouseY<300)
- {
- myphoto.ZoomX(array);//以x軸為例
- }
- else
- {
- System.gc();
- myphoto.Rest(array,"x");//復位
- }
- }
- private function mouseDownHandler(event:MouseEvent):void
- {
- trace(event.currentTarget);
- }
- //載入外部圖片
- private function addImages(...args):void
- {
- count=args.length;
- for(var i:int=0;i<args.length;i++)
- {
- var loader:Loader=new Loader();
- loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
- loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);
- loader.load(new URLRequest(args[i]));
- }
- }
- private function onComplete(event:Event):void
- {
- var bitmap:Bitmap=event.currentTarget.content as Bitmap;
- imageList.push(bitmap);
- event.currentTarget.removeEventListener(Event.COMPLETE,onComplete);
- count--;
- if(count==0)
- {
- trace(imageList.length);
- createObj(imageList);
- }
- }
- private function onError(event:Event):void
- {
- throw new Error("路徑錯誤");
- }
- }
- }
不足地方：
目前來講，感覺到計算的效率並不是很理想。需要效果能夠出來，但依舊希望有所提高。任何計算都需要付出代價。因為個人能力有限，只能日後如果能夠想到就繼續完善這種做法。可以對其程式碼進行修改，要是要更加好的做法 可以留言告訴我
下載地址：
下載地址請先點選進去：在這裡
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
