FLASH MX2004 动画按钮教程

FLASH MX2004 动画按钮的教程

效果




FLASH按钮的基本定义：

按钮里有4帧：弹起，鼠标经过，按下，点击。  


创建按钮    
按钮实际上是四帧的交互影片剪辑。当为元件选择按钮行为时，Flash  会创建一个四帧的时间轴。前三帧显示按钮的三种可能状态；第四帧定义按钮的活动区域。时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳到相应的帧。  

要制作一个交互式按钮，可把该按钮元件的一个实例放在舞台上，然后给该实例指定动作。必须将动作指定给文档中按钮的实例，而不是指定给按钮时间轴中的帧。  

按钮元件的时间轴上的每一帧都有一个特定的功能：  

第一帧是弹起状态，代表指针没有经过按钮时该按钮的状态。    
第二帧是指针经过状态，代表当指针滑过按钮时，该按钮的外观。    
第三帧是按下状态，代表单击按钮时，该按钮的外观。    
第四帧是“点击”状态，定义响应鼠标单击的区域。此区域在  SFW  文件中是不可见的。

……

现在，跟我一起来制作动态按钮吧。
一、
打开FLASH MX 2004，在画布上绘制一个矩形。
—新建FLASH文档，选择矩形工具，笔触颜色设置为无，取消边线。




选择刚绘制的矩形，在属性中设置其宽高和位置。
—根据自己的需要设置，这里我设置成宽度180PX，高度80PX，X和Y轴位置都为0


二、
将矩形转换成按钮，选中矩形，点右键/转换为元件。快捷键F8。


在弹出的“转换为符号”面板中，设置其名称和行为类型。
—此处名称为：bnt_1，行为类型为：按钮。注册为重心点，默认不做更改。


确定之后，双击按钮，进入内部编辑。
—我们将矩形由第一贞弹起状态移动到第四贞点击状态。直接拖动第一贞即可，或者剪切贞。


返回场景
—双击画布中空白区域，或者点返回场景


三、
将按钮转换为影片剪辑
—在按钮上右击/转换元件


在弹出的“转换为符号”面板中，设置其名称和行为类型。
—此处名称为：mc_1，行为类型为：影片剪辑。注册为重心点，默认不做更改。


四、
确定之后，双击影片剪辑，进入内部编辑。
（4.1）
锁定图层1，暂不做编辑。新建图层2，拖到图层1底下，不是非要拖到图层1底下，看个人排列习惯而已。
在图层2上，用文本工具输入按钮上要显示的文字。此处为：按钮，黑体，60PX，加粗。
为了不被第一层的按钮遮挡，又可以参考第一层的位置，可将第一层设置为轮廓模式。









（4.2）
接下来开始做鼠标移上和移出按钮的效果了，这里就可以无限创意喽，我做个简单的白色三个圆形扩大成背景的效果吧。
还是新建图层，图层3，


使用椭圆工具，取消边线。在按钮外侧绘制一个圆形，(按住shift，可绘制正圆)






创建补间动画
在图层3上右击选创建补间动画到第10贞(F6插入关键贞)。贞数自己调节一下喽，不宜太长。
将其他图层跟进到第10贞。






在第7贞，放大圆形。(为方便观察,我将背景改为深灰色)


如法，绘制另两个圆形补间动画。要注意的是，第7贞时，三个圆形要能够把按钮覆盖住。


（4.3）
为按钮增加背景和遮照
背景：
新建图层6，绘制矩形180*80PX。




调节透明度或者更改颜色，总之使按纽和它周围的颜色能区分开就可以了。此处调节透明度为40%


遮照：
复制背景贞图层6


在补间动画上面新建图层7，粘贴背景贞图层6到图层7。


把图层7设为遮照层。


把另两个补间动画层都拖入到遮照层影响范围下。
因为设置图层7为遮照后，它就直接作用到它下面的一层补间动画，所以需要将另两层没有作用到的层，也拖进来。按住shift点选图层4和图层5，向图层7拖动，当图层4和图层5图标与图层3对齐，变为绿色，就可以了。


新建图层8，再第1贞和第7贞，各自添加stop命令。


（4.4）
回到放置按纽的图层1，点击按纽(注意是点按纽，而不是贞哦)，
在动作里输入如下命令：
on (rollOver) {
    gotoAndPlay(2);
}
//当鼠标滑入时,转到第2贞并播放
on (rollOut) {
    gotoAndPlay(7);
}
//当鼠标滑出时,转到第7贞并播放
on (release) {
    getURL("#", "_blank");
}
//当鼠标点击时, 在新窗口中打开地址#


回到场景，给图层1添加stop命令。


设置文挡的属性为180*80(按纽大小)


输出测试影片就可以啦！


点击下载FLASH原文件
有什么问题就给我留言吧

[本日志由 admin 于 2008-11-04 07:59 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: