×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
软件安装教程 远程服务 超值!手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 6978|回复: 15

[教程] 游动的鱼蛇蝌蚪@张志晨as3实例教程89

  [复制链接]
发表于 2014-2-25 11:39:26 | 显示全部楼层 |阅读模式
本帖最后由 dqxxx 于 2014-2-27 19:11 编辑

游动的鱼蛇蝌蚪@张志晨as3实例教程89


在本例中,动物的身体是一个个圆形顺次连接而成。我们要控制的是:
圆的位置(圆心坐标:ox,oy)
圆的大小(半径r)
圆的颜色(color)
圆的透明度(alpha)
圆的变形(改变scaleX、scaleY),头部呈椭圆形
圆的角度(rotaction、angle)
于是,我们要写一个画圆的类:
package {
        import flash.display.Shape;
        public class Circle extends Shape {
                public var angle:Number=0;//记录上一个目标(一个虚空的点,或者身体上的一个节)的角度差
                //构造函数的参数:半径,圆的颜色、圆心坐标(参数的顺序可以改成自己习惯的顺序)
                public function Circle(r:Number=1,c:uint=0xff0000,ox:Number=0,oy:Number=0) {
                        this.graphics.clear();
                        this.graphics.lineStyle(0,0xff0000,0);//无轮廓
                        this.graphics.beginFill(c);//填充
                        this.graphics.drawCircle(ox-r*.5,oy-r*.5,r);
                        this.graphics.endFill();
                }
        }
}


接下来写一个构造动物身体的类

package {
        import flash.display.Sprite;//容器
        import flash.utils.Timer;
        import flash.events.TimerEvent;
        import flash.geom.ColorTransform;
        import flash.display.Shape;

        public class Body extends Sprite {

                const W:Number=550;//活动区
                const H:Number=440;
                const pi:Number=180/Math.PI;//进率:1弧度等于多少度(供引用的值,防止多次重复计算)
                var tx:Number;//前进的目标点
                var ty:Number;
                var v:int;//速度
                var _r:Number;//半径
                var _note:int;//身长几节
                var bodys:Array=[];//存放身体的每一节,就是每一个圆
                var _headscaleX:Number;//头部大小,决定它长得像什么,
                var _headscaleY:Number;//如:头大身小是蝌蚪,头略大,身细长是蛇。
                var tm:Timer;//动力

                public function Body(note:Number =22,
                 color:uint=0xff0000,
                 r:Number=10,
                 headscaleX:Number =1.5,
                 headscaleY:Number =1.2) {
                         _r=r
                        _note=note;
                        _headscaleX=headscaleX;
                        _headscaleY=headscaleY;
                        tx=rnd(W);//初始目标点
                        ty=rnd(H);
                        bodys=[];

                        this.transform.colorTransform=new ColorTransform(rnd()+.5,rnd()+.5,rnd()+.5);
                        for (var k:int=0; k<_note; k++) {
                                var sp:Shape=new Circle(r,color);//产生一个节(圆)
                                this.addChildAt(sp);
                                bodys[k]=sp;//存入数组,方便调用
                                sp.scaleX=sp.scaleY=1-(i/note);
                                sp.alpha=1-i*0.011;
                        }
                        //订制头部:
                        bodys[0].x=tx;
                        bodys[0].y=ty;
                        v=rnd(80)+20;//速度,值越大,速度越小,限定在20-100之间
                        bodys[0].scaleX=_headscaleX;
                        bodys[0].scaleY=_headscaleY;


                        tm=new Timer(25);//帧频80每秒
                        tm.start();
                        tm.addEventListener(TimerEvent.TIMER,move);
                }

                function rnd(f:Number =1):Number {//产生0-f之间的随机数
                        return (Math.random ()*f);
                }

                function move(e:TimerEvent) {
                        if (rnd()<0.08) {//百分之八的机会转向
                                tx=rnd(W);//新的目标点
                                ty=rnd(H);
                                v=rnd(80)+20;//新的速度
                        }
                        for (var k:int=0; k<_note; k++) {
                                var sp:Circle=bodys[k];
                                if (k==0) {//处理“头节”:
                                        sp.x+=(tx-sp.x)/v;//简单的缓动
                                        sp.y+=(ty-sp.y)/v;//V做分母,所以值越大速度越慢
                                        sp.angle=Math.atan2(- sp.y+ty,- sp.x+tx);//与目标的角差
                                        sp.rotation=sp.angle*pi;//转向
                                } else {//处理身体的各个“节”(圆):
                                        var sp1:Circle=bodys[k-1];
                                        var dx=sp1.x-sp.x;
                                        var dy=sp1.y-sp.y;
                                        sp.angle=Math.atan2(dy,dx)//新的角差
                                        sp.rotation=sp.angle*pi;//旋转
                                        sp.x+=-r*.5*Math.cos(sp1.angle)+dx;//前进
                                        sp.y+=-r*.5*Math.sin(sp1.angle)+dy;
                                }
                        }
                }

        }

}


时间轴上的代码:

addChild(new  Body (50,0xffff00,4,2,1.5))//黄色的水蛇
addChild(new  Body (200,0xfff00f,4,2,1.5))//黄色的水蛇
addChild(new  Body (20,0xff0000,10,1.3,1.1))//红色的金鱼
addChild(new  Body (20,0x00ff00,6,2,1.5))//绿色的蝌蚪




本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=537748
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
发表于 2014-2-27 04:30:49 | 显示全部楼层
酷素材
有意思!
回复 支持 反对

使用道具 举报

发表于 2014-2-27 20:58:29 | 显示全部楼层
很喜欢.!!!!!!!!!!!!!!!!
回复 支持 反对

使用道具 举报

发表于 2014-3-1 07:42:50 | 显示全部楼层
很棒的效果,学习
回复 支持 反对

使用道具 举报

发表于 2014-3-21 13:02:43 | 显示全部楼层
酷素材
很棒的效果,学习
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-31 19:35:28 | 显示全部楼层
酷素材
向你学习,我要进步中
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-31 19:35:37 | 显示全部楼层
渴望能看到你的新教程
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-31 19:35:46 | 显示全部楼层
我也在努力,共同开创As3的前程
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-31 19:35:55 | 显示全部楼层
好帖,顶起。。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-31 19:36:04 | 显示全部楼层
恩~~~来学习学习~~~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-31 19:36:13 | 显示全部楼层
学习先。。。。。。
回复 支持 反对

使用道具 举报

发表于 2015-1-18 18:17:55 | 显示全部楼层
来学习,好教程!
请问若将它们换成影片剪辑,该如何改写代码呢?
回复 支持 反对

使用道具 举报

发表于 2015-5-26 09:24:26 | 显示全部楼层
难得一见的给力帖子哈。。。
回复 支持 反对

使用道具 举报

发表于 2015-6-29 07:31:08 | 显示全部楼层

来学习,好教程!
回复 支持 反对

使用道具 举报

发表于 2015-6-30 07:17:28 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345