EdgeAnimate操作简捷.docx

Adobe Edge Animate 入门教程：熟悉软件 最简单的 Abode Edge Animate 动画示例 此软件目前为免费软件，所有安装过程没有什么任何验证码或登录等阻碍（鉴于软件目前没有中文 界 面，故 而 本 人 选 择 了 英 文）。安 装 完 成 之 后，启 动 软 件：1.创建一个 Abode Edge Animate 新文件：鼠标左键单击下图按钮，即可成功创建一个空白的 Abode Edge Animate 文件 创建成功的软件使用界面：-最上面为菜单栏；-菜单栏下面为工具栏；-左侧为属性栏；-空白区域为设计区域；-空白栏下面为动作栏；-空白区域右边为文件栏；-最右边为介绍栏。2.点击“工具栏”上面的绘制 O 型图像按钮（图中已经用红色框出）：3.在空白工作区域绘制圆 4.点击左侧“属性栏”中的“color”下面的第一个按钮设置圆的颜色：5.在工作区域的“动作栏”栏中，点击“1”出按钮，激活时间属性，然后用鼠拖住“尺标按钮”往 右 边 滑 动，滑 动 到 所 需 要 的 时 间：（本 例 为0.01秒）6.然后用鼠标将圆移动 0.01 秒之后到达的位置：7.保存文件，大功告成！示例展示：刚开始打开网页页面的截图：0.01秒 之 后，网 页 上 面 的 圆 匀 速 运 动 到 了 设 置 的 位 置：教程 1.创建新的 Edge Animate 作品 启动 Edge Animate，创建一个新项目。设定 Stage（舞台）宽度为 550px,高度为 250px。Ctrl+S 保存为 smurf.html。一个标准的 Edge Animate 项目是由一系列 html,css,js 和相关资源文件组成的。如下图所示：o Edge Animate 的工程文件:.an 格式文件更像一个空壳文件或者索引文件，标明了项目的必要信息。你可以使用记事本打开.an 文件了解其中具体内容。o edge_includes 目录：该目录下是 Edge 制作的 HTML5 动画所依赖的 JS 类库：edge.1.5.0.min.js 和 jquery-1.7.1.min.js。o 其他.js 文件：诸如 smurf_edge.js 等 js 文件是专门针对当前动画所生成 js 文件。o.html 文件：主 html 文件。Edge Animate 项目文件结构 3.导入 Smurf SpriteSheet 点击菜单“File-Import”,或者快捷键 Ctrl+I/Command+I，来导入 smurf_sprite.png 到舞台。在舞台上选中导入的图片，在左边栏 Position and Size 栏目下，设定其 X 坐标值=0px,y 坐标值为45px，保证第一个 smurf 的位置在舞台最左侧并垂直居中。如下图：Smurf+SpriteSheet+Sample1 4.使用 Clip 切割 Spritesheet，显示单一 Sprite 元素 我们导入的蓝精灵 Spritesheet 是 256*256 大小的透明背景 png图片，一共描绘了 16 个蓝精灵行走的姿态。通过序列播放这 16个行走姿态，就可以制作一个完整蓝精灵行走动画。首先，要在舞台上只显示一个 Sprite 元素，比如最左上角的第一个蓝精灵。在 Edge Animate 左侧属性面板中，倒数第二个栏目是 clip 子面板。顾名思义，clip 功能区可以帮助我们“切割”舞台上的元素，比如图片。该功能区实际上利用了 CSS 的 clip 属性。点击 clip 子面板的开关按钮，可以激活 clip 功能。使用鼠标，可以在 clip 属性设定面板上的上、下、左、右属性值上滑动，你可以在舞台上实时看到“切割”的图片情况。如下图。在本例中，请设定 clip 的 top，right，bottom，left 属性值分别为 0,128,128,0。Smurf+SpriteSheet+Sample+Clip 5.创建 16 个 Keyframe，实现行走动作 接下来，我们创建十六个帧来完成蓝精灵行走的动作。1)调整帧间隔 在舞台下方的时间轴上，Edge Animate 用竖线网格标记了每帧间距。在 Smurf 行走动画中，我们希望在 1 毫秒的时间左右完成一个行走动作，即 16 帧。因此，我们需要通过时间轴下方的 Gird Size图标调整时间轴为 15 帧/秒。如下图：Smurf+SpriteSheet+GridSize 2)激活“Auto-Keyframe Mode(自动创建帧)”Edge Animate 有三个非常重要的按钮分别开启 Auto-Keyframe Mode（自动创建关键帧）、Auto-Transition Mode 和 Toggle Pin（大头针）。图标如下图：Edge Animate Buttons 本例中，我们将启用 Auto-Keyframe Mode，而关闭Auto-Transition Mode 和 Pin。在启用 Auto-Keyframe Mode 的情况下，每当我们在新的一帧修改舞台中元素的属性，Edge Animate会自动在此创建关键帧。由于我们关闭了Auto-Transition Mode，因此 Edge Animate 将不会自动在关键帧之间创建过渡效果。设定的效果如下图：Smurf+SpriteSheet+Sample3 3)创建第一个关键帧 在时间轴上，把播放头移到 0:00 秒位置，选中舞台中的蓝精灵，在左边属性面板中的 Image 子面板下，确认 Background Image的 x 和 y 属性值为 0，然后点击 x 和 y 属性边上的小菱形符号（当鼠标移到该菱形符号时，其变为黄色，并显示 tips：“Add Keyframe for Background Position”），此时 Edge Animate 将在时间轴的0:00 秒出创建第一个关键帧。如下图：Smurf+Spritesheet+Sample4 4)创建 2-16 个关键帧 在时间轴上，移动播放头到第二帧（00:00:066）,确认已经激活“Auto-Keyframe Mode”(小钟图标显示为红色)，并已关闭 Pin 和Auto-Transition Mode。选中舞台中的蓝精灵，然后在左边栏Image 面板中，修改 Background Image 的 x 属性为-128，y 保持为 0。实际上，我们把 SpriteSheet 图片向左移动了 128 像素，来显示第一排第二个 Sprite。此时，你应该看到，在时间轴上，Edge Animate 自动创建了第二个关键帧。如下图：Smurf+Spritesheet+Sample5 依次类推，分别将播放头移动到第三到第 16 帧，并通过设定background image 的 x 和 y 属性值，来顺序显示 SpriteSheet 中其他的 Sprite。1 到 16 帧的 background image 属性值如下：1-16 关键帧属性值 创建完成后，如下图：16 个关键帧 此时，你可以来回移动播放头，看到舞台上的蓝精灵行走的动画效果。6.预览 使用快捷键 Ctrl+Enter/Command+Enter，可以启动默认浏览器看起运行的效果.后续 现在，蓝精灵已经实现了行走动作，但是还没有完成行进，还不能移动。而且，行走动作只播放 1 秒钟（不能循环）即停止了。我们在将在下面的教程中逐步完善。