选择显示字体大小

as2.0精彩特效之位图的飘动

椭圆参数方程,是动画编程中非常常用的一种技术,可以制作很多实用的效果,例如旗帜飘动的效果,本例中随着鼠标的移动,位图就像一面旗帜随风飘动。

flash/swflash.cab height=300 width=400 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000>flashvars" value="">idea.com/articleimg/2004/04/1770/2004030501.swf">idea.com/articleimg/2004/04/1770/2004030501.swf">access" value="never">idea.com/articleimg/2004/04/1770/2004030501.swf" width="400" height="300" play="true" loop="false" menu="true" quality="high" allowscriptaccess="never" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

下面我们就来学习如何使用这种技术。

一. 相关参数讲解

制作这个实例首先要了解椭圆的参数方程的使用,下面就对其算法作个简单的剖析。

1.单个mc(影片剪辑)在椭圆上的运动的处理方法


图1

黑点表示一个mc,radian表示数学中的弧度,从x正半轴开始,按逆时针方向旋转一周为2π,通过弧度和椭圆的参数方程来计算mc的坐标,如图1所示,具体表示方法(注:*表示代码中的乘号):mc._x=a*math.cos(radian);
mc._y=b*math.sin(radian);

a、b分别是椭圆在x、y坐标轴上的载距,代表椭圆的大小, radian不断递增即可实现mc坐标的变化,使mc在椭圆上的运动。椭圆的中心坐标为(0,0)。要平移椭圆,把mc的坐标加上中心坐标(cen_x,cen_y),具体表示方法:

mc._x=a*math.cos(radian)+cen_x;
mc._y=b*math.sin(radian)+cen_y;

2、多个mc分布在椭圆上的处理方法


图2

    如果是多个mc分布在椭圆上,情况又会不同,如图2所示。以均匀分布在椭圆上为例,一个圆周为p=2π,且有num=4个mc,这些mc的弧度如下表所示:

mc
mc1
mc2
mc3
mc4
弧度值
π/2
π
3π/2
2π或0
计算方法
p/4*1
p/4*2
p/4*3
p/4*4

从表格的第二行可看出,四个mc的间距是p/4=π/2。第三行是这些弧度的计算方法:间距乘上一个数值。用num代替4,用一个变量j代替数值,就可算出num个mc的弧度值,继而求出mc的坐标。如下所示:

for(var j=1;j<=num;j++){
    var radian= p/num*j;  //两个mc的间距乘上j即每个mc的弧度
    this[“mc”+j]._x=a*math.sin(radian);
    this[“mc”+j]._y=b*math.cos(radian);//通过弧度值计算每个mc的坐标
}

如果要分布在半个椭圆,或以一定的间距分布在椭圆的一部分,只要改变两个mc的间距弧度。

3、mc属性的设置方法

     为符合透视规律,要设置mc的属性:透明度、深度等,如图2中mc1的透明度最小,mc2和mc4次之,mc3最大,其它的属性的变化规律与透明度相同。而这些mc都是沿着椭圆运动的,所以要根据mc实时的位置来设置mc的属性。最简单的方法是用mc的y坐标,它的变化规律符合上述特征。还可用mc的x坐标、mc的弧度、mc到椭圆中心的距离等,但必须转换。下面以mc的x坐标为例:


图3 、 图4

 如图3,通过余弦函数计算出的x坐标有正有负,而mc的透明度不可能为负,所以当x为负时,要进行转换,取反或取绝对值。当mc位于x轴下方时(π-2π),从图4可知此时y<0,x坐标应比a大,所以x=2*a-math.abs(x)。 转换前后列表如下:

mc的弧度
0-π/2
π/2-π
π-3π/2
3π/2-0
x坐标
a-0
0--a
-a-0
0-a
math.abs(x)
a-0
0-a
a-0
0-a
2*a-math.abs(x)
a-0
0-a
a-2a
2a-a

这样x坐标在0到2a之间不断循环,转换式如下:
x = (y < 0) ? 2*a-math.abs(x) :math.abs(x);

4.制作类

算法清楚后,把它写成类,方便以后使用。类如下:

