Flash cs3 基础教程第三章Word格式文档下载.docx

Flash cs3 基础教程第三章Word格式文档下载.docx

《Flash cs3 基础教程第三章Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《Flash cs3 基础教程第三章Word格式文档下载.docx（30页珍藏版）》请在冰豆网上搜索。

4>

鼠标指针移动到图形元件“45度三角板”上，双击鼠标，打开图形元件（在场景中打开某个元件时，鼠标指针一定要移动到这个元件上，且鼠标指针形状为“

”时，双击才可以打开元件。

），如图3.1.03所示。

5>

双击图形元件“45度三角板”后，打开图形元件“45度三角板”的时间轴，进入图形元件的编辑状态，如图3.1.04所示。

图形元件有自己的时间轴和编辑区，操作上与前两章所讲内容一样。

图3.1.04的①处显示当前操作元件的路径，这对初学的人很重要，通过这所显示的内容能很清楚知道，你现在对哪个对象进行编辑。

当前显示正在对主场景下的“45度三角板”的这个图形元件进行编辑，即最后显示的那个名称就是正在编辑的对象，如图3.1.04的②处所示。

路径总是从主场景开始的，因为任何元件或对象都是放置在主时间轴上的，如图3.1.04的③处所示。

单击③处，返回到主时间轴。

单击④处，返回到上一级对象，或者是在编辑区没有对象的区域双击鼠标，也可以返回上一级对象。

6>

将“图层1”更名为“三角形”，如图3.1.05的①处所示。

在编辑区中用“选择工具”选定三角形，按快捷键“Ctrl+D”重制一个等腰直角三角形，用“缩放”工具拉小，并移动到如图3.1.05的②处。

用“颜料桶工具”给三角形填上白色，如图3.1.05的③处所示。

7>

锁定“三角形”图层，单击“插入图层”按钮，新建一图层，并更名为“刻度”。

在“刻度”图层的第1帧画上刻度，如图3.1.06的④处所示。

8>

锁定“刻度”图层，单击“插入图层”按钮，新建一图层，并更名为“数字”。

在“数字”图层的第1帧写入数字，如图3.1.07的④处所示。

9>

按快捷键“Ctrl+S”，将文档保存到“E:

\实例练习”文件夹中，并命名为“45度三角板”，一个三角板图形就绘制完成。

分析总结：

通过本例，我们可以发现主时间轴与元件的时间轴是不同的，此例中主时间轴只有“三角板”这一个图层，而“45度三角板”这个图形元件的时间轴上有三个图层，如图3.1.07所示。

本例将三角板转换为图形元件后，它就有自己的时间轴。

在自己的时间轴上，我们可以将相对独立的对象放置在不同的图层上。

如本例中将三角形、刻度、数字，放置不同的图层，编辑操作上比较灵活，当编辑完成时，可以通过锁定图层的方式锁定编辑完成的对象。

此例中，如果将这三个对象放在一个图层中编辑，操作上将会麻烦得多。

实例练习

请你做出“光盘:

\实例与视频\第三章\第一节\30度三角板.swf”的影片所示的三角板。

3.1.2位图的裁剪

选择“菜单→导入→导入到舞台”菜单项，导入的一幅图片，这图片在Flash中称为位图。

很多时候，我们只需要图片其中的一部分，这时我们应该怎么处理呢？

\实例与视频\第三章\第一节\位图的裁剪.fla

启动FlashCS3，新建一个FlashActionScript2.0文档。

将“图层1”更名为“图片”，选择菜单“文件→导入→导入到舞台”菜单项，将“光盘:

\实例与视频\第三章\第一节\素材之Q宠.jpg”导入编辑区中。

用“选择工具”选定图片，按快捷键“F8”，将其转换为图形元件设置如图3.1.08所示。

选定“选择工具”后，双击编辑区中的图片，打开图形元件“Q宠”时间轴。

