注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

AS3.0(CS4)3D图片旋转实例  

2014-06-18 15:16:17|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
        说明:此教程用Flash CS5制作,保存为CS4类型,所以CS4以下版本打不开源文件,代码在CS4以下版本的AS3.0中也不能运行,因为CS4以下版本的AS3没有3D类。
        在这一教程中,将学习如何实现图像的3D旋转、图像的倒影及渐变遮罩的制作。
演示:
http://www.68design.net/download/201005/20100430105143587.swf
1、打开CS4或CS5,新建Flash文档,属性设置:宽、高根据图片而定,背景黑色。图1(CS5)

2、把要用的图片导入到库中,双击库中的图片,打开位图属性面板。在链接项的“为ActionScritp 导出”的复选中打勾,在类:输入框中输入Shuttle,基类:flash.display.BitmapData,按确定。图2(CS5)

3、新建一个按钮元件,形状任意。(也可选用组件中的按钮,但不提倡使用,因为组件中的按钮文件都很大,占用的资源比较多。)图3(CS5)

4、返回场景1,改名按钮。选中图层1的第一帧。拖入按钮到舞台的右下,在属性面板中命名btnLeft,再拖入一个按钮,执行翻转操作命名btnRight。图4(CS5)

5、添加图层2,改名文本。输入静态文本“左”,“右”。时间轴截图:图5(CS5)

库截图:图6(CS5)

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以下版本打不开源文件)
  评论这张
 
阅读(139)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017