中国教程网论坛's Archiver

飘零的枫叶 发表于 2008-12-11 05:24

YS Flash打造可爱的“小兔跷跷板”动画【转载】

作者:Sweetwitch     来源:pconline

这个Flash实例制作了两只可爱的小兔子玩跷跷板的动画,主要用到椭圆工具、渐变填充和任意变形工具等,操作简单易懂,适合练习。

  先看下效果吧:
[align=center][swf]http://bbs.jcwcn.com/attachments/month_0812/20081211_f149734fb40bd75d2866W6iihx4A3wZP.swf[/swf]
效果图[/align]

[b]制作步骤:[/b]

  1、新建一个默认大小的Flash文档。先画天空背景,用矩形工具画一个矩形,在对齐面板中按下“相对于舞台”,再点“匹配宽和高”按钮,最后点“垂直中齐”和“水平中齐”按钮。与舞台对齐之后给矩形设置如下从白色到天蓝色的渐变,方式为“线性”。
[align=center][attach]1011951[/attach][/align][align=center]图1[/align]
  

  2、草地。画一个草绿色的矩形,在对齐面板中与舞台“匹配宽度”并“底对齐”。
[align=center][attach]1011952[/attach][/align][align=center]图2[/align]


  3、用挑选工具在草地的线条上拖拉以调整为自然的曲线。
[align=center][attach]1011953[/attach][/align][align=center]图3[/align]


  4、画跷跷板的基座。先用钢笔工具画出如下三角形,在任意两点间单击即可画出直线。
[align=center][attach]1011954[/attach][/align][align=center]图4[/align]



  5、用挑选工具将三角形调整为如下形状并填充橙色#FF9900。
[align=center][attach]1011955[/attach][/align][align=center]图5[/align]

[[i] 本帖最后由 xyl7422 于 2008-12-12 09:12 编辑 [/i]]

飘零的枫叶 发表于 2008-12-11 05:24

6、用椭圆工具在基座上画出如下小椭圆,将基座一起选中Ctrl+G群组。
[align=center][attach]1011956[/attach][/align][align=center]图6[/align]


  7、画杠杆。Ctrl+F8新建一个元件,命名为:“杠杆”。用矩形工具画出如下长条矩形,使杠杆与基座上的圆圈齐平,并与基座水平中齐。完成跷跷板。
[align=center][attach]1011957[/attach][/align][align=center]图7[/align]


  8、Ctrl+F8新建一个元件,命名为“兔子”。用椭圆工具画一个椭圆作为兔子的头,填充如下从白色到粉红#FF99FF的渐变,类型为“放射状”。用填充变形工具调整渐变的位置如下。
[align=center][attach]1011958[/attach][/align][align=center]图8[/align]


  9、身体。Ctrl+D复制椭圆,用任意变形工具调整椭圆到如下形状,并用填充变形工具调整渐变的位置如下。通过右键菜单中的“排列”可以调整各个椭圆图层的位置。
[align=center][attach]1011959[/attach][/align][align=center]图9[/align]


  10、腿。Ctrl+D再次复制椭圆,用任意变形工具调整椭圆到如下形状,并用填充变形工具调整渐变的位置如下。
[align=center][attach]1011960[/attach][/align][align=center]图10[/align]

飘零的枫叶 发表于 2008-12-11 05:25

11、脚。Ctrl+D复制椭圆,用任意变形工具调整椭圆到如下形状,填充纯粉色。
[align=center][attach]1011961[/attach][/align][align=center]图11[/align]


  12、尾巴。Ctrl+D复制椭圆,用任意变形工具调整椭圆到如下形状,并用填充变形工具调整渐变的位置如下。
[align=center][attach]1011962[/attach][/align][align=center]图12[/align]


  13、胳膊。Ctrl+D复制椭圆,用任意变形工具调整椭圆到如下形状,并用填充变形工具调整渐变的位置如下。
[align=center][attach]1011963[/attach][/align][align=center]图13[/align]


  14、Ctrl+D复制出另一支胳膊,填充纯粉色,放在身体最下层。
[align=center][attach]1011964[/attach][/align][align=center]图14[/align]


  15、Ctrl+D复制一支胳膊作为耳朵,用任意变形工具调整形状,并用填充变形工具调整渐变的位置如下。
[align=center][attach]1011965[/attach][/align][align=center]图15[/align]

飘零的枫叶 发表于 2008-12-11 05:25

  16、Ctrl+D复制出另一只耳朵,填充纯粉色,用任意变形工具调整好角度后放在身体最下层。
[align=center][attach]1011966[/attach][/align][align=center]图16[/align]


  17、眼睛。用椭圆工具画出如下小椭圆,填充白色。
[align=center][attach]1011967[/attach][/align][align=center]图17[/align]


  18、再用椭圆工具画出如下黑色的眼珠。
[align=center][attach]1011968[/attach][/align][align=center]图18[/align]


  19、鼻子。用椭圆工具画出如下小椭圆,填充红色。
[align=center][attach]1011969[/attach][/align][align=center]图19[/align]


 20、嘴巴。先用直线工具在兔子脸上画出如下三角形。
[align=center][attach]1011970[/attach][/align][align=center]图20[/align]

飘零的枫叶 发表于 2008-12-11 05:26

  21、再用挑选工具将线条调整为如下曲线后填充红色。
[align=center][attach]1011971[/attach][/align][align=center]图21[/align]


  22、用矩形工具在兔子前面画一块跷跷板的扶手,因为要后面要随兔子一起做动画,画在一起很方便。至此兔子元件完成。
[align=center][attach]1011972[/attach][/align][align=center]图22[/align]


  23、回到场景中,将画好的兔子元件拖到舞台上来,放在跷跷板上如下位置。