将“图层1”更名为“图片”，按快捷键“Ctrl+B”打散图片后，锁定该图层，如图3.1.09所示。

单击“插入图层”按钮，插入一新图层，并将图层更名为“轮廓”，用“线条工具”工具拉出“QQ宠物”的大致轮廓，绘制轮廓时可以放大编辑区。

用“选择工具”将线条拉成“QQ宠物”的形状，如图3.1.10所示。

确认用线条描绘出的QQ宠物是一个封闭的区域后，选定线条轮廓，按快捷键“Ctrl+X”，剪切线条轮廓。

解锁“图片”图层，按快捷键“Ctrl+Shift+V”，将线条轮廓粘贴到“图片”图层的第1帧的当前位置。

用“选择工具”选定“QQ宠物”之外的区域，按Delete键删除。

选定线条轮廓，按Delete删除，最后剩下“QQ宠物”部分，删除“轮廓”图层，如图3.1.12所示。

\实例练习”文件夹中，并命名为“位图的裁剪”，完成了图形的裁剪操作。

总结分析：

本例的思路是用线条描绘出欲保留的位图部分的轮廓，然后将线条与打散后的位图放置于同一图层，用线条将保留部分和删除部分分隔出来。

删除不要的部分，完成图形的裁剪。

本例关键的两点：

（1）位图必须打散；

（2）所绘线条轮廓必须封闭。

3.1.3位图的临摹

位图与矢量图的最大区别为：

位图放大一定倍数后，图像就会失真，而矢量图无论放大多少倍，图像都不会失真。

在实际创作过程中，为了达到更好效果，我们应该尽可能的将位图转换为矢量图。

如何转换呢？

我们可以通过临摹的方式实现。

\实例与视频\第三章\第一节\位图的临摹.fla

\实例与视频\第三章\第一节\素材之鸭子.jpg”导入编辑区中。

用“选择工具”选定图片，按快捷键“F8”，将其转换为图形元件设置如图3.1.13所示。

选定“选择工具”后，双击编辑区中的图片，打开图形元件“鸭子”时间轴。

将“图层1”更名为“临摹位图”，锁定该图层，如图3.1.14所示。

单击“插入图层”按钮，插入一新图层，并将图层更名为“线条描绘”。

用“线条工具”工具拉出构成“鸭子”的所有线条。

绘制时将编辑区放大到合适的大小，鸭子的线条轮廓是由一段段曲线构成，因此，我们可以绘制一条直线，用“选择工具”将这些直线拉成曲线。

最终临摹出“鸭子”的形状，如图3.1.15所示。

临摹出鸭子的线条轮廓后，就要给鸭子各个区域填充上相应的颜色。

首先我们要选色，我们可以单击“填充颜色”工具，在弹出色板后，将鼠标指针移动到编辑区中你欲取色位置单击鼠标左键，选定某种颜色，如图3.1.16所示。

颜色选择完后，用“颜料桶工具”给各个区域填充颜色。

如果是未封闭的区域，请先封闭该区域。

颜色填充完成后，选定“临摹位图”图层，单击“删除图层”按钮，删除“临摹位图”图层。

单击“场景1”按钮，退回主场景。

\实例练习”文件夹中，并命名为“位图的临摹”，完成了位图的临摹操作。

用Flash绘制图画的能力不是所有人都有的，他必须要有很深厚的美术功底的，才能构思出心中的图画。

但是临摹的能力是每个人都有的，只要花一些时间，只是一些手工活而已。

将位图临摹出来后，图画就变得十分清晰，这是处理图片的一种常用方式。

注意：

图形元件时间轴只能显示时间轴第1帧上的内容，它是静态的，不能用于制作动画。

多数情况下用于处理图片，或者作为制作动画时的对象使用。

第二节影片剪辑元件的编辑

3.2.1心与星

实例预览：

\实例与视频\第三章\第二节\心与星.swf

将文档的背景颜色设置为“#000000”，即黑色。

