制作弹簧的阻尼振荡效果


本实例的弹簧效果如下,拖动小球,松开鼠标后,小球就会上下运动,效果跟弹簧一模一样。

仔细分析一下,要保证弹簧的效果,只要做好如下几个方面:长度的缩放、位置的改变、每一次改变的值大小控制。下面我们就一步一步地来实现效果。
1、打开Flash MX 2004,按“Ctrl + N”新建一个场景,按“Ctrl + F8”新建一个Movie Clip,在弹出的对话框里面将其命名为“spring”,类型为“Movie Clip”。按“N”,用直线工具在此Clip的场景中绘制如图2所示的线段。

2、按“Ctrl + F8”新建一个Movie Clip,在弹出的对话框里面将其命名为“weightb”,类型为“Button”。按“O”,用圆形工具在此Button的up帧的场景中绘制一个圆,并在属性面板上面设置填充圆的颜色。如图3所示,用鼠标右键点击时间轴上面的层,选取“Insert Layer”,插入一个新的图层。在新插入图层的场景中,按“N”,用直线工具绘制两个三角形,最终效果如图4所示。

3、按“Ctrl + F8”新建一个Movie Clip,在弹出的对话框里面将其命名为“weightm”,类型为“Movie Clip”。按“Ctrl + L”打开图库,将上一步所制作的Button从图库拖到此Clip的场景中,选取场景中的Button,在Action面板上面增加如下语句:

on (press) {
  startDrag("", false, _root.xw, _root.yw-50, _root.xw, _root.yw+50); 
  //拖动此Button
}
on (release) {
  stopDrag(); //停止拖动Button,并设置变量
  _root.drag = true;
}
4、按“Ctrl + F8”新建一个Movie Clip,在弹出的对话框里面将其命名为“dot”,类型为“Movie Clip”。按“N”,用直线工具在此Clip的场景中绘制一条很短的线段,在属性面板上面设置其颜色为红色。

5、回到影片的主场景中,按“Ctrl + L”打开图库,将Clip“spring”从图库拖到场景中,在属性面板上面将其命名为“spring”,在Clip的Action面板上面增加如下语句:

