让网页动起来ppt课件

第六章:让动画动起来 一、FLASH动画原理 1、电脑动画 A、传统动画 利用人的视觉暂留原理，播放连续的静态的图形。每一副图都需要自己制作。 B、电脑动画 利用人的视觉暂留原理，播放连续的静态的图形。可以利用计算机对两幅关键 画面进行内部数据计算，自动生成中间序列：节省时间，制作更好的效果。 C、电影动画 在电影中，每秒钟播放画面的数量，即播放速度为每秒25帧（PAL）或30帧 （NTSC）。根据播放速度的不同，可改变图像的真实度，产生不同的效果。 2、FLASH的特点与应用领域 Flash 的发展历史: 前身是:Futuresplash动画插件 Macromedia公司自己的Director Flash 2.0 Macromedia公司同时推出Dreamweaver 2.0 和Fireworks 2.0 统 一被称为”网页三剑客” 2002年推出Flash MX 2004年推出Flash MX 2004 Flash MX功能:交互式动画制作,和辅助的编程语言，流式播放 （1）网站与网页。 （2）影视媒体。 （3）交互式游戏。 特点： （1）对设计师而言，Flash MX提供了新型视频功能、增强型颜色管理 、时间轴图层文件夹，以及带有属性检查器的优化工作区等。 （2）对开发人员而言，Flash MX为应用程序开发人员提供了对高级 脚本撰写和调试的工具、内置代码引用以及Flash组件的访问等，便于开发 人员进行ActionScript代码编程。 （3）Flash MX中属性检查器将Flash 5中许多单独存在的面板合并到一 个属性检查器中。 （4）Flash MX中，国际语言支持增加了对朝鲜语和中文的支持，还可 创建能够分析和解释 Unicode 字符串的Flash内容。 （5）Flash MX扩展的视频功能，可以将任何格式的视频文件导入到 Flash文档中，包括MPG、DV（数字视频）、MOV (QuickTime) 和 AVI文 件。 （6）创作时间共享库资源允许用户在多个目标影片中使用一个源影 片中的资源。 （7）Flash MX在它的现有动作脚本编辑环境上，增加了对代码提示、 彩色突出显示语法和广泛的自定义的支持。 （8）Flash MX时间轴功能增强，更加方便用户的使用。 （9）Flash MX动态加载图像和声音，可使用操作脚本将JPEG和MP3 文件直接下载到Flash Player中。 其他部分 1.时间轴特效 2.行为 3.历史记录面板 4.更新的摸板 5.集成的帮组系统 6.安全性等等 Flash MX 专业版本的专有功能 1.支持窗体对象编程 支持多窗口、树形、层次性结构的开发环境，方便 开发应用程序和演示 2.高级组件的支持 新增多个高级组件，使制作人员可以方便的加入电 影并控制；而且可以改变组件的外观 3.数据绑定 可以连接数据源，随时更新、显示和处理数据；并 实现数据 共享 4.移动设备 可以通过连接的方式播放移动设备上的音乐、电影 等等-方便随时对声音等等进行替换 5.项目管理 6.版本控制 1、矢量图与位图 A关于矢量图形 矢量图形是用包含颜色和位置属性的直线或曲线公式来描述 图像的，它与分辨率无关。 B关于位图图像 位图图像是以称之为像素的彩 色点来描绘图像的。编辑位图 图像时修改的是像素，而不是 直线和曲线，位图图像色彩非 常丰富，多用来处理照片或印 刷图片，因此存储尺寸较大。 二、FLASH基础 2、FLASH工作窗口 开始页面： 分为三栏-打开 最近的项目、创建 新项目、从模板创 建。 其他：在线帮助系 统，教程，培训资 源等等 创建新项目： 其中有两种创建方式 其一、常规新建文档 其二、从模板创建 1。主工具栏 主工具栏可以放在任何位置 移动的步骤： 1、在工具栏的没有命令按钮的地方按住鼠标左键 2、拖动工具栏放在任何地方 3、放在边缘位置时工具栏会自动对起 工具栏的隐藏和显示 菜单“窗口”-工具栏-主工具栏 2、工具箱 Flash MX中，绘图工具 栏为用户提供了各种工具来 绘制和编辑图形，它主要分 【工具】、【查看】、【颜 色】和【选项】四个不同功 能的选项区域。 （1）【工具】区域 说明：工具箱可以根据用户的需要显示或隐藏，具体方法菜 单“窗口”-工具 也可以根据用户的需要放在其他地方-拖动 3、属性面板 属性：动画中某个对象性质、形状、动作等等的参数值。 (1) 在Flash MX的【属性】面板中，没有选中 对象时，会显示文档【属性】对话框。或者单击所编 辑场景的空白处，窗体下方也会出现文档【属性】对 话框。 (2) 单击对话框中的【大小】选项后的按钮， 打开【文档属性】对话框。如图所示。通过编辑【尺 寸】选项后的文本框，可以设定影片的发布大小。 4、“混色器”面板 混色器面板 执行【窗口】【混色器】命令，可以打开【混色器】面板。 上面这两个面板主 要用来控制图形的 色彩和透明度 色彩的两种表示方 法：“十六进制”和 “红绿蓝” 在制作Flash MX动画过程中，若背景采用渐变色，往往 能表现出更加复杂深入的场景。设置渐变色时，通常都是利用 【混色器】调配颜色。 尽管渐变色会增加生动有趣的效果，但是过多使用将会 增加计算机的系统消耗，并降低动画的播放速度。在进行 动画设计时，既要考虑画面的艺术效果又要了解计算机的 性能要求，这样才能做出优秀的作品。 5、颜色面板 执行【窗口】【颜色面板】命令 ，可以打开【颜色面板】面板 主要用来指定用户自定义的颜色 用来显示或设置当前选中图形 的坐标、大小、色彩等。 和后面的属性面板类似。 6、“信息面板” 执行【窗口】【信息】命令， 可以打开【信息】面板。 说明：正常情况下一个动画只要一个场景。 因为Flash版本的不同，场景的打开方式也不一样。大部分情况通过“窗口” -“其他面板”-“场景”打开、或使用“Shift +f2” 7、场景面板 8、文档的属性 9、舞台、工作区、场景 用户在制作动画时，可以同时编辑多个场景，但在播放 时将按照设定好的顺序播放。需要注意的是，在编辑时，对 场景的删除是不可恢复性操作，用户在操作时应十分谨慎。 场景：可独立放映和制作、也可以相互 组合为一个整体的一段动画。 舞台：就是指工作区中在动画播放时 显示的区域。如：图中的白色区域。 工作区：用户可以操作的区域。 10、时间轴 时间轴:一个以时间为基础的线形进度表. 或者说是影片中图形等元素播放的顺序和速度的设置 时间轴的实质： 所有的动画都有一张一张的静态的图按顺序和设定的速 率组成。时间轴就是用来控制图播放的顺序和速率的工具。 概述 时间轴是动画的主线，帧是构成动画的基本元素 帧频率：每秒播放的帧的个数。（fps）(标准的为24fps，Flash为12fps) 注意事项：一个动画只能有一个帧频率；帧频率可以在属性进行设置 图层：放置动画中的图形、图象的场所。 多个图层可以同时工作，每一个都可以单独编辑，都可以设置不同 的动画效果。 相当于透明的纸,多个图层在一起,如果上面画的有东西就会挡住下面纸上的 东西,否则下面图层内容就可以正常显示. 图层的叠放顺序会直接 影响对象的显示效果。 位于上方图层中的对象 总是盖在下方图层中的 对象上面。即新创建的 对象总在当前对象的上 方，总会覆盖当前对象 图层的锁定主要是担心在操作其他图层时无意中影响该图层。 于是把该图层固定住。锁定的图层无法编辑。 图层的显示与隐藏 隐藏的目的是当心该图层影 响、干扰当前编辑图层。 隐藏的图层只有在编辑的时候 看不到，但是在输出和播放时 仍然可以正常显示。 图层的轮廓 在创建影片过程中，通常为了减少 干扰需要隐藏、锁定某些图层。但 是有时候又需要知道隐藏图层中图 形的位置。轮廓就是只显示图形的 边框（避免干扰，又可以看到位置） 创建、删除、更名图层、选取与复制图层 （演示） 3 关于帧 帧：动画的基本单位，代表动画中间的某个具体的画面。 （1）关键帧是指动画中定义的可更改的帧，其中包括影 片中某个帧的动作脚本的修改。通常作为影片的开始和结束 。在两个关键帧中间Flash会自动根据需要填充，在用户不 需要控制的情况下，形成完整的动画。 （2）除了关键帧之外，所有出现在【时间轴】窗口中的 帧都统称为帧。他们无法被编辑修改。 帧居中和洋葱皮 1、帧居中 播放帧：播放的时候起点（只在测试的时候有效） 可以改变播放帧的位置。 2、洋葱皮 三、图形的绘制与处理 1、基本图形的绘制 A、 绘制直线 和Flash以前的版本一样，Flash MX绘制直线也是用【线条工 具】来绘制。通过执行【窗口】【工具】命令，或者使用快捷键 【Ctrl+F2】可以打开绘图工具栏。 使用滑竿可以以0.25的整数倍设置【笔触高度】。若采用 输入方式，则可以输入从0.1-10的任意数值作为【笔触高度】 。默认状态下【笔触高度】为1。 当使用【线条工具】在场景中绘制直线时，如果按下【 Shift】键，可以沿水平、垂直或45度方向绘制直线。 而按下Ctrl键可以暂时切换到“选择工具” B、矩形工具 通过【矩形工具】可以绘制矩形图形。 当使用【矩形工具】在场景中绘制矩形时，如果按下【 Shift】键，则可以绘制正方形。 有两种颜色设置: 一、填充色：内部颜色 二、笔触色：边线的颜色 C、椭圆工具 当使用椭圆工具在场景中绘制椭圆时，如果按下【Shift 】键，可以绘制出正圆。 有两种颜色设置: 一、填充色：内部颜色 二、笔触色：边线的颜色 D、铅笔工具 E.钢笔工具 主要用来绘制精确的路径,如直线、流动的曲线等等。 属性面板可以设置所绘画线的形状、颜色等等 F.刷子工具 5.1刷子选项: 可以根据选择刷子的大小(10种)和刷子的模式(9种) 5.2刷子的属性 只有一种填充色的设置. 5.3刷子的模式 标准绘画:同一图层图形的线条和填充色 颜料填充:与上类似,只是不影响线条 后面绘画:不影响对象本身,涂在所有对象后方. 内部绘画:将颜色涂入起始点所在的封闭区域 颜料选择:涂入预先选取的区域范围. 刷子的特点和使用范围: 能绘制出刷子一样特殊效果,例如书法. 通常用于填充精确度要求不高的对象. G、底管工具 复制一个图形的边线或内部区域的属性。象格式刷 H、橡皮檫 擦除矢量图和位图。 I、颜料桶和墨水平：改变图形的颜色。 J、任意变形工具。 【任意变形工具】可以对图片进行旋转与倾斜、放大和缩小。 先选中图片和【任意变形工具】后，再在【工具】选项中点击【缩放】按钮， 就可以对选中的图形进行垂直或水平方向上的放大或缩小。当按住【Shift】键 的同时按住鼠标拖放，可以等比例进行缩放。 在图形进行缩放、旋转与倾斜等变形时，通常在选 中图片和变形工具时，图片四周会出现八个方形点，而 图片中心会出现一个圆形点，这个圆形点就是我们经常 提到的定位点。在进行变形时这个定位点十分关键，它 代表缩放、旋转的基点，当不改变它的位置表示图片在 此基点上进行缩放和旋转。若改变了定位点，则表示图 片在改变后的基点上进行缩放和旋转等变形。 在变形操作期间拖动定位点则可以重新定位图片等 对象。双击定位点时将恢复到默认的中心位置；在变形 期间按住【Alt】键拖动，就会切换缩放或倾斜变形的定 位点。 2、图形、声音等的处理 标题栏:显示当前标题 (可识别是公用库还是专用库) 预览窗口:显示预览效果 列表栏:列出了库中所包含元素的 名称、类型、使用次数、连接、 修改时期等（可以是单个文件或 文件夹） 编辑工具：有个按钮，可以完成 库文件的编辑（插入、新建文件夹 元件属性、删除等） 切换排序次序、宽库视图、窄库视图 库：保存元件、对 元件进行规范 化管理的存储 空间。 库：公用库 专用库 专用库：每一个动画文件中都有的，仅存放当前动画中元素的库 菜单：窗口库命令。 或者：trl+L 包含的元素有：当前编辑环境下所有的元件以及导入的位图、声 音、视频和其他对象等。 专用库通常有动画制作者自己控制的元件 公用库是有动画提供给制作者，为制作者 节省时间而提供的公共的、常用的、通用 的元件 公用库 、按钮库 窗口其他面板公用库按钮 里面包含各种内容丰富的、形式多样的按钮标本，而且可以在 预览窗口中查看。 、类库 窗口其他面板公用库类 其中共有三个元件：数据绑定元件、应用组件、 网络服务组件。 、学习交互库 提供了许多各种形式的交互。 导入图片的处理： 选择“文件”-“导入”菜单命令，在弹出的对话框中可选择需要的图片。 如果导入的是矢量图，则可直接进行操作。如果是位图除特殊情况外（作 背景图片、不改变图片的结构只是改变大小等等）则需要转换为矢量图形 在进行图片的处理。 导入图片时，可以同时选择多幅图片进行导入。如果图片与Flash MX 不兼容时，就会弹出一个警示窗口，说明该文件不能被导入，用户需 单击【确定】按钮取消导入操作。 将位图转换为矢量图 执行【修改】 【位图】 -【转换位图为矢量图】命令 【颜色阈值】中输入一个介于 1 到 500 之间的值。 【最小区域】中输入一个介于 1 到 1000 之间的像素值。 【曲线拟合】用于确定绘制轮廓的平滑程度。 【转角阈值】用于确定是保留锐边还是进行平滑处理。 颜色阈值：指明两个颜色之间的差异的大小。如果他们在RGB 颜色值上的差值低于该阈值，则两个像素被认为是 颜色相同。则说明该阈值越小显示效果越好，也意 味着所占的存储空间越大，颜色的数量越多。 四、元件的创建和使用 1、元件的创建 元件：（狭义的概念）在lash中所创建的图形、按钮或影片剪辑等一次创建 可多次重复使用的元素、符号、对象。 （广义的概念）除上面所说的三种之外，还包括用户导入的图形、图象 声音、动画等一次导入，多次使用的元素。（出现在库中的元素都可以 称为元件）。 元件的特点： 、加快影片的播放速度： 在使用元件时，如果使用多个同一对象，在下载时只需要下载一个，避免 重复下载。加快了影片的播放速度。 、简化文档的编辑 把多次使用的对象制作为元件。当元件修改时，由同一元件生成的所有实 例都会随之更新，而不必逐一更改，节省创作时间，提高了工作效率。 、占用的存储空间小 使用文件时，在影片中只会保存元件。实例只是用文字性信息说明实例的 位置和其他属性。所以在用的存储空间小。 、创建完善的交互性 在元件中可以添加动作脚本，实现动画控制。 、制作运动补间动画时必须使用元件制作。 元件的类型 每个元件都有唯一的时间轴、舞台以及几个层。 、图形 存放单独的图象，并可创建连接到主时间轴的可重复使用的动画片段。 图形元件与主时间轴同步运行，当主动画停止时，图形元件的动作也将随之 停止。交互式控件和声音在图形元件的动画序列中不起作用。 、影片剪辑 拥有自己独立于主时间轴多帧时间轴，不受场景和时间轴的影响。可以 包含交互式控件、声音甚至其他影片剪辑实例，可以响应脚本行为。 在使用影片剪辑时即使只有一个帧，也可以看到动画效果。 、按钮 按钮元件有种不同的状态来显示，可以创建响应鼠标点击、指针经过 和其他动作的交互式按钮。主要功能是检测鼠标的动作并产生互动功能。而 且按钮元件可以带有音效。 说明：元件用户自己可以制作。同时lash自己也自带了很多元件，这些在 “公用库”中，“窗口”“其他面板”“公用库” 元件、实例与库的关系 元件：动画可重复使用的、作为整体存在的元素和对象。 实例：元件在舞台中的一个应用被称为一个实例。 库 ：动画中存放元件、管理元件的地方。 说明：、一个元件可以对应多个实例，一个实例必须对应一个元件。元件 是指元素存储中的状态，实例是指应用中的情况。 、把元件转为实例的目的是节省存储空间 、元件的改变会影响与之有关的所有实例，实例的改变不会影响元件。 、在某些情况下动画必须有元件完成。例如：补间动画。 操作实例6-3 创建图形与影片剪辑元件 操作步骤： 图形与影片剪辑的创建方法相同。 在“插入”菜单选择“新建元件”选项，弹出“创建新元件”对话框。 在“行为”中选择“图形”或“影片剪辑”选项。 单击“确定”按钮，进入“图形”或“影片剪辑”的编辑状态。 完成编辑后，单击如图6-18所示的“场景1”，返回动画的主场景。 注意事项：1、在同一个元件库中，无论他们类型是否相 同，元件的名称必须是惟一的。 2、在设置元件时，要注意对象的具体位置，元件的中 心就是舞台上的那个十字符号。 影片剪辑元件的创建 影片剪辑：是可以单独重复使用的动画片段。他有自己的时间 线，主要用来制作独立于主影片时间轴的动画。可以 设想其为主电影中嵌套的小电影。 与图形元件的区别：和图形元件一样都可以是一个动画。但在播 放时影片剪辑只需要一个关键帧，播放完全独立于主 场景。即主场景播放结束时，他的时间轴还是继续播 放直到结束。 图形实例则必须放在需要他的每一帧。 影片剪辑元件的创建演示： 、插入-新建元件，或者Ctrl + F8，选择“影片剪辑”；制作一个动画； 单击场景回到正常的动画编辑模式已经编辑好一个影片剪辑元 件。（只需要一个关键帧就可以播放） 、制作一个动画，选取所有的帧并复制； 插入-新建元件 ，选择影片 剪辑类型；在出现的元件编辑模式下，单击第一帧，选择“粘贴帧”命令， 将所有已经复制的帧粘贴过来；选择“编辑”“编辑文档”或者“场景 ”标签，退出元件编辑模式；使用该影片剪辑查看效果。 按钮元件的创建 按钮：是一个只有四帧的特殊影片剪辑，主要用于交互式的影片中，可 以响应鼠标和键盘的触发事件 按钮一般有四个帧，用来表示按钮的四个状态： 【弹起】状态：指鼠标没有接触按钮时，按钮处于弹起位置。 【指针经过】状态：指鼠标指针移到按钮上面，但没有单击时的鼠标状态。 【按下】状态：指鼠标移到了按钮上，并且单击了鼠标的左键时，按钮所处 的状态。 【单击】状态：这个状态一般是按钮的核心状态，也是响应事件的状态。 、公用库中的按钮 公用库提供了很多好看的按钮给用户使用，窗口其他面板 公用库按钮 按钮的创建有4种状态：弹起状态（up）、指针经过状态（ over）、按下状态（down）、点击区域（hit）。 操作实例6-6 创建按钮 操作步骤： 选择“编辑”菜单的“清除”选项，以确定舞台上没有对象被 选中。 创建新元件 在“创建新元件”对话框选择“按钮”选项。 在“弹起”状态下，使用圆形工具创建按钮图形。 在“指针经过”状态下，选择“插入”、“插入关键帧”选项 ，复制弹起帧。 改变“按下”帧图形的状态与颜色。 对“按下”帧和“点击”帧重复、步骤的操作。 返回影片场景。 在“编辑”菜单选择“编辑所选项目”返回动画编辑状态，从 库面板将按钮拖拽到舞台上，完成按钮的制作。 、按钮元件的创建演示： 总结： 插入-新建元件，或者Ctrl + F8，选择“按钮”；在舞台中出现四个关 键帧，分别用不同的图形元素表示不同的关键帧；回到场景。 把制作的按钮元件拖到场景舞台中测试。 编辑元件 、复制元件 -演示 、 删除元件-演示 若删除元件则和元件对应的实例也随之删除。 、 改变元件的名称和行为类型 改变元件名称的同时也可以改变元件的类型。 更名方法：一、右击-重命名 二、属性。 三