Flash实例教学:一种特殊效果的制作

  本文将带领大家一起,通过Flash中的ActionScript脚本编程,实现节日烟花动画。开始时将出现烟花绽开的三维动画,随后烟花逐渐下落并消失,非常漂亮。

  动画效果:

点击这里下载源文件

  第一步:启动Flash MX 2004中文版(以下简称为Flash)并新建一个Flash空白文档。在下面属性面板上,单击“背景”右侧的颜色按钮,将背景色设置为黑色。

  第二步:按Ctrl+F8键打开创建新元件对话框,元件命名为“grastar”,“行为”选择“图形”,确定后进入元件编辑窗口。将笔触与填充色都设置为白色,然后用椭圆形工具画两个交叉的细长椭圆形,再用铅笔工具稍加修饰,即可得到如图1所示的星星图形。

  第三步:按Ctrl+F8键打开创建新元件对话框,将元件命名为“mvcstar”,“行为”选择“影片剪辑”,确定后进入该元件编辑窗口。按Ctrl+L键调出库面板,从库面板中将刚刚制作的图形元件grastar拖到mvcstar元件编辑窗中。点选第9帧,然后按F6键插入一个关键帧,以同样方法在第10、25帧处也分别插入关键帧。点选第1帧,然后在属性面板中将“补间”项设置为“动作”,将“旋转”项设置为“顺时针”,“次数”为1,这时第1帧到第9帧会变成蓝色,并显示一个带箭头的直线,说明补间动画设置成功。点选第25帧,将其中的星星图形向下移动一定的距离(可按Shift+向下方向键调整),再使用任意变形工具(快捷键为Q)适当缩小星星的大小,然后单击属性面板上的“颜色”下拉按钮,选择“Alpha”项,再在右侧将颜色的透明度设置为0,这样是为了让星星有逐渐下落并消失的动画效果。点选第10帧,在属性面板中将“补间”设置为“动作”即可。

  第四步:点选第25帧,单击展开下方的“动作-帧”面板,在右侧窗口中填写以下脚本语句。最后的时间轴效果如图2所示。

stop();
_root.gotoAndPlay(1); // 跳转到主时间轴上并播放第1帧

  第五步:单击上方编辑条上的“场景1”回到主场景中,将做好的影片剪辑mvcstar拖放到场景之外(这样在播放时就看不到mvcstar了)。点选这个mvcstar实例,在属性面板中将它的“实例名称”命名为itnstar,以便在后面的程序设计中使用。右键单击第2帧,选择“插入空白帧”命令。然后,点选第1帧,并展开下方的“动作-帧”面板,在其右侧编辑窗口内写入下面的脚本代码,连同注释一共才二十几行,非常简单。注意,语句前面的数字序号是为了说明方便而加上的,输入代码时不要输入这些数字。输入代码后,按下Ctrl键并回车,就可以欣赏一下自己编程制作的节日烟花了(见图3)。后面一节内容中,还将为你详细剖析代码的含义。

1. // 设置影片片段分身X、Y的坐标;
2. basex = random (450);
3. basey = random (300);
4. for (var i = 0 ; i<6 ; i++) {
5.     num = i*17;
6.     // 设置圆周平分的个数;
7.     angle_num = Math . pow(2, i+2);
8.     // 设置影片片段分身的半径;
9.     r = 40 + i*15;
10.    // 设置影片片段分身的层次;
11.    d0 = Math . pow (2, i )-1;
12.    d = 4*d0;
13.    for (var j = 0 ; j < angle_num ; j++) {
14.    if (i == 0) {
15.         d = 0;
16.      }
17.   depth = d+j+1;

18.     // 复制影片片段分身
19.     duplicateMovieClip ("itnstar", "itnstar" add i add j, depth);
20.     // 设置各个影片片段分身的角度
21.     angle = j*Math.PI/180*360/angle_num;
22.     // 设置影片片段分身属性;
23.     setProperty("itnstar"add i add j, _x, basex+Math.cos(angle)*r);
24.     setProperty("itnstar" add i add j, _y, basey+Math.sin(angle)*r);
25.     setProperty ("itnstar" add i add j, _alpha, 100-num);
26.     setProperty ("itnstar" add i add j, _xscale, 100-num);
27.     setProperty ("itnstar" add i add j, _yscale, 100-num);
28.  }
29.  }

  将以上代码加到第1帧后,再点选第2帧,并写入以下一行代码:

stop();

  程序分析:知其然更知其所以然

  上面代码的本质是通过将一个实例复制成多个,并按一定规律分布显示出来,达到烟花绽开的效果。以“//”开头的代码行是程序注释,可有可无,主要作用是对程序代码作一些简单说明,运行时Flash会自动忽略掉它。上面代码中,第2、3行是设置星星影片片段分身的X、Y基点坐标,也就是最后形成的满天星动画的中心点坐标,random (value )函数得到一介于0~value-1之间的随机值。我们知道在三维立体中,远处的物体比近处的物体要暗要小,因此第5行的num是为后面影片片段分身的透明度及缩放设的值,以使整个图像看起来有三维立体的效果。影片片段分身的属性值在25、26、27行设置。第7行中Math.pow (x ,y )函数返回值是x的y次方。

  下面主要说明第19行的函数duplicateMovieClip(target , newname,depth),它是用来复制影片片段分身对象的,其中:target:被用来复制的源影片片段的分身(本例中为mvcstar对象的实例itnstar)

  newname:分身对象(即复制出来的新影片片段)的名称。本例中因为要复制出多个对象,为了不使对象的名称重复,这个参数用“"itnstar" add i add j”这种形式来表示的,and表示在字符itnstar后面再加上数字变量i和j,通过for循环,变量i和j的值将自动向上递增,这样,后面的对象名称将自动变为itnstar01、itnstar02、itnstar11、itnstar12……

  depth:这是一个堆叠参数。指定新完成的对象与其他对象重叠时的显示层次,depth越大时,所显示的分身对象越在上。若有两个显示层次相同的影片片段,则先复制的影片片段会被后建立的取代。

  有关影片片段分身所在角度及层次值需要一定的数学运算技巧,这里的设计思想是:用变量i控制影片片段显示几圈,变量j用来控制每圈中的影片片段的个数。在第一圈(i=0)有四个影片片段分身,每一分身相隔360/4=90度,其所在层次为1~4;第二圈(i=1)有八个影片片段分身,每一分身相隔360/8=45度,其所在的层次为5~12,依此类推。

  Just     Do     It!

  本例中的烟花是呈圆形发散的,这取决于数学公式Math.cos(angle)*r和Math.sin(angle)*r所确定的X、Y值。你可以设计出其他数学公式以获得不同的烟花形状。另外,为使动画更具有逼真的效果,还可以加入烟花升空时的声音特效。