将主时间轴的“图层1”更名为“影片”，将“笔触颜色”设置为“#666666”即灰白色。

用“钢笔工具”在“影片”图层的第1帧的编辑区中绘制一颗心。

用“选择工具”选定这颗心，按快捷键“F8”，将心转换为影片剪辑元件，设置如图3.2.01所示。

选定“选择工具”，在编辑区中双击心的线条，进入影片元件“心与星”的时间轴。

将“图层1”更名为“相爱的心”，并锁定本图层，如图3.2.02所示。

单击“插入图层”按钮，插入一新图层，并更名为“闪烁的星”，用“矩形工具”在“闪烁的星”图层的第1帧的编辑区中绘制一个矩形，将矩形设置为无线条、宽为100、高为3、颜色填充类型为放射状，填充后矩形效果为中间黄色，两边黑色，如图3.2.03所示。

设置完成后按快捷键“Ctrl+G”将矩形组合。

用“选择工具”选定矩形，按快捷键“Ctrl+D”重制一个矩形，打开“属性”面板，将重制的矩形的宽设置为70、高设置2。

分别重制大小两种矩形各一个，按快捷键“Ctrl+Alt+S”，将两个小的矩形分别旋转45度和-45度，将一个大的矩形旋转90度。

选定这四个矩形，打开“对齐”面板，设置为水平居中和垂直居中，最终如图3.2.04所示。

按快捷键“F8”，将其转换为影片剪辑元件，设置如图3.2.05所示。

制作星的闪烁效果：

选定“选择工具”，用鼠标双击星，打开闪烁的星的时间轴，将图层1第1帧的星转换为图形元件，如图3.2.06所示。

分别在“图层1”图层的第8帧和第15帧按“F6”插入关键帧，选定第8帧上的图形元件“星形”，打开“属性”面板，将“星形”的宽和高分别设置为40。

设置完成后，选定第1帧，打开“属性”面板，设置如图3.2.07所示。

选定第8帧，打开“属性”面板，设置如图3.2.08所示。

选定“选择工具”，在编辑区双击鼠标，返回到“心与星”的时间轴。

选定影片剪辑元件“闪烁的星”，按快捷键“Ctrl+D”重制九个“闪烁的星”。

将十颗星移动到心上，如图3.2.09所示。

10>

双击鼠标，退回主场景。

按快捷键“Ctrl+S”，将文档保存到“E:

\实例练习”文件夹中，并命名为“心与星”。

完成了影片剪辑的编辑，按快捷键“Ctrl+Enter”测试影片。

（1）通过本例我们了解了影片剪辑的编辑，影片剪辑主要用于组织动画，每一个影片剪辑都有自己的时间轴。

（2）学习了“影片剪辑嵌套影片剪辑”方法，本例的影片路径为：

主场景\心与星\闪烁的星，即主场景下放置着“心与星”这个影片剪辑，“心与星”这个影片剪辑下又放置着“闪烁的星”这个影片剪辑。

（3）将某一对象转换为影片剪辑元件后，它就是一个独立的对象，它有如下好处：

可以放置在编辑区的任何地方、可以改变它的大小、可以改变它的角度、可以复制多个、可以重复使用等。

如“闪烁的星”这个影片剪辑，我们就是通过重制方式制作多个相同的影片剪辑，从而实现了多个同时闪烁的星的效果。

\实例与视频\第三章\第二节\流星.swf”的影片所示的效果。

3.2.2飞翔的海鸥

\实例与视频\第三章\第二节\飞翔的海鸥.swf

将文档的背景颜色设置为“#999933”。

用“矩形工具”在“图层1”的第1帧绘制一个矩形，用“选择工具”选定矩形，按快捷键“F8”将其转换为影片剪辑元件，设置如图3.2.10所示。

选定“选择工具”，鼠标在编辑区中双击影片剪辑“海鸥”，进入“海鸥”时间轴。

