如何制作3D按钮

无论是网页还是动画，按钮是经常用到的一种交互方式。如果按钮具有一定的特色，它可以吸引人们的眼球，使网页或者动画更加引人注目。那么如何制作一个令人过目不忘的3D按钮呢？今天小编将与大家分享制作3D按钮的过程，仅供参考使用。

步骤一：启动Flash CS5，新建一个Flash文档

在Flash CS5中点击"Actionscript 2.0"，然后新建一个大小为550*400，帧频为15fps，背景色为黑色的Flash文档。

步骤二：导入按钮所需的图片

执行"文件-导入-导入到库"命令，将事先准备好的图片导入到库中进行查看。

步骤三：创建按钮的图形元件

执行"插入-新建元件"命令，新建一个名称为"01"的图形元件。选择工具箱里的矩形工具，在编辑区域绘制一个填充颜色为00ffcc、笔触颜色为00ffcc、笔触大小为1的长方形。

步骤四：复制和粘贴图形元件

选中该矩形，并按下Ctrl C组合键进行复制，然后按下Ctrl Shift V组合键进行原位置粘贴，并向左上方移动。改变填充颜色为33cc66。

步骤五：创建按钮的影片剪辑元件

新建图层2，选择工具箱里的文本工具，在编辑区域输入"图1"。执行"插入-新建元件"命令，新建一个名称为"2"的影片剪辑元件。将图形元件"01"连续拖入到编辑区域四次，并调整其位置。

步骤六：插入关键帧并删除图形元件

在时间轴面板中选择前四帧，依次插入关键帧。选择第二帧，删除一个"01"元件。选择第三帧，删除两个"01"元件。选择第四帧，删除三个"01"元件。

步骤七：创建图片的图形元件

执行"插入-新建元件"命令，新建一个名称为"pic1"的图形元件。在库中选择一张图片，拖拽到编辑区域，并设置全居中。然后按下Ctrl B组合键将图片打散。

步骤八：重复步骤七创建其他图片的图形元件

重复步骤七，采用相同的方法新建图形元件"pic2"和"pic3"，分别将库中的另外两张图片拖拽到编辑区域进行打散。

步骤九：创建图片的影片剪辑

执行"插入-新建元件"命令，新建一个名称为"picture"的影片剪辑。将元件"pic1"拖拽到编辑区域，设置全居中。在属性面板中设置alpha为0。在第15帧处插入关键帧，将alpha值设置为100%，并在1-15帧中创建补间动画。

步骤十：创建按钮元件

执行"插入-新建元件"命令，新建一个名称为"按钮"的按钮元件。在"点击"中插入关键帧，选择工具箱里的矩形工具，在编辑区域绘制一个矩形。

步骤十一：将按钮元件添加到舞台

返回主场景，将影片剪辑元件"2"拖拽到舞台中，连续3次，并调整它们的位置和大小。分别修改实例名称为"up1"、"up2"、"up3"，并为每个按钮添加投影滤镜效果。

步骤十二：为按钮添加动作

点击时间轴下面的"新建图层"按钮，新建图层2。将按钮元件"按钮"拖拽到舞台三次，并调整它们的大小和位置。

步骤十三：制作图片的传统补间动画

选择第一"按钮"元件，并打开其动作面板，输入代码"stop();"。同样地，选择第二和第三个"按钮"元件，并分别添加相同的代码。

步骤十四：将影片剪辑添加到舞台

新建图层3，将库中的影片剪辑"picture"拖拽到舞台，并设置大小为500*300，并调整其位置。修改实例名称为"ss"。

步骤十五：保存并测试按钮

执行Ctrl S进行保存，保存名称为"3D按钮"。然后按下Ctrl Enter进行测试，查看按钮的效果。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。