电子教案(第6章第1节)

1、网页设计实例制作,第6章第1节,网页设计实例制作,二维动画制作,厦门财经职业学校 项慧芳,学习目标,了解网页构思及组成 掌握使用Flash MX制作网页的技巧 提高Flash MX软件的综合应用能力 培养使用Flash MX软件制作动画的相关经验。,项目制作厦门旅游网,介绍厦门的人文景观及风景名胜 小型网站，在3课时内完成 提供素材： 图片信息（厦门的主要风光图片） 文字信息（厦门概况、景点、人文） 该网站至少3页以上。,作品构思,厦门是个海滨城市，因此网页主色调采用蓝色，应用不同深浅的蓝色块，使其富于变化。 作为一个网站，必须要由一个主页和若干子页组成，并且保证各网页的风格一致。 作为一个旅

2、游网，就要有冲击力吸引网民的眼球，一开场就使用较多的动画，利用跳跃的画面，流动的线条来锁定网民的视线，因此考虑制作一个引导页。,网站构成,引导页：网站的开场，制作许多动画效果吸引网民的眼球，并通过将该网页的主要内容或信息展示出来。 主页：通过醒目的4个大按钮，将网站的内容以画龙点睛的方式表现出来。 文字页：使用大量的文字介绍厦门概况、人文、景观。 图片页：以图片的方式将厦门的优美风光展现出来。,制作网站的步骤,阅读素材，确定主题，作品构思 根据题意要求，确定各网页的主要内容，使用哪些动画表示 将各网页链接，合成网站,制作时应注意的问题,主题鲜明，风格统一； 结构合理、规范； 色彩和谐； 导航合

3、理； 尽量将所学的内容都运用到网站制作中。,网站的制作,基本元件 引 导 页 主 页 文 字 页 图 片 页 合成网站,基本元件的制作,背景元件 Logo元件 环形齿轮元件 泡泡装饰元件 返回按钮元件,基本元件的制作背景元件,采用深浅不同的蓝色系列，以时尚的线条突出整个网页的活力。使用绘图工具、箭头工具和着色工具完成。 操作步骤：绘制矩形框划分成若干小矩形框填充小矩形框去掉线条放大图形 效果图：,基本元件的制作Logo元件,采用条形码形式，以简洁明朗的黑色线条表现其内在含义。使用绘图工具、箭头工具和文字工具完成。 操作步骤：绘制黑色的矩形块扣出条形码形状文字装饰 效果图：,基本元件的制作环形齿

4、轮元件,使用白色绘制镂空式的不规则环形齿轮，并制作旋转的运动渐变动画。 操作步骤：绘制4个不等距同心圆划分同心圆删除部分线条制作影片剪辑,效果图：,基本元件的制作泡泡装饰,圆形与环形齿轮呼应，使用该装饰能使整个页面更加活泼并能弥补网页上的空白部分。使用绘图工具绘制泡泡，并制作引导线动画和运动渐变动画。 操作步骤：绘制蓝色渐变填充的无边框正圆绘制白色无边框椭圆制作影片剪辑(使泡泡颜色渐淡，并垂直向上或曲线向上运动)。 泡泡效果图：,基本元件的制作返回按钮,在“泡泡”图形元件的基础上制作，与“泡泡装饰”互相对应。有多个网页，就需要能够实现不同网页间的跳转，使用按钮元件可以很好的实现这个功能。 操作

5、步聚：新建按钮元件在各帧放入泡泡图形添加文字。 效果图：,引导页的制作,新建文件及制作背景 旋转的Loading动画 黑色布幕 装饰线条移动 图片滚动条 动态Welcome 环形齿轮按钮 修饰页面,引导页的制作新建文件及制作背景,新建文件： 1.设置文档尺寸大小为 778 像素430 像素，背景色为黑色，文件名为“loading.fla”。 2.将 “element.fla”文件所有元件，作为库导入到当前文件中。 制作背景： 1.将“背景”元件拖到场景中央。 2.延长时间线至第 150 帧处，即可看到背景的整体效果。锁定图层。,引导页的制作旋转的Loading动画,制作运动渐变动画，将“loa

6、ding”字样采用即对称又富有变化的旋转方式吸引网民的视线。 操作步骤：输入文字“loading”并打散渐变填充文字并制作阴影将每个字母转换成图形元件分别制作每个字母的运动渐变效果。 效果图：,引导页的制作黑色布幕,绘制一块黑色布幕，将其制作成运动渐变动画，使黑色布幕自上而下拉开，进入到梦幻般的蓝色，有一种豁然开朗的效果。 操作步骤：绘制黑色无边框矩形将矩形修改成布幕效果将布幕转换成图形元件制作自上而下拉开的运动渐变。,效果图：,引导页的制作移动装饰线条,用白色绘制上下两组线条，上下两组线条数量不一致，使其富于变化，并将其制作成运动渐变动画，分别从画面两侧进入视线，展现出页面的动感，并由此引出

7、图片滚动条。 操作步骤：分别绘制间距不同的3条白线和4条白线的图形元件制作元件从画面两侧进入视线的运动渐变。 效果图：,引导页的制作图片滚动条,导入素材中准备的风光图片资料，制作“图片滚动效果”的影片剪辑，然后制作遮罩层动画，使图片在指定范围内循环出现。 操作步聚：导入图片将其打散并处理成图示效果几张处理后的图片排列整齐制作图片滚动的影片剪辑制作平行四边形的遮罩层。 效果图：,引导页的制作动态Welcome,添加白色的“Welcome”字样，制作从大到小，从浅入深的运动渐变动画，增加网页的动态效果，吸引网民，对整个页面也起到很好的装饰作用。 操作步骤：输入文字并打散创建帧帧动画，每隔5帧改变一

