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

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

3D效果翅膀  

2014-03-03 20:34:30|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在Flash中用Action Script实现3D效果翅膀
         Flash中要实现3D效果是比较麻烦的,下面我们就用Action Script来实现一个比较简单的3D效果。先看看最终效果,一个看起来像是3D效果的花在场景中旋转,在旋转的过程中会改变颜色,还会响应鼠标作相应的动作。静态效果如图1所示。

  下载源文件请点击这里。


3D效果翅膀 - 清风 - 清风的博客

  最效效果演示:

  一、实现原理

  要在只能显示二维图形的Flash中显示三维图形,很关键的一点就是如何将三维坐标转换为二维坐标。另外,如何对三维坐标进行操作,如何渲染最终的显示效果,都是颇有难度的。

  在此实例中,我们首先将三维的坐标值保存在数组里面,对这些坐标值进行操作后,根据一定的规则对数组里面的值进行相应计算,转换成二维坐标,对二维坐标值进行渲染和显示控制,就得到了最终的显示效果。

二、实现步骤

  1、打开Flash MX 2004,新建一个场景,设置场景的大小为700 px * 525 px,背景为黑色。

  2、按“Ctrl + F8”新建一个Movie Clip,命名为“circle”,类型为Movie Clip,在此Clip中用“Oval tool”绘制一个椭圆形如图2所示。

3D效果翅膀 - 清风 - 清风的博客

  3、按“Ctrl + F8”新建一个Movie Clip,命名为“line”,类型为Movie Clip,将上一步制作的“circle”Clip拖到此Clip的场景中,命名为“circle”。在此Clip的时间轴的第30帧上面点击鼠标右键,选取“Insert key frame”,从而插入关键帧。选取第30帧的场景里面的“circle” Clip,设置属性如图3所示。在第60、90帧上面插入关键帧,分别设置场景里面的“circle” Clip属性如图4、5所示。最后在第120帧上面插入关键帧。

3D效果翅膀 - 清风 - 清风的博客

3D效果翅膀 - 清风 - 清风的博客

3D效果翅膀 - 清风 - 清风的博客

  4、点击 “line”Clip中时间轴上面的第1帧、第30帧、第60帧、第60帧,分别设置帧的属性如图6所示。

3D效果翅膀 - 清风 - 清风的博客

  5、按“Ctrl + F8”新建一个Movie Clip,命名为“vertex”,类型为Movie Clip,在此Clip的场景中用文本工具输入“loading”这几个字。

  6、返回到主场景中,将“line”Clip和“vertex”Clip都拖到场景中,并分别将它们的实例名设置为“wire”和“point”。

 7、在主场景的时间轴上面,插入一个新的层,命名为“Scripts”,分别在此层的第2帧、第3帧上面插入关键帧。

  8、在“Scripts”层的第1帧的Action面板上面添加如下语句:


var variable, buffer, no;

Points = 11; // 注释1
Lines = 10; // 注释2

Viewport = 500; // 注释3
line = new Array(Lines); // 注释4
vertex = new Array(Points);
project = new Array(Points);
fscommand ("fullScreen", true); // 注释5

for (i=0; i != Lines; i++) {
wire.DuplicateMovieClip("l" add i, i); // 注释6
line[i] = eval("l" add i);
}

for (i=0; i != Points; i++) {
point.DuplicateMovieClip("v" add i, (Lines*2)+i); // 注释7
vertex[i] = eval("v" add i);
}

vertex[0].x = 0; // 注释8
vertex[1].x = -100;
vertex[2].x = -150;
vertex[3].x = -150;
vertex[4].x = 0;
vertex[5].x = 100;
vertex[6].x = 150;
vertex[7].x = 100;
vertex[8].x = 150;
vertex[9].x = 0;
vertex[10].y = 0;
vertex[0].y = 0;
vertex[1].y = -100;
vertex[2].y = 0;
vertex[3].y = 100;
vertex[4].y = 150;
vertex[5].y = 100;
vertex[6].y = 0;
vertex[7].y = -100;
vertex[8].y = -150;
vertex[9].y = 0;
vertex[10].y = 0;
vertex[0].z = 0;
vertex[1].z = -100;
vertex[2].z = 0;
vertex[3].z = 100;
vertex[4].z = 0;
vertex[5].z = 100;
vertex[6].z = 0;
vertex[7].z = -100;
vertex[8].z = 0;
vertex[9].z = -150;
vertex[10].z = 150;

line[0].a = 0; // 注释9
line[0].b = 1;
line[1].a = 0;
line[1].b = 2;
line[2].a = 0;
line[2].b = 3;
line[3].a = 0;
line[3].b = 4;
line[4].a = 0;
line[4].b = 5;
line[5].a = 0;
line[5].b = 6;
line[6].a = 0;
line[6].b = 7;
line[7].a = 0;
line[7].b = 8;
line[8].a = 0;
line[8].b = 9;
line[9].a = 0;
line[9].b = 10;

