网站建设| 数据库类| 图形图象| 程序设计| 现代办公| 操作系统| 考试认证| 网络技术| 软件工程| 电脑相关| 文学作品
网站开发| 网页制作| 操作系统| 图象图形| 考试认证| 数据库类| 程序设计| 硬件技术| 现代办公| 网络技术| 笑话频道
 
您的位置: 电脑书库首页-> 电脑文摘-> 网页制作-> Flash-> Flash雪景贺卡制作

Flash雪景贺卡制作
作者:柳叶吹风 来源:CPCW 加入时间:2005-3-7
相关文章 相关书籍:

效果简介:

  这是一个雪景贺卡。诗意的房屋、雪景;可爱的雪人、袅袅的炊烟;浅浅的脚印和随机的雪花,这些组成一幅美丽的雪景图,也使这张贺卡充满了情趣。但贺卡的制作也因此变得稍稍复杂。

  主要应用技术:

  文章中主要学习如何系统的设计贺卡并有效的管理数量巨大的元件。掌握贺卡制作中场景的布置,颜色的应用,气氛的营造等方法。制作中关键的技术还有使用随机函数实现逼真的雪花效果。学习如何巧妙合理地使用素材设计出有灵性和个性的作品。


图 1

  制作步骤:

  设置场景的大小为400px×300px,背景为白色,帧频为12fps。

  设计元件

  1.按快捷键Ctrl+F8打开“创建新元件”面板新建一个名为“房屋”的影片剪辑元件。

  2.在“房屋”元件的场景里按快捷键Ctrl+R打开“导入”面板导入一幅房屋背景图。为了让读者看得清楚一些,故先将背景色设成黑色。如图2所示。

图 2

  3.按快捷键Ctrl+B把房屋图片打散,然后炊烟那一段图片,按快捷键Ctrl+X剪切下来。如图3所示。

图 3

  4.打开“创建新元件”面板新建一个名为“炊烟”的图形元件,在“炊烟”元件的场景中按快捷键Ctrl+V把刚才剪切的炊烟图片粘贴到场景中。

  5.双击库中的影片剪辑元件“房屋”,回到其编辑场景里。接着新建一个“炊烟”层,然后打开库,将刚才制作好的“炊烟“元件拖到“炊烟”中,并调整其位置到“房屋”的烟囱上,如图4所示。

图 4

  以上的步骤看上去好像多此一举。其实不然,这就是合理利用素材的技巧了。因为这样做可以在不添加元件的情况下让设计出炊烟袅袅的效果。产生有人气(动)的感觉,使得整个动画不至于死气沉沉。下面来看看“炊烟”的具体制作方法。

  6.按住Ctrl键,同时选中“房屋”元件场景中两个层的第35帧,并F5键插入帧。接着选中“炊烟”层里第35帧,按F6键插入关键帧。右键点选“炊烟”层的第1帧并选择“创建补间动画”命令。如图5所示。


图 5

  7.选中“炊烟”层第1帧中的“炊烟”元件,然后使用“工具”面板中的“任意变形”工具 把“炊烟”元件缩小到看不见为止,其位置仍要在烟囱上。到这里“炊烟袅袅”的效果就设计好了。

  现在,打开库,按住Ctrl键选中“房屋”元件和“炊烟”元件,然后右键单击阴影选择区,在弹出的菜单中选择“移至新文件”命令,在弹出的“新文件夹”面板里输入新元件管理文件夹的名字“雪屋”。如图6所示。


图 6

  在设计大型的动画,譬如MTV时,我们总要使用文件夹来管理元件。这样做可以非常方便地管理、调用和编辑元件,大大的节省设计时间,提高工作效率。所以建议读者在设计复杂动画时应该把一段动画中的相关元件归并到同一个文件夹里。

  8.其它景色的设计。首先把场景的缩放比例设置成200%。接着在雪屋的图片上抓取一块后面设计中用来衬托背景的雪地图片。既图7中蓝色线条框中的部分。


图 7

  新建一个名为“雪地”的图形元件,并把刚才裁剪地图片粘贴到场景中。如所示。

图 8

  9.再创建一些图形元件,然后导入一个雪人,脚印。雪树可以可以在“房屋”中截取。所有其它元件如图9所示。

图 9

  10.“文字”影片剪辑元件的设计可以随意,就看读者想说些什么了。关键是要能和动画相映成趣,相辅相成。篇幅关系这里就不多说什么了。但要注意,文字动画的设计不能太花哨,尽量少设计文字动画,少用各种字体,也尽量不要使用形变动画和透明动画,否则会增大文件体积。

  11.设计随机雪花。这是本例中的难点,涉及到不少Flash编程的知识。但也是相当重要的一个部分。

  新建一个名为“雪花”的图形元件。把场景比例设置成800%,然后在“雪花”元件的场景中,按住Shift键使用“椭圆”工具绘制一个直径为5px的圆。如图10所示。

