chapter03 网页设计与Web编程教案

《chapter03 网页设计与Web编程教案》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第三章FlashCS3入门及制作实例内容提要3.1FlashCS3的工作环境简介3.2基本绘图工具3.3基本动画制作3.4动画制作实例3.1FlashCS3的工作环境简介菜单栏时间轴舞台工具箱属性面板浮动面板时间轴时间轴：用于组织和控制文档内容在一定时间内播放的图层数和帧数舞台工作区（舞台的后台）常用面板“属性”面板：舞台的下方“对齐”面板：“窗口”

2、“对齐”“颜色”面板：“窗口”

3、“颜色”“样本”面板：颜色库面板“信息”面板：在编辑操作的过程中为用户提供一些相关的信息。“场景”面板：显示了当前动画的场景数量和

4、播放的先后顺序“变形”面板：对选定对象执行缩放、旋转、倾斜和创建副本的操作“动作”面板：方便使用Flash的脚本编程语言ActionScript而专门提供的操作界面“组件”面板：动作集合3.2基本绘图工具（工具箱）选择工具部分选取工具直线工具套索工具钢笔工具矩形工具铅笔工具刷子工具任意变形工具渐变变形工具墨水瓶工具与颜料桶工具滴管工具橡皮擦工具文本工具3.3基本动画制作基本动画类型特点逐帧动画对每帧画进行控制保存每一帧的数据形状补间动画保存帧之间不同的数据在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形

5、状或绘制另一个形状动作补间动画一个对象在两个关键帧分别定义不同的属性并在两个关键帧之间建立运动渐变关系遮罩动画遮罩层的操作(水波、万花筒、百页窗、放大镜、望远镜)引导路径动画自定义运动路径3.3.1逐帧动画方法与实例创建逐帧动画的几种方法：1．用导入的静态图片建立逐帧动画用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画。2．绘制矢量逐帧动画用鼠标或压感笔在场景中一帧帧的画出帧内容。3．文字逐帧动画用文字作帧中的元件，实现文字跳跃、旋转等特效。4．指令逐帧动画在时间帧面板上，逐帧写入动

6、作脚本语句来完成元件的变化。5．导入序列图像可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift3D等）产生的动画序列。3.3.1逐帧动画方法与实例例1：奔驰的汽车步骤1：新建一个大小为550*400的动画文件，在第1帧处按F6插入关键桢。步骤2：选择“文件

7、导入

8、导入到舞台”，将小汽车的图片导入到舞台上步骤3：单击第2帧，插入关键桢(F6)，选中舞台上的小汽车并水平平移一段距离。步骤4：单击第3帧，插入关键桢(F6)，选中舞台上的小汽车继续水平平移一段距离。步骤5：按照3和4的步

9、骤重复几次直至小骑车平移到最右边。步骤6：同时按下Ctrl+回车键，即可观看最后的动画效果。3.3.1逐帧动画方法与实例例2：奔驰的骏马----（导入连续图片）步骤1：新建一个影片文档，在“属性”面板上设置文件大小为460×290像素，“背景色”为白色。如下图所示。3.3.1逐帧动画方法与实例步骤2：创建背景图层。将当前图层重命名为“背景”，选择第一帧，选择菜单命令“文件

10、导入

11、导入到舞台…”，将背景图片导入舞台中，在第8帧处按F5键插入普通帧，使帧内容延续到第8帧。步骤3：导入素材到库。选择菜单命令“文件

12、导

13、入

14、导入到库…”，在弹出的对话框中找到素材所在的文件夹，按Ctrl+A，把素材全部选中，再点击右下角的“打开”按钮，这样所有的素材都导入到库中。如左图所示。3.3.1逐帧动画方法与实例步骤4：将马的图片添加到舞台上。插入一个新的图层并选中第1帧，单击库里名为“马1”的图形元件，按住鼠标左键拖动到舞台上，然后释放鼠标，这样“马1”图形就拖到舞台上了。选中第2帧，按F7键插入7个空白关键帧，依次在各个空白关键帧上，分别从库里拖出“马2”、“马3”、“马4”、“马5”、“马6”、“马7”、“马8”到舞台上，时间轴上所

15、有空白关键帧都变成关键帧了。下图为导入的图片序列。3.3.1逐帧动画方法与实例步骤5：调整对象位置。单击“时间轴”面板下方的“编辑多个帧”按钮，再单击“修改绘图纸标记”按钮，在弹出的菜单中选择“绘制全部”命令。最后执行“编辑”菜单下的“全选”命令，此时时间轴和场景效果。此时时间轴和场景效果如下图所示。步骤6：测试存盘。3.3.2形状补间动画实例例：变形文字步骤1：新建一个文档。在“属性”面板中设置影片的大小为500×400像素，背景色为白色。步骤2：选中“工具栏”中的“文本工具”，在舞台上单击并输入大写字母“A

16、”，选中字母“A”，在文本“属性”面板中设置字体为“黑体”、字号“96”、“粗体”、颜色为“红色”（#FF0000）。步骤3：在第10、20、30帧处分别按F6键建立关键帧，用“文本工具”将第10帧的文字改为“B”、颜色改为“绿色”（#00FF00），将第20帧的文字改为“C”、颜色改为“蓝色”（#0000FF），将第30帧的文字改为“D”、颜色改为“黄色”（#FFFF00）。3.3.