基于工作过程的网页设计与制作教程.ppt

基于工作过程的网页设计与制作教程 第五章 网页动画的快速设计与制作 项目展示与项目目标 第五章 网页动画的快速设计与制作 情境2：书法家庄辉个人网站动画的设计 基于工作过程的 网页设计与制作教程 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 1项目展示与项目目标 认识Flash Swish软件的界面 掌握Flash Swish软件制作动画的基本方法 掌握Flash Swish软件对动画的控制方法 掌握文字动画的淡出效果的制作方法 关键知识点一：Swish软件界面认识 2. 项目资讯 菜单栏 插入栏 控制栏 轮廓面板 工具栏 电影场景 属性栏 3. 项目计划与决策 书法家庄辉个人网站动画主要是以反映褐色国画效果图片为背景，制作“中国书法家协会会员”、“国家高级美术师”、，“江苏省淮安书画院专职画师”三组文字动画。 4. 项目实施 1）执行“开始”→“新建”命令，在场景中创建一个电影，在属性栏“电影”属性面板中输入动画的宽为996像素，高为185像素，具体参数如图所示。 4. 项目实施 2）执行“插入”→“图像”命令，在“打开”对话框中选择素材文件夹中的“网站背景1.jpg”后点击“打开”按钮，图片就插入到场景中了，设置电影的变形属性标签，将锚点设置为“左上”，具体设置如左图所示，图像插入的效果如右图所示。 4. 项目实施 3）点击工具栏中的按钮（执行“插入”→“文本”命令），然后在文本输入区中输入“中国书法家协会会员”文字，调整文字的位置，设置文本的字体为“方正大黑简体”（也可以设置为“黑体”），字体大小为36点，颜色为黑色，为如图所示。 4. 项目实施 4）在场景中选中“中国书法家协会会员”文字对象，执行“插入”→“效果”→“核心效果”→“变形”命令，然后浏览时间线如图所示。 4. 项目实施 5）在控制栏中点击“播放”按钮测试一下动画效果，发现文字动画变化太快，用鼠标左键放在图5-18中的第20帧的位置拖至50帧的位置，再次测试动画，速度适中，调整过的时间线如图所示。 4. 项目实施 5）在控制栏中点击“播放”按钮测试一下动画效果，发现文字动画变化太快，用鼠标左键放在图5-18中的第20帧的位置拖至50帧的位置，再次测试动画，速度适中，调整过的时间线如图所示。 4. 项目实施 6）当然大家可以给文本制作淡出的效果，用鼠标在“时间线”调板上的第60帧上点击右键执行“渐近”→“淡出”命令，再次在控制栏中点击“播放”按钮测试一下动画效果，此时的时间线如图所示。 4. 项目实施 7）采用同样的方法分别输入“国家高级美术师”和“江苏省淮安书画院专职画师”两组文本，然后做同样的设置，完成三组文字的动画效果。执行“文件”→“导出”→“swf”命令，即可弹出“导出为swf”对话框，选择路径，输入文件名即可保存，如图所示。 4. 项目实施 如果再次插入图像将“网站背景2.jpg”、“网站背景3.jpg”、“网站背景4.jpg”、 “网站背景5.jpg”分别插入生成的动画后预览的效果如图所示。 4. 项目实施 5.项目检查与评估 能制作各种Flash文字动画 熟练制作各种Flash动画 能制作简单的Flash动画 能认识Flash Swish软件的界面 Flash Swish软件制作动画的基本方法 评价项目 学习目标 课程小结 基于工作过程的 网页设计与制作教程 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估