Flash动画—单摆的制作教程

flash动画|教程

  想起当初作这个动画时,真是不知如何下手,所以,这是一篇献给初学者的教程的单摆动画的制作,应该要解决两个方面的问题:

  一、单摆本身的制作,这一点只要用好flash的绘图工具即可

  二、单摆振动,这一点将是教程的重点也是难点

  下面就先解决第一个问题,制作单摆(这一步的制作注意注册点的选择)首先要弄清,单摆有三部分组成:摆线、摆球、悬挂点(天花板)

  (一)、摆线:

  1、选取工具区的线条工具,线条粗细默认,在主场景按住Shifi键向下画一条适当长度的线段。
2、选中线段,右键—转化为元件-影片剪辑,其参数按图中设置,把它转化为影片剪辑

  (二)、摆球:

  1、选取工具区的椭圆工具,按住Shifi键,在主场景画出一个圆,

  2、打开主场景右边的选项栏,选择颜色-混色器,设置如图,

  为摆球选择一种填充色(当然你也可以在左边的颜色选取区选择),选择工具选取区的油漆桶工具,为摆球填色

  3、选中小球,右键—转化为元件-影片影剪辑,其参数按图中设置,把它转化为影片剪辑

  4、为它加点效果吧:选中小球,打开工作区下方的滤镜选项(flash8.0),加点投影效果,设置如图

  效果如图

  (三)悬挂点(天花板thb)

  选取工具区的线条工具,线条粗细默认,在主场景按住Shifi键水平画一条适当长度的线段作为天花板,同样按住Shifi键画一条斜向的线段,利用复制、粘贴功能,作出许多斜线,组合成天花板的示意图,选中这些线段,右键—转化为元件-影片剪辑,其参数按图中设置,

  把它转化为影片剪辑,效果如图,

  至此,基本的元件制作完成,接下来是组合单摆了:

  1、删除主场景中的所有元件,在第一帧先拖人摆线,再拖人摆球(目的是让摆球在摆线上层),调整位置,并在其属性栏中分别命名为bq、bx,如图

  2、同时选中摆线、摆球,右键—转化为元件-影片剪辑,其参数按图中设置,把它转化为影片剪辑,做成单摆,

  再把天花板元件拖入,组成完整的单摆,效果如图

  单摆的制作到此结束(喝口水先)

  接下来解决第二个问题,让单摆动起来

  这里要用到物理的单摆周期公式  和振动方程x=Acos(ωt+α),但我们知道,单摆的振动实际是在一段圆弧上进行的,也就是说,在一段圆弧上运动同时其x要满足振动方程x=Acos(ωt+α),如何实现呢,先看一个图

  物理学里有一个要求,那就是单摆摆动的圆心角不能太大,一般不超过10度,否则就不是简谐运动,据此,我们处理的时候干脆把圆弧(BDC)当作直线(BOC)处理,好,关键步骤来了,从图中可知,单摆摆过角度BAO时,水平方向的距离为BO,对应的角度b=arcsin(BO/AB),AB为摆长,x=BO,而这个就是单摆所要旋转的角度,好了,我们可以为单摆加代码了

  1、把单摆所在的层命名为单摆吧

  2、新加两层。一层命名按钮,用来放控制按钮,一层命名As,在As层加入代码

//初始化:a0为初相,A为振幅,g为重力加速度
a0 = 90;
t = 0;
A = 20;
g = 9.8;
//l为摆线的长度
l = db.bx._height;
//周期T为单摆的周期公式
T = 2*Math.PI*Math.sqrt(l/g);
//进入帧要执行的动作
this.onEnterFrame = function() {
        //先作一个判断,如果m=1,再执行,这一步是为了控制他而作的
        if (m == 1) {
                //振动方程
                x = A*Math.cos(2*Math.PI*t/T+a0);
                //用反三角函数算出旋转的角度
                b = Math.asin(x/l);
                //每执行一次函数,t加0.5(经验值)
                t += 0.5;
                //把单摆旋转,由于反三角函数算出的是弧度,故把它转换为角度
                db._rotation = b*180/Math.PI;
        }
};

  这样,测试时单摆肯定时不动的,因为m的值没有定义,我们必须在按钮层拖入两个按钮:窗口-公用库-按钮,自己选吧,在控制开始的按钮上加入代码