选定“图层1”的第1帧的矩形，删除它。

（此例中绘制矩形的目的为：

选择一个对象，将它转换为影片剪辑，我们需要的是这个影片剪辑，而不是这个矩形。

因此，进入影片剪辑的时间轴后，就可以删除矩形了。

）

打开“光盘:

\实例与视频\第二章\第五节\逐帧动画\飞翔的海鸥.fla”这个Flash源文件。

选定“翅膀”与“身子”图层的1~8帧，在这选定的帧上单击鼠标右键，在弹出的快捷菜单中选择“复制帧”菜单项，如图3.2.11所示。

切换到“未命名”文档中，选定“图层1”的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“粘贴帧”菜单项，将翅膀飞动这个动画粘贴至“海鸥”这影片剪辑中，如图3.2.12所示。

选定“选择工具”，在编辑区双击鼠标，退回主场景，用“选择工具”选定影片剪辑“海鸥”，按快捷键“F8”将其转换为影片剪辑，设置如图3.2.13所示。

双击海鸥，进入“飞翔”影片剪辑的时间轴。

将“图层1”更名为“海鸥”，用“缩放”工具将“海鸥”影片剪辑缩小到合适大小。

用“任意工具”将“海鸥”的“旋转、翻转控制点”移动到海鸥的身子上，如图3.2.14所示。

单击“添加运动引导层”按钮，添加一引导层，在引导层的第1帧上绘制一条曲线。

绘制完成后，在引导层的第80帧处按快捷键“F5”插入过渡帧。

在“海鸥”图层的第80帧处按快捷键“F6”插入关键帧，锁定引导层，如图3.2.15所示。

选定“紧贴到对象”选项，将第1帧上的海鸥移动至引导线的一端，特别注意“旋转、翻转控制点”一定要吸附到引导线的端点，如图3.2.16所示。

将第80帧的海鸥移动至引导线的另一端，“旋转、翻转控制点”要吸附到引导线的端点，如图3.2.17所示。

选定“海鸥”图层的第1帧，建立“创建补间动画”。

选定“选择工具”后在编辑区双击鼠标，退回到主场景。

\实例练习”文件夹中，并命名为“飞翔的海鸥”。

按快捷键“Ctrl+Enter”测试影片，一个具有两重动作的动画就制作完成了。

（1）本例继续运用“影片剪辑嵌套影片剪辑”这种动画制作的思维方式实现了双重动画制作，例如海鸥即有翅膀舞动的动画，又有从右向左飞翔的动画。

（2）通过“复制帧”→“粘贴帧”命令的方式引用其他Flash源文件中素材。

\实例与视频\第三章\第二节\运动的狗.swf”的影片所示的效果。

3.2.3太阳、地球、月亮

\实例与视频\第三章\第二节\太阳地球月亮.swf

用“椭圆工具”在“图层1”的第1帧绘制一个圆，设置圆为红色，无线条，宽高都设置为75。

用“文本工具”在编辑区输入“太阳”两字，设置文本的颜色为黄色，字号为20。

用“选择工具”选定圆和文字，打开“对齐”面板，将它们设置为“相对于舞台水平居中和垂直居中”，如图3.2.18所示。

用“选择工具”选定圆和文字，按快捷键“F8”转换为影片剪辑元件，设置如图3.2.19所示。

选定“选择工具”，鼠标双击“太阳与地球”影片剪辑，进入它的时间轴。

将“图层1”更名为“太阳”后锁定本图层。

单击“插入图层”按钮，新建一图层，更名为“地球”，用“椭圆工具”在此图层的第1帧绘制一个无线条的蓝色圆，设置圆的宽和高都为50。

用“文本工具”输入“地球”两字，将文字的颜色设置为绿色，字号为16。

选定此图层的第1帧，打开“对齐”面板，设置为水平居中和垂直居中，移动到适当位置后锁定本图层。

