网页动画设计与制作27页
课程专业属性
属于电脑艺术设计专业大平台多元化专业教学体系中专业岗位技能 类学习包项目课程，是专业主干核心课程。
采用单元制的教学安排，以保持本课程的职业性和专业性特色。强 调模拟专业工作流程、工作内容和工作质量指标。
由《Flash交互动画广告制作项目课程》和《HTML5交互动画广告制 作项目课程》两门紧密联系的课程组成，分别对应于横幅动画广告制 作项目和条幅扩展式交互广告制作项目专业技能，形成能力递进学习 关系，并能够较为全面地覆盖交互网页动画设计与制作的专业领域。
教学项目设计的基本结构
网页动画设计与制作项目包项目课程包括Flash交互动画广告制作项目和HTML5 交互动画广告制作项目，主要由横幅动画广告制作项目和条幅扩展式交互广告制 作项目训练课程这二类产品并行又关系紧密的课程组合。
教学项目设计的基本目标 使整个教学过程贴近实际专业工作过程，保证专业教学职业性特色。
A、Flash动画广告设计与制作项目课程
让学生通过系列项目任务训练，经由从“不会专业工作”到“会制 作型专业工作”，再到“善于做制作型专业工作”，最后到“善于 做设计与制作并举的专业工作”这一专业工作能力成长的科学路径， 最终形成相对完整的网页动画设计与制作专业岗位能力。
数码四步教学法
1 工作认知
制 作
训
单 个 实
2 项目跟做训练
练
训
项
善于探索研究的学习风格
对工作认真负责的职业操守
团队协同工作的合作精神
能够承受工作压力的忍耐品格
从专业角度为设计委托客户精心工作和服务观念
对应技能职业
通过本课程的学习以后，学生能够初步掌握网页动画设计和网页 动画交互制作的技能，具备上海市职业指导中心的“网页设计师” 三级（高级）和“多媒体作品制作师”三级（高级）技能资质标 准中的专业技能水平。
教学项目设计的基本形式
由难到易，使学生在完成项目任务中得到模拟工作岗位岗位和工作内容的体验， 使教学训练得以遵循实际专业能力形成路径、对应完成专业工作的综合要求。
教学项目设计的基本原则
项目任务的透明性、项目完成结果的可见性、项目教学过程学生情绪的控制性、 所有学生行动的参与性、教学指导意见的建设性、项目知识讲解的形象性、项 目执行主题的共识性、项目评价归纳的简约性。
能够正确进行矢量图形的绘制和声音、图像和视频元素的集成能力； 能够合理设置设计网页动画制作中的帧动画、遮罩动画和引导层动画等三 种基本动画的能力； 能够编写Flash ActionScript和JavaScript代码实现交互的能力；
能够演示并充分阐述项目设计的成果；
行为要点
严守技术标准的态度
遵守工作纪律的习惯
学习目标
让学生了解网页动画的基本形式和技术要点，并且掌握网页动画 制作工具Adobe Flash动画制作工具和Adobe Edge HTML5动画制 作工具的使用技巧，能够集成文字、声音、视频等多媒体元素， 并能够发挥创意、自主完成网页动画作品的创作。
能力目标
掌握Flash和Edge这2个主流网页动画制作工具的安装和使用方法； 能够合理选择不同的技术来制作动画来适应日趋复杂性的网页应 用平台；能够在网页动画的基础上进行一定的交互编程工作，让 网页动画和交互设计结合起来。
前序课程
《网页美术设计》、《用户界面设计》等，需要具备这些 学习包课程所赋予的专业知识和专业能力作为学习本学习 包课程的专业基础。
后续课程
《互动多媒体设计》和《多媒体互动综合创作课程》是所 有学习多媒体设计类交互动画课程综合能力的体现，能够 直接对接多媒体设计与制作的相应专业工作。
课时安排
总课时：64课时
目
3 临摹和变化训练
创 作 训
练
4 创作和设计训练
教学过程的具体形式
1 工作认知
具体工作过程及项目认知（调研、提问、报告，收集 资料）
2 项目跟做训练
分阶段渐次提高难度（跟教师制作步骤）
3 临摹和变化训练
因才施教、有选择地布置临摹稿（教师布置任务）
4 创作和设计训练
根据调研及前期经验自行设计制作产品，并完成制作 报告书（教师针对性引导）
知识目标
能够正确认识网页动画在网站上的形式和作用；能够了解不同类 型网页动画和网页动画广告的技术要点和优劣；能够掌握网页动 画创作的一般流程和流程中涉及的基本工具和操作方法
学习/训练方 法
运用数码四步教学法及项目案例设计制作程序为主的方式训练学生， 通过由易及难，由简及繁的系列专业项目训练，帮助学生具备网页 动画设计与制作的专业能力，并在项目化教学训练的过程中，理解 和掌握专业知识。
在修完本项目包课程以后，还可以参加我国工信部网页设计师和 多媒体设计师的专业技能资质认证，获得全国公认的“网页设计 师”的专业技能资质证书。更可以参加国际公认的Adobe交互设 计师资质认证，获得 “交互设计师”专业能力标准的行业认定资 质。
教学项目设计
本课程的教学项目的来源
均来自于真实的各种类型网站的典型交互动画广告案例，集中了主流网站中的典 型交互动画广告制作过程中的典型问题，以及典型解决方法。
教学项目设计的基本内容
A、Flash动画广告设计与制作项目 B、HTML5交互动画广告设计与制作项目
在A和B项目中具体主要以汽车广告制作项目制作训练课程、手风琴式交互展 示广告设计与制作项目训练课程、网页动画设计与制作训练课程等交互动画 广告制作来表现A和B项目，由易到难，由简到繁的设计制作过程。
教学内容
知识要点
了解设计交互网页动画制作的应用领域及制作 Nhomakorabea技术标准；
了解交互网页动画设计的制作流程； 熟悉交互网页动画制作中的专用术语及其代表的概念； 理解交互网页动画制作软件工具的功能和作用； 能够分析一般网页动画项目的重点难点和素材支撑；
技能要点
能够使用Flash和Edge软件工具根据设计方案正确制作交互网页动画；
（1）FLASH交互动画广告制作项目课程：32课时； （2）HTML5交互动画广告制作项目课程：32课时。
课程体系
网页美术元素设计 项目包课程
Flash交互动画广 告制作项目课程
……
专业基础课程
专业主干核心课程
网页动画设计与制 作项目包课程
行业专业岗位 技能水平认证
用户界面元素设计 项目包课程
HTML5交互动画广 告制作项目课程
属于电脑艺术设计专业大平台多元化专业教学体系中专业岗位技能 类学习包项目课程，是专业主干核心课程。
采用单元制的教学安排，以保持本课程的职业性和专业性特色。强 调模拟专业工作流程、工作内容和工作质量指标。
由《Flash交互动画广告制作项目课程》和《HTML5交互动画广告制 作项目课程》两门紧密联系的课程组成，分别对应于横幅动画广告制 作项目和条幅扩展式交互广告制作项目专业技能，形成能力递进学习 关系，并能够较为全面地覆盖交互网页动画设计与制作的专业领域。
教学项目设计的基本结构
网页动画设计与制作项目包项目课程包括Flash交互动画广告制作项目和HTML5 交互动画广告制作项目，主要由横幅动画广告制作项目和条幅扩展式交互广告制 作项目训练课程这二类产品并行又关系紧密的课程组合。
教学项目设计的基本目标 使整个教学过程贴近实际专业工作过程，保证专业教学职业性特色。
A、Flash动画广告设计与制作项目课程
让学生通过系列项目任务训练，经由从“不会专业工作”到“会制 作型专业工作”，再到“善于做制作型专业工作”，最后到“善于 做设计与制作并举的专业工作”这一专业工作能力成长的科学路径， 最终形成相对完整的网页动画设计与制作专业岗位能力。
数码四步教学法
1 工作认知
制 作
训
单 个 实
2 项目跟做训练
练
训
项
善于探索研究的学习风格
对工作认真负责的职业操守
团队协同工作的合作精神
能够承受工作压力的忍耐品格
从专业角度为设计委托客户精心工作和服务观念
对应技能职业
通过本课程的学习以后，学生能够初步掌握网页动画设计和网页 动画交互制作的技能，具备上海市职业指导中心的“网页设计师” 三级（高级）和“多媒体作品制作师”三级（高级）技能资质标 准中的专业技能水平。
教学项目设计的基本形式
由难到易，使学生在完成项目任务中得到模拟工作岗位岗位和工作内容的体验， 使教学训练得以遵循实际专业能力形成路径、对应完成专业工作的综合要求。
教学项目设计的基本原则
项目任务的透明性、项目完成结果的可见性、项目教学过程学生情绪的控制性、 所有学生行动的参与性、教学指导意见的建设性、项目知识讲解的形象性、项 目执行主题的共识性、项目评价归纳的简约性。
能够正确进行矢量图形的绘制和声音、图像和视频元素的集成能力； 能够合理设置设计网页动画制作中的帧动画、遮罩动画和引导层动画等三 种基本动画的能力； 能够编写Flash ActionScript和JavaScript代码实现交互的能力；
能够演示并充分阐述项目设计的成果；
行为要点
严守技术标准的态度
遵守工作纪律的习惯
学习目标
让学生了解网页动画的基本形式和技术要点，并且掌握网页动画 制作工具Adobe Flash动画制作工具和Adobe Edge HTML5动画制 作工具的使用技巧，能够集成文字、声音、视频等多媒体元素， 并能够发挥创意、自主完成网页动画作品的创作。
能力目标
掌握Flash和Edge这2个主流网页动画制作工具的安装和使用方法； 能够合理选择不同的技术来制作动画来适应日趋复杂性的网页应 用平台；能够在网页动画的基础上进行一定的交互编程工作，让 网页动画和交互设计结合起来。
前序课程
《网页美术设计》、《用户界面设计》等，需要具备这些 学习包课程所赋予的专业知识和专业能力作为学习本学习 包课程的专业基础。
后续课程
《互动多媒体设计》和《多媒体互动综合创作课程》是所 有学习多媒体设计类交互动画课程综合能力的体现，能够 直接对接多媒体设计与制作的相应专业工作。
课时安排
总课时：64课时
目
3 临摹和变化训练
创 作 训
练
4 创作和设计训练
教学过程的具体形式
1 工作认知
具体工作过程及项目认知（调研、提问、报告，收集 资料）
2 项目跟做训练
分阶段渐次提高难度（跟教师制作步骤）
3 临摹和变化训练
因才施教、有选择地布置临摹稿（教师布置任务）
4 创作和设计训练
根据调研及前期经验自行设计制作产品，并完成制作 报告书（教师针对性引导）
知识目标
能够正确认识网页动画在网站上的形式和作用；能够了解不同类 型网页动画和网页动画广告的技术要点和优劣；能够掌握网页动 画创作的一般流程和流程中涉及的基本工具和操作方法
学习/训练方 法
运用数码四步教学法及项目案例设计制作程序为主的方式训练学生， 通过由易及难，由简及繁的系列专业项目训练，帮助学生具备网页 动画设计与制作的专业能力，并在项目化教学训练的过程中，理解 和掌握专业知识。
在修完本项目包课程以后，还可以参加我国工信部网页设计师和 多媒体设计师的专业技能资质认证，获得全国公认的“网页设计 师”的专业技能资质证书。更可以参加国际公认的Adobe交互设 计师资质认证，获得 “交互设计师”专业能力标准的行业认定资 质。
教学项目设计
本课程的教学项目的来源
均来自于真实的各种类型网站的典型交互动画广告案例，集中了主流网站中的典 型交互动画广告制作过程中的典型问题，以及典型解决方法。
教学项目设计的基本内容
A、Flash动画广告设计与制作项目 B、HTML5交互动画广告设计与制作项目
在A和B项目中具体主要以汽车广告制作项目制作训练课程、手风琴式交互展 示广告设计与制作项目训练课程、网页动画设计与制作训练课程等交互动画 广告制作来表现A和B项目，由易到难，由简到繁的设计制作过程。
教学内容
知识要点
了解设计交互网页动画制作的应用领域及制作 Nhomakorabea技术标准；
了解交互网页动画设计的制作流程； 熟悉交互网页动画制作中的专用术语及其代表的概念； 理解交互网页动画制作软件工具的功能和作用； 能够分析一般网页动画项目的重点难点和素材支撑；
技能要点
能够使用Flash和Edge软件工具根据设计方案正确制作交互网页动画；
（1）FLASH交互动画广告制作项目课程：32课时； （2）HTML5交互动画广告制作项目课程：32课时。
课程体系
网页美术元素设计 项目包课程
Flash交互动画广 告制作项目课程
……
专业基础课程
专业主干核心课程
网页动画设计与制 作项目包课程
行业专业岗位 技能水平认证
用户界面元素设计 项目包课程
HTML5交互动画广 告制作项目课程
合集下载
《网页设计与制作》期末考试试题及答案（1）
《⽹页设计与制作》期末考试试题及答案（1）《⽹页设计与制作》期末考试试题⼀、单项选择题(本⼤题共30⼩题，每⼩题2分，共60分)1、⽬前在Internet上应⽤最为⼴泛的服务是( )。
A、FTP服务B、WWW服务C、Telnet服务D、Gopher服务2、域名系统DNS的含义是( )。
A、Direct Network SystemB、Domain Name ServiceC、Dynamic Network SystemD、Distributed Network Service3、主机域名center. nbu. edu. cn由四个⼦域组成，其中( )⼦域代表国别代码。
A、centerB、nbuC、eduD、cn4、当阅读来⾃港澳台地区站点的页⾯⽂档时，应使⽤的正确⽂本编码格式是( )。
A、GB中国⼤陆和新加坡⽤于简体中⽂B、Unicode码(统⼀码)字"经"的编码是0x7ECF,注意字符码⼀般⽤⼗六进制来表⽰，为了与⼗进制区分，⼗六进制以0x开头，0x7ECF转换成⼗进制就是32463,UCS-2⽤两个字节来编码字符，两个字节就是16位⼆进制，2的16次⽅等于65536,所以UCS-2最多能编码65536个字符。
编码从0到127的字符与ASCII编码的字符⼀样，⽐如字母"a"的Unicode 编码是0x0061,⼗进制是97,⽽"a"的ASCII编码是0x61,⼗进制也是97, 对于汉字的编码，事实上Unicode对汉字⽀持不怎么好，这也是没办法的，简体和繁体总共有六七万个汉字，⽽UCS-2最多能表⽰65536个，才六万多个，所以Unicode只能排除⼀些⼏乎不⽤的汉字，好在常⽤的简体汉字也不过七千多个，为了能表⽰所有汉字，Unicode 也有UCS-4规范，就是⽤4个字节来编码字符C、BIG5码(⼤五码)既不需要启动输⼊法，也不需要码表。
设计网页动画
第12页
时间轴与帧
认识时间轴 时间轴是动画制作的核心，用于组织和控制一定时间内的图层和 帧中的文档内容。时间轴的主要组件是图层、帧和播放头。与胶 片一样，Flash文档也将时长分为帧。图层就像堆叠在一起的多 张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。 帧类型 关键帧：在动画的制作过程中，角色或者物体运动或变化中的关 键动作所处的帧称为关键帧。实心黑色圆圈表示的是关键帧。 普通帧：也称为静态帧，就是不起关键作用的帧。关键帧后面的 灰色方块就是普通帧，用于实现关键帧的延续或两个关键帧之间 的缓慢过渡。有内容的普通帧是灰色方块；无内容的普通帧是空 白方块。
文本和位图的应用
文本是动画重要的组成部分，在Flash中可以利
用文本工具创建各种艺术字的效果。Flash中的 文本分为静态文本、动态文本和输入文本3种类型。
创建文本 编辑文本 文本效果的制作 文本滤镜 应用位图
网页设计与制作教程
第1章 网页设计与制作基础
第8页
文本和位图的应用
网页设计与制作教程
第1章 网页设计与制作基础
第24页
基础动画设计
例5-12 普通引导层应用实例。
例5-14 制作运动引导层动画“飞机”。
网页设计与制作教程
第1章 网页设计与制作基础
第25页
基础动画设计
例5-15 制作简单遮罩效果。 例5-16 遮罩层动画实例1。 例5-17 遮罩层动画实例2。
网页设计与制作教程
第1章 网页设计与制作基础
第29页
5.3 Flash交互动画
动画脚本基础 播放和停止动画 按钮事件
网页设计与制作教程
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
电子课件-《Flash动画设计与制作(第二版)》-A06-3961 项目七 网站应用
第 1 帧的文字
任务 1 网页横幅
3）在第 20 帧、第 22 帧插入空白关键帧。选中第 22 帧，选择文本工具， 设置字体为华文琥珀，字体大小为 35，字体颜色为白色，输入文字“伴随你 快乐成长”；设置字体为楷体，字体大小为 25，字体颜色为白色，输入文字 “欢迎访问 ”，效果如图所示，锁定“文字”图层。“文字” 图层的时间轴如图所示。
任务 1 网页横幅
1. 创建网页横幅影片文档
新建一个 Flash 文档，设置舞台大小为 800 像素 ×150 像素， 背景为橙 色（#FF9933），将文件保存为“网页横幅 .f la”。
2. 复制文具广告库中的标志元件
打开素材文件“文具广告库 .f la”，将“库”面板中的“标志”元件粘贴 到当前文档的“库”面板中备用。
任务 1 网页横幅
（3）新建图层 2，选中第 5 帧，单击鼠标右键，从快捷菜单中选择“粘 贴帧”选项，删除图层 2 中多余的帧。“圆闪动”元件的时间轴如图所示。
“圆闪动”元件的时间轴
任务 1 网页横幅
（4）圆闪动效果进舞台。返回场景 1，新建“圆闪动”图层，选择第 1 帧，从“库”面板中将“圆闪动”影片剪辑元件拖动到舞台中，复制多个， 适当调整大小，将Alpha 值降为 30%，如图所示。锁定“圆闪动”图层。
设置滤镜
任务 1 网页横幅
三、滤镜种类
Flash 滤镜有投影、模糊、发光、斜角、渐变发光、渐变斜角、调整颜色 七种。
（1）投影：投影滤镜可以模拟对象在阳光照射下产生的阴影。 （2）模糊：模糊滤镜可以使对象在 X和 Y轴上进行模糊，从而产生柔化 效果。 （3）发光：发光滤镜的作用是在对象的周围产生光芒。
绘制圆
任务 1 网页横幅
5. 制作圆闪动效果
任务 1 网页横幅
3）在第 20 帧、第 22 帧插入空白关键帧。选中第 22 帧，选择文本工具， 设置字体为华文琥珀，字体大小为 35，字体颜色为白色，输入文字“伴随你 快乐成长”；设置字体为楷体，字体大小为 25，字体颜色为白色，输入文字 “欢迎访问 ”，效果如图所示，锁定“文字”图层。“文字” 图层的时间轴如图所示。
任务 1 网页横幅
1. 创建网页横幅影片文档
新建一个 Flash 文档，设置舞台大小为 800 像素 ×150 像素， 背景为橙 色（#FF9933），将文件保存为“网页横幅 .f la”。
2. 复制文具广告库中的标志元件
打开素材文件“文具广告库 .f la”，将“库”面板中的“标志”元件粘贴 到当前文档的“库”面板中备用。
任务 1 网页横幅
（3）新建图层 2，选中第 5 帧，单击鼠标右键，从快捷菜单中选择“粘 贴帧”选项，删除图层 2 中多余的帧。“圆闪动”元件的时间轴如图所示。
“圆闪动”元件的时间轴
任务 1 网页横幅
（4）圆闪动效果进舞台。返回场景 1，新建“圆闪动”图层，选择第 1 帧，从“库”面板中将“圆闪动”影片剪辑元件拖动到舞台中，复制多个， 适当调整大小，将Alpha 值降为 30%，如图所示。锁定“圆闪动”图层。
设置滤镜
任务 1 网页横幅
三、滤镜种类
Flash 滤镜有投影、模糊、发光、斜角、渐变发光、渐变斜角、调整颜色 七种。
（1）投影：投影滤镜可以模拟对象在阳光照射下产生的阴影。 （2）模糊：模糊滤镜可以使对象在 X和 Y轴上进行模糊，从而产生柔化 效果。 （3）发光：发光滤镜的作用是在对象的周围产生光芒。
绘制圆
任务 1 网页横幅
5. 制作圆闪动效果
第3章 网站动画设计与制作
3.3 创建各类Flash动画实例
【案例】小树成长 （1）进入Flash制作界面后，单击属性面板中【编辑】按钮 设置文档属性，这里设置舞台宽550px，高400px，帧频为 6FPS，如图所示。
文档属对话框
3.3 创建各类Flash动画实例
（2）执行“文件”|“导入”|“导入到舞台”命令，导入主 场景中图层1上一张雪景位图，在第50帧处按F5插入普通帧， 如图所示。
“叶子”图形元件的轮廓显示
3.3 创建各类Flash动画实例
（17）在主场景中，单击“新建图层”图标 建立“图层2”，并在 “图层2”名称上双击，给 “图层2”重命名为“小树”，单击 “小树”层，将“小树”图形元件动画拖入舞台，选中“小树”元 件，弹出“属性”面板，向下拖动滚动条，在 “循环”选项中选择 “播放一次”，第一帧输入“1”，如图所示。
第3帧处的“小树”矢量图形
3.3 创建各类Flash动画实例
（11）方法同上，直到第15帧处，如图所示。
第15帧处的“小树”矢量图形
3.3 创建各类Flash动画实例
（12）单击第1帧，按住shift键，单击第15帧，在选中的关键 帧上单击右键，弹出快捷菜单，如图所示，执行“翻转帧”命令， “小树”成长的逐帧动画就完成了。
3.2 动画制作工具简介
4．发布影片 发布和测试Flash文档时，常用的方法有以下三种。 （1）执行“控制”|“测试影片”命令，自动生成一个与 Flash文件同名的影片，文件扩展名为.swf，并且在与 Flash文件相同的文件夹。 （2）执行“文件”|“导出”|“导出影片”命令，弹出 “导出影片”对话框。在对话框中选择存储路径，单击保 存类型下拉列表，选择文件格式，命名文件，单击【保存】 按钮，如图所示。
(优质文档)动画设计PPT演示课件
其中，有两个值，默认值为normal，如果设置为 normal时，动画的每次循环都是向前播放；另一 个值是alternate，其作用是，动画播放在第偶数 次向前播放，第奇数次向反方向播放。
第16章 设计动画
第17页
16.2.7 控制播放状态
animation-play-state主要用来控制元素动画的 播放状态，基本语法格式如下：
第16章 设计动画
第14页
16.2.4 定义动画延迟时间
animation-delay用来指定元素动画开始时间， 即动画延迟播放时间，基本语法格式如下：
animation-delay: <time>[,<time>]*
其中，<time>为数值，单位为s(秒)，其默认值也 是0。这个属性和transition-delayy使用方法是一 样的。
第16章 设计动画
第8页
16.1.4 定义过渡效果
transition-timing-function的值允许开发人员根据时间的 推进去改变属性值的变换速率，也就是定义过渡动画的效 果，其基本语法格式如下：
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
第16章 设计动画
第17页
16.2.7 控制播放状态
animation-play-state主要用来控制元素动画的 播放状态，基本语法格式如下：
第16章 设计动画
第14页
16.2.4 定义动画延迟时间
animation-delay用来指定元素动画开始时间， 即动画延迟播放时间，基本语法格式如下：
animation-delay: <time>[,<time>]*
其中，<time>为数值，单位为s(秒)，其默认值也 是0。这个属性和transition-delayy使用方法是一 样的。
第16章 设计动画
第8页
16.1.4 定义过渡效果
transition-timing-function的值允许开发人员根据时间的 推进去改变属性值的变换速率，也就是定义过渡动画的效 果，其基本语法格式如下：
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
网页设计与制作实用教程电子教案、教学建议第17章 页面中常见Flash动画的制作方法
21
本章小结
本章通过具体实例介绍了Flash动画的制作方法。主要有 以下内容：
补间动作动画。 补间动作动画的作用对象是：实例、群组对象、文字对象、位 图对象等，不能作用于矢量图形对象。
补间形状动画。 补间形状动画的作用对象只能是矢量图形。
遮罩ห้องสมุดไป่ตู้层。
运动引导图层。 制作运动引导图层时，要在运动的对象上面建立一个引导图层， 并在引导层中画出运动路径，然后再到被引导层中建立运动动 画，并把运动对象吸附于运动路径的始末。
5．插入新的场景，利用两对遮罩图层和补间动作动画实现如 图17.5所示的效果。
6．保存文件，按Ctrl+Enter测试动画效果，并生成文件名为 mov17_1.swf的电影文件。
返回
2019/10/9
第17章 页面中常见Flash动画的制作方法
8
补间形状动画与遮罩图层
实现从左向右逐渐推出式图像的切换效果，操作 步骤见教程P340。
2. 页面效果请参见配套光盘 webcourse\chapter17\result文件夹下的 mov17_1.swf文件。
返回
2019/10/9
第17章 页面中常见Flash动画的制作方法
7
制作步骤
1．新建一个Flash文件，将文件保存在本地站点的swf文件夹 下，文件名为mov17_1.fla。
2019/10/9
第17章 页面中常见Flash动画的制作方法
返回
12
实训引导
（1）本实例用到的2幅图像文件：img17_6.jpg（背 景图片）、img17_7.gif（飞行器）由配套光盘 webcourse\chapter17\images文件夹提供。
网页设计实用教程使用Flash制作网页动画PPT学习教案
（3）在“工具箱”中选择“颜料桶”工具，按“Shift+F9”组合键 打开“颜色”面板，将“类型”设置为“Radial（放射状）” ，在颜色条中设置两个颜色块
（4）用鼠标单击颜色面板上的“颜料桶”按钮，在弹出颜料面板 中选择面板底部处的红色渐进颜色，然后用鼠标左键单击“心
13.2.3、输入文字
”图中央，即可看到红色的“心”图了
频文件将成为动画文档的元件，而插入到文档中的内容则 成为了该元件的实例，与Flash CS3相比，CS4导入视频文 件的步骤更为简单，操作非常方便。
第9页/共12页
13.4 习题
一、选择题
1、Flash CS4是哪家公司最新开发的动画设计软件（ ）。
A）微软公司
B）Adobe公司
C）
Macromedia公司
A） 12fps
B）24fps
C）30fpsห้องสมุดไป่ตู้
二、简答 1、在Flash CS4中有哪几种元件类型？ 2、在Flash文档中，元件库的作用是什么？ 3、在Flash CS4中，图层可以分为哪几种？它们各自的作用是什么
？ 4、将图形转换为元件的目的是什么？这样做有哪些优点？ 5、按钮元件有哪四种状态？ 三、上机实践 1、制作一个由字母“S”变为字母“A”的形状补间动画。 2、制作一个在舞台中间向上向下拉开的遮罩动画。 3、制作一文字闪烁效果，要求文字的边缘颜色不断变化，以形成
第5页/共12页
13.2.5、形状补间动画
所谓形状补间动画，就是由一个对象变成另一个对象，而 该过程只需要用户提供两个分别包含有变形前和变形后对象 的关键帧，中间过程由Flash自动完成。在本典型案例中， 可通过形状补间的动画方式，在圣诞贺卡中添加夜空中的“ 繁星”闪烁的效果。 13.2.6、动作补间动画 动作补间动画与形状补间动画类似，二者主要不同的是：前 者构成的动画元素是元件，而后者则是图形，至于什么是元件 ，将在下一节中介绍。在本实例中将利用动作补间动画的原理 ，在圣诞卡中添加一张不断变化的笑脸。
网页动画制作PPT课件
第44页/共86页
上机作业
• 上机作业 • 1、上升的水泡--交作业系统 • 2、飘彩的文字--交作业系统 • 3、图文混合动画（实验指导3.2实验4）--交多媒体练习平台 • 4、地球绕太阳--交作业系统 • 5、沿曲线运动的风车--交作业系统
第45页/共86页
内容概要
1 2 3
Flash术语 多层动画制作 遮罩层动画
第36页/共86页
图文混和动画实例
• 走遍中国主页动画
第37页/共86页
关键步骤
• 1、导入图片 • 2、创建文字元件 • 3、拖动文字，设置文字颜色alpha为0%
第38页/共86页
沿着路径运动动画实例—小球
第39页/共86页
沿着路径运动动画实例—曲线飞行的文字
第40页/共86页
沿着路径运动动画实例—地球绕太阳
第30页/共86页
元件类型 • 元件分为三种类型，影片剪辑、按钮和图形，不同的元 件类型有不同的使用特点。 • （1）影片剪辑元件是位于影片中的小片断，影片剪辑 的运行独立于主要影片的时间线，相当于是影片中的影 片。 • （2）图形元件主要适用于静态图片和通过主图片的时 间线来控制的简单动画。在图形元件中不能使用交互和 声音。 • （3）按钮元件用于创建交互式按钮，可以响应鼠标动 作，当创建的时间线变成四种不同的帧，分别是弹起、 指针经过、按下和点击 。
第34页/共86页
多层动画实例—多彩的文字• ຫໍສະໝຸດ 动的多彩文字第35页/共86页
多彩的文字关键步骤
• 1、分别创建四个文字元件，每个文字都是一个元件，每个文字的颜色都不一样 • 2、创建四个图层，把文字元件拖动到四个图层当中（第1帧） • 3、分别都创建补间动画 • 4、使用“变形”转变文字当中的大小
上机作业
• 上机作业 • 1、上升的水泡--交作业系统 • 2、飘彩的文字--交作业系统 • 3、图文混合动画（实验指导3.2实验4）--交多媒体练习平台 • 4、地球绕太阳--交作业系统 • 5、沿曲线运动的风车--交作业系统
第45页/共86页
内容概要
1 2 3
Flash术语 多层动画制作 遮罩层动画
第36页/共86页
图文混和动画实例
• 走遍中国主页动画
第37页/共86页
关键步骤
• 1、导入图片 • 2、创建文字元件 • 3、拖动文字，设置文字颜色alpha为0%
第38页/共86页
沿着路径运动动画实例—小球
第39页/共86页
沿着路径运动动画实例—曲线飞行的文字
第40页/共86页
沿着路径运动动画实例—地球绕太阳
第30页/共86页
元件类型 • 元件分为三种类型，影片剪辑、按钮和图形，不同的元 件类型有不同的使用特点。 • （1）影片剪辑元件是位于影片中的小片断，影片剪辑 的运行独立于主要影片的时间线，相当于是影片中的影 片。 • （2）图形元件主要适用于静态图片和通过主图片的时 间线来控制的简单动画。在图形元件中不能使用交互和 声音。 • （3）按钮元件用于创建交互式按钮，可以响应鼠标动 作，当创建的时间线变成四种不同的帧，分别是弹起、 指针经过、按下和点击 。
第34页/共86页
多层动画实例—多彩的文字• ຫໍສະໝຸດ 动的多彩文字第35页/共86页
多彩的文字关键步骤
• 1、分别创建四个文字元件，每个文字都是一个元件，每个文字的颜色都不一样 • 2、创建四个图层，把文字元件拖动到四个图层当中（第1帧） • 3、分别都创建补间动画 • 4、使用“变形”转变文字当中的大小
教学课件电子商务网页设计与制作10.2任务一制作电商网站轮播图动画
01 打开一个素材文件，浏览页面效果。
02转换到源代码视图中，可以看到<body>标签之间的页面主体内容代码。
03 将实现图像滑动切换的JavaScript代码添加到<body>与</body>之间
04 保存页面，在浏览器中浏览页面，体验JavaScript实现的图像滑动效果。
SAMPLE
THANKS
练一练使用JavaScript实现可选择字体大小
03切换到10-1.css中，创建名为.link01的类CSS样式的4种伪类，如图10-14所示。并将样式应用到页面文字中，如图10-15所示。
图10-14
图10-15
04执行“文件>保存”，将页面保存，并保存外部CSS样式表文件，按下键盘上的F12键测试页面，页面效果如图10-16所示。
制作电商网站首页轮播图
图10-25
4 新手试炼——制作多彩下拉列表
如果一个网页界面能够展示图像的空间很有限，那么我们便可以通过使用滑动切换的方式将较多的图像全部展示在浏览者面前，并且还能够为网页界面增加动态的视觉效果，本实例就通过使用JavaScript脚本实现网页中图像滑动切换的效果。
02在源代码视图中，为设置字体大小链接的超链接设置脚本链接，如图10-13所示。
图10-13
提示：该段JavaScript代码是用来定义一个函数接收传递来的字体大小参数，能够将指定id名称的元素中的文字大小修改为接收到的参数的大小。例如，在该页面中添加的JavaScript代码中是将页面中ID名为text的Div中的字体大小属性进行重新设置。
图10-16
3 任务实施——制作电商网站首页轮播图
制作电商网站首页轮播图
01执行“文件>打开”命令，将“项目九/index.html”文件打开，页面效果如图10-17所示。在源代码中找到id为banner的div，将其里面的图片删除，如图10-18所示。
02转换到源代码视图中，可以看到<body>标签之间的页面主体内容代码。
03 将实现图像滑动切换的JavaScript代码添加到<body>与</body>之间
04 保存页面，在浏览器中浏览页面，体验JavaScript实现的图像滑动效果。
SAMPLE
THANKS
练一练使用JavaScript实现可选择字体大小
03切换到10-1.css中，创建名为.link01的类CSS样式的4种伪类，如图10-14所示。并将样式应用到页面文字中，如图10-15所示。
图10-14
图10-15
04执行“文件>保存”，将页面保存，并保存外部CSS样式表文件，按下键盘上的F12键测试页面，页面效果如图10-16所示。
制作电商网站首页轮播图
图10-25
4 新手试炼——制作多彩下拉列表
如果一个网页界面能够展示图像的空间很有限，那么我们便可以通过使用滑动切换的方式将较多的图像全部展示在浏览者面前，并且还能够为网页界面增加动态的视觉效果，本实例就通过使用JavaScript脚本实现网页中图像滑动切换的效果。
02在源代码视图中，为设置字体大小链接的超链接设置脚本链接，如图10-13所示。
图10-13
提示：该段JavaScript代码是用来定义一个函数接收传递来的字体大小参数，能够将指定id名称的元素中的文字大小修改为接收到的参数的大小。例如，在该页面中添加的JavaScript代码中是将页面中ID名为text的Div中的字体大小属性进行重新设置。
图10-16
3 任务实施——制作电商网站首页轮播图
制作电商网站首页轮播图
01执行“文件>打开”命令，将“项目九/index.html”文件打开，页面效果如图10-17所示。在源代码中找到id为banner的div，将其里面的图片删除，如图10-18所示。