Flash动态填色本

这里我们用Flash来模拟制作一个可以对物体动态上色的小画板，主要运用MOVIE CLIP的命名及控制、带声音按钮的制作、帧的拷贝与复制、位图的打散、背景的去除等最基本的操作，再结合基本的action script指令的应用，就可以实现影片中对颜色的控制。
Flash动态填色本
制作步骤（1）



一、素材的预备

我们已经把本实例所要用到的所有素材放到了后面素材源文件里面，大家可以下载下来，直接使用这些素材以方便我们的制作。本实例素材如图2所示：


图2 　　制作中所用到的素材

二、影片场景的设置

　　1.打开"着色本原始档.fla"这个文件，点击Modify(修改) àDocument (文档),弹出Document properties(文档属性)"对话框。

　　2.如图所3所示，设置此影片的属性。

三、制作调色板

　　1.请先将Layer1图层更名为"调色板"，如图4所示：

2.在编辑区的左边绘制出着色本的调色板方块，画成矩形或其他外形都可以，只要看上去美观就行了，您可以依据自己的喜好，设置色板的颜色与数量，在此例子中我们一共制作了14个色块，其颜色分别为：白色，红色，粉红色，浅橘色，深橘色，米色，黄色，灰色，浅蓝色，蓝色，紫色，浅绿色，深绿色，咖啡色，制作完毕后如图5所示：

图5

3、然后再画一个白色的方块，并用文字工具在旁边标注重为"当前的颜色"，这个色块用来显示当前所选择的颜色是哪个。如图6所示：

图6

　　4.建议初次制作着色本的时候，可以先试着制作5，6个色块即可，等把握熟练后可以扩大作品。

　　5.请选择调色板中的第一个色块（在此例子中为第一个色块），按下F8键或选取"Insert(插入)"\"Convert To Symbol(转换成组件)"命令，在弹出的"Convert To Symbol"对话框中选择"Button",将其转换为按钮组件并命名为"白色"（此名称请依据所选取的色块颜色而定）。

　　6、增加按钮的音效。在白色色块上双击鼠标左键进入组件编辑状态，在"白色"按钮组件的"Up"帧上按三下f6键，使按钮的所有四帧全部为要害帧，然后选中"Down"祯，选取"Windows（窗口）"\"Properties（属性）"命令调出Properties（属性）面板，从Sound声音列表里选取"按钮声2",这样我们在选择颜色的时候就会发出清脆的声音。设置完的时间线如图7所示：

7.然后按照同样的方法，将所有的色块全部设置为按钮组件。

　　8.接下来选取要显示所选颜色的那个色块，按下F8键或选取"Insert(插入)"\"Convert To Symbol(转换成组件)"命令，在弹出的" Convert To Symbol(转换成组件)"对话框中选择"Movie Clip",将其转换为Movie Clip组件并命名为"目前的颜色"。

　　9.在主场景中选择"目前的颜色"组件，然后选取’"Windows(窗口)"\"Properties(属性)"命令，调出" Properties(属性)"面板，请在"Name"处输入"Swatchx",这样就将主场景中的"目前的色块"组件命名为"Swatchx"了，从而可以在后边用Action对其进行控制。设置完毕如图8所示：


图8

　　10、在主场景中"目前的色块"对象上双击鼠标左键进入组件编辑状态，在第一帧上单击鼠标右键，调出"Actions"面板，接着按"+"\"Actions"\"Movie Control"\"Stop"，为此帧加上AS代码"Stop"，然后在第一帧单击鼠标右键，选择"copy frame",再在第二祯上单击鼠标右键，点击"Paste Frames"(复制，粘贴帧一的内容)。因为此作品的调色板一共有14个色块，所以请重复此步骤13次，到第14帧为止，如图9所示：


11、最后请依据调色板的色块顺序（此作品的色块顺序为：白色，红色，粉红色，浅橘色，深橘色，米色，黄色，灰色，浅蓝色，蓝色，紫色，浅绿色，深绿色，咖啡色），分别将"目前的颜色"组件中14个要害帧中的色块填入相对的颜色。




















Flash动态填色本
四、制作边线与影片剪辑组件





　　1.在主场景中新增一个图层，命名为"边线"，放在"调色板"图层的下边。如图10：


图10

　　2.选中图层"边线"，然后将"Library"中的"天使"组件拖到场景的编辑区中，然后按下Ctrl+B或者"Modify(修改)"\"Break Apart（打散）"三次，将此图片打散，如图11所示：

