模块三网页美工技术 单元7：网页动画设计 一、网页动画制作常用工具 提到料页动通我门首先想到的是树页三剑客之一的Fl动，Fla动是Macromedia提出的 富因特网应用”(RlA)概念的实现平台之一，因为使用白量运算(VectorGiraphics)的方式， 产生出来的影片占用存储空间较小，全世界主流网路浏宽器都内建h播放器 (FlashPlayer),而被大量应用于互联网网页的矢量动画设计。使用Flash创作出的影片有 白己的特殊档案格式(SWF)· 面我们今天介绍的软件是一款可以设计SWF的小工 具Sw,是相当容易的动画制作载件，F门动一个小时要 隆的事， S4油只要5分钟，只要点几下鼠标，就可以让你的网页有 SWiSH 令人注目的酷蕊动画效果。可以创造形状，文字，按钮以 图0307-1 及移动路径。也可以遗择内建的超过150种诸如厚炸、藏 祸、3D旋转以及波浪等预设的动西效果。可以用新增动作 到物件，米建立自己的效果或制作一个互动式SWF。 二、认识Swish
模块三 网页美工技术 单元 7：网页动画设计 一、网页动画制作常用工具 提到网页动画我们首先想到的是网页三剑客之一的 Flash。Flash 是 Macromedia 提出的 “富因特网应用”（RIA）概念的实现平台之一，因为使用向量运算（VectorGraphics）的方式， 产生出来的影片占用存储空间较小，全世界主流网络浏览器都内建 Flash 播放器 （FlashPlayer），而被大量应用于互联网网页的矢量动画设计。使用 Flash 创作出的影片有 自己的特殊档案格式（SWF）。 而我们今天介绍的软件是一款可以设计 SWF 的小工 具 Swish，是相当容易的动画制作软件，Flash 一个小时要 做的事， Swish 只要 5 分钟。只要点几下鼠标，就可以让你的网页有 令人注目的酷炫动画效果。可以创造形状、文字、按钮以 及移动路径。也可以选择内建的超过 150 种诸如爆炸、漩 涡、3D 旋转以及波浪等预设的动画效果。可以用新增动作 到物件，来建立自己的效果或制作一个互动式 SWF。 二、认识 Swish
角电能1：5w网 色事 阵列 6 导出 爽 雪量他 发发 肃 8 高家 300 4 。天量军 。某除率 6 口电结时博止透草 园 图0307-2 注：1菜单栏：2.快捷按钮：3时间轴：4.主场景区：5.工具栏：6场景元件属性设置区 下面图0307-3、图0307-4是菜单栏中常用菜单（文件、面板，括入）的图解
图 0307-2 注：1.菜单栏；2.快捷按钮；3.时间轴；4.主场景区；5.工具栏；6.场景元件属性设置区 下面图 0307-3、图 0307-4 是菜单栏中常用菜单（文件、面板、插入）的图解
文件E)偏错纪查看心插入①羊 面校包居助山 ☐新建四 Crl+N ,版面) 已打开@. Ctrleo 时间D 日保存的 Cirl+5 轮回 日另存 电影 一对康心 日保存为模质0 本 新建口 Q+9+W 表界® 色影⑩ 范通 邦A 导入D 指导幻 号出旧 实D 内00 最证文件 导出阳 关闭O CrlF4 调物 退出的 重置为款认(E 图0307-3 说出血线 3治世特世果开南 任规制 生从一t 蓝通特苦形指妇 上异年发能 时正年州两尾 下 6乐贵如 P令日 牛标童随机方同 斯正异州类列 m:弄现 内E年 起商某束 【文D 怎指挂 有来：吸有 数法 射：厘光目来 后车·神内 增韩非压 罐时-先通入 d精要团 Ep. 表：线 随年人一齿室表 速机有延我 变平，金力 R近-南 塘肌城弹开上为 d有丝 贵平，关国 -标话出 同发风料电上是 P过，线界 物的 向餐锅 调 库下作 能病州上硬入 质人的 动 南产蛋速时 能端州上共只浸感国 的 R时 电食绿作 调向子若从边感国 入 用速机时韩 能满周下开室 电留自树并出乘 调向并被拼 的 州e物两 的 植期 列辅机时种 度狂，中花心室 复的 电鲜打型 突框·下线 美原 心外质正 风旺夏着 列料风亮 夹证·压速 进明 年外自树并发利 良旺：师最 位重角夫 向件能自列 夹班·世同 年外练肌种一边 突任·数大 里饮量 是型-分用 夹正一泰风 速法耳 市·内斜能言 民香·德出 里 打开可 实任一我起 整式内有为 民·
图 0307-3
图0307-4 操作滴示：Sw小工具制作网真动画，并将动腾应用于网页中。最终效果。如下面动画 0307.1所示， 动画0307.1 Sw动制作动面的步露： 1.在打开载件后，新建一个空白电影： 2.在右面的场景信息面板中设置场景的大小，膏景色和楠速 3括入导入图像，找到对应的动通所需青量图片： 4,点一下工具栏中的文学按扭，一个大写T,然后在右面的文木编辑窗口中输入文字， 输完看，在场景里用佩标点一下，文字就会出现在场景中： 5.在时间轴上选中文本的关健机，然后打开插入菜单，选择一个效果，时间轴上会自 动生成一段效果峡。这个精保可以拉长或缩短：重复第四、五步做另外一段文字效 果 6.点文件，导出，选择f即可。 操作滴示：将动画应用于网页中 步置，在料页对应位置点常用播入栏，螺体快捷按组中的下动。在弹出的对话框中找 到对应的动通即可。 三、HTML5
图 0307-4 操作演示：Swish 工具制作网页动画，并将动画应用于网页中。最终效果，如下面动画 0307-1 所示。 动画 0307-1 Swish 制作动画的步骤： 1. 在打开软件后，新建一个空白电影； 2. 在右面的场景信息面板中设置场景的大小，背景色和祯速； 3. 插入导入图像，找到对应的动画所需背景图片； 4. 点一下工具栏中的文字按扭，一个大写 T，然后在右面的文本编辑窗口中输入文字， 输完看，在场景里用鼠标点一下，文字就会出现在场景中； 5. 在时间轴上选中文本的关键祯，然后打开插入菜单，选择一个效果，时间轴上会自 动生成一段效果祯，这个祯你可以拉长或缩短；重复第四、五步做另外一段文字效 果 6. 点文件，导出，选择 swf 即可。 操作演示：将动画应用于网页中 步骤：在网页对应位置点常用插入栏，媒体快捷按钮中的 Flash，在弹出的对话框中找 到对应的动画即可。 三、HTML5
由于Adobe宜布不再提供ah对Andriod4.1的支持，a动遇出了一定平台，不久， 微载也直布Wn8只支持部分h,这预示着，似乎h正在渐渐遇出历史舞台。都我们 网页中需要用到动的炫酷效果怎么办？HML5线走向了技术前沿的舞台。HML5是取代 HML4和XHML】的标准版本，目前仍在发晨中，大部分浏宽器己支持其某些技术。 它的特点是：强化了页面的表现性能，并追如了本地数据库等Wb应用功能。广义论及 HML5时，实际指的是包括HML、CSS和lavaScn单在内的一套技术组合，它希望能够 减少测览器对于需要插件的丰富性网洛应用服务（知：Adobe Flas动h、Microsoft Silverlight, Ora©eJavaFX)的雷求，并提供更多能有效增强网格应用的标准集。 【课后小结】 本讲介绍了主道网页动西设计工具，重点操作滴示了由制作动画的一粒方法。分 析了技术发展趋势，引入了HM5技术
由于 Adobe 宣布不再提供 flash 对 Andriod 4.1 的支持，flash 退出了一定平台，不久， 微软也宣布 Win8 只支持部分 flash，这预示着，似乎 flash 正在渐渐退出历史舞台。那我们 网页中需要用到动的炫酷效果怎么办？HTML5 就走向了技术前沿的舞台。HTML5 是取代 HTML 4 和 XHTML 1 的标准版本，目前仍在发展中，大部分浏览器已支持其某些技术。 它的特点是：强化了页面的表现性能，并追加了本地数据库等 Web 应用功能。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合， 它希望能够 减少浏览器对于需要插件的丰富性网络应用服务（如： Adobe Flash、Microsoft Silverlight、 Oracle JavaFX）的需求，并提供更多能有效增强网络应用的标准集。 【课后小结】 本讲介绍了主流网页动画设计工具，重点操作演示了 swish 制作动画的一般方法。分 析了技术发展趋势，引入了 HTML5 技术