单击“添加运动引导层”按钮，添加一引导层，在此图层的第1帧绘制一个无填充色的椭圆，用“旋转”工具将这个椭圆旋转一定角度，删去椭圆线条一小部分，出现一个小缺口，移动椭圆到适当位置后锁定本图层。

最后效果如图3.2.20所示。

解锁“地球”图层，选定“地球”图层的第1帧，按快捷键“F8”将其转换为影片剪辑，设置如图3.2.21所示。

选定“选择工具”，鼠标双击“地球与月亮”影片剪辑，进入它的时间轴。

将“图层1”更名为“蓝地球”后锁定此图层。

单击“插入图层”按钮，插入一新图层，并将此图层更名为“月亮”，用“椭圆工具”在此图层的第1帧绘制一个无线条黑色的圆，将圆的宽高设置为25。

用“选择工具”选定圆，按快捷键“F8”将其转换为图形元件，设置如图3.2.22所示。

单击“添加运动引导层”按钮，添加一引导层，用“椭圆工具”在引导层的第1帧上绘制一个椭圆，删除出一个小缺口后，移动到如图3.2.23所示位置，编辑完成后锁定本图层。

在“引导层”和“蓝地球”图层的第20帧上按“F5”插入过渡帧，在“月亮”图层的第20帧上按“F6”插入关键帧。

选定“月亮”图层的第1帧上的月亮，将它的“旋转、翻转控制点”吸附到引导线的一端点，选定“月亮”图层的第20帧上的月亮，将它的“旋转、翻转控制点”吸附到引导线的另一端点。

选定“月亮”图层的第1帧，建立“创建补间动画”，将“蓝地球”图层移动到“引导层”之上，编辑完成“地球与月亮”影片剪辑，如图3.2.24所示。

选定“选择工具”，鼠标双击编辑区，退出“地球与月亮”影片剪辑时间轴，进入“太阳与地球”影片剪辑的时间轴。

把“地球与月亮”影片剪辑作为动画对象，用相同的方法制作地球绕太阳旋转的动画。

在“引导层”和“太阳”图层的第365帧上按“F5”插入过渡帧，在“地球”图层的第365帧上按“F6”插入关键帧。

选定“地球”图层的第1帧上的地球，将它的“旋转、翻转控制点”吸附到引导线的一端点，选定“地球”图层的第365帧上的地球，将它的“旋转、翻转控制点”吸附到引导线的另一端点。

选定“地球”图层的第1帧，建立“创建补间动画”，编辑完成“太阳与地球”影片剪辑，如图3.2.25所示。

选定“选择工具”后在编辑区双击鼠标，退回到主场景。

\实例练习”文件夹中，并命名为“太阳地球月亮”。

按快捷键“Ctrl+Enter”测试影片，月亮绕地球旋转的同时又旋绕太阳旋转的动画就制作完成了。

总结：

本例仍然是用“影片剪辑嵌套影片剪辑”的方法制作双重动画，同时进一步加深影片剪辑的编辑。

第三节按钮元件的编辑

3.3.1文字按钮

\实例与视频\第三章\第三节\播放.swf

将“图层1”更名为“按钮”，用“文本工具”在此图层的第1帧上输入“播放”两字，设置文字的字体为黑体、颜色为蓝色、字号为35、加粗。

用“选择工具”选定文字，按快捷键“F8”，将文字转换为按钮元件，设置如图3.3.01所示。

选定“选择工具”，鼠标双击“播放”按钮元件，进入“播放”按钮元件的时间轴，如图3.3.02所示。

对比图形元件与影片剪辑元件的时间轴，我们可以发现按钮元件的时间轴有一点小小的不同。

按钮元件的时间轴只有4帧，分别是“弹起”、“指针经过”、“按下”、“点击”，因此，对按钮的编辑就是对这四个帧的编辑。

选定“指针经过”帧，按快捷键“F6”插入关键帧，将“播放”两字的颜色设置为紫色。

