论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

Flash动态填色本

文章类别:Flash | 发表日期:2008-9-21 20:11:59

  

http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width=480 height=360>http://www.chinabyte.com/20021205/softyl201205_01.swf
这里我们用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

视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058