你是不是想找相關Flash動畫公司: 二維動畫公司 Flash課件制作 宣傳片制作 還是要找北京、上海、西安、廣州、南京的動畫制作公司

flash AS3.0(CS4)3D圖片旋轉實例 flash代碼編程制作圖片旋轉的三維(3D)效果

編輯:翼虎動漫          操作時間:2010/8/13

 

 

 

說明:此教程用Flash CS5制作,保存為CS4類型,所以CS4以下版本打不開源文件,代碼在CS4以下版本的AS3.0中也不能運行,因為CS4以下版本的AS3沒有3D類。

在這一教程中,將學習如何實現圖像的3D旋轉、圖像的倒影及漸變遮罩的制作。

1、打開CS4或CS5,新建Flash文檔,屬性設置:寬、高根據圖片而定,背景黑色。圖1(CS5)
設置舞臺-圖1.png
2、把要用的圖片導入到庫中,雙擊庫中的圖片,打開位圖屬性面板。在鏈接項的“為ActionScritp 導出”的復選中打勾,在類:輸入框中輸入Shuttle,基類:flash.display.BitmapData,按確定。圖2(CS5)
位圖鏈接-圖2.png
3、新建一個按鈕元件,形狀任意。(也可選用組件中的按鈕,但不提倡使用,因為組件中的按鈕文件都很大,占用的資源比較多。)圖3(CS5)
創建按鈕-圖3.png
4、返回場景1,改名按鈕。選中圖層1的第一幀。拖入按鈕到舞臺的右下,在屬性面板中命名btnLeft,再拖入一個按鈕,執行翻轉操作命名btnRight。圖4(CS5)
按鈕命名-圖4.png
5、添加圖層2,改名文本。輸入靜態文本“左”,“右”。時間軸截圖:圖5(CS5)
時間軸-圖5.png
庫截圖:圖6(CS5)
庫面板-圖6.png
6、添加圖層3,改名as。選中第一幀,打開動作面板,輸入代碼:



var picWidth:Number = 256;



var picHeight:Number = 247;



var gap:Number = 1.5;



var goLeft:Boolean = false;



var goRight:Boolean = false;



/*

創建兩個位圖,topImg和reflImg,

圖像和它的倒影。

*/



var imgBD:BitmapData = new Shuttle(256,247);



var topImg:Bitmap = new Bitmap(imgBD);



var reflImg:Bitmap = new Bitmap(imgBD);



/*

創建兩個容器 topCont和reflCont放置圖像和倒影,

在容器中的圖像注冊點居中。

再創建一個容器 ppCont。ppCont為topCont和reflCont的

容器。

*/



var topCont:Sprite = new Sprite();



var reflCont:Sprite = new Sprite();



var ppCont:Sprite = new Sprite();



this.addChild(ppCont);



topCont.addChild(topImg);



topImg.x = -picWidth / 2;



topImg.y = -picHeight / 2;



reflCont.addChild(reflImg);



reflImg.x = -picWidth / 2;



reflImg.y = -picHeight / 2;



reflCont.rotationX = 180;



ppCont.addChild(topCont);



topCont.x = picWidth / 2;



topCont.y = picHeight / 2;



topCont.z = 0;



ppCont.addChild(reflCont);



reflCont.x = topCont.x;



reflCont.y = topCont.y + picHeight + gap;



reflCont.z = 0;



var pp:PerspectiveProjection=new PerspectiveProjection();



pp.fieldOfView = 55;



pp.projectionCenter = new Point(picWidth / 2,picHeight / 2);



ppCont.transform.perspectiveProjection = pp;



//設置在舞臺中心上面的圖像坐標。



ppCont.x = 250 - picWidth / 2;



ppCont.y = 247 - picHeight / 2 - 80;



/*

為使倒影產生漸變的效果,

為reflImg創建漸變的遮罩。 

*/



var maskingShape:Shape = new Shape();



//加入遮罩



reflCont.addChild(maskingShape);



maskingShape.x = reflImg.x;



maskingShape.y = reflImg.y;



drawInMask();



reflImg.cacheAsBitmap = true;



maskingShape.cacheAsBitmap = true;



//遮罩



reflImg.mask = maskingShape;



/*

下面定義的方法在maskingShape中畫出

從透明的紅色到完全的紅色的一個線性漸變。



mat.createGradientBox(picWidth,picHeight,90*(Math.PI/180));



90 degress is converted to radians: 90*(Math.PI/180).

*/



function drawInMask():void

{



        var mat:Matrix = new Matrix();



        var colors:Array = [0xFF0000,0xFF0000];



        var alphas:Array = [0,0.7];



        var ratios:Array = [10,255];



        mat.createGradientBox(picWidth,picHeight,90 * (Math.PI / 180));



        maskingShape.graphics.lineStyle();



        maskingShape.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,mat);



        maskingShape.graphics.drawRect(0,0,picWidth,picHeight);



        maskingShape.graphics.endFill();



}



//為按鈕添加偵聽器。偵聽 ENTER_FRAME 事件,使它旋轉。



btnLeft.addEventListener(MouseEvent.ROLL_OVER,leftOn);



function leftOn(e:MouseEvent):void

{



        goLeft = true;



}



btnLeft.addEventListener(MouseEvent.ROLL_OUT,leftOff);



function leftOff(e:MouseEvent):void

{



        goLeft = false;



}



btnRight.addEventListener(MouseEvent.ROLL_OVER,rightOn);



function rightOn(e:MouseEvent):void

{



        goRight = true;



}



btnRight.addEventListener(MouseEvent.ROLL_OUT,rightOff);



function rightOff(e:MouseEvent):void

{



        goRight = false;



}



this.addEventListener(Event.ENTER_FRAME,onEnter);



function onEnter(e:Event):void

{



        if (goLeft)

        {



                topCont.rotationY += 4;



                reflCont.rotationY += 4;

        }



        if (goRight)

        {



                topCont.rotationY += -4;



                reflCont.rotationY += -4;

        }



}

7、完成,測試影片。

源文件:3d旋轉源文件.rar(CS4以下版本打不開源文件)

 

 

 

 

版權申明 ┊ 業務范圍 ┊ 加入我們  ┊ 聯系方式
翼虎動漫工作室承接各類Flash動畫制作 翼虎口號做客戶滿意的flash訂單。!
地址:上海市青浦區崧澤大道6066號19號樓二樓(整層) 全國免費咨詢熱線:400 804 9112
我們的業務還包括制作各式公交動畫廣告,地鐵動畫廣告,電視動畫廣告以及多媒體設計與制作。
友情鏈接: 北京三維動畫公司 二維動畫制作 Flash動畫制作 北京動畫制作公司 動畫制作公司 上海動畫公司 蘇ICP備19008057號
海南环岛赛下载 福彩3d彩吧论坛预测 十一运夺金遗漏彩乐乐 中国平安股票股吧 江西十一选五助手 皇家娱乐在线客服 北京8开奖结果查询 成功职业赌博心态 排列五走势图专业版带连线 国内券商佣金对比 河北快三中奖多少钱