AS3.0 Flash 網頁開發

[AS3]仿Apple CoverFlow特效-XML

梅干 2009/08/31

梅問題-Actionscript3教學-CoverFlow for XML

  上星期參加橫逸所推出的Flex與Flash的特效應用,老實說自從去年上完Flex後,梅干就已經很久沒有再用Flash了,但在此活動中,有一個範例則是使用了Flash Actionscript,製作仿Appale的Cover Flow效果,最神奇的是,這看似酷炫的特效,竟然只要短短的50行,梅干這一、二天花了點時間,將它稍作改量,把圖片改用XML的方式來載入,並加入連結,讓整個特效再運用上更加的便利,由於此範例有運用到3D,所以得用Flash CS4以及Flash Player10才可運作,當然該特效可套用到任何的地方。


CoverFlow.fla
影格1輸入下方語法:

import gs.TweenMax;
var total:int=0;
//起始值,預設0
var currentIndex:int=0;
var url:String=””;
var target:String=”_self”;

var container:Sprite=new Sprite();
this.addChild(container);
container.x=stage.stageWidth/2;
container.y=stage.stageHeight/2;
//深度設定,預設500,Z值愈小愈前面圖片也愈大,值愈大圖片愈小
container.z=650;

//讀入XML
var mmXML:XML;
var xmlUrl:URLRequest=new URLRequest(“coverMXL.xml”);
var xmlLoader:URLLoader=new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE,completeHandler);
xmlLoader.load(xmlUrl);

//當XML載入完成時
function completeHandler(event:Event):void {
mmXML=XML(xmlLoader.data);
total=mmXML.mmCover.length();

for (var i=0; i0) {
currentIndex++;
} else {
currentIndex–;
}

currentIndex=(currentIndex<0)?0:currentIndex; currentIndex=(currentIndex>total-1)?total-1:currentIndex;

renderScreen();
}

//點選跳到該圖片
function Showit(event:MouseEvent):void{
currentIndex=event.currentTarget.name.replace(“cover”,””);
renderScreen();
}

//連結頁面
function geturl(event:MouseEvent):void {
var req:URLRequest = new URLRequest();
req.url=url;
navigateToURL(req,target);
//trace(url);
}

//播放顯示
function renderScreen():void {
trace(currentIndex);
TweenMax.to(container,0.5,{x:stage.stageWidth/2-(150*currentIndex)});
for (var i=0; icurrentIndex) {
currentCover.mask_mc.alpha=0.7;
currentCover.link_btn.visible=false;

TweenMax.to(currentCover,0.4,{rotationY:45,z:0});
container.setChildIndex(currentCover,0);
} else {
//trace(mmXML.mmCover.mmLinkURL[currentIndex]);
currentCover.mask_mc.alpha=0;
currentCover.link_btn.visible=true;

url=mmXML.mmCover.mmLinkURL[currentIndex];
target=mmXML.mmCover.mmTarget[currentIndex];

//-300顯示圖片的大小,數值愈小圖片愈大
TweenMax.to(currentCover,0.4,{rotationY:0,z:-450});
container.setChildIndex(currentCover,container.numChildren-1);
}
}
}


coverMXL.xml

<?xml version=“1.0” encoding=“utf-8”?>


圖檔位置
連結位置
目標


pic/view0.jpg
http://www.minwt.com/?p=1369
_blank



  日後只要直接修改xml檔,就可自由的新增圖片,以及加入圖片的連結位置,和開啟的目標,相當的方便,,而比較重要的部分,梅干都有寫上註解,各位有空不坊可玩玩看,還算是蠻有趣的特效,在下面的範例預覽中,各位除了可用滑鼠中間鍵滾動外,也可直接用滑鼠點選來切換。
範例預覽:

[範例下載] ※解壓密碼:minwt.com