class move {
    private var p = 2*math.pi;//数学中的2π
    private var c_x, c_y, c_a, c_b, nu, time:number;
    //依次为中心坐标(c_x, c_y),
    截距(c_a, c_b),nu为mc的数目,time为弧度增量
    private var obj:movieclip; //构造函数
    public function move(x, y, a, b, n, t:number, o:movieclip) {
        c_x = x;
        c_y = y;
        c_a = a;
        c_b = b;
        nu = n;
        time = t;
        duplicate(o);//调用复制函数
    }   
    //得到和设置弧度的起始增量
    public function get timer():number {
        return time;
    }
    public function set timer(t:number):void {
        time = t;
    }   
    //得到和设置椭圆的中心x坐标
    public function get cen_x():number {
        return c_x;
    }
    public function set cen_x(x:number):void {
        c_x = x;
    }
    //得到和设置椭圆的中心y坐标
    public function get cen_y():number { 
        return c_y;
    }
    public function set cen_y(y:number):void {
        c_y = y;
    }
    //得到和设置椭圆在x坐标轴上的截距
    public function get cen_a():number {
        return c_a;
    }
    public function set cen_a(a:number):void {
        c_a = a;
    }
    //得到和设置椭圆在y坐标轴上的截距
    public function get cen_b():number {
        return c_b;
    }
    public function set cen_b(b:number):void {
        c_b = b;
    }
    //得到和设置椭圆上mc的数目
    public function get num():number {
        return nu;
    }
    public function set num(n:number):void {
        nu = n;
    }
    //设置mc的x坐标
    public function set_x(radian:number):number { 
        return math.cos(radian)*c_a+c_x;
    }
    //设置mc的y坐标
    public function set_y(radian:number):number { 
        return math.sin(radian)*c_b+c_y;
    }
    //复制,产生num个mc,并均匀分布
    public function duplicate(obj:movieclip) {
        var j:number = 1; while (j<=num) {
            obj.duplicatemovieclip("a"+j, j);
            _root["a"+j].n = p/num*j;
            //每个mc的起始弧度值
            _root["a"+j].gotoandstop(j);//mc跳到相应的帧
            _root["a"+j]._x = set_x(p/num*j);
            _root["a"+j]._y = set_y(p/num*j);//计算坐标
            j++;
        }
    }
    //mc的运动
    public function mymove(obj:movieclip):void {
        obj._x = set_x(obj.n+time);
        obj._y = set_y(obj.n+time);//每个mc弧度等于起始弧度值加增量 
        time time = _xmouse>c_x ? time+0.005 : time-0.005;
        //根据鼠标位置确定旋转方向,0.005为旋转速度 
    }
    //坐标的转换
    public function trans_x(obj:movieclip):number {
        var x:number = obj._x-c_x;
        var y:number = obj._y-c_y;
        //取得mc的坐标
        x = (y<0) ? 2*c_a-math.abs(x) : math.abs(x);//转换
        return x;//返回转换值
    }
    //设置mc的透明度和深度
    public function set_alpha(obj:movieclip):void {
        obj._alpha = trans_x(obj)/c_a*40+20;//从20到100
        obj.swapdepths(trans_x(obj));//深度设置
    }
    //设置mc的x方向的缩放
    public function set_xscale(obj:movieclip):void {
        obj._xscale = trans_x(obj)/c_a*100-100;//从-100到100
        obj.swapdepths(trans_x(obj));
    }
}

保存为move.as,需要强调的是类里的语句:
_root["a"+j].gotoandstop(j);
它是用于位图的切割。

二.实例制作方法

1、制作遮罩动画

新建一个电影剪辑,在电影剪辑的第一层建立红色的长方形,第二层放置位图,注册点在位图的中心。在第1帧位图和长方形左端对齐,在最后一帧,位图和长方形右端对齐,第一层创建动画,并设为遮罩。如图5所示。把制作好的电影剪辑拖到场景中,实例名为mymc。

2、编写程序

新建一层,在第一帧中输入:

var mymove:move = new move(200, 150, 10, 2, 40, 3, mymc);
//建实例mymove,中心坐标(200,150),
//截距10和2,40为mc的数目,3为mc的起始增量

在mymc上加上:
onclipevent (mousemove) {
    _parent.mymove.mymove(this);//mc的运动
    _parent.mymove.set_alpha(this);//mc的透明度
}