function Rotate (x, y, z) { // 注释10
rad = (3.14*2)/360; // 注释11
radx = rad*x; // 注释12
rady = rad*y;
radz = rad*z;
for (i=0; i != Points; i++) { // 注释13
if (x != 0) {
vertex[i].x1 = vertex[i].x;
vertex[i].y1 = (Math.cos(radx)*vertex[i].y)-(Math.sin(radx)*vertex[i].z);
vertex[i].z1 = (Math.sin(radx)*vertex[i].y)+(Math.cos(radx)*vertex[i].z);
}
if (y != 0) {
vertex[i].x2 = (Math.cos(rady)*vertex[i].x1)-(Math.sin(rady)*vertex[i].z1);
vertex[i].y2 = vertex[i].y1;
vertex[i].z2 = (Math.sin(rady)*vertex[i].x1)+(Math.cos(rady)*vertex[i].z1);
}
if (z != 0) {
vertex[i].x3 = (Math.cos(radz)*vertex[i].x2)-(Math.sin(radz)*vertex[i].y2);
vertex[i].y3 = (Math.sin(radz)*vertex[i].x2)+(Math.cos(radz)*vertex[i].y2);
vertex[i].z3 = vertex[i].z2;
}
}
}
function toScreen () { // 注释14
for (i=0; i != Points; i++) {
vertex[i].dx = (vertex[i].x3*viewport)/(vertex[i].z3+600)+350; // 注释15
vertex[i].dy = (vertex[i].y3*viewport)/(vertex[i].z3+600)+262.5;
}
}
function render () { // 注释16
for (i=0; i != lines; i++) {
with (line[i]) {
_visible = true;
_x = vertex[line[i].a].dx;
_y = vertex[line[i].a].dy;
_xscale = vertex[line[i].b].dx-vertex[line[i].a].dx;
_yscale = vertex[line[i].b].dy-vertex[line[i].a].dy;
}
}
for (i=0; i != points; i++) {
with (vertex[i]) {
_x = dx;
_y = dy;
_xscale = 75+(((((500-z3[i])/10)*30)/100)*(-1));
_yscale = 75+(((((500-z3[i])/10)*30)/100)*(-1));
_alpha = ((((z3[i]*(-1))+500)/10))
}
}
}
var ax, ay, az, oldx, oldy, bx, by, bz, nu;

注释1:定义显示的文字为11个。
  注释2:定义组成3D图形的元素有10个。
  注释3:定义一个控制3D图形显示比例的变量。
  注释4:在这里定义几个数组,大小为刚刚所定义的变量,用来放置3D图形的各种细节。
  注释5:为了使效果看起来更好,这里实现全屏效果,有关fscommand更多的细节可以查看Flash中自带的帮助文件。
  注释6:复制文字Movie Clip,个数为前面所定义的变量值。
  注释7:复制组成图形的元素的Movie Clip,个数为前面所定义的变量值。
  注释8:设置3D图形中的文字的x、y、z坐标值,这里是3维的,改变这些值就改变了文字在3D图形中的位置。
  注释9:设置3D图形中的图形元素的x、y、z坐标值,因为图形元素已经是2维的,所以只需要2个值就可以表示3维的效果。
  注释10:定义一个函数,在这个函数里面,根据传入的x、y、z的坐标值,改变在相应数组中的值,从而实现了旋转的效果。
  注释11:定义一个常量,在将值转换成弧度的时候用。
  注释12:因为在下面的sin/cos函数中只能使用弧度,所以将传入的x、y、z坐标值转换成弧度。
  注释13:在这个循环里面,依次改变数组中的x、y、z的值,实现旋转效果。
  注释14:在Flash中只能显示二维坐标,这个函数就实现了将三维坐标转换成二维坐标,这里的实现方法很值得深思。
  注释15:这里的350和262.5分别为图形元素的长和宽,如果改变了图形元素的大小,也要相应的改变这两个值。
  注释16:这个函数实现了对最终生成三维图形进行显示和渲染,若要实现不同的显示效果,修改里面相应的值即可。


  9、在“Scripts”层的第2帧的Action面板上面添加如下语句:


rotx = (oldy-_ymouse)/2; // 注释1
roty = (oldx-_xmouse)/2;
oldx = _xmouse;
oldy = _ymouse;

ax++; // 注释2
ay++;

ax += rotx; // 注释3
ay += roty;
ay += by;
ax += bx;
az += bz;
bx = 0; // 注释4
by = 0;
bz = 0;
rotate(ax, ay, az); // 注释5
az++;
if (ax>360) { // 注释6
ax -= 360;
}
if (ay>360) {
ay -= 360;
}
if (az>360) {
az -= 360;
}
toScreen(); // 注释7
render(); // 注释8
nu = 4;


 
注释1:这里的四行是取得鼠标的位置。
  注释2:这里将x、y、z的值自增一,是为了在鼠标不动的时候,图形还可以保持旋转。
  注释3:这里是为了响应鼠标的动作而设置的值。
  注释4:将值设置为0,在下次循环的时候使用。
  注释5:调用第一帧里面所定义的函数,旋转传入的坐标值。
  注释6:旋转一周为360度,要对超过360的值进行处理。
  注释7:调用第一帧里面所定义的函数,将三维的坐标转换成可以在Flash显示的二维坐标。
  注释8:调用第一帧里面所定义的函数,渲染、显示所生成的三维图形。


  10、在“Scripts”层的第3帧的Action面板上面添加如下语句:


gotoAndPlay(2);


  注释:回到第二帧,使效果看起来连贯。


  三、小结
  至此,实例就制作完了,效果虽然比较简单,但也为在Flash中实现3D效果提供了一种思路。
  相信经过本实例的研究,对Flash中函数的操作、坐标的转换、用Action Script控制图形的显示、Action Script数组的操作等等都会变的得心应手,仔细研究一下,还是值得的。
  另外,将实例中涉及的文字和图形元素进行变换,可以得到不同的效果。对相应的值进行修改,也可以改变显示的效果,如大小,位置,透明度等等。


  评论这张
 
阅读(115)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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