Adobe Edge Animate教程:[1]hello world

作者:朋克周 | 创建时间: 2023-03-31
Adobe Edge Animate 是一个非常好用的html5 动画制作软件,它能够通过 HTML5、JavaScript、jQuery 和 CSS3 来制作跨平台、跨浏览器的网页动画,Adobe Edge Animate 制作的网页动...
Adobe Edge Animate教程:[1]hello world

操作方法

打开AN。单机如下图所示

进入到工作界面,允许我不讲解各个区块的作用,因为没有什么意义。可以关掉右边的教学区块,是工作区更大。

置入下载好的地球.png图片。双击之后拉入工作区。

为新置入的图片更改名称,保持良好的习惯是为了以后做大型的模更一目了然。改名就在这里改。

将地球图片缩放到合适大小放到如下位置上,注意引导线。出现了引导线说明你的图片是对齐的。

点击左上角大小栏X Y的小星星,是关键引点加入到下面。如图所示

将时间轴拉到两秒的位置。

顺着引导线移动地球到一半的位置,如图所示,让你移动完成之后在下面时间动画的一栏会有绿色线条充满。

在2秒的位置加入3个关键点。分别是透明度  X   Y 。

将时间轴拉至4秒,拖动图片至满工作区。时间条会自动填充满2-4秒。

将左上角透明度一栏的百分比拉到百分之零。表现为地球图片消失。

在上部工具栏插入文字。

在红框位置调整文字大小。

在4秒位置点击左上角透明度关键点,为文字添加一个透明度关键点,将时间轴拉至5秒位置。

将透明度拉至百分之零。再将时间轴拉至0秒,为文字添加一个透明度关键点。拉至4秒位置,设置为百分之零到百分之一百。

拉动0秒文字透明度关键点至4秒位置,0-4秒刚刚已经充满的时间条会变没。关键点会变成空的状态。

到此就全部做好了。保存。保存的时候最好存在文件夹里面。也就是做的一个内容存一个文件夹,因为每做一个内容会出现不止一个文件。

存好之后会有以下这些文件,双击html文件就会在浏览器里面播放所做的动画了。

温馨提示

第14到第16步的文字部分有朋友不清楚可以问我。
点击展开全文

更多推荐