时间: 2024-11-01 07:56:40

Flash实例教学:一种特殊效果的制作的相关文章

Flash实例教程:单选题的制作

首先来欣赏一下最终效果: 效果预览 制作使用素材: 素材 制作步骤 1.新建一个文件,尺寸330*330 背景色为黑色,其他值默认,如下图所示 图1 2.导入素材到舞台并居中对齐,如下图所示 图2 3.锁定图层1,并添加一个图层2 图3   4.点文本工具,属性如下:   图4 5.输入以下文本: 图5 6.点击窗口,打开组件面板,并把下面这个组件拖到舞台 图6 7.点击属性-参数-单击右边的DATA弹出数值框: 图7 图8 8.点+号添加一个对象并且把名字改成VCD,如图: 图9 9.与第8步

Flash实例下雨动画效果教程制作

  Flash实例下雨动画效果制作,是Flash考试中经常要考的内容,特为参加考试的考生策划了"Flash实例下雨动画效果教程 "专题等有关资料,供考生参考! 制作过程 一.新建一图层,大小随意; 二.新建元件(影片剪辑): 1.制作雨滴并下落.使用直线工具(颜色设为灰色,1像素)画一短直线,使用选择工具将直线移到上方(最好移到文档上面一点),在第15帧(要雨急则帧短,反之则长)处插入关键帧,并将直线向下移动,选择1至15帧之间任意一帧,选择属性下补间,选择形状.然后在第16帧处插入空

Smarty实例教学 实例篇

Smarty实例教学 实例篇(三.使用ADODB连接数据库) 前两个月因为工作上的原因一直很忙,所以没有及时完成这个教程,正好今天周六不用加班,抽个空完成它吧! 在开始新的的教程的时候,我 先把以前的我写的那个教程中的一些错误的地方修改过来,在这里要感谢 nesta2001zhang兄弟,是他找出了文章中的一些错误,否则真的被别人 骂"误人子弟了"(说来真是惭愧,我的初稿发布后后就发现在一大堆的问题,后来一些时候发重新修改后的文件中居然也出现了错误,真是不应 该...)在上几篇教程中的

Flash实例教程:星星跟我走

教程|星星 实例说明 在Flash MX当中鼠标的跟踪的制作方法有很多种,为你介绍其中的一种可以有多种变化方式的鼠标跟踪.让星星紧随你的鼠标转动. 有关知识 绘制实例,startDrag .setProperty.duplicateMovieClip的运用. 制作过程 步骤1:打开Flash,建立一个新文件. 步骤2:从菜单栏中选择插入>添加符号(Insert>New Symbol),在出现的对话框中选电影片断(Movie Clip),取名为star,如图1所示. 图1 建立名为star的电影

Flash片头加载loading的制作方法

核心提示:Flash片头加载loading的制作方法教程. 做一个优秀的loading是衡量一个flasher水准.甚至态度的,因为loading是唯一一个你不会多看而所有用户.客户会看的东西,所以你对loading的重视程度,甚至可以反衬你这个flasher的职业道德. 我认识不少做设计为主的朋友,很多都是自己找一个现成的loading,然后每次去套用.我个人认为这是很不好的习惯.并不是说我不提倡代码.元件的重用,而是我觉得对于loading这种东西,套多了是要出问题的.我强烈建议那些已经达到

asp.net得到本机数据库实例的两种方法代码

这篇文章介绍了asp.net得到本机数据库实例的两种方法代码,有需要的朋友可以参考一下   复制代码 代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <scri

在常见的三种平台下制作Ubuntu安装U盘

很多朋友都知道Ubuntu是一个非常不错的Linux发行版,要在官网下载到Ubuntu也非常简单.但下载好ISO之后我们要怎么来安装呢?当然,早年前我们都是通过记录DVD光盘的方式来进行安装,现在随着光驱逐步被市场所淘汰,Ubuntu同Windows一样与时俱进,同样也可以通过制作Ubuntu安装U盘的方式来进行安装. 下面我们就来介绍下如何在Windows.Mac甚至Linux平台下,如何制作Ubuntu安装U盘的几种方式. Ubuntu版本的选择 首先大家需要知道Ubuntu有LTS版本和"

DIVCSS布局实例:DIV CSS新闻列表制作

DIVCSS布局实例:DIV CSS新闻列表制作实例讲解 如下  Source Code to Run <html><head><style type="text/css">body {margin: 0;padding: 0;font-size:12px;}#layout{background-color: #FFFFFF;border: 0;w idth: 400px;margin: 0 auto;}.list{margin: 0px 10px

JS实现星星评分功能实例代码(两种方法)_javascript技巧

一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no