028-86261949

当前位置:首页 > 技术交流 > 按钮小动画效果制作

按钮小动画效果制作

2017/03/09 15:19 分类: 技术交流 浏览:232

如何制作一个按钮动画效果呢?

准备素材

先用利用PS制作好一枚精致的小按钮图标,然后使用“WEB存储为所有格式”导出该按钮图标的PNG格式(导出格式选择-”png-24”)

接下来,就可以开始打开我们的An (原名:Flash),现在开始制作我们的按钮图标动画了;

1.打开软件,新建一个ActionScript3.0类型的文档

2.背景舞台设置一个深灰色

(可以在界面右侧的属性面板中找到---舞台)

3.使用左侧顶部菜单栏中的“文件”,选择“导入-导入到库”把我们的输出文件给导入到库中(库-可以在整体界面右侧的属性面板旁边选择)

4.接下来,使用快捷键“Ctrl+F8”创建一个新元件-元件类型选择“按钮”

5.在新的元件舞台上,使用我们的按钮元件的时间轴编辑动画“帧”(此时,可以直接从库中把我们的按钮图片拖入元件的舞台之上)

对应的时间轴状态如下:

6.这时候鼠标选择“按下”位置的帧右键弹出选择框,选择“插入关键帧”

得到如下状态的时间轴的“帧”

8.此刻,回到舞台上,选择我们对应该帧的图片,然后最右侧工具栏选择“任意变形工具”

   

9.使用鼠标将我们这一帧的图片内容等比例缩小一点(按住Shift键缩放)

10.然后,回到我们的主舞台之上(舞台界面左上角位置,点击如图所示的“场景1”),再从库里把我们的“按钮元件”拖拽至主舞台上摆放好

 

 

11.最后,只需点击”Ctrl+Entre”就可以预览我们的按钮小图标的点击动画效果了!

自己可以试着把鼠标移到按钮之上点击看效果哦!

#标签:UI设计,动画设计,按钮动画设计,源码时代,UI设计培训