on (press) {
        m = 1;
}

  在控制停止的按钮上加入代码

on (press) {
        m = 0;
}

  大功基本构成,附上源文件

点击这里下载源文件

  但实际上我们还希望能改变其摆长L,改变g,这时我们可以再作一个可移动的按钮,这里我不想罗嗦了,直接从库里拖一个出来就够了:窗口-公用库-按钮,自己找吧(我选的是fader – round按钮),把他们放在按钮层,这时这个按钮已在我们源文件的库中有了,选中它,点右键—直接复制,复制出另一个,也拖人按钮层,这时,我们就有了两个可以移动的按钮,用来改变L和g,由于我选的是fader – round按钮,它有一个标签,双击按钮,进入改变其标签名,结果如图

  还没有完,因为他们都没有名字呢,选中L按钮,在属性栏命名为lk(控制L的意思),双击lk按钮,进入下一层,看其属性,你会发现滑块是有名字的,如我选的是fader – round按钮,滑块名为knob,改为lk0好了同理,选中g按钮,命名为gk(控制g的意思),双击gk按钮,进入下一层,选中滑块改为gk0,快了,别忘了,改你的代码哦

//初始化
a0 = 90;
t = 0;
A = 20;
m = 0;
db._rotation = 0;
this.onEnterFrame = function() {
        //把控制按钮lk中的lk0按钮的y坐标+80作为摆长变化的百分比,由于lk0按钮的y坐标初时值是0,故加80,否则开始摆长就为0了
        l = lk.lk0._y+80;
        //把db中的bx电影剪辑在其y方向上伸缩L倍
        db.bx._yscale = l;
        //把摆线的长度赋值给h
        h = db.bx._height;
        //摆球的位置也相应变化,其位置应该在摆线的注册点往下+摆线的长度的地方
        db.bq._y = h+db.bx._y;
        //把控制按钮gk中的gk0按钮的y坐标+9.80作为g,由于gk0按钮的y坐标初时值是0,故加9.80,使其初始值为9.80,否则开始g就为0了
        g = gk.gk0._y/10+9.8;
        //单摆的周期公式
        T = 2*Math.PI*Math.sqrt(l/g);
        //如果m=1执行
        if (m == 1) {
                //振动方程
                x = A*Math.cos(2*Math.PI*t/T+a0);
                //用反三角函数算出位移为x对应旋转的角度
                b = Math.asin(x/l);
                //时间改变
                t += 0.5;
                //把单摆旋转b*180/Math.PI,原因是b是弧度制的,把它化成角度制
                db._rotation = b*180/Math.PI;
        }
};

时间: 2024-12-28 16:14:09

Flash动画—单摆的制作教程的相关文章

photoshop鼠绘好莱坞动画Dory实例制作教程

给各位photoshop软件的使用者们来详细的解析分享一下鼠绘好莱坞动画Dory实例的制作教程. 教程分享: 2003年电影<海底总动员>为我们带来超级萌的小丑鱼尼莫,如今这部经典3D动画电影的续集--<海底总动员2:多莉去哪儿>已经来到我们身边.在电影中,为总是失忆的蓝唐王鱼多莉如何寻明自己身世而感到好奇,同时逼真的3D动画效果让我们领略3D动画制作技术的进步.今天国外精品翻译教程为大家带来Photoshop绘制蓝塘鱼多莉的教程.下面先看看最终效果图.   图01 教程素材  

FLASH + XML 求职简历 制作教程(一)

xml|教程   前几天一个朋友介绍了一家公司.结果发现自己少了三样东西:简历.技术性强的作品.自信.于是想做个"技术性强的简历".这样也能有些底气,多些自信.在别人问我懂不懂OOP的时候,就不用说"学是学过,没做过"了. 先把学习过的AS2.0面向对象编程重新过一遍消化吸收,然后用两天时间做了这个简历.照例提供源文件下载.第一次"OOP",写到最后代码有点乱了. 这两天写代码写到头痛.借一本书上的话:"编程对很多人来说是一件很枯燥.很