选定“按下”帧，按“F6”插入关键帧，将此帧上的“播放”两字的颜色设置为绿色。

设置完成后，按快捷键“Ctrl+Enter”测试影片，打开测试窗口，将鼠标指针移动到“播放”按钮上将会出现手形，感受鼠标弹起、鼠标经过、鼠标按下三种状态与“播放”两字的颜色变化。

关闭测试窗口，退回到未命名文档，按快捷键“Ctrl+S”，将文档保存到“E:

\实例练习”文件夹中，并命名为“播放”，完成文字按钮的编辑。

本例通过颜色的变化来说明了按钮时间轴中“弹起”、“指针经过”、“按下”这三个帧的编辑，按钮的编辑就是对这三种鼠标状态的编辑，点击帧是确定鼠标作用的范围，此例没有编辑，默认为前一帧的内容所占区域大小。

编辑时，各帧的内容不仅有颜色变化，还可以是形状变化、大小变化、声音变化、动画变化等。

\实例与视频\第三章\第三节\停止.swf”的影片所示的按钮效果。

3.3.2在按钮中加入影片剪辑

\实例与视频\第三章\第三节\旋转的按钮.swf

将“图层1”更名为“按钮”，选定“椭圆工具”，打开“属性”面板，设置线条颜色为蓝色（#0000FF），填充色为无颜色；

设置起始角度为90，结束角度为0，内径为50，如图3.3.04所示。

在此图层的第1帧上绘制一个圆，设置圆的宽和高为200，最终效果如图3.3.05所示。

用“选择工具”选定圆，按快捷键“F8”，先将圆转换为图形元件，设置如图3.3.06所示。

再次选定圆，按快捷键“F8”，将圆转换为影片剪辑元件，设置如图3.3.07所示。

选定“选择工具”，将鼠标指针移动到圆的线条上，两次双击圆的线条，进入“图形圆”的时间轴。

按住“Shift”键不放，用“线条工具”在编辑区中绘制一个等腰直角三角形，设置这个三角形的宽为140，高为70，如图3.3.08所示。

将这个三角形移到如图3.3.09所示位置，删除一些线条，用“颜料桶工具”给这个封闭的区域填充蓝色，完成“图形圆”的编辑。

选定“选择工具”，鼠标在编辑区中双击，退出“图形圆”的时间轴，进入“影片圆”的时间轴。

选定“图层1”的第10帧，按快捷键“F6”插入关键帧。

选定此图层的第1帧，打开“属性”面板，设置如图3.3.10所示。

选定“选择工具”，在编辑区中双击鼠标，回到主场景时间轴。

选定“影片圆”，按快捷键“F8”，将“影片圆”转换为按钮元件，设置如图3.3.11所示。

选定“选择工具”，鼠标在“按钮圆”上双击，进入“按钮圆”的时间轴。

选定“弹起”帧上的“影片圆”，按快捷键“Ctrl+Alt+S”，将“影片圆”旋转30度，如图3.3.12所示。

选定“指针经过”帧，按“F6”插入关键帧。

选定“按下”帧，按“F6”插入关键帧。

选定“弹起”帧上的“影片圆”，按两次快捷键“Ctrl+B”，将影片对象打散为矢量对象，选定此帧上的填充部分，将填充部分的颜色设置为红色。

选定“按下”帧上的“影片圆”，按两次快捷键“Ctrl+B”，将影片对象打散为矢量对象，选定此帧上的填充部分，将填充部分的颜色设置为黄色。

按快捷键“Ctrl+Enter”测试影片，我们可以看到，当鼠标未处于按钮上是，按钮显示为红色；

当鼠标移动到按钮上时，按钮开始旋转；

当鼠标按下时，按钮显示为黄色；

当鼠标处于没有颜色填充的按钮区域内时，此时，按钮并不会旋转，说明此区域不是按钮作用区域。

这可能给实际操作带不不便，因此，我们