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

1、基于工作过程的网页设计与制作教程,情境2：书法家庄辉个人网站动画的设计,基于工作过程的 网页设计与制作教程,第五章 网页动画的快速设计与制作,1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估,项目展示与项目目标,1项目展示与项目目标,认识Flash Swish软件的界面 掌握Flash Swish软件制作动画的基本方法 掌握Flash Swish软件对动画的控制方法 掌握文字动画的淡出效果的制作方法,关键知识点一：Swish软件界面认识,2. 项目资讯,菜单栏,插入栏,控制栏,轮廓面板,工具栏,电影场景,属性栏,3. 项目计划与决策,书法家庄

2、辉个人网站动画主要是以反映褐色国画效果图片为背景，制作“中国书法家协会会员”、“国家高级美术师”、，“江苏省淮安书画院专职画师”三组文字动画。,4. 项目实施,1）执行“开始”“新建”命令，在场景中创建一个电影，在属性栏“电影”属性面板中输入动画的宽为996像素，高为185像素，具体参数如图所示。,4. 项目实施,2）执行“插入”“图像”命令，在“打开”对话框中选择素材文件夹中的“网站背景1.jpg”后点击“打开”按钮，图片就插入到场景中了，设置电影的变形属性标签，将锚点设置为“左上”，具体设置如左图所示，图像插入的效果如右图所示。,4. 项目实施,3）点击工具栏中的按钮（执行“插入”“文本”

3、命令），然后在文本输入区中输入“中国书法家协会会员”文字，调整文字的位置，设置文本的字体为“方正大黑简体”（也可以设置为“黑体”），字体大小为36点，颜色为黑色，为如图所示。,4. 项目实施,4）在场景中选中“中国书法家协会会员”文字对象，执行“插入”“效果”“核心效果”“变形”命令，然后浏览时间线如图所示。,4. 项目实施,5）在控制栏中点击“播放”按钮测试一下动画效果，发现文字动画变化太快，用鼠标左键放在图5-18中的第20帧的位置拖至50帧的位置，再次测试动画，速度适中，调整过的时间线如图所示。,4. 项目实施,5）在控制栏中点击“播放”按钮测试一下动画效果，发现文字动画变化太快，用鼠标

4、左键放在图5-18中的第20帧的位置拖至50帧的位置，再次测试动画，速度适中，调整过的时间线如图所示。,4. 项目实施,6）当然大家可以给文本制作淡出的效果，用鼠标在“时间线”调板上的第60帧上点击右键执行“渐近”“淡出”命令，再次在控制栏中点击“播放”按钮测试一下动画效果，此时的时间线如图所示。,4. 项目实施,7）采用同样的方法分别输入“国家高级美术师”和“江苏省淮安书画院专职画师”两组文本，然后做同样的设置，完成三组文字的动画效果。执行“文件”“导出”“swf”命令，即可弹出“导出为swf”对话框，选择路径，输入文件名即可保存，如图所示。,4. 项目实施,如果再次插入图像将“网站背景2.jpg”、“网站背景3.jpg”、“网站背景4.jpg”、 “网站背景5.jpg”分别插入生成的动画后预览的效果如图所示。,4. 项目实施,5.项目检查与评估,课程小结,基于工作过程的 网页设计与制作教程,第五章 网