8、个字母的位置设置Alpha值，使文字颜色渐淡。 效果图：,引导页的制作环形齿轮按钮,利用装饰的环形齿轮作为按钮，实现不同网页间的跳转，同时，又将环形齿轮附以变化，增加了动感，也使网页更加简捷、明快。 操作步骤：在按钮元件的各帧中插入静态环将“指针经过”帧修改为动态环插入文字图层。,效果图：,引导页的制作修饰页面,可根据自己的兴趣爱好对页面进行一些装饰，特别是针对页面空白处进行装饰，使得页面看起来比较丰满。 效果图：,主页的制作,新建文件及制作背景 同心圆线条装饰页面 网格装饰线 制作按钮 修饰页面,主页的制作新建文件及制作背景,新建文件： 1.设置文档尺寸大小为 778 像素430 像素，背景

9、色为黑色，文件名为“index.fla”。 2.将 “element.fla”文件所有元件，作为库导入到当前文件中。 制作背景： 将“背景”元件拖到场景中央。,主页的制作同心圆线条装饰页面,使用绘图工具，采用白色绘制与环形齿轮类似的圆来装饰页面，保持整个网站风格的一致性又富于变化。 操作步骤：绘制6个间距不同的同心圆绘制2条线条处理图形。 效果图：,主页的制作网格装饰线,使用绘图工具绘制一些网格线，并设置Alpha值，与引导页的流动线条相呼应，填充整个页面，使其丰满而不空洞。 操作步骤：绘制网格处理图形设置Alpha值 效果图：,主页的制作制作按钮,作为主页，就需要将展现整个网站的主要内容，并

10、能实现不同网页之间的跳转。制作4个按钮，采用非常醒目的色调，使网民一目了然。 操作步骤：新建按钮，绘制圆角矩形将边框与矩形稍微错开添加文字。 效果图：,主页的制作修饰页面,装饰主要是填充网页的空白处，具体装饰对象可以根据自己的喜好进行选择，但注意网页风格的一致性。 效果图：,文字页的制作,新建文件及制作背景 添加文字 制作按钮 装饰页面,文字页的制作新建文件及制作背景,新建文件： 1.设置文档尺寸大小为 778 像素430 像素，背景色为黑色，文件名为“text.fla”。 2.将 “element.fla”文件所有元件，作为库导入到当前文件中。 制作背景： 1.将“背景”元件拖到场景中央。

11、2.延长时间线至第3 帧处，即可看到背景的整体效果。锁定图层。,文字页的制作添加文字,因为文字内容较多，文字的显示采用动态多行文本框结合滚动条组件来显示文字内容，使得每页的文字内容更加充实，另外因为包含“厦门概况”、“厦门人文”及“厦门景点”三个方面的内容，因此，采用3页（即3个不同的关键帧），并将每帧的动作脚本设置为“stop()”，再利用按钮来进行跳转。,文字页的制作添加文字,操作步骤：绘制2个圆角矩形虚线边框大圆角矩形边框内嵌入一个略小的动态文本，输入文字动态文本框内添加滚动条组件为帧添加动作。 效果图：,文字页的制作制作按钮,制作两个按钮，一个用来返回到主页，另一个用来控制不同文字页间

12、的切换，要设置该按钮的动作脚本。 操作步骤：将返回按钮置于右下部制作播放按钮，为其添加动作。 效果图：,文字页的制作装饰页面,可以根据自己的喜好对页面进行适当的修饰，如可在页面中添加动态环、泡泡等装饰。 效果图：,图片页的制作,新建文件 制作背景 波浪动画 制作按钮,图片页的制作新建文件,操作步骤： 1.设置文档尺寸大小为 778 像素430 像素，背景色为黑色，文件名为“photo.fla”。 2.将 “element.fla”文件所有元件，作为库导入到当前文件中。,图片页的制作制作背景,操作步骤： 1.将“背景”元件拖到场景中央。 2.将“静态环”元件拖到场景中间偏右的地方，锁定图层。 效

13、果图：,图片页的制作波浪动画,用流动的波浪增加网页的动感，也呼应了厦门作为海滨城市的特点。利用绘图工具绘制波浪图形元件，并制作运动渐变动画，使其呈现波动的效果。 操作步骤：绘制波浪状图形水平翻转置于顶部制作运动渐变动画。,效果图：,图片页的制作制作按钮,制作6个按钮，1个用来返回主页，另5个制作成图片按钮，当鼠标经过它们时，在“静态环”内会显示其放大的图片效果。将图片处理成圆形，并将5个按钮沿着环形齿轮排开，保持网页风格一致性。 操作步骤：导入图片转换成按钮元件图片处理成圆形“指针经过”帧多放置一个放大和圆形图片将处理完的各图片按钮沿着齿轮装饰圈排开。,图片页的制作制作按钮,效果图：,合成网站,组合文件 将小组中每个人制作完成的动画文件，作为场景加入到最终的成品文件中。这儿只需要在成品文件中建立4个场景，并依次使用复制、粘帖功能即可。 设置链接 为成品文件中的各按钮和有关帧添加动作，使各场景的网页文件能方便地实现快速跳转。 导出文件 将成品文件导出成HTML文件格