onClipEvent (load) {
  this._x = 400; //设置弹簧的位置跟缩放比例
  this._y = 125;
  this._yscale = 100;
  _root.ys = this._y; //设置变量值,_root.ys表示主场景中的ys变量
  _root.sp = this._yscale;

6、在主场景的时间轴上面插入一个新的图层,命名为“weightm”。按“Ctrl + L”打开图库,将Clip“weightm”从图库拖到场景中,在属性面板上面将其命名为“weight”,在Clip的Action面板上面增加如下语句:

onClipEvent (load) {
  this._x = 400;
  this._y = 200;
  _root.xw = this._x;
  _root.yw = this._y;
}
注释:设置球的位置跟相应变量值。

7、在主场景的时间轴上面插入一个新的图层,命名为“dot”。按“Ctrl + L”打开图库,将Clip“dot”从图库拖到场景中,在属性面板上面将其命名为“dot”。

8、在主场景的时间轴上面插入一个新的图层,命名为“actions”。分别用右键点击此层的第2、3两帧,选取插入关键帧,如图5所示。

分别在第2、3两帧的Action面板上面增加如下语句:

if (drag) {
  var e = 2.71828; //设置一个弹簧的比例系数
  if (j<1) {
    y = 2*(getProperty("weight", _y)-yw); //根据球的位置,取得变量的值
    j = 1;
  }
  xp = getProperty("dot", _x); //取得要绘制的曲线的点
  yp = getProperty("dot", _y);
  bn = "dot" add i;
  duplicateMovieClip("dot", bn, i); / /复制一个Clip
  setProperty(bn, _x, xp+i); //设置所复制Clip的位置
  setProperty(bn, _y, yp+n);
  n = y*Math.pow(e, -0.005*i)*Math.sin(0.2*i); //取得绘制曲线时所需的值
  im = i;
  i++;
  nx = getProperty(bn, _x); //取得曲线的位置
  if (nx>800) { //判断所绘制的曲线是否到了场景的边缘
    for (m=0; m<=im; m++) {
      cn = "dot" add m;
      removeMovieClip(cn);//删除所绘制的曲线
    }
    gotoAndPlay(1);
  }

9、在主场景的时间轴上面插入一个新的图层,命名为“actions”。用右键点击此层的第2帧,选取插入关键帧。在第2帧的Action面板上面增加如下语句:

_root.spring._yscale = sp+0.5*(_root.weight._y-yw); //设置弹簧的缩放比例
_root.spring._y = ys+0.375*(_root.weight._y-yw);
if (j>0) {
  _root.weight._y = yw+n; //控制球的运动
  spring._yscale = sp+0.5*n; //改变弹簧缩放比例的值
  spring._y = ys+0.375*n;
}
10、在主场景的时间轴上面插入一个新的图层,命名为“actions”。用右键点击此层的第3帧,选取插入关键帧。在第1帧的Action面板上面增加如下语句:

i=0;
j=0;
dot._x=50;
dot._y=450;
drag=false;
在第3帧的Action面板上面增加如下语句:

gotoAndPlay(2); 
此时主场景的时间轴如图6所示。
到此,实例就制作完成了,按“Ctrl + Enter”可看到实例的效果。

源文件下载

作者:翅膀
来源:闪客帝国

时间: 2024-09-09 01:52:43

制作弹簧的阻尼振荡效果的相关文章

FLASH课件应用:制作弹簧的阻尼振荡效果

本实例的弹簧效果如下,拖动小球,松开鼠标后,小球就会上下运动,效果跟弹簧一模一样. 仔细分析一下,要保证弹簧的效果,只要做好如下几个方面:长度的缩放.位置的改变.每一次改变的值大小控制.下面我们就一步一步地来实现效果. 1.打开Flash MX 2004,按"Ctrl + N"新建一个场景,按"Ctrl + F8"新建一个Movie Clip,在弹出的对话框里面将其命名为"spring",类型为"Movie Clip".按&q

使用CSS制作文字环绕图片效果(文字内容包含&lt;li&gt;标签)

1.一般制作文字环绕图片效果. HTML结构: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

PS结合3D max 制作三羊开泰多层立体字效果

  这篇教程是介绍利用PS结合3D max 制作三羊开泰多层立体字效果,教程制作出来的效果很不错,喜欢的朋友可以跟着教程一起来看看吧! 排好文字版,载入选区-生成路径然后文件-导出-路径到Illustrator 确定存为文字路径 继续文字生成路径,选择-修改-扩展-20像素得到新选区,选择选框工具附加框选下三字的横线位置填满整个选框,生成路径并导出-命名扩展路径保存 同样的道理导出图形路径命名为形状路径 打开3Dmax 软件,选择文件导入文件类型选择所有文件-合并对象到当前场景-单个对象-确定.

PhotoShop图层样式制作透明玻璃字体效果教程

教大家用PhotoShop制作透明玻璃字体效果,很简单的,主要就是设置图层样式,喜欢的同学可以学习一下! 效果图: 1.新建设置如下 2.选择形状工具 3.添加形状样式,设置如下     相关教程: Photoshop制作破碎裂纹的玻璃文字 PS制作质感玻璃字 PS打造蓝色质感玻璃水晶字效教程 PhotoShop制作透明玻璃质感金属文字教程   分类: PS文字教程

HTML+CSS网页制作实例:制作左上角卷角效果的网页

文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形

Photoshop制作极具冲击效果的裂纹碎块字

教程中的文字制作过程比较复杂.首先需要制作一些带有宇宙效果的背景,然后输入想要的文字,并把文字逐个切碎,再加入岩石纹理.后期添加星球及碎玻璃装饰即可. 最终效果 1.Ctrl+N新建文件,宽1400px,高1000px. 2.前景色为黑色,背景色为白色,背景层上用黑色填充(快捷键:Alt + Delete),复制背景层(快捷键Ctrl+J键). 3.选择菜单栏上的 滤镜 > 杂色 > 添加杂色.

用Photoshop制作图片卷页效果

用Photoshop制作图片卷页效果 卷页效果是我们在设计图像中常用的一种修饰效果.不少滤镜都能做到,如由AVBros.公司出品的PageCurl,或大名鼎鼎的KPT等.但如果用过你就会发现,这些滤镜作出的效果过于死板,更重要的是不够逼真,一眼就看出人工的痕迹.所以只用过一次,我就放弃了.如果你和我一样,不喜欢滤镜的固定模式,而希望用一种更灵活的方式来表现你的图像,这篇教程也许会给你一些启示. 由于我们在这篇教程中会用到很多路径的知识,所以,在开始之前,我希望你已经能够较熟练的操纵Photosh

摆脱束缚:PS制作“脱出”框架照片效果

平面设计中有种效果可以单独分类出来,叫做"脱出"."脱出"可以产生强烈的视觉效果.例如:彩色的动物从黑白照片中"爬"出来 .棒球手把球从电视中"击"出来!大家可以先设想并感受一下. 这种方法如能灵活运用则可使您的设计水平更进一步!今天本人就用Photoshop为大家制作一个实例,说明此类效果的制作方法. 先来看看完成图: 制作步骤如下: 首先用Photoshop新建1024x768大小的文件,背景白色即可.然后把所需要的素材-

JavaScript小技巧制作的跑马灯效果

javascript|技巧 以下是我们所制作的跑马灯效果的源程序 <html> <head> <script language="JavaScript"> <!-- Hide var scrtxt="这儿的讯息可以改为你要告诉别人的话 "+" 或是注意事项 ..."; var lentxt=scrtxt.length; var width=100; var pos=1-width; function sc