CSS3水波涟漪动画定位样式制作教程

  先上效果图: 教程 本动画需要用到的主要属性:animation, transition 和 Keyframes 属性. Step 1:HTML 代码: Step 2: CSS样式:设置animation属性 .dot:before{ content:' '; position: absolute; z-index:2; left:0; top:0; width:10px; height:10px; background-color: #ff4200; border-radius: 50%;

Flash设计螺旋动画效果制作教程分享

给各位Flash软件的使用者们来详细的解析分享一下设计螺旋动画效果的制作教程. 教程分享: 第一步:首先打开FLASH软件,新建一个新的场景,然后点菜单栏"修改"→"文档属性",将其背景色设为黑色(如下图),点击确定.   第二步:按一下Ctrl+F8,新建一个元件,名称为Symbol 2,行为为图像,点击确定.   第三步:用线条工具画一条垂直的直线,将直线的属性设为(如图).   第四步:回到场景,按一下Ctrl+F8,新建一个影片剪辑,名称为line,行为为影

photoshop设计绚丽光束文字动画效果制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计绚丽光束文字动画效果的制作教程. 教程分享: 1.新建一个700 * 500像素的画布,背景填充黑色,选择文字工具,打上想要的文字,字体颜色用蓝紫色:#8316fe,效果如下图.   <图1>2.把文字图层复制一层,然后右键选择"栅格化文字".确定后新建一个组,把栅格化后的文字拖到组里面,并再复制一份,如图3.   <图2>   <图3> 3.把文字移到画布的靠右位置,如下图.   <

Illustrator制作简单的Flash动画教程

给各位Illustrator软件的使用者们来详细的解析分享一下制作简单的Flash动画的教程. 教程分享: 先看一下效果:   当然这个图是gif的 具体的制作步骤如下: 首先,新建文档新建一个大小为QVGA,颜色模式为RGB,分辨率为72的文档,命名为Flash动画   在画板中新建矩形路径,执行"对象>路径>分割为网格"命令,并调节数值:   然后适当调整路径大小,为路径填充颜色:   然后按住Alt整体移动并复制4个(Ctrl+D),并分别填充颜色,使图案组成相应数字

Flash AtionScrip 3.0制作逼真的雪花飘飘的gif动画效果

  本例为用Flash AtionScrip 3.0制作逼真的雪花飘飘的gif动画效果教程,常常从网上的动画中看到大雪纷飞的场面,看到雪花从天空中拖曳而下,真有一种身临其境的感觉呢?但主要是用AtionScrip 2.0制作,现在我们用AtionScrip 3.0来制作雪景效果. 效果演示: 一.制作雪花元件 1.打开 Flash9.0,新建Flash文档选择AtionScrip 3.0.背景色为深蓝,舞台大小为 550×400.然后按下 Ctrl+F8,新建一个影片剪辑元件"雪花",

Flash动画基础教程①入门篇

flash动画|基础教程 這個教程是本人的一些經驗之談,為了初學者的入門教程,未經本人許可請勿轉載!謝謝 Flash动画基础教程--入门篇①首先我们来说说什么是Flash? Flash是Macromedia公司出品的软件,对于Flash是什么很多的描述,大致是"交互性矢量多媒体制作软件"的意思!首先,它是一种多媒体制作软件,Flash的产品往往都是一些"有声有色"给人视觉冲击的动画.其次,Flash是以矢量图为基础的,矢量图最大的特点就是它能无限的缩放,不会因为图像

Flash动画短片制作常用表现方法与技巧

flash动画|技巧 在Flash动画尤其是短片的制作中或多或少都要表现一些较复杂的动作,而Flash本身功能的限制使我们在制作动画时感到手脚受到牵制,或者为此付出过多的时间和精力.这里笔者总结了自己制作动画短片中的一些经验,这些技巧不仅仅在Flash动画中会用到,对制作Gif动画也有很好的帮助,大家碰到此类问题时可以作个参考. 主要包括逐帧动画表现方方法技巧.以及充分利用Flash的变形功能制作动画的表现技巧. 一.逐帧动画表现方法和技巧 逐帧动画是我们常用的动画表现形式,也就是一帧一帧地将动