chapter03 网页设计和Web编程教案.ppt

3.1 Flash CS3的工作环境简介 时间轴 舞台 工作区（舞台的后台 ） 常用面板 “属性”面板：舞台的下方 “对齐”面板：“窗口”|“对齐” “颜色”面板：“窗口”|“颜色” “样本”面板：颜色库面板 “信息”面板：在编辑操作的过程中为用户提供一些相关的信息。 “场景”面板：显示了当前动画的场景数量和播放的先后顺序 “变形”面板：对选定对象执行缩放、旋转、倾斜和创建副本的操作 “动作”面板：方便使用Flash的脚本编程语言ActionScript而专门提供的操作界面 “组件”面板：动作集合 3.2 基本绘图工具（工具箱） 选择工具 部分选取工具 直线工具 套索工具 钢笔工具 矩形工具 铅笔工具 3.3 基本动画制作 3.3.1 逐帧动画方法与实例 创建逐帧动画的几种方法： 1．用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画。 2．绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧帧的画出帧内容。 3．文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。 4．指令逐帧动画 在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。 5．导入序列图像 可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。 3.3.1 逐帧动画方法与实例 例1：奔驰的汽车 步骤1：新建一个大小为550*400的动画文件，在第1帧处按F6插入关键桢。 步骤2：选择“文件|导入|导入到舞台”，将小汽车的图片导入到舞台上 步骤3：单击第2帧，插入关键桢(F6) ，选中舞台上的小汽车并水平平移一段距离。 步骤4：单击第3帧，插入关键桢(F6) ，选中舞台上的小汽车继续水平平移一段距离。 步骤5：按照3和4的步骤重复几次直至小骑车平移到最右边。 步骤6：同时按下Ctrl+回车键，即可观看最后的动画效果。 3.3.1 逐帧动画方法与实例 例2：奔驰的骏马----（导入连续图片 ） 步骤1：新建一个影片文档，在“属性”面板上设置文件大小为460×290像素，“背景色”为白色。 如下图所示。 3.3.1 逐帧动画方法与实例 步骤2：创建背景图层。将当前图层重命名为“背景”，选择第一帧，选择菜单命令“文件|导入|导入到舞台…”，将背景图片导入舞台中，在第8帧处按F5键插入普通帧，使帧内容延续到第8帧。 步骤3：导入素材到库。选择菜单命令“文件|导入|导入到库…”，在弹出的对话框中找到素材所在的文件夹，按Ctrl+A，把素材全部选中，再点击右下角的“打开”按钮，这样所有的素材都导入到库中。如左图所示。 3.3.1 逐帧动画方法与实例 步骤4：将马的图片添加到舞台上。插入一个新的图层并选中第1帧，单击库里名为“马1”的图形元件，按住鼠标左键拖动到舞台上，然后释放鼠标，这样“马1”图形就拖到舞台上了。选中第2帧，按F7键插入7个空白关键帧，依次在各个空白关键帧上，分别从库里拖出“马2”、“马3”、“马4”、“马5”、“马6”、“马7”、“马8”到舞台上，时间轴上所有空白关键帧都变成关键帧了。下图为导入的图片序列。 3.3.1 逐帧动画方法与实例 步骤5：调整对象位置。单击“时间轴”面板下方的“编辑多个帧”按钮，再单击“修改绘图纸标记”按钮，在弹出的菜单中选择“绘制全部”命令。最后执行“编辑”菜单下的“全选”命令，此时时间轴和场景效果。此时时间轴和场景效果如下图所示。 步骤6：测试存盘 。 3.3.2 形状补间动画实例 例：变形文字 步骤1：新建一个文档。在“属性”面板中设置影片的大小为500×400像素，背景色为白色。 步骤2：选中“工具栏”中的“文本工具”，在舞台上单击并输入大写字母“A”，选中字母“A”，在文本“属性”面板中设置字体为“黑体”、字号“96”、“粗体”、颜色为“红色”（#FF0000）。 步骤3：在第10、20、30帧处分别按F6键建立关键帧，用“文本工具”将第10帧的文字改为“B”、颜色改为“绿色”（#00FF00），将第20帧的文字改为“C”、颜色改为“蓝色”（#0000FF），将第30帧的文字改为“D”、颜色改为“黄色”（#FFFF00）。 3.3.2 形状补间动画实例 步骤4：分别选择各关键帧的文字，选择菜单命令“修改|分离”，将各关键帧上的文字打散。 步骤5：创建形状补间动画。分别选择第1、10、20帧，将其“属性”面板中的“补间”设为“形状”。设置后时间轴如图所示。 3.3.3 动作补间动画方法与实例 两种方式： 1) 先创建好两个帧的状态，然后在两个关键帧之间建立动作补间关系。