EdgeAnimate操作简捷

《EdgeAnimate操作简捷》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、AdobeEdgeAnimate入门教程：熟悉软件最简单的AbodeEdgeAnimate动画示例此软件目前为免费软件，所有安装过程没有什么任何验证码或登录等阻碍（鉴于软件目前没有中文界面，故而本人选择了英文）。安装完成之后，启动软件：1.创建一个AbodeEdgeAnimate新文件：鼠标左键单击下图按钮，即可成功创建一个空白的AbodeEdgeAnimate文件创建成功的软件使用界面：-最上面为菜单栏；-菜单栏下面为工具栏；-左侧为属性栏；-空白区域为设计区域；-空白栏下面为动作栏；-空白区域右边为文件栏；-最右边为介绍栏。2.点击“工具栏”上面的绘制O型图像按钮（

2、图中已经用红色框出）：3.在空白工作区域绘制圆1.点击左侧“属性栏”中的“color”下面的第一个按钮设置圆的颜色：1.在工作区域的“动作栏”栏中，点击“1”出按钮，激活时间属性，然后用鼠拖住“尺标按钮”往右边滑动，滑动到所需要的时间：（本例为0.01秒）2.然后用鼠标将圆移动0.01秒之后到达的位置：1.保存文件，大功告成！示例展示：·刚开始打开网页页面的截图：·0.01秒之后，网页上面的圆匀速运动到了设置的位置：教程1.创建新的EdgeAnimate作品启动EdgeAnimate，创建一个新项目。设定Stage（舞台）宽度为550px,高度为250px。Ctrl+S

3、保存为smurf.html。一个标准的EdgeAnimate项目是由一系列html,css,js和相关资源文件组成的。如下图所示：oEdgeAnimate的工程文件:.an格式文件更像一个空壳文件或者索引文件，标明了项目的必要信息。你可以使用记事本打开.an文件了解其中具体内容。oedge_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文件。Ed

4、geAnimate项目文件结构3.导入SmurfSpriteSheet点击菜单“File->Import”,或者快捷键Ctrl+I/Command+I，来导入smurf_sprite.png到舞台。在舞台上选中导入的图片，在左边栏PositionandSize栏目下，设定其X坐标值=0px,y坐标值为45px，保证第一个smurf的位置在舞台最左侧并垂直居中。如下图：Smurf+SpriteSheet+Sample14.使用Clip切割Spritesheet，显示单一Sprite元素我们导入的蓝精灵Spritesheet是256*256大小的透明背景png图片，一共描绘

5、了16个蓝精灵行走的姿态。通过序列播放这16个行走姿态，就可以制作一个完整蓝精灵行走动画。首先，要在舞台上只显示一个Sprite元素，比如最左上角的第一个蓝精灵。在EdgeAnimate左侧属性面板中，倒数第二个栏目是clip子面板。顾名思义，clip功能区可以帮助我们“切割”舞台上的元素，比如图片。该功能区实际上利用了CSS的clip属性。点击clip子面板的开关按钮，可以激活clip功能。使用鼠标，可以在clip属性设定面板上的上、下、左、右属性值上滑动，你可以在舞台上实时看到“切割”的图片情况。如下图。在本例中，请设定clip的top，right，bottom，l

6、eft属性值分别为0,128,128,0。Smurf+SpriteSheet+Sample+Clip5.创建16个Keyframe，实现行走动作接下来，我们创建十六个帧来完成蓝精灵行走的动作。1)调整帧间隔在舞台下方的时间轴上，EdgeAnimate用竖线网格标记了每帧间距。在Smurf行走动画中，我们希望在1毫秒的时间左右完成一个行走动作，即16帧。因此，我们需要通过时间轴下方的GirdSize图标调整时间轴为15帧/秒。如下图：Smurf+SpriteSheet+GridSize2)激活“Auto-KeyframeMode(自动创建帧)”EdgeAnimate有三个

7、非常重要的按钮分别开启Auto-KeyframeMode（自动创建关键帧）、Auto-TransitionMode和TogglePin（大头针）。图标如下图：EdgeAnimateButtons本例中，我们将启用Auto-KeyframeMode，而关闭Auto-TransitionMode和Pin。在启用Auto-KeyframeMode的情况下，每当我们在新的一帧修改舞台中元素的属性，EdgeAnimate会自动在此创建关键帧。由于我们关闭了Auto-TransitionMode，因此EdgeAnimate将不会自动在关键帧之间创建过