Java培训大纲(共45张)(PPT 45页)

1、 第九章 创建网页动画第1页，共45页。本章学习目标 掌握动画的基本原理和网页动画类型 熟悉Flash MX 2004软件界面和基本操作 掌握用Flash MX 2004软件制作网页动画 的一般方法 掌握制作运动、形状、遮罩、曲线动画 的一般方法 了解ImageReady和Swith软件第2页，共45页。1. 动画的基本原理利用视觉暂留原理，连续播放一系列静止的画面，给人造成连续变化的效果。第3页，共45页。2. 网页动画常见的网页动画格式 Java格式GIF89a格式SWF格式网页动画设计考虑因素 带宽下载时间流式传输动画格式第4页，共45页。3. 创建GIF动画A：设置帧延迟。单位为秒，默

2、认值为0秒。B：设置动画播放的次数。C：单击将第一帧设置为当前帧。D：单击将当前帧的上一帧设为当前帧。E：播放/停止动画按钮。F：单击将当前帧的下一帧设为当前帧。G：单击加入过渡帧。如果想在相邻的两帧之间插入动画效果，可用该按钮在两帧中间插入过渡帧。H：复制当前帧。I：删除当前帧。3.1面板介绍第5页，共45页。3.2 制作gif动画启动ImageReady，新建一动画文件设计如下图的图像内容，割去左右部分，单独放置在一图层中。第6页，共45页。在背景图层的左右图层之间插入一“邮件”图层。设计动画第一帧：隐藏“邮件”图层。第二帧：点击“复制当前帧”按钮，使“邮件”图层可见，并调整其位置。第三帧

3、 / 第四帧 / 第五帧： 方法同前，调整“邮件”图层的位置第7页，共45页。设置五帧的延迟时间均为0.2秒 执行【文件】【将优化结果存储为】菜单命令 ，优化并保存动画第8页，共45页。4. 创建Flash动画基本概念实例1：Flash图形绘制 实例2：创建运动渐变动画 实例3：创建形状渐变动画实例4：创建路径运动动画实例5：创建遮罩动画 第9页，共45页。4.1 基本概念分辨率位图、矢量图图层场景帧、关键帧与时间轴第10页，共45页。4.2 绘制Flash图形画直线画圆画矩形使用钢笔画曲线修改图形箭头工具贝兹工具套索工具自由变形工具着色工具墨水瓶油漆桶吸管填充转换工具第11页，共45页。4.

4、3 实例2：创建运动渐变动画 目标：创建一个由小到大的文字运动渐变动画 步骤：启动Flash MX 2004 ，执行【修改】【文档】菜单命令或按Ctrl+J组合键或直接单击属性面板中的尺寸右边的按钮，打开文档属性对话框。第12页，共45页。双击时间线上的文本“图层1”，将图层命名为“移动文本” 选择“移动文本”图层上的第一帧，输入文本“创作运动渐变动画！”。 第13页，共45页。选择第一帧，单击右键，执行“创建动画动作”命令 第14页，共45页。鼠标单击第30帧，执行【插入】【时间轴】【关键帧】命令，或者在30帧处单击鼠标右键，执行“插入关键帧”命令，或者按【F6】快捷键，插入关键帧。然后选择

5、关键帧的内容“创作运动渐变动画！”，对其属性进行设置，设置坐标轴X为160，Y为160，其余保持不变。 当时间轴底层颜色变为紫色，说明动画设置正确。 第15页，共45页。选择动画创作完毕，执行【控制】【测试影片】菜单命令，或按【Ctrl+Enter】组合键调试影片 保存文件，并执行【文件】【发布设置】菜单命令，进入“发布设置”界面，如下设置好后点击发布按钮。第16页，共45页。4.4 实例3：创建形状渐变动画 目标：创建圆变成矩形的形状渐变动画，在运动过程中颜色也进行相应的变化。 步骤：启动Flash MX 2004 ，新建一空白文档，设置文档的属性如图。第17页，共45页。双击时间线上的文本

6、“图层1”，将图层命名为“形状变化”。 单击椭圆工具图标 ，在舞台工作区中画一个椭圆。通过属性面板对椭圆进行属性设置。 第18页，共45页。选择第一帧，在属性设置面板中的“中间”下拉列表框中选择“形状”，完成第一帧的设置。 在20帧处插入一关键帧，选择关键帧，删除椭圆，单击工具箱中的矩形工具图标 ，画一个矩形。设置其坐标轴X为400，Y为180，宽度为110，高度为90，填充色为#666633，边线颜色为#CC99FF。 第19页，共45页。选择动画创作完毕，时间轴如图所示。保存文件，并执行【文件】【发布设置】菜单命令发布动画。第20页，共45页。4.5 实例4：路径运动动画 目标：创建地球绕