图11

　　3.再新增一个图层，并命名为"影片组件"，摆放在"边线"图层的下方，然后在"边线"图层"的帧1上单击鼠标右键，选择"Copy Frame（拷贝帧）",再在"影片组件"图层的第1祯上单击鼠标右键，点击"Paste Frames"(复制，粘贴"边线"图层帧一的内容)。如图12所示：


图12

　　4.下面要开始编辑"边线"图层中的对象了，请先将"影片组件"图层设置为隐藏和锁定，以免在编辑"边线"图层中的对象时误动了"影片组件"图层中的对象。

　　5.此时的"边线"图层中的对象已经是完全打散了的，请选择其所有的色块部分，然后删除掉，只留下轮廓部分即可。如图13


图13

　　6.现在开始编辑"影片组件"图层中的对象，请先将"边线"图层设置为隐藏和锁定，以免在编辑"影片组件"图层中的对象时误动了"边线"图层中的对象，同时将"影片组件"图层解锁并显示。

　　7.点击编辑区中图像的黑色边线，然后按下del键将其删除掉，（此时删除的是"影片组件"图层中的对象），如图14所示：

图14

　　8.然后将"边线图层"取消隐藏，可以先选取图像中的任意一个色块，在此我们先选取了翅膀的部分，因为本实例中我们要在填色的时候给两个翅膀同时上色，所以接着按下Shift键选取第二片翅膀。然后按下F8键或选取"Insert(插入)"\"Convert To Symbol（转换为组件）"命令，在弹出的" Convert To Symbol（转换为组件）"对话框中选择"Movie Clip",将其转换为Movie Clip组件并命名为"翅膀"。如图15所示：

图15

　　9.在主场景中选取上一步设置好的"翅膀"影片组件，接着选取"Windows(窗口)"\"Properties（属性）"命令，调出" Properties（属性）"面板，在"Name"中输入"翅膀",如图16所示：


图16

　　10.在主场景中双击鼠标左键进入"翅膀"组件编辑区，在第一帧上单击鼠标右键，选择Actions命令，打开其"Actions"面板，接着按"+"\"Actions"\"Movie Control"\"Stop",为此帧加上"Stop"Action,然后请将翅膀填入白色（因为调色板中的第一个色块是白色）。

　　11.请依据你眺色板上的色块顺（此作品的顺序为：此作品的色块顺序为：白色，红色，粉红色，浅橘色，深橘色，米色，黄色，灰色，浅蓝色，蓝色，紫色，浅绿色，深绿色，咖啡色），分别将其十四个要害帧中的翅膀填入相对的颜色。

　　12.同样的请依照步骤11到14的相同作法，将"影片组件"图层的其他对象分别设为Movie Clip组件，并依所选的对象命名，如：头发，头和手，键盘，蝴蝶-翅膀，蝴蝶-身体，太阳-光线等名称，然后如上面的步骤加以设置。

　　13.将所有的部分所好之后，我们回到主场景中，取消所有图层的隐藏与锁定的设置，再点击"边线"与"影片组件"图层的时候，您会看到出现如图17的结果，而若再隐藏了"边线"图层则仅能看到许多白色的影片组件，如图18

图17

图18


























Flash动态填色本
五、制作图像按钮组件





　　1、新增一个图层命名为"按钮组件"，将此图层如图19所示摆放


图19

　　2、在"影片组件"图层的第1祯上单击鼠标右键，选择"Copy Frame"，再在"按钮组件"图层的第一帧上单击鼠标右键，点击"Paste Frames"(复制，粘贴"影片组件"图层帧一的内容)。并将"影片组件"图层设置为隐藏。

　　3、点击主场景编辑区中的翅膀部分，然后按下F8键或选取"Insert(插入)"\"Convert To Symbol(转换为组件)"命令，在弹出的" Convert To Symbol(转换为组件)"属性对话框中选择"Button",将其转换为Button组件并命名为"翅膀"。

　　4、到主场景中，在翅膀上双击鼠标左键，进入组件编辑状态，先在"Hit"帧上按下f5键，将"Up"帧延续到此，再在"Down"帧上按下f6键，设置为要害帧，然后选中"Down"祯，选取"Windows（窗口）"\"Properties（属性）"命令调出" Properties（属性）"面板，从Sound声音列表里选取"按钮声1",这样我们在填充颜色的时候就会发出清脆的声音。设置完的时间线如图20所示

