edge切换html5,如何用Adobe Edge做一个最简单的HTML5动画

1、首先在如图位置，用鼠标右击。点击新建合成组。

2、在弹出的面板中，设置下面的持续时间为三秒，点击确定。

3、然后在下面的面板中，鼠标右击，点击新建，选择固态层。

4、在弹出的固态层设置中，设置宽高为200px,选择颜色为黄色，点击确定。

5、下面我们已经建了一个固态层，点击键盘上的p键，调出位置功能。

6、点击位置前面的秒表。

7、然后拖动时间轴，在拖动上面的黄色方块。

8、这样一个简单的动画就做好了，点击右上角预览控制台中的播放按钮，就可以看见一个运动的黄色方块了。

以下就以做一个最简单的方块动画来说明基本用法：

1. 使用方块工具在stage上画一个方块， 顺便将前景色选为蓝色

2. 我们目标是让方块移动到右下角， 在移动过程中改变它的透明度 和 旋转角度

所以我们先要对这几个参数建立关键帧

右击方块， 在弹出菜单中选择 Add Keyframe - Opacity

3. 然后我们在下方的Timeline面板中将初始的透明度修改为20

4. 然后我们将右边的时间浮标拖动到一个随意的时间点， 点击透明度修改框右边的小按钮， 再次创建一个关键帧

5. 创建完第二个关键帧后， 我们再对透明度进行修改， 改为100

此时能够发现在两个时间点的关键帧直接出现了淡黄色填充条， 代表这里已经存在一个变化的过程了， 我们此时可以点击Play按钮试一下

6. 如法炮制， 我们可以再添加一个旋转的动画， 只要右击选择Add Keyframe- Rotate (或者直接在左边修改Rotate值也可以)

注意一定要保证你运行动画的两端时间点都有关键帧， 关键帧通过点击属性修改框右边的菱形按钮添加

7. 此时应该可以运行2个动画了， 按play键试试呗——

接下来我们可以对这个矩形再添加一个简单的事件， 比如鼠标单击时使动画回放

我们需要在右上角的Elements菜单中找到Rectangle, 点击左边的Open Actions添加事件处理程序

8. 选择Click事件

9. 在代码编辑框中选择右边的Play Reverse选项添加回放的功能。 (当然你也可以自己编写自己的代码)

10. 编辑完毕后直接关闭即可， 由于在编辑窗口中无法直接响应点击事件， 我们需要保存为HTML文件在浏览器中进行试验

点击左上角File-Save as 保存为HTML文件

11. 我们可以发现它生成了好多JS文件

其中edge_includes文件夹中存放了JQuery库的文件以及Edge的共用JS库文件

其余js文件则是当前页面所需要的js文件

12. 直接用支持HTML5的浏览器打开HTML文件， 就可以看到效果啦——！