由于去年公布了新的HTML5标准,说以很多网站现在都开始用新的Adobe Edge animate CC制作网页动画了。今天第七下载小编就给大家带来一片如何用Adobe Edge做一个最简单的HTML5动画的教程。
1.首先可以在本站下载这款Adobe Edge animate CC中文破解版,按照要求进行破解安装后就可以打开文件了。
以下就以做一个最简单的方块动画来说明基本用法:
1. 使用方块工具在stage上画一个方块, 顺便将前景色选为蓝色
2. 我们目标是让方块移动到右下角, 在移动过程中改变它的透明度 和 旋转角度
所以我们先要对这几个参数建立关键帧
右击方块, 在弹出菜单中选择“添加关键帧-不透明”
3. 然后我们在下方的动作面板中将初始的透明度修改为20
4. 然后我们将右边的时间浮标拖动到一个随意的时间点, 点击透明度修改框右边的小按钮, 再次创建一个关键帧
5. 创建完第二个关键帧后, 我们再对透明度进行修改, 改为100
此时能够发现在两个时间点的关键帧直接出现了淡黄色填充条, 代表这里已经存在一个变化的过程了, 我们此时可以点击Play按钮试一下
6. 如法炮制, 我们可以再添加一个旋转的动画, 只要右击选择“添加添加关键帧”- 旋转(或者直接在左边修改旋转值也可以)
注意一定要保证你运行动画的两端时间点都有关键帧, 关键帧通过点击属性修改框右边的菱形按钮添加
7. 此时应该可以运行2个动画了, 按play键试试呗~
接下来我们可以对这个矩形再添加一个简单的事件, 比如鼠标单击时使动画回放
我们需要在“动作”菜单中找到“Rectangle”, 点击左边的{}添加事件处理程序
8. 选择Click事件
9. 在代码编辑框中选择右边的Play Reverse选项添加回放的功能. (当然你也可以自己编写自己的代码)
10. 编辑完毕后直接关闭即可, 由于在编辑窗口中无法直接响应点击事件, 我们需要保存为HTML文件在浏览器中进行试验
11. 我们可以发现它生成了好多JS文件
其中edge_includes文件夹中存放了JQuery库的文件以及Edge的共用JS库文件
其余js文件则是当前页面所需要的js文件
12. 直接用支持HTML5的浏览器打开HTML文件, 就可以看到效果啦~!
Adobe Creative Suite软件类:Adobe创意套件,是Adobe系统公司出品的一个图形设计、影像编辑与网络开发的软件产品套装。该套装目前的最高版本是Adobe Creative Cloud,根据受众市场的不同分为M大师版、网页设计版...
动画制作 / 35 KB
动画制作 / 219.6 MB
动画制作 / 219.49 MB
动画制作 / 5.45 MB
动画制作 / 6.46 MB
软件评论
请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!