7、太阳转动的动画 。 步骤：启动Flash MX 2004 ，新建一空白文档，设置影片尺寸为550*400，背景颜色为#333333，帧频为12，标尺单位保持不变 。第21页，共45页。双击时间线上的文本“图层1”，将图层命名为“太阳”。 单击椭圆工具图标 ，在舞台工作区中画一个圆，去掉边线。设置其坐标轴X为350，Y为160，宽度为70，高度为70。用鼠标选择舞台上的椭圆，执行【窗口】【设计面板】【混色器】菜单命令，打开混色器，选择“径向”，设置渐变色。 第22页，共45页。鼠标选择第50帧，执行【插入】【时间轴】【帧】，或者按F5快捷键。 执行【插入】【时间轴】【图层】或者直接按时间轴面板上

8、的“插入图层”按钮，新建图层 ，并将图层2命名为“地球公转”。第23页，共45页。鼠标选择“地球公转”层第一帧，按照上述同样的方法在舞台上画一个正圆，去掉边线，然后设置其坐标轴X为480，Y为180，宽度为35，高度为35。 右击“地球公转”层第一帧，执行“创建补间动画”命令。然后选择第50帧，插入关键帧。 第24页，共45页。鼠标选择“地球公转”图层，执行【插入】【时间轴】【运动引导层】命令，或单击右键，执行“添加引导线”命令，或者直接在时间线面板上单击“添加引导图层”按钮。第25页，共45页。在“引导线：地球公转”图层上画一椭圆，去掉填充部分，设置椭圆边线坐标轴X为10，Y为60，宽度为5

9、00，高度为250 。右击“地球公转”层第一帧，执行“创建补间动画”命令。然后选择第50帧，插入关键帧。 第26页，共45页。动画创作完毕，按Ctrl+Enter键测试动画。保存文件并发布动画。 选择“地球公转”图层，分别在第16帧和第33帧插入关键帧，设置小球的位置如图 第27页，共45页。4.6 实例5：遮罩动画 目标：创建探照灯效果的遮罩动画 。 步骤：启动Flash MX 2004 ，新建一空白文档，设置影片尺寸为400*200，背景颜色为#333333，帧频为12，标尺单位保持不变 。第28页，共45页。双击时间线上的文本“图层1”，将图层命名为“背景”。 单击工具箱中的文本工具图标

10、 ，在舞台工作区中输入文本“FLASH动画”。设置文本类型为“静态文本”，字体为“隶书”，大小为“50”，颜色为#999999，字符间距为2，坐标轴X为70，Y为70，其余保持不变。 第29页，共45页。新建一图层，并命名为“底层”。 执行选择新建的“底层”为当前层，鼠标单击工具箱上矩形工具图标，在舞台上画一矩形，去掉边线，设置其坐标轴X为0，Y为0，宽度为400，高度为200，背景色为#FFFFFF。 在矩形上方输入文字“FLASH动画”，设置文本类型为“静态文本”，字体为“方正粗倩简体”，大小为“50”，颜色为#FF9933，字符间距为2，坐标轴X为70，Y为70，其余保持不变。 第30页

11、，共45页。新建图层，并命名为“遮罩”。 选中“遮罩”层，在舞台工作区中画一个圆，去掉边线，设置其坐标轴X为5，Y为65，宽度为80，高度为80。 鼠标右击“遮照”层第一帧，执行“创建补间动画”命令。然后选择第35帧，插入关键帧。然后选择第35关键帧中的圆，设置坐标轴X为315，Y为65。第31页，共45页。选择“背景”和“底层”图层中的第35帧，按F5键，插入帧。 鼠标右击“遮罩”层，执行“遮罩层”命令 。第32页，共45页。动画创作完毕后时间轴如图所示。 舞台如图所示。 第33页，共45页。动画创作完毕，按Ctrl+Enter键测试动画。保存文件并发布动画。第34页，共45页。5. Swi

12、sh Max快速制作flash动画Swish Max界面介绍 时间线窗口 实例：用Swish Max快速制作flash动画 Swish在某些特定动画制作方面比Flash更方便、更省时和更具有特效，特别是制作课件的片头或网页的文字动画。 第35页，共45页。5.1 Swish Max界面介绍第36页，共45页。5.2 时间线窗口 添加脚本按钮：通过单击此按钮可以对帧、影片控制、精灵等添加脚本。删除按钮：通过单击删除按钮可以删除选定的效果或脚本。选项按钮：通过单击选项按钮可以设置时间线的显示状态，包括宽、窄、高、矮等。收缩按钮：通过单击收缩按钮可以控制时间线左边按钮的缩放。 第37页，共45页。当鼠标选择工作区中某一对象时，时间线上的“添加脚本” 按钮转变成为“添加效果”按钮 第38页，共45页。5.3实例：用Swish Max快速制作flash动画 目标：创建一个文字爆炸效果的动画 。 步骤：启动Swish ，新建一空影片。第39页，共45页。设置影片属性：背景颜色为白色，宽度为400像素，高度为200像素，帧频为12 。 单击在工具箱中单击文本图标，在“文本”面板框中输入“Swishmax”，设置字体为“问鼎中特广告体”，字体大小为36，颜色为#663366。第40页，共45页。选择工具区中的“Swishmax”对象，然后点击“添加效果”按钮，执行【一次关闭】【爆炸】