实例：PS结合Flash打造瓢虫动画
来源：岁月联盟
时间：2007-09-06
友情提示：文章最后提供源文件下载
大家好，好久没有写图文教程啦，今天我们学一个综合实例：瓢虫变色交互动画。
今天我们换个形式，我一边写一边发，大家跟着我一起把这个东东做完。
我们今天的主题是结合使用Photoshop CS3和Flash CS3，制作出一个瓢虫动画。如果只想学PS手绘的话，大家可以只学前一部分。如果对Flash编程有兴趣的话，可以跟我着，认识一下更加有趣的Flash。多个软件结合使用，会做出更加漂亮的作品来。
本文我们可以学到的知识：
1，手绘知识之分层绘制表现质感法，我们要表现出光滑的外壳和晶莹透亮的感觉，同时为下一步的交互做好准备。
2，手绘知识之对称绘制法，可以只画一边，镜像得到另一边。
3，手绘知识之渐变绘制法，利用渐变来手绘，可以事半功倍。
4，手绘知识之路径基础，我们还要学会用路径运算和快捷键，本文教你如何活用路径制作出自己想要的形状。
5，软件交互之导入透明图像法，我们可以利用Flash导入PNG格式的透明图像。做出自己想要的透明效果。如果你是一位课件程序开发者，这个功能非常重要。
6，Flash新版本的新功能：导入PSD文件并分层。这个功能我们将在本文中提到，如果你还是使用老版本的Flash，可以使用第5条的方式来制作。
7，编制简单的程序，实现看似复杂的功能。其实Flash编程看上去复杂，我们常用的功能并不多。本例的编程用不了多长时间就可以学会。同时我们还会为大家提供原文件，以方便大家查错。
好了，多余的话就不讲了，我们开始今天的手绘之旅。
先看一下我们将要达到的效果，这是我以前的作品，今天重新绘制它，可能最终的结果会有不同。
事物都是在改进发展的，每一次练习，都是一次升华，也许你这次做得不如上次，但你会得到宝贵的实战经验。总体会是水平上升的趋势。
看下面虫虫左边有三个拉杆，把它们向下拉，会怎么样呢？
先用Photoshop CS3来绘制瓢虫
第一步，我们建立一张画纸。我们可以使用“文件”-“新建”打开新建文件对话框。当然我更支持初学者开始就使用快捷键，用鼠标在Photoshop空白的地方双击，也可以弹出新建文件对话框。或者按CTRL+N，也可以弹出新建文件对话框。
如图所示，为新建文件对话框，我们设置宽度为800像素，高度为600像素，颜色模式为RGB混合模式，背景白色的文件。
注意！单位一定要设置为像素，不要设置为厘米，否则也许你的电脑会死机了。
第二步，选择椭圆选框工具，注意要勾选消除锯齿选项。
单击图层面板上的建立新图层按钮，在新的图层上，用椭圆选框选择一块。填充红色，如图所示：
本步骤要注意的几个地方：
1，必须在新的图层上填充红色圆形。
2，可以使用快捷键来填充，填充前景色的快捷键是Alt+DEL，填充背景色的快捷键是Ctrl+DEL。我们可以在色板中单击红色，然后填充前景色。
3，之所以建立大的图像进行绘制，是因为我们先画出大的图像，再缩小它，会比直接建立小图像进行绘制得到的结果精美得多。
进入通道面板，单击图示按钮，把我们的这个选区存为一个Alpha类型的通道。如图所示
小提示：将选区存为通道，可以在以后任何时候还原这个选区。通道和选区其实是一回事。
另外，图层中这个红色的色块，其实也保存了选区信息，我们按着Ctrl键，单击这个图层图标，和按着Ctrl键，单击刚才存储的通道，得到的结果是相同的。也就是说，在图层中，图层的外形其实也可以理解为一个选区。调用它的方法就是按Ctrl单击该图层图标。
按D键（注意在英文输入状态下），可以将前景色和背景色转换为默认的前黑后白。
如图所示选择前景到透明渐变，用线性渐变的模式。我们下一步将在一个新图层上画出明暗，以赋予它质感。
建立一个新图层，我们在这个新层上拉出渐变。注意，按着Shift 键，可以拉出垂直的渐变。
小提示：利用Shift 键，可以拉出90度，45度等特殊角度的渐变，非常精确。
也许有人会说了，它这么暗淡，怎么看怎么难看。呵呵，其实我们现在只是做出它的暗部而已，后面还需要对它进行精细加工，只有把明暗拉开了，才会显得明的更明，暗的更暗。这也是初学者常见的问题之一。想要画出不平淡的作品，就要有对比。明暗对比只是其中一项而已。
按Ctrl+D，取消选择，单击图层面板下方的添加图层蒙版按钮，为暗影图层添加一个蒙版。用椭圆选框工具选出中间靠下方的一块范围，在蒙版上填充黑色。这样我们就将这个图层该处变成透明的啦。如图所示：
这一步的作用，是做出晶莹的质感，让这个地方看上去亮一些，我们考虑到将来要制作一个透明的外壳，所以不能采取叠加颜色的方法，那样将来做透明外壳时，就穿帮了。所以我们要把这个地方的黑色像素抹去，用的是添加蒙版的方式，在该处填黑色，即让该处成为透明。
Ctrl+D取消选择，下一步，我们将这个蒙版中的黑块高斯模糊，这样这个透明区域就会变得柔和，而不是带有很生硬的边缘啦。
如图所示，使用“滤镜”-“模糊”-“高斯模糊”，设置如图。
本步需要注意，模糊必须是在蒙版上进行，不要把图层给模糊啦。这也是初学者常犯的错误之一。
下面我们来制作斑点。
我们知道，瓢虫有很多种，七星瓢虫最常见。不过我们这个小瓢虫个头小，我们简化它，过多的斑点反而效果不好。在上面点三到五个斑点就足够了。
我们单击新建图层按钮，按图示双击每个图层，分别为它们起名。最下面的色块层，我们起名为“底层”，中间带蒙版的透明黑色层，起名为“暗色”，最上面新建的图层，起名为“斑点”。这样当图层变多时，这里会很直观，不会乱成一团麻，不好管理。
按Ctrl 单击底层，将最下面的红色块外形载为选择区。（可以回忆一下前面存储通道那一步，我们可以用载入通道的方法得到同样的选区）
使用黑色前景色，用较硬的画笔，按“[”或“]”键，缩小或者放大画笔笔头，在斑点层单击，建立这些斑点，如图所示：
Ctrl+D取消选择，建立一个新的图层，起名叫“头部”。我们来画虫虫的头部。
我们可以使用现成的形状来建立头部。这里我们使用自定义形状中的心形来制作基本形，再对它进行进一步的加工。
注意要选择使用路径选项，这样我们可以对路径进行进一步的编辑。
如图所示：
使用心形形状制作路径，如图所示。
路径也可以缩放和变形，我们可以使用路径选择工具，选择整条路径，按下Ctrl+T，将它放在头部位置，这样头的大致形状就出来了。我们只要使用路径编辑工具对它进行精细加工就可以啦。
使用直接选择工具，可以框选多个控制点进行移动，我们在框选控制点后，要用键盘上的方向键来移动，才能保证两边对称，因为用鼠标想十分精确的对位是不太容易的。
用直接选择工具，框住正中间上下两个点，向上提一提，可以看到，心形的外形就变得更平一些，再框选两端的两个控制点，用向下方向键移动，使它的外形与瓢虫头部相似。
制作完成如图所示。
提示：在我们单击控制点时，被选择的控制点会实心显示，未被选择的控制点则空心显示。框选也是如此。
我们再使用椭圆路径工具，使用交集模式，将新建立的路径添加到原路径区域。在头部上方如图建立一个椭圆，这样我们就补上这个裂缝了。
按图示，路径选择工具框选两个路径，单击组合，即可将两个路径合二为一。
在路径面板，按Ctrl单击我们刚刚制作出来的工作路径，将它载入选区。
在图层面板，在“头部”图层，填充黑色。这样瓢虫的头部形状就出来啦。
使用钢笔工具，在头部层和斑点层中间，建立新的图层，使用形状图层选项，前景色为白色，在圆的三个点单击，得到一个白色形状图层。
注意：这三个点的位置和比例。不要错得过远。这个白色的层，将成为瓢虫的高光，即光滑材质对光源反射的模拟。
我们使用转换点工具，拉动路径中的控制点，把这个高光范围修改为如图所示。
这一块相当于圆形物体对光源的反射。比如说，我们看到的汽车，它会反射周围的光线，车漆越好，就越像镜子那样把周围的景色反射回来，我们可以想象一下，在右上角那里有一个光源，它照在虫虫身上，光被反射出来进入我们的眼镜会是什么样子。
当然，我们要做的，不是写实类的虫虫，要带些卡通味道。所以光源被高度抽象，成为现在这个样子。
在图层窗口，修改该层不透明度，降低一些。
下面这步，我们把光源光做得更加透彻。
我们为这个形状图层加入一个图层蒙版。用很大的软画笔，用黑色在蒙版上涂抹。注意画笔的不透明度一定要低，这样可以做出非常柔和的过渡。如果你的画笔过小，可以涂出来的效果会非常花，如果透明度过大，可以只一步就把它涂成透明的了。所以看一下配图中，属性栏上画笔的设置，用它做为参考，想一想，我自己调一个参数，会不会更好。
我们常做这样的练习，时间长了，就会掌握好这个度了。
这就好比我们学习工笔画，用淡淡的颜色，一层一层的上色，并且还有渐变过渡，得到的效果是非常棒的，如果我们直接用很浓的颜色上色，则会出现很粗糙的笔触。使用蒙版或者橡皮作画也是如此。要学会过渡和渐进。
我们再回到暗色图层的蒙版之上，用黑色画笔，慢慢的把暗部再修饰一下，把光源反射区中的暗色再去掉一些，更加透彻。
总之，做这个工作，就是要淡色慢涂，一点点的观察调试，忌心急猛刷，一步到位。
下面俺放出最让人眼前一亮的东东，估计这个东东大家都喜欢。让大家在学习的过程中也能会心一笑。也祝大家在中国教程网论坛能学好玩好，多赚钞票。
这个图像将成为虫虫身上的贴图。有人会说了，三维动画才用贴图啊。嘿嘿，今天大家和我一齐，为平面图加贴图吧。
打开这张图像，将其拉入我们的瓢虫图中，设置如图示，改名为“映射”。
使用“滤镜”-“扭曲”-“极坐标”-“平面坐标到极坐标”，我们把这张平淡的图像做成围绕型。
之所以使用这个扭曲，是因为我们将把它放在虫虫背壳上。得让它看上去有凸起的感觉，我们如果用球面化滤镜的话，可能得到的结果并不理想。用极坐标，虽然它的扭曲结果并不是真正的凸起，但是得到的效果却是最好的，所以我们只追求骗得别人的眼睛，达到图像效果就可以。
绘画艺术是一门欺骗的艺术，学门欺骗别人的眼睛。俺在郑大学美术时，曹老师这样告诉我。在作画时，我时常注意这点，在这里，欺骗并不是一个贬意词。
无论黑猫黄猫，抓到老鼠就是好猫。扯得有点远了，我们接着做。
按Ctrl+T,我们开始对这张图像进行缩小。这样可以让它符合虫虫的身材，正所谓量体裁衣嘛。
如果在自由变换时，看不到控制点，说明图像太大，控制点超过了窗口。
这里说一个重要的小技巧：按下窗格键后，再按下Alt键，这样就会在自由变换不被取消时，切换到缩小工具。点击窗口缩小，就可以看到控制点啦。
如图缩小它，让中间的变形区域和虫虫身体符合。注意，不要按着Shift键。
按着Ctrl键，单击“底层”图标，把最下层的外形载入选择区，Shift+Ctrl+I反选，按DEL删除映射图层多余的像素
这样这个图层就和下层相吻合了。在图层面板，将图层混合模式由“正常”改为“滤色”。
还是老套路，降低该层的不透明度，加一个蒙版，慢慢的擦出透彻的感觉来。
OK，我们现在为头部图层加上白斑。
瓢虫的头部是有白斑的，它和黑色配在一起，甚是醒目，我们把白斑直接做在头部图层上。
选择头部图层，锁定它的透明像素，用白色画笔，如图示，在两侧画出白斑点。
注意：
1，必须锁定透明像素，否则会多出一块色块。
2，画笔应该是比较硬的，前面我们使用的是软画笔，这里一定要把画笔设硬，否则画不出明显的边缘。
前面我们学会了用路径来制作高光的方法，这次我们还用刚才的方法来制作头部的高光，它和身体部分的高光形状相似，但又相互错位，从而产生立体效果。
有人说啦，我要做瓢虫的头部，可是上面已经没有空间了，怎么办呀？
我们可以在背景层被锁定的情况下（默认情况下已经锁定），选择移动工具的自动选择选项。框选所有要移动的对象，可以看到，在图层面板中，虫虫的各个层都被选择了。向下移动它，把头部的制作位置让出来。
我们做最前面的小头部分。其实刚才我们只是在制作瓢虫的脖子部分。没办法，谁让它的脖子比头粗呢。
我们复制头部图层，自由变换如图示。小脑袋一下就出来啦。
我们是复制的头部图层，因此它也是锁定透明像素的。
下面我们用画笔点出这些白斑，注意一定要检查是否锁定了透明像素。否则可能画出界哟。
在底层上方新建层，用路径制作触须，这部分非常简单，方法不再重复。
将触须层按Ctrl+J，复制层，使用“编辑”-“变换”-“水平翻转”，将它镜象一份，移动到合适位置。
腿的制作很简单，我们用黑色，建立新的形状图层，用椭圆形状工具一边画，一边变换，拼接成为一条腿，然后用前面学的组合方法，把腿路径给组合起来。
注意：如果每次拉动都建立新的形状图层的话，检查一下配图中3号标签所示的选项。
组合之后的腿部还是不很理想，大家可以使用路径编辑工具进行深入刻划。
将腿图层复制并镜像，选择两个腿图层，同时拉到新建图层按钮，可以同时复制两个腿图层，进行自由变换，放在合适位置，这样复制，变换，移动，得到六条腿。
还按前面的步骤，用自动选择选项，移动工具框选所有虫虫图层，自由变换，变换到原大的25%。把虫虫缩小。
我们制作大图像的目的已经达到，到了缩小它，变成小图标的时候了。
建立新的图层，命名为中间线，用直线工具，黑色，按Shift键，画出一条黑线。
复制这个图层，Ctrl+I，反相变为白线，向右移动一个像素，把两个图层的不透明度调低一些，看着不生硬为止。
注意图中标注。要用填充像素的方式来建立直线。
现在分层的部分已经制作完了，按 Ctrl+S，保存这个文件，再使用存储为，把文件再存一个PSD分层文件，这样，我们就不怕将来修改时，没有原始文件啦。
下面我们需要把这些层整理一下，合并到一起。把底层及其下的腿和背景层全部隐藏，如图所示，注意，单击一个显示的图层，这样我们才可以把所有的可见层合并。按下Shift+Ctrrl+E，合并可见图层。这样，我们就将除了腿和底部红色色块以及背景层以外的虫虫图层合并成为一个单独的层。
用同样的方法，隐藏不要合并的，显示要合为一层的，合并可见图层，最后把背景层删掉。
把三个图层分别命名。如图所示：
使用“图像”-“裁切”，如图所示，我们将所有透明的部分裁掉
把剪裁过的图像另存为“导出成品.psd”，我们通过Flash，将它做成变色动画
在学习下部内容前，你最好有一点Flash基础知识，当然本教程尽可能详细说明每一个步骤，如果有基础，学习起来会很快。
下面我们打开Flash CS3，开始我们的编程探索之旅。
按图示建立一个新的Flash文件。
我们来试一下Flash CS3对PSD文件的支持功能。经过我的测试，发现这个功能有时会有一些小BUG哟。在后面我们再说。
使用“文件”-“导入”-“导入到舞台”这个方式，把刚才我们制作的瓢虫导出文件导入到Flash
可以看到，我们能把PSD中的层分为多个Flash层，并把它们放置整齐。
我们还可以单独导入这些层，在前面画勾即可。
单击确定，我们可以看到，这些图层都被分层排放，层的上下次序和摆放位置都和原始图片一样
不过这种导入方式有些问题，我们用移动工具，把它们分别移开，可以看到，虫的外壳并没有变成透明的，在边缘处还有下层的痕迹。怎么办呢？
我们把这些图层分次导入到库，使用“文件”-“导入”-“导入到库”，每次只导入一个层。可以看到，导入时会提示有重复的库项目，选择不替换。
我们把分次导入到库中的小元件，一个个手动的分层排放。这次透明的问题解决啦
在Flash老的版本中，我们想实现这样的效果，可以把PSD文件分别显示各层，分别存为PNG文件导入进来。PNG格式是支持透明的图像格式，用于制作透明动画，效果非常优秀。
在Flash中，图像也可以分层排列，和Photoshop中的操作差不多。另外，Flash还支持动画，因此它有时间线，我们在建立新层之后，在该层时间线的第一帧上单击，把元件从库里拉到舞台就可以了。
关键字：
舞台：就是图像动画的表演场，正中间的空白处即是。
库：元件仓库，我们可以把自己做的元件存在库里，想用时把它拉到舞台上就可以啦。元件可以在舞台上无限复制，如果改变元件，舞台上所有引用该元件的图像都会相应改变，有点像Photoshop中的智能对象。
帧：动画是由一幅幅图像连续播放形成的。每一幅图像被称为一帧。
窗口菜单中选择“对齐”，打开对齐面板。用移动工具框选虫虫的各个部件，水平居中对齐。这样它们就按中线对齐，比手工对齐又快又好。
我们用鼠标选择各个层，移动到合适位置，将它对齐，如果上层挡到下层，选择不到的话，可以按图示锁定上层，就可以顺利的选择到下层啦。
选择红色色块层，在其上点右键，转化为元件，把它设置为影片剪辑类型，起个名称叫“变色色块”。此时在库中就有了这个影片剪辑了。
在Flash中，有三种元件类型：影片剪辑、按钮、图形。
我们在这里必须用到影片剪辑的概念，影片剪辑可以用来在舞台上表演动画，影片内可以嵌套影片。它可以自己一边播放，一边参与到别的节目中，成为一个演员。举一个形象的例子：我们正在观看电视，电视里演出的人正在看电视，那个电视里也正在播出动画节目。那么，最后一级的电视机可以看成是一个电影剪辑，它一边播放动画，一边还参与演出。它所参与的演出节目，本身也是一个动画，被我们收看到了。这里就是一个形象的三级嵌套。影片剪辑可以被我们编的程序进行控制，比如控制它是否播放，播放到哪个位置，自己的透明度是否被改变，自己的颜色是否被改变等。我们本例正是要用程序改变它的颜色。因此，我们先把这个色块转化为影片剪辑。
在属性面板中，对这个电影剪辑命名为“sk”，意为色块。
我们可以手动测试一下，在属性面板右侧，设置这个影片剪辑的色调，可以看到，我们可以手动把它变色啦。
手动的变色并不是目的，我们的目的是用程序来控制它。后面我们用简单的编程试一试。
在最上层建立一个新层，命名为“as”，这是一个程序专用层，当然你也可以起别的名字，名字是为了方便我们识别该层。
其实我们可以把程序写在任何一个层上，但是为了便于管理，我们用一个专层放程序。
如果我们在动作面板里写入程序的话，在该帧就会出现一个“α”符号，表示这一帧有我们编制的程序，我在动作面板里输入一些字符，大家可以看到该帧就有了这样的变化。
进入动作面板，我们输入下面的字符：
r=0; //设置红色值
g=0; //设置绿色值
b=255; //设置蓝色值
colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16 g<<8 b); //将颜色值设置在色块上
其中每行中的//符号后面的文件，被称为注释，它是方便我们后面调程序时，对语句的自我解释。我们可以通过写注释，记住自己编程到此时的一些想法。
其中的_root，是指的舞台，_root.sk就是我们刚才做的那个叫sk的色块电影剪辑。这种语法就象在点名，指定某实体变颜色。后半部分语句，让我们把变量r，g，b做为颜色值应用在这个电影剪辑上。这些语句大家不用完全明白意思，先做出一个实例，后面再慢慢学。
按下Ctrl+回车，我们测试一下吧。我们设置的是一个蓝色，为什么虫虫变成黑了啦？莫不是我编的程序有问题？不要紧，我们来解决这个问题。
用鼠标纵向选择各层第二帧，右键，插入帧，我们让这个动画拥有两帧，这样在测试的时候，它会反复播放第一帧和第二帧，新的颜色值就会被赋予电影剪辑啦。
Ctrl+回车，再次测试，这下虫虫变色啦。
这一步我们学习了如何使用编程的方式为虫虫变色，下一步，我们制作交互的动画，让朋友们可以通过拉动拉杆为它自动变色。
我们来制作一个拉钮，建立一个新层，用椭圆工具，按Shift键，画一个小圆形，设置这个层的名字为“拉杆”。
还是用刚才的方法，框选这个圆，点右键，转换为一个电影剪辑。命名为“拉杆”，我们可以按着Alt键，用移动工具复制两个。现在一共有三个拉钮啦。
我们还使用刚才手动改变虫虫颜色的方法，改变这三个按钮，把它们的颜色改为红，绿，蓝三色。并分别按颜色命名为：rr，gg，bb。这样，我们就在舞台上放了三个具有名字的实体了，我们可以用程序控制这三个实体来改变RGB值，从而实时的反映到虫虫身上。
下面我们为这三个拉钮引用的共同目标进行编辑，这样三个拉钮就会同步更新。这也是Flash强大之处，所有引用同一个元件的实体，都会因为改变这个元件而被同步更新。
双击库中的“拉杆”电影剪辑，进入这个元件进行更改。从图示标注来看，我们现在已经离开舞台，进入这个元件，单独编辑它啦。
在这个元件里，有我们前面画的黑色圆形，我们框选它，用右键，使用转换为元件的方法，把它转换为一个电影剪辑，起名为“按钮”，并在属性栏里为它起一个实体名“an”，意思是按钮。
这样我们就让红绿蓝三色拉钮中，都增加了一个实体，名叫“an”。
这部分理解起来会很难，但是一旦理解了它，后面我们就可以制作出非常强大的交互动画。
前面做的一切，就是在做一个嵌套的电影剪辑，也就是电影内部套着电影。因为电影剪辑可以被用程序赋予颜色，设置大小，设置运动动画等，所以使用频率非常高。
我们为什么要做嵌套电影呢？这是因为我们后面编程时，如果设置按钮坐标时，我们可以以电影剪辑内的坐标为准，而不是以舞台的坐标为准，防止按钮挤成一堆。
好，回到舞台中，修改第一帧的程序：
_root.onEnterFrame=function(){ //只要一开始动画，就执行大括号里的程序
colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16 g<<8 b); //设置色块电影的颜色
r=_root.rr.an._y; //设置按钮的坐标与红色值相交互
_root.rr.onPress=function(){ //如果在红色按钮上按下鼠标左键
_root.rr.an.startDrag(true,0,0,0,255); //红色按钮中嵌套的“an”电影实体可以被鼠标拖动，范围是纵向255像素
}
onMouseUp=function(){
_root.rr.stopDrag(); //如果鼠标松开，停止拖动
}
}
按Ctrl+回车试一下吧，哈哈，红色按钮可以向下拖动啦。并且虫虫随之变色
只要测试成功一个，其他的就好办，复制部分代码，一改就OK了。看一下最终的代码吧。
_root.onEnterFrame=function(){ //只要一开始动画，就执行大括号里的程序
colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16 g<<8 b); //设置色块电影的颜色
r=_root.rr.an._y; //设置按钮的坐标与红色值相交互
g=_root.gg.an._y;
b=_root.bb.an._y;
_root.rr.onPress=function(){
_root.rr.an.startDrag(true,0,0,0,255);
}
_root.gg.onPress=function(){
_root.gg.an.startDrag(true,0,0,0,255);
}
_root.bb.onPress=function(){
_root.bb.an.startDrag(true,0,0,0,255);
}
onMouseUp=function(){
_root.rr.stopDrag();
_root.gg.stopDrag();
_root.bb.stopDrag();
}
}
我就不写那么多注释啦，看懂前面的，后面的一看就明白。
这是测试结果，可以自已设置RGB的值。
这里我提供大家我做好的一张背景图,大家也可以自己找找素材,做出更漂亮的背景放在底部.
在最底层,使用导入到舞台的方法,把背景层导入进来并对齐.可以看到,虫虫就融合在背景中啦
最后导出来SWF文件,使用“文件”－“导出”－“导出影片”，将这个文件导出为最终作品