[align=center][attach]1011973[/attach][/align][align=center]图23[/align]


  24、复制一个兔子,选择菜单/修改/变形/水平翻转,放在跷跷板另外一边。在对齐面板中将两只兔子垂直中齐,并Ctrl+G群组。
[align=center][attach]1011974[/attach][/align][align=center]图24[/align]


  25、整理一下图层。把兔子和杠杆都放在“杠杆”层,并将它们全部群组。基座独占一层,草地和天空各占一层。
[align=center][attach]1011975[/attach][/align][align=center]图25[/align]

飘零的枫叶 发表于 2008-12-11 05:26

  26、在各个图层的第18帧处都按F5插入帧,表示画面延续到这一帧。选中“杠杆”层的第1帧,选择任意变形工具,先将变形中心点移动到鼠标所指的位置,即基座上的圆圈中心点处,然后将杠杆和兔子一起旋转到如下位置。
[align=center][attach]1011976[/attach][/align][align=center]图26[/align]


  27、选中“杠杆”层第1帧点右键选“复制帧”,然后在第9帧和第18帧处点右键“粘贴帧”,分别添加动画补间。
[align=center][attach]1011977[/attach][/align][align=center]图27[/align]


  28、选中第9帧,将杠杆和兔子一起旋转到如下位置就完成了。Ctrl+Enter测试一下效果吧。
[align=center][attach]1011978[/attach][/align][align=center]图28[/align]


  29、最终效果:
[align=center][swf]http://bbs.jcwcn.com/attachments/month_0812/20081211_f149734fb40bd75d2866W6iihx4A3wZP.swf[/swf][/align]

zctmh0336 发表于 2008-12-11 09:46

交份作业
[swf]http://bbs.jcwcn.com/attachments/month_0812/20081211_847efc8566afc77a0d10xQtrpf6xhLwO.swf[/swf]

pyc19811211 发表于 2008-12-16 05:00

jc:look 小兔子很可爱啊,不过要是把它们一个白的
一个黑的,这样做出来是不是更好呀jc:sweat

十兄 发表于 2008-12-20 14:42

[swf]http://bbs.jcwcn.com/attachments/month_0812/20081220_d209de09f42511e42a1ceiOfKj4jKzV3.swf[/swf]

[[i] 本帖最后由 zctmh0336 于 2009-1-5 08:42 编辑 [/i]]

绿竹1 发表于 2009-1-5 08:15

交作业
[swf]http://bbs.jcwcn.com/attachments/month_0901/20090105_d426235d0cc0650209627scBRsPdd9gY.swf[/swf]

[[i] 本帖最后由 zctmh0336 于 2009-1-5 08:43 编辑 [/i]]

兔兔怪 发表于 2009-1-5 10:32

[quote]原帖由 [i]pyc19811211[/i] 于 2008-12-16 05:00 发表 [url=http://bbs.jcwcn.com/redirect.php?goto=findpost&pid=4848014&ptid=220951][img]http://bbs.jcwcn.com/images/common/back.gif[/img][/url]
jc:look 小兔子很可爱啊,不过要是把它们一个白的
一个黑的,这样做出来是不是更好呀jc:sweat [/quote]
一个白一个黑的多难看啊~~~一点也不可爱了jc:titter

jjss 发表于 2009-1-7 14:23

作业,几可爱的^_^
[swf]http://bbs.jcwcn.com/attachments/month_0901/20090107_d61abd1e32cef8e1d6b1Zx0GgDXPlWwF.swf[/swf]

cf3389 发表于 2009-1-8 11:04

哈,我也做好了。
[swf]http://bbs.jcwcn.com/attachments/month_0901/20090108_c4bb3f98643612c898a1IALtbZIYVi0O.swf[/swf]

[[i] 本帖最后由 sanbos 于 2009-1-9 23:24 编辑 [/i]]

大傻~ 发表于 2009-1-9 23:26

交作业

学习了[swf]http://bbs.jcwcn.com/attachments/month_0901/20090109_b8a86aaa91d152bd39ebI8hG0M889OMH.swf[/swf]

[[i] 本帖最后由 sanbos 于 2009-1-9 23:31 编辑 [/i]]

xiaoxier 发表于 2009-2-4 14:00

可爱的小兔子
[swf]http://bbs.jcwcn.com/attachments/month_0902/20090204_921362679ddf53e539cdZKvZJA8K80FJ.swf[/swf]

[[i] 本帖最后由 zctmh0336 于 2009-2-4 14:51 编辑 [/i]]

zhaoruiyang 发表于 2009-2-7 00:48

也作了个
[swf]http://bbs.jcwcn.com/attachments/month_0902/20090207_039816d2f2dded549245nqqnWjvVO11T.swf[/swf]

huangspg 发表于 2009-3-24 20:10

交作业。

    [swf]http://bbs.jcwcn.com/attachments/month_0903/20090324_0784baf3f23c05f2ad6av26t6nywmK18.swf[/swf]

一笑解千愁 发表于 2009-9-14 15:27

小兔翘翘板

zctmh0336 发表于 2009-9-14 15:38

19楼朋友的作业
[swf]http://bbs.jcwcn.com/attachments/month_0909/0909141527e3b95ace1cd60d0d.swf[/swf]

xingkene 发表于 2009-11-7 11:53

不会发动画

zctmh0336 发表于 2009-11-7 12:44

20楼朋友的作业
[swf]http://bbs.jcwcn.com/attachments/month_0911/0911071153895c2867265c8e14.swf[/swf]

页: [1]

Powered by Discuz! Archiver 7.0.0  © 2001-2009 Comsenz Inc.