5、这样就完成了"翅膀"按钮组件的制作，同样的按照上面的步骤，将"按钮组件"图层中的其它对象制作为按钮组件，并加上声音。

六、标题文字与按钮

　　1、新增一个图层，命名为"标题文字"，将此图层按照图21所示摆放。


图21

　　2、在"标题文字"图层中，拖动Library中的"文字动画"影片组件摆放在图像的下方。

　　3、再新增一个图层并命名为"按钮"，将此图层放到"标题文字"图层的下面。在"按钮"图层中，拖动Library中的"清除所有色彩"按钮组件到编辑区右下方，如图22所示：

图22












七、Action控制的添加





　　1、在主场景的最上方新增一图层，命名为"Action"，接着在"action"图层的第一帧上单击鼠标右键或者选取"Windows（窗口）"\"Actions(指令)"命令调出"Actions"面板，点击"+"\"Actions"\"Movie Control"\"Stop All Sounds"和"+"\"Actions"\"Movie Control"\"Stop"。

　　2、请选取编辑区中的第一个色块（白色），选取"Windows(窗口)"\"Actions（指令）"命令调出"Actions"面板，点击"+"\"Actions"\"Variables"\"Set Variable",设置"Color"变量="1",接着再点击 "+"\"Deprecated"\"Actions"\"Tell Target"和"+"\"Actions"\"Movie Control"\"Go To",如图23所示设置：


图23

　　这样当我们按下此色块时，会得到"Color"变量="1",且将之前影片组件实体命名为"Swatchx"的方块会显示出您点击的色块颜色。

　　3、请将编辑区中的每一个色块设置上同样的Action,仅仅数字的部分请依据色块的顺序更改（此作品的色块顺序为：白色，红色，粉红色，浅橘色，深橘色，米色，黄色，灰色，浅蓝色，蓝色，紫色，浅绿色，深绿色，咖啡色）

　　注：Action的部分，您可以不必一个个的制作，仅仅需要选取第一个色块中已经设置好的Action,单击鼠标右键，点击Copy,在另一个色快的"Object Action"面板上Paste即可，最后只要更改数字部分即可。

　　4、接着要设置图像部分按钮组件的Action,请先将"影片组件"图层隐藏，设置锁定，然后选取"翅膀"对象，选取"Windows"\"Actions"命令调出"Actions"面板，并如图二十七所示设置上Action，如此一来，当您在翅膀上按一下的时候，会自动跳到已经设置了14个颜色的"翅膀x"影片组件，执行其中的第n帧。那么如何判定’n"为什么数字呢？还记得我们在上步设置按下色块的同时，’Color"变量中的数字了吗？对，就是那数字，当您按下了"红色"色块的时候，"Color"变量等于2时，就会执行"翅膀x"影片组件的第二帧（红色翅膀），其实就是这样上色彩的。如图24：

图24

　　5、同样的，竟此图层中其它对象均设置上相对的Action,别忘记更改"Tell Target"的实体名称。

　　6、最后，我们要给动画加上"清除所有色彩’的功能，先选取编辑区右下角的" 清除所有色彩"按钮，接着选取"Windows"\"Actions"命令调出"Actions"面板，点击"+"\"Actions"\"Variables"\"Set Variable",设置"Color"变量="1"， 接着再点击 "+"\"Deprecated"\"Actions"\"Tell Target"和"+"\"Actions"\"Movie Control"\"Go To"，如此一来，当您点击的时候，所有对象的色彩回回到第一帧（白色），这样看起来就好象清除了所有色彩一样。

　　on (release) {
　　　　color = 1;
　　　　tellTarget ("/SwatchX") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/蝴蝶") {
　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/蝴蝶翅膀") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/背景") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/两臂之间") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/头发") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/电脑屏幕") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/电脑边框") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/桌子") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/太阳") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/右上角") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/翅膀") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/云") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　　　tellTarget ("/胳臂") {
　　　　　　gotoAndStop (_level0:color);
　　　　}
　　}
　　//

　　上面的代码虽然看上去不少，但是含义很简单，都是在按下"清除颜色"按//钮后，设置各个上了颜色的部位跳转到各自的第一帧，也就是清除了颜色。

本实例的制作在技术上没有什么太大的难度,调色板的制作是此例的要害,还有给不同的Movie Clip命名并进行控制,也是制作的成功所在。　　　
完整源文件下载 ： http://www.yesky.com/20021205/softyl201205_2.fla