把文件保存到和move.as相同的目录中,测试。大家可修改实例中的各个参数,加深对程序的理解。

     此类的其它应用:3d菜单,文字的环绕,位图的筒状效果、椭圆有关的课件等。大家可发挥想象力,为类添加一些属性和方法,制作出更多效果。

欣赏:

flash/swflash.cab height=300 width=400 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000>flashvars" value="">idea.com/articleimg/2004/04/1770/2004030502.swf">idea.com/articleimg/2004/04/1770/2004030502.swf">access" value="never">idea.com/articleimg/2004/04/1770/2004030502.swf" width="400" height="300" play="true" loop="false" menu="true" quality="high" allowscriptaccess="never" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">flash/swflash.cab height=300 width=400 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000>flashvars" value="">idea.com/articleimg/2004/04/1770/2004030503.swf">idea.com/articleimg/2004/04/1770/2004030503.swf">access" value="never">idea.com/articleimg/2004/04/1770/2004030503.swf" width="400" height="300" play="true" loop="false" menu="true" quality="high" allowscriptaccess="never" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

zjs35的网站: http://zjs35.edujh.cn
源文件下载

出处:闪客帝国
责任编辑:地狱天堂

◎进入论坛flash专栏版块参加讨论

相关文章 更多相关链接
macromedia captivate 发布
actionscript 2 编译工具
使用外部css设置flashmx组件外观
flash,你要我怎么跟你说!
flash mx as 声音控制分解
作者文章
as2.0精彩特效之位图的飘动
使用flash2004中组件入门教程
一个 flash 缓冲导航详解
idea.com" method=get style="margin:0px; padding:0px;">idea.com">idea.com/img/google_search_title.gif;s:http://www.blueidea.com;forid:1;">
全网 idea.com';this.form.bisearch.value='cms';form.searchby.style.display='';document.getelementbyid('keyword').style.width='70px';">本站 idea.com';this.form.bisearch.value='bbs';form.searchby.style.display='none';document.getelementbyid('keyword').style.width='132px';">论坛
热门搜索:css fireworks 设计比赛 网页制作 dreamweaver studio8 flash
站点最新 站点最新列表
保持清晰的文档结构
月亮图腾教程ⅴ—最后一战
x-sapce使用系列教程
x-space安装系列教程
抽线以及虚线画法简明教程
创新设计 百万格子大楼
discuz!转换系列教程
世界杯足球的32个变种
易上手简单图层样式扣图
一封写给mm学习linux的信
栏目最新 栏目最新列表
保持清晰的文档结构
月亮图腾教程ⅴ—最后一战
x-sapce使用系列教程
x-space安装系列教程
抽线以及虚线画法简明教程
discuz!转换系列教程
易上手简单图层样式扣图
十分钟学会 xajax
css 菜单举一反三
利用照片制作版画简明教程

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

本文总共有 17 条评论,现在显示最新的 5 条。评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 5.00


hfcc99 publish at 2005-7-28 11:17:15
你的椭圆坐标计算公式是错的。
hcqcn2008 publish at 2005-5-31 20:13:43 评分5
好难...能否再讲祥细一点...
edwin1982 publish at 2005-5-30 15:25:18
我想做一下欣赏里面会旋转的那个啊```
哪位高手能提供一原文件啊???
谢谢````
edwin1982 publish at 2005-5-30 15:23:44
为什么看不到效果的??
还有可不可以用通俗一点的语言介绍一下什么叫类啊??
谢谢`~~~~
edwin1982 publish at 2005-5-30 15:22:25
为什么看不到效果的??
还有可不可以用通俗一点的语言介绍一下什么叫类啊??
谢谢`~~~~

查看全部评论

asp" method="post" onsubmit="submit.disabled=true;">
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分12345
注意:请不要在评论中含与内容无关的广告链接,违者封id
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 打印文档 评论文档 报告错误  
专业书推荐 更多内容
flash第一步系列》
《交互设计之路》
dreamweaver 从基础到实践》
《色彩管理》
网页设计专家门诊》
《情感化设计》
gui设计禁忌》
html>


 


关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范

Valid CSS!

无不良内容,无不良广告,无恶意代码

Valid XHTML 1.0 Transitional

creativecommons