网页设计实例制作 第6章第1节 网页设计实例制作 《二维动画制作》 厦门财经职业学校项慧芳 学习目标 了解网页构思及组成 掌握使用 Flash MX 制作网页的技巧 提高 Flash MX 软件的综合应用能力 培养使用 Flash MX 软件制作动画的相关经验。 项目 —— 制作厦门旅游网 介绍厦门的人文景观及风景名胜 小型网站，在3 3 课时内完成 提供素材：图片信息（厦门的主要风光图片）文字信息（厦门概况、景点、人文） 该网站至少3 3 页以上。 作品构思 厦门是个海滨城市，因此网页主色调采用蓝色，应用不同深浅的蓝色块，使其富于变化。 作为一个网站，必须要由一个主页和若干子页组成，并且保证各网页的风格一致。 作为一个旅游网，就要有冲击力吸引网民的眼球，一开场就使用较多的动画，利用跳跃的画面，流动的线条来锁定网民的视线，因此考虑制作一个引导页。制作网站的步骤 阅读素材，确定主题，作品构思 根据题意要求，确定各网页的主要内容，使用哪些动画表示 将各网页链接，合成网站 制作时应注意的问题 主题鲜明，风格统一； 结构合理、规范； 色彩和谐； 导航合理； 尽量将所学的内容都运用到网站制作中。
网站的制作 基本元件 引 导 页 主页 文 字 页 图 片 页 合成网站 基本元件的制作 背景元件 Logo 元件 环形齿轮元件 泡泡装饰元件 返回按钮元件 基本元件的制作 ——背景元件 采用深浅不同的蓝色系列，以时尚的线条突出整个网页的活力。使用绘图工具、箭头工具和着色工具完成。 操作步骤：绘制矩形框－> > 划分成若干小矩形框－> > 填充小矩形框－> > 去掉线条－> > 放大图形 效果图： 基本元件的制作 ——Logo元件 采用条形码形式，以简洁明朗的黑色线条表现其内在含义。使用绘图工具、箭头工具和文字工具完成。 操作步骤：绘制黑色的矩形块－> > 扣出条形码形状－> > 文字装饰 效果图： 基本元件的制作 ——环形齿轮元件使用白色绘制镂空式的不规则环形齿轮，并制作旋转的运动渐变动画。 操作步骤：绘制4 4 个不等距同心圆－> > 划分同心圆－> > 删除部分线条－> > 制作影片剪辑效果图： 基本元件的制作 ——泡泡装饰 圆形与环形齿轮呼应，使用该装饰能使整个页面更加活泼并能弥补网页上的空白部分。
使用绘图工具绘制泡泡，并制作引导线动画和运动渐变动画。 操作步骤：绘制蓝色渐变填充的无边框正圆－> > 绘制白色无边框椭圆－> > 制作影片剪辑 ) 。 泡泡效果图： 基本元件的制作 ——返回按钮 在“泡泡”图形元件的基础上制作，与“泡泡装饰”互相对应。有多个网页，就需要能够实现不同网页间的跳转，使用按钮元件可以很好的实现这个功能。 操作步聚：新建按钮元件－> > 在各帧放入泡泡图形－> > 添加文字。 效果图： 引导页的制作 新建文件及制作背景 旋转的 Loading 动画 黑色布幕 装饰线条移动 图片滚动条 动态 Welcome 环形齿轮按钮 修饰页面 引导页的制作 ——新建文件 及制作背景 新建文件： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ loading.fla” 。
2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。 制作背景： 1. 将“背景”元件拖到场景中央。 2. 延长时间线至第 150 帧处，即可看到背景的整体效果。锁定图层。 引导页的制作 ——旋转的Loading动画制作运动渐变动画，将“ loading” 字样采用即对称又富有变化的旋转方式吸引网民的视线。 操作步骤：输入文字“ loading” 并打散－> > 渐变填充文字并制作阴影－> > 将每个字母转换成图形元件－> > 分别制作每个字母的运动渐变效果。 效果图： 引导页的制作 ——黑色布幕 绘制一块黑色布幕，将其制作成运动渐变动画关于网页设计的文案，使黑色布幕自上而下拉开，进入到梦幻般的蓝色，有一种豁然开朗的效果。 操作步骤：绘制黑色无边框矩形－> > 将矩形修改成布幕效果－> > 将布幕转换成图形元件－> > 制作自上而下拉开的运动渐变。
效果图： 引导页的制作 ——移动装饰线条 用白色绘制上下两组线条，上下两组线条数量不一致，使其富于变化，并将其制作成运动渐变动画，分别从画面两侧进入视线，展现出页面的动感，并由此引出图片滚动条。 操作步骤：分别绘制间距不同的3 3 条白线和4 4条白线的图形元件－> > 制作元件从画面两侧进入视线的运动渐变。 效果图： 引导页的制作 ——图片滚动条 导入素材中准备的风光图片资料，制作“图片滚动效果”的影片剪辑，然后制作遮罩层动画，使图片在指定范围内循环出现。 操作步聚：导入图片将其打散并处理成图示效果－> > 几张处理后的图片排列整齐－> > 制作图片滚动的影片剪辑－> > 制作平行四边形的遮罩层。 效果图： 引导页的制作 ——动态Welcome 添加白色的“ Welcome” 字样，制作从大到小，从浅入深的运动渐变动画，增加网页的动态效果，吸引网民，对整个页面也起到很好的装饰作用。 操作步骤：输入文字并打散－> > 创建帧帧动画，每隔5 5 帧改变一个字母的位置－> > 设置 Alpha 值，使文字颜色渐淡。
效果图： 引导页的制作 ——环形齿轮按钮 利用装饰的环形齿轮作为按钮，实现不同网页间的跳转，同时，又将环形齿轮附以变化，增加了动感，也使网页更加简捷、明快。 操作步骤：在按钮元件的各帧中插入静态环－> > 将“指针经过”帧修改为动态环－> > 插入文字图层。 效果图： 引导页的制作 ——修饰页面 可根据自己的兴趣爱好对页面进行一些装饰，特别是针对页面空白处进行装饰，使得页面看起来比较丰满。 效果图： 主页的制作 新建文件及制作背景 同心圆线条装饰页面 网格装饰线 制作按钮 修饰页面主页的制作 ——新建文件 及制作背景 新建文件： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ index.fla” 。 2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。 制作背景：将“背景”元件拖到场景中央。
主页的制作 ——同心圆线条装饰页面 使用绘图工具，采用白色绘制与环形齿轮类似的圆来装饰页面，保持整个网站风格的一致性又富于变化。 操作步骤：绘制6 6 个间距不同的同心圆－> > 绘制2 2条线条－> > 处理图形。 效果图： 主页的制作 ——网格装饰线 使用绘图工具绘制一些网格线，并设置 Alpha 值，与引导页的流动线条相呼应，填充整个页面关于网页设计的文案，使其丰满而不空洞。 操作步骤：绘制网格－> > 处理图形－> > 设置 Alpha 值 效果图： 主页的制作 ——制作按钮 作为主页，就需要将展现整个网站的主要内容，并能实现不同网页之间的跳转。制作4 4 个按钮，采用非常醒目的色调，使网民一目了然。 操作步骤：新建按钮，绘制圆角矩形－> > 将边框与矩形稍微错开－> > 添加文字。 效果图： 主页的制作 ——修饰页面 装饰主要是填充网页的空白处，具体装饰对象可以根据自己的喜好进行选择，但注意网页风格的一致性。
效果图： 文字页的制作 新建文件及制作背景 添加文字 制作按钮 装饰页面文字页的制作 ——新建文件 及制作背景新建文件： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ text.fla” 。 2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。 制作背景： 1. 将“背景”元件拖到场景中央。 2. 延长时间线至第 3 帧处，即可看到背景的整体效果。锁定图层。 文字页的制作 ——添加文字 因为文字内容较多，文字的显示采用动态多行文本框结合滚动条组件来显示文字内容，使得每页的文字内容更加充实，另外因为包含“厦门概况”、“厦门人文”及“厦门景点”三个方面的内容，因此，采用3 3 页（即3 3 个不同的关键帧），并将每帧的动作脚本设置为“ stop” ，再利用按钮来进行跳转。
文字页的制作 ——添加文字 操作步骤：绘制2 2 个圆角矩形虚线边框－> > 大圆角矩形边框内嵌入一个略小的动态文本，输入文字－> > 动态文本框内添加滚动条组件－> > 为帧添加动作。 效果图： 文字页的制作 ——制作按钮 制作两个按钮，一个用来返回到主页，另一个用来控制不同文字页间的切换，要设置该按钮的动作脚本。 操作步骤：将返回按钮置于右下部－> > 制作播放按钮，为其添加动作。 效果图： 文字页的制作 ——装饰页面 可以根据自己的喜好对页面进行适当的修饰，如可在页面中添加动态环、泡泡等装饰。 效果图： 图片页的制作 新建文件 制作背景 波浪动画 制作按钮 图片页的制作 ——新建文件 操作步骤： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ photo.fla” 。 2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。
图片页的制作 ——制作背景 操作步骤： 1. 将“背景”元件拖到场景中央。 2. 将“静态环”元件拖到场景中间偏右的地方，锁定图层。 效果图： 图片页的制作 ——波浪动画 用流动的波浪增加网页的动感，也呼应了厦门作为海滨城市的特点。利用绘图工具绘制波浪图形元件，并制作运动渐变动画，使其呈现波动的效果。 操作步骤：绘制波浪状图形－> > 水平翻转置于顶部－> > 制作运动渐变动画。效果图： 图片页的制作 ——制作按钮 制作6 6 个按钮，1 1 个用来返回主页，另5 5 个制作成图片按钮，当鼠标经过它们时，在“静态环”内会显示其放大的图片效果。将图片处理成圆形，并将5 5 个按钮沿着环形齿轮排开，保持网页风格一致性。 操作步骤：导入图片－> > 转换成按钮元件－> > 图片处理成圆形－ >“ 指针经过”帧多放置一个放大和圆形图片－> > 将处理完的各图片按钮沿着齿轮装饰圈排开。
图片页的制作 ——制作按钮 效果图： 合成网站 1. 组合文件 将小组中每个人制作完成的动画文件，作为场景加入到最终的成品文件中。这儿只需要在成品文件中建立4 4 个场景，并依次使用复制、粘帖功能即可。 2. 设置链接 为成品文件中的各按钮和有关帧添加动作，使各场景的网页文件能方便地实现快速跳转。 3. 导出文件 将成品文件导出成 HTML 文件格式，为使网页效果更佳，可多次预览、微调。 评价标准 主题明确、健康； 布局合理，结构合理、规范； 色彩搭配合理、美观，设计新颖、有创意； 导航美观、醒目、转换合理。 归纳小结 通过制作旅游网站，掌握 Flash MX 动画制作的基本操作方法，培养 Flash MX 软件的综合应用的相关经验。 学会利用辅助学习软件自主探究的学习方法，并能够互相学习，取长补短。课后作业 搜集素材， 根据实例，制作个人网站。要求至少制作3 3 页以上。
网站的制作 基本元件 引 导 页 主页 文 字 页 图 片 页 合成网站 基本元件的制作 背景元件 Logo 元件 环形齿轮元件 泡泡装饰元件 返回按钮元件 基本元件的制作 ——背景元件 采用深浅不同的蓝色系列，以时尚的线条突出整个网页的活力。使用绘图工具、箭头工具和着色工具完成。 操作步骤：绘制矩形框－> > 划分成若干小矩形框－> > 填充小矩形框－> > 去掉线条－> > 放大图形 效果图： 基本元件的制作 ——Logo元件 采用条形码形式，以简洁明朗的黑色线条表现其内在含义。使用绘图工具、箭头工具和文字工具完成。 操作步骤：绘制黑色的矩形块－> > 扣出条形码形状－> > 文字装饰 效果图： 基本元件的制作 ——环形齿轮元件使用白色绘制镂空式的不规则环形齿轮，并制作旋转的运动渐变动画。 操作步骤：绘制4 4 个不等距同心圆－> > 划分同心圆－> > 删除部分线条－> > 制作影片剪辑效果图： 基本元件的制作 ——泡泡装饰 圆形与环形齿轮呼应，使用该装饰能使整个页面更加活泼并能弥补网页上的空白部分。
使用绘图工具绘制泡泡，并制作引导线动画和运动渐变动画。 操作步骤：绘制蓝色渐变填充的无边框正圆－> > 绘制白色无边框椭圆－> > 制作影片剪辑 ) 。 泡泡效果图： 基本元件的制作 ——返回按钮 在“泡泡”图形元件的基础上制作，与“泡泡装饰”互相对应。有多个网页，就需要能够实现不同网页间的跳转，使用按钮元件可以很好的实现这个功能。 操作步聚：新建按钮元件－> > 在各帧放入泡泡图形－> > 添加文字。 效果图： 引导页的制作 新建文件及制作背景 旋转的 Loading 动画 黑色布幕 装饰线条移动 图片滚动条 动态 Welcome 环形齿轮按钮 修饰页面 引导页的制作 ——新建文件 及制作背景 新建文件： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ loading.fla” 。
2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。 制作背景： 1. 将“背景”元件拖到场景中央。 2. 延长时间线至第 150 帧处，即可看到背景的整体效果。锁定图层。 引导页的制作 ——旋转的Loading动画制作运动渐变动画，将“ loading” 字样采用即对称又富有变化的旋转方式吸引网民的视线。 操作步骤：输入文字“ loading” 并打散－> > 渐变填充文字并制作阴影－> > 将每个字母转换成图形元件－> > 分别制作每个字母的运动渐变效果。 效果图： 引导页的制作 ——黑色布幕 绘制一块黑色布幕，将其制作成运动渐变动画关于网页设计的文案，使黑色布幕自上而下拉开，进入到梦幻般的蓝色，有一种豁然开朗的效果。 操作步骤：绘制黑色无边框矩形－> > 将矩形修改成布幕效果－> > 将布幕转换成图形元件－> > 制作自上而下拉开的运动渐变。
效果图： 引导页的制作 ——移动装饰线条 用白色绘制上下两组线条，上下两组线条数量不一致，使其富于变化，并将其制作成运动渐变动画，分别从画面两侧进入视线，展现出页面的动感，并由此引出图片滚动条。 操作步骤：分别绘制间距不同的3 3 条白线和4 4条白线的图形元件－> > 制作元件从画面两侧进入视线的运动渐变。 效果图： 引导页的制作 ——图片滚动条 导入素材中准备的风光图片资料，制作“图片滚动效果”的影片剪辑，然后制作遮罩层动画，使图片在指定范围内循环出现。 操作步聚：导入图片将其打散并处理成图示效果－> > 几张处理后的图片排列整齐－> > 制作图片滚动的影片剪辑－> > 制作平行四边形的遮罩层。 效果图： 引导页的制作 ——动态Welcome 添加白色的“ Welcome” 字样，制作从大到小，从浅入深的运动渐变动画，增加网页的动态效果，吸引网民，对整个页面也起到很好的装饰作用。 操作步骤：输入文字并打散－> > 创建帧帧动画，每隔5 5 帧改变一个字母的位置－> > 设置 Alpha 值，使文字颜色渐淡。
效果图： 引导页的制作 ——环形齿轮按钮 利用装饰的环形齿轮作为按钮，实现不同网页间的跳转，同时，又将环形齿轮附以变化，增加了动感，也使网页更加简捷、明快。 操作步骤：在按钮元件的各帧中插入静态环－> > 将“指针经过”帧修改为动态环－> > 插入文字图层。 效果图： 引导页的制作 ——修饰页面 可根据自己的兴趣爱好对页面进行一些装饰，特别是针对页面空白处进行装饰，使得页面看起来比较丰满。 效果图： 主页的制作 新建文件及制作背景 同心圆线条装饰页面 网格装饰线 制作按钮 修饰页面主页的制作 ——新建文件 及制作背景 新建文件： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ index.fla” 。 2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。 制作背景：将“背景”元件拖到场景中央。
主页的制作 ——同心圆线条装饰页面 使用绘图工具，采用白色绘制与环形齿轮类似的圆来装饰页面，保持整个网站风格的一致性又富于变化。 操作步骤：绘制6 6 个间距不同的同心圆－> > 绘制2 2条线条－> > 处理图形。 效果图： 主页的制作 ——网格装饰线 使用绘图工具绘制一些网格线，并设置 Alpha 值，与引导页的流动线条相呼应，填充整个页面关于网页设计的文案，使其丰满而不空洞。 操作步骤：绘制网格－> > 处理图形－> > 设置 Alpha 值 效果图： 主页的制作 ——制作按钮 作为主页，就需要将展现整个网站的主要内容，并能实现不同网页之间的跳转。制作4 4 个按钮，采用非常醒目的色调，使网民一目了然。 操作步骤：新建按钮，绘制圆角矩形－> > 将边框与矩形稍微错开－> > 添加文字。 效果图： 主页的制作 ——修饰页面 装饰主要是填充网页的空白处，具体装饰对象可以根据自己的喜好进行选择，但注意网页风格的一致性。
效果图： 文字页的制作 新建文件及制作背景 添加文字 制作按钮 装饰页面文字页的制作 ——新建文件 及制作背景新建文件： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ text.fla” 。 2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。 制作背景： 1. 将“背景”元件拖到场景中央。 2. 延长时间线至第 3 帧处，即可看到背景的整体效果。锁定图层。 文字页的制作 ——添加文字 因为文字内容较多，文字的显示采用动态多行文本框结合滚动条组件来显示文字内容，使得每页的文字内容更加充实，另外因为包含“厦门概况”、“厦门人文”及“厦门景点”三个方面的内容，因此，采用3 3 页（即3 3 个不同的关键帧），并将每帧的动作脚本设置为“ stop” ，再利用按钮来进行跳转。
文字页的制作 ——添加文字 操作步骤：绘制2 2 个圆角矩形虚线边框－> > 大圆角矩形边框内嵌入一个略小的动态文本，输入文字－> > 动态文本框内添加滚动条组件－> > 为帧添加动作。 效果图： 文字页的制作 ——制作按钮 制作两个按钮，一个用来返回到主页，另一个用来控制不同文字页间的切换，要设置该按钮的动作脚本。 操作步骤：将返回按钮置于右下部－> > 制作播放按钮，为其添加动作。 效果图： 文字页的制作 ——装饰页面 可以根据自己的喜好对页面进行适当的修饰，如可在页面中添加动态环、泡泡等装饰。 效果图： 图片页的制作 新建文件 制作背景 波浪动画 制作按钮 图片页的制作 ——新建文件 操作步骤： 1. 设置文档尺寸大小为 778 像素 × 430 像素，背景色为黑色，文件名为“ photo.fla” 。 2. 将 “ element.fla” 文件所有元件，作为库导入到当前文件中。
图片页的制作 ——制作背景 操作步骤： 1. 将“背景”元件拖到场景中央。 2. 将“静态环”元件拖到场景中间偏右的地方，锁定图层。 效果图： 图片页的制作 ——波浪动画 用流动的波浪增加网页的动感，也呼应了厦门作为海滨城市的特点。利用绘图工具绘制波浪图形元件，并制作运动渐变动画，使其呈现波动的效果。 操作步骤：绘制波浪状图形－> > 水平翻转置于顶部－> > 制作运动渐变动画。效果图： 图片页的制作 ——制作按钮 制作6 6 个按钮，1 1 个用来返回主页，另5 5 个制作成图片按钮，当鼠标经过它们时，在“静态环”内会显示其放大的图片效果。将图片处理成圆形，并将5 5 个按钮沿着环形齿轮排开，保持网页风格一致性。 操作步骤：导入图片－> > 转换成按钮元件－> > 图片处理成圆形－ >“ 指针经过”帧多放置一个放大和圆形图片－> > 将处理完的各图片按钮沿着齿轮装饰圈排开。
图片页的制作 ——制作按钮 效果图： 合成网站 1. 组合文件 将小组中每个人制作完成的动画文件，作为场景加入到最终的成品文件中。这儿只需要在成品文件中建立4 4 个场景，并依次使用复制、粘帖功能即可。 2. 设置链接 为成品文件中的各按钮和有关帧添加动作，使各场景的网页文件能方便地实现快速跳转。 3. 导出文件 将成品文件导出成 HTML 文件格式，为使网页效果更佳，可多次预览、微调。 评价标准 主题明确、健康； 布局合理，结构合理、规范； 色彩搭配合理、美观，设计新颖、有创意； 导航美观、醒目、转换合理。 归纳小结 通过制作旅游网站，掌握 Flash MX 动画制作的基本操作方法，培养 Flash MX 软件的综合应用的相关经验。 学会利用辅助学习软件自主探究的学习方法，并能够互相学习，取长补短。课后作业 搜集素材， 根据实例，制作个人网站。要求至少制作3 3 页以上。
收藏