《EdgeAnimate操作简捷》由会员分享，可在线阅读，更多相关《EdgeAnimate操作简捷（14页珍藏版）》请在金锄头文库上搜索。
1、Adobe Edge Animate 入门教程：熟悉软件最简单的 Abode Edge Animate 动画示例此软件目前为免费软件， 所有安装过程没有什么任何验证码或登录等阻碍 （鉴于软件目前没有中文 界 面 ， 故 而 本 人 选 择 了 英 文 ） 。 安 装 完 成 之 后 ， 启 动 软 件 ：1. 创建一个 Abode Edge Animate 新文件：鼠标左键单击下图按钮，即可成功创建一个空白的 Abode Edge Animate 文件创 建 成 功 的 软 件 使 用 界 面 ：-最上面为菜单栏；-菜单栏下面为工具栏；-左侧为属性栏；-空白区域为设计区域；-空白栏下面为动作栏
2、；-空白区域右边为文件栏；-最右边为介绍栏。2. 点击“工具栏”上面的绘制 O 型图像按钮（图中已经用红色框出）：3. 在空白工作区域绘制圆4. 点击左侧“属性栏”中的“ color ”下面的第一个按钮设置圆的颜色：5. 在工作区域的“动作栏”栏中，点击“ 1 ”出按钮，激活时间属性，然后用鼠拖住“尺标按钮”往 右 边 滑 动 ， 滑 动 到 所 需 要 的 时 间 ： （ 本 例 为 0.01 秒 ）6. 然后用鼠标将圆移动 0.01 秒之后到达的位置：7. 保存文件，大功告成！示例展示：刚 开 始 打 开 网 页 页 面 的 截 图 ：0.01 秒 之 后 ， 网 页 上 面 的 圆 匀
3、速 运 动 到 了 设 置 的 位 置 ：教程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 制
4、作的 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 栏目下，设定其
5、X 坐标值 =0px,y 坐标值为45px ，保证第一个 smurf 的位置在舞台最左侧并垂直居中。如下图：Smurf+SpriteSheet+Sample1 4. 使用 Clip 切割 Spritesheet ，显示单一 Sprite 元素我们导入的蓝精灵 Spritesheet 是 256*256 大小的透明背景 png图片，一共描绘了 16 个蓝精灵行走的姿态。通过序列播放这 16个行走姿态，就可以制作一个完整蓝精灵行走动画。首先，要在舞台上只显示一个 Sprite 元素，比如最左上角的第一个蓝精灵。在 Edge Animate 左侧属性面板中，倒数第二个栏目是 clip 子面板。 顾名
6、思义， clip 功能区可以帮助我们 “ 切割 ” 舞台上的元素，比如图片。该功能区实际上利用了 CSS 的 clip 属性 。点击 clip 子面板的开关按钮，可以激活 clip 功能。使用鼠标，可以在 clip 属性设定面板上的上、下、左、右属性值上滑动，你可以在舞台上实时看到 “ 切割 ” 的图片情况。如下图。 在本例中，请设定 clip 的 top ， right ， bottom ， left 属性值分别为 0, 128,128,0 。Smurf+SpriteSheet+Sample+Clip 5. 创建 16 个 Keyframe ， 实现行走动作接下来，我们创建十六个帧来完成蓝精
7、灵行走的动作。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
8、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 秒位
9、置，选中舞台中的蓝精灵，在左边属性面板中的 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 M
10、ode ”(小钟图标显示为红色 )，并已关闭 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 秒钟（不能循环）即停止了。我们在将在下面的教程中逐步完善。