图 10

  12.打开“创建新元件”面板新建一个名为“落雪影片”的影片剪辑元件元件,如上图。在库中双击影片剪辑元件元件“落雪影片”进入其编辑场景。把场景中的“图层 1”改名为“雪花”层,接着从库中把图形元件“雪花”拖拽到该层的场景中。

  13.选中“雪花”层的第40帧按下F6键插入关键帧,接着右键单击第1帧选择“创建补间动画”命令,然后选中第20帧再插入一个关键帧。

  14.右键单击该层并在弹出的菜单中选择“添加引导层”命令为“雪花”层建立一个引导层。在引导层里画一条曲线,然后让第1帧和第40帧的“雪花”元件吸附在曲线的左端,第20帧的雪花吸附在曲线的右端。如图11所示。


图 11

  15.新建一个名为“落雪”的影片剪辑元件。从库中把“雪花影片”元件拖拽到“落雪”的场景中,选中第3帧按下F5键插入帧。点选场景中的雪花影片,在“属性”面板里给影片剪辑“雪花影片”取个实例名称“snowflake”,如图12所示。

图 12

  16.在“落雪”元件中新建一个“脚本”层。如图13所示。分别点选中该层的第1、2、3帧,然后按下F7键插入空白关键帧,并按F9键打开“动作”面板,键入如下代码:

图 13

  第1帧中的代码如下:
  // n是复制的影片剪辑的唯一深度级别。深度级别是被复制影片剪辑的堆叠顺序,即影片各自的层次
  n = 1;
  // 变量flakes用来控制雪花的数量,即可以控制雪花的密度
  flakes = 100;

  第2帧中的代码如下:

  i = 1;
  while (i<=flakes) {    //控制雪花飘落速度
    this["snowflake" add i]._y += Math.random()*2 + 2;
    i++;
  }
  if (n == flakes) {
    n = 1;
  } else {
    snowflakesize = Math.random()*30+30; //复制雪花影片
    duplicateMovieClip("snowflake", "snowflake" add n, n);  //控制雪花的飘落范围
    this["snowflake" add n]._x = Math.random()*500; //控制雪花的大小
    this["snowflake" add n]._xscale = snowflakesize;
    this["snowflake" add n]._yscale = snowflakesize;
    n++;
  }

  第3帧中的代码如下:

  //制造影片的回路,让影片可以不停地播放
  gotoAndPlay(2);

  代码不是很多,也不是很难理解。代码中,Math.random()用来产生随机数字,其返回的值在0到1之间,但不包括1。DuplicateMovieClip()的作用是复制影片剪辑。_x属性和_y属性在影片剪辑在场景中的坐标值,也就是它们在场景中的位置。_xscale属性和_yscale属性是影片剪辑的水平和垂直缩放比例属性。而this对象的作用则是引用影片剪辑实例。

  设计主场景

  1.在制作主场景之间,我们先来看看主场景所有的层以及上下关系。如图14所示。

图 14

  2.把主场景中的“图层 1”层改名为“背景”层,见图 14。按快捷键“Shift+F9”打开“混色器”面板,如图15所示进行设置。

图 15

接着用“椭圆”工具在场景中拉出一个圆(不要边线),并在“属性”面板里设置这个圆形的宽、高为480px、380px。最终设置如下图(白色区域为场景,场景缩放比例为50%)。如图6所示。

图 16

  3.新建“雪地”层。打开库,将库中的图形元件“雪地”拖拽到该层中,然后用“变形”工具将其拖动放大,最终设置如图17所示。

图 17

  4.新建“景色”层。然后从库中将“房屋”元件和其它元件都拖拽到场景相应的层中,然后设置好他们的位置。相同的元件可以重复使用,譬如场景中的雪数,就可以复制调整其大小,如图18所示。从而减小文件的大小。

图 18

  5.脚印的设计稍微繁琐了些,但不难,多用几次快捷键Ctrl+T打开“变形”面板调整脚印的大小和角度,这样遍可以事半功倍。从库中把影片剪辑元件“雪花”拖入到场景中。

  6.新建一个“文字”层,用来放“文字”影片剪辑元件。然后打开库,把读者自己设计的“文字”影片元件拖到该层中。

  现在按快捷键Ctrl+Enter观看最终效果。笔者相信,在学习了该例后,读者定能够设计出自己喜欢的贺卡了。实例中,背景的主色调采用了粉红色,其设计理念是:表达出朋友或恋人的洋溢的热情,所以,无论从哪个角度来讲,看着这张贺卡,你一点都不会觉得冷,即使雪依旧在下。

  另外,贺卡制作中场景的布置,譬如树的远近大小,雪人的位置也是有讲究的,这个就要读者多多积累经验了。其原则的近大远小,彼此不能太近。还有最重要的就是如何充分利用素材,设计出有灵性,有个性的作品。希望读者多积累这方面的经验。fla源文件下载


[文章录入员:sky365]

相关文章 相关书籍:
本站推荐内容

近期主机类热搜关键词:
美国服务器 美国服务器租用 海外服务器租用 国外服务器租用

Flash
DreamWeaver
FrontPage
FireWorks
Flash
HTML
其它
电脑教程阅读排行
·Flash入门实例:水滴动画制作
·Flash MX 新的闪烁世界(...
·Flash基础教程:初学者应用的...
·Flash动画基础(入门必看)
·Flash基础教程:学Flash...
·初学flash守则
·Flash课件一网打尽
·教你做一个Flash的时钟
· Flash 动画技术<一...
·Flash Mx使用技巧十二则