交互动画按钮
按钮元件是
Flash
的基本元件之一,它具有多种状态,并且会响应鼠标事件,执行指定的动作,是实现动画交互效果的关键
对象。
从外观上,“按钮”可以是任何形式,比如,可能是一幅位图,也可以
是矢量图;可以是矩形,也可以是多边形;可以是一根线条,也可以是一个线框;甚至还可以是看不见的“透明按钮”。
按钮有特殊的编辑环境,通过在四个不同状态的帧时间轴上创建关键帧,可以指定不同的按钮状态,如图
4-4-1
所示。
图
4-4-1
按钮的四帧编辑环境
【弹起】帧:表示鼠标指针不在按钮上时的状态。
【指针经过】帧:表示鼠标指针在按钮上时的状态。
【按下】帧:表示鼠标单击按钮时的状态。
【点击】帧:定义对鼠标做出反应的区域,这个反应区域在影片播放时是看不到的。
【点击】帧比较特殊,这个关键帧中的图形将决定按钮有效范围。它不应该与前
3
个帧的内容一样,但这个图形应该大到足够
包容前
3
个帧的内
容。
注意:有的朋友总是抱怨:怎么我的按钮“一闪闪的”,很难单击它!这一般发生在文字类
按钮,如果你没在“按钮有效区”关键帧设置一个适当图形,那么,这个按钮的有效区仅是第一帧的对象,文字的线条较细且分散,难怪很难找到“有效区”了!
“有效区”图形还可以充满整个屏幕,退出按钮编辑后,“有效区”图形是不可见的。
根据实际需要,你还可以把按钮做成如图
4-4-2
所示的结构。
图
4-4-2
按钮的帧内容可以随意扩充
从图
4-4-2
中可以看到,按钮的
3
个“状态关键帧”中,可以放置除按钮本身以外的任何
Flash
对象,其中:【状态音效】图层设置
了
2
种音效;【按
钮动画】图层使鼠标不同操作出现不同动画效果,而【按钮底图】中可放置不同的图片。
你可以想象一下:利用这个特点,我们可以把按钮做成何等有声有色、变化无限的效果!
在
Flash 5
及之前的版本中,按钮的“状态关键帧”还接受
ActionScript
指令,从
Flash MX
开始已经废弃了这一功能,事实上,在按钮实例中加入“事件指令”更方便、更灵活!
按钮的“事件指令”以及在这些“事件”中进行的动画编程,使按钮的创作空间变得无比宽广!
另外,“按钮”还可以设置“实例名”,从而使按钮成为能被
ActionScript
控制的对象。
你一定为那些精彩的动画游戏以及丰富多彩的网络交互动画所惊叹,按钮在其中起着举足轻重的作用,其
实,通过自己不断的磨练,你完全能够做出让别人赞叹的作品!
下面我们还是从最基础的开始吧!一起制作一个精美的按钮。
实例简介
本实例是一个精美的按钮元件,如图
4-4-3
所示是这个按钮的运行效果。
素材:叮
当声
点
击声
图
4-4-3
实例效果
制作步骤
1
.新建按钮元件
新建一个影片文档,执行【插入】
|
【新建元件】命令,弹出一个【新建元件】对话框,在【名称】中输入“圆形按钮”,选择【行为】为
【按钮】类型,如图
4-4-4
所示。
图
4-4-4
新建按钮元件
单击【确定】按钮,进入到按钮元件的编辑场景中,如图
4-4-5
所示。
图
4-4-5
圆形按钮的编辑时间轴
2
.创建按钮
(
1
)绘制按钮图形
步骤
1
创建【弹起】帧上的图形
将【图层
1
】重新命名为“圆形”,选择这个图层的第
1
帧(弹起帧),利用【椭圆工具】绘制出如图
4-4-6
所示的按钮形状。
图
4-4-6
【弹起】帧上的图形
这个形状是由
一个蓝色圆形和一些小椭圆形状组合而成的,另外为了表现球的立体感,在蓝色圆形下边还绘制了一个椭圆阴影。你可以参考配套光盘上的源文件进行绘制,另外你
完全可以充分发挥自己的想象力,绘制出更漂亮的按钮图形。
步骤
2
创建【指针经过】帧上的图形
选择【指针经过】帧帧,按
F6
键插入一个关键帧,并把该帧上的图形重新填充为橄榄绿色,如图
4-4-7
所示。
图
4-4-7
【指针经过】帧上的图形
步骤
3
创建【按下】帧上的图形
【按下】帧上的图形和【弹起】帧上的图形相同,因此利用复制帧的方法即可得到。先用鼠标右键单击【弹
起】帧,在弹出的菜单中选择【复制帧】命令,然后用鼠标右键单击【按下】帧,在弹出的菜单中选择【粘贴帧】命令即可。
步骤
4
创建【点击】帧上的图形
选择【点击】帧,按
F7
键插入一个空白关键帧,这里要定义鼠标的响应区。用【矩形工具】绘制一个矩形,如图
4-4-8
所示。注意一定要让这个矩形完全
包容前面关键帧中的图形。
图
4-4-8
【点击】帧上的图形
说明:【点击】帧中的内容,在播放时是看不到的,但是它可以定义对鼠标单击
所能够做出反应的按钮区域。也可以不定义【点击】帧,这时【弹起】状态下的对象就会被作为鼠标响应区。
(
2
)创建文字效果
为了使按钮更实用并更具动感,下面我们在圆形按钮图形上再增加一些文字特效。
步骤
1
创建【文字
1
】图层
在【圆形】图层上新建一个图层,并重新命名为“文字
1
”。在这个图层的第
1
帧,用【文本工具】输入“
play
”文字,字体颜色用黑色,如图
4-4-9
所示。
图
4-4-9
创建【文字
1
】图层
步骤
2
创建【文字
2
】图层
在【文字
1
】图层上新建一个图层,并重新命名为“文字
2
”。先将【文字
1
】图层上的文字原样原位置复制到【文字
2
】图层的第
1
帧上。方法是,单击选择【文字
1
】图层上的文字,执行【编辑】
|
【复制】命令,然后单击选择【文字
2
】图层的第
1
帧,执行【编辑】
|
【粘贴到当前位置】命令即可。
除了【文字
2
】图层,锁定其他图层,然后选择这个图层上的文字对象,按下向上方向键和向左方向键各两次,然后将文
字的颜色更改为绿色。这样就形成一个立体效果的文字,如图
4-4-10
所示。
图
4-4-10
【弹起】帧的文字效果
选择【文字
2
】图层的第
2
帧,按
F6
键插入一个关键帧,将这个关键帧上的文字颜色改为蓝色,如图
4-4-11
所示。
图
4-4-11
【指针经过】帧的文字效果
至此,这个按钮元件就制作好了,现在我们返回【场景
1
】,并从【库】面板中将“圆形按钮”元件拖
放一个实例到舞台上,然后按下
Ctrl
+
Enter
组合键测试一下,怎么样?将你的鼠标指针移动到按钮上,够漂亮吧?
课堂练习:
完成以下按钮实例
分享到:
相关推荐
FLASH制作的交互动画效果,开始 停止按钮,大家一学习。
点击图标按钮开始下载图片,正在传输图片中...传输完成,开始下载,正在下载,图片下载交互动画演示ppt模板。
html5+svg制作购物车付款按钮ui交互动画特效代码.zip
html5基于svg制作点击按钮纸屑散开飘落,纸屑按钮交互ui动画特效。
一款趣味十足的js+css3制作的软件卸载对话框表情交互动画特效,当鼠标靠近保留或卸载按钮时会有不同的表情变化。
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
用Axure实现单选按钮交互效果,比如我们点击按钮,展开内容,再点击一次则内容影城起来,并且加上动画效果.有详细的图文结合
JS+CSS3帆船按钮交互动画特效是一款创意的点击按钮扬帆起船动画,按钮变形交互动画特效。
非常实用的特效代码,可以完美运行,可以二次修改!
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
Selteco Flash Designer 可以为你的网页创建交互式的 Flash 动画,可以用它创建网页的 Flash 按钮或是 Banner,网页菜单,或是综合的网页,还可以导入 GIF 动画文件,将其直接转换为 Flash 动画。使用多达 130 种...
jQuery基于css3属性制作简洁美观的下载按钮动画特效,点击下载按钮出现交互式动画特效。
css3 UI开关按钮特效是一款纯css3实现的ui设计开关按钮。 css3 UI开关按钮特效图:
1.FlashCtrl.exe是VS2005编写的C++程序 2.Temp.swf是 FlashCS5 编写的as3脚本程序 3.测试需要将FlashCtrl.exe和Temp.swf放在同一...8.通过6.7两种数据交互实现flash-vc互相通讯 9.若不能加载swf电脑需先安装flash插件
在简单动画中,Flash按顺序播放动画中的场景和帧,而在交互动画中,用户可以使用键盘或鼠标与动画交互。例如,可以单击动画中的按钮,然后跳转到动画的不同部分继续播放;可以移动动画中的对象;可以在表单中输入...
GButton 简单的uGUI按钮动画工具 特征 动画类型: 规模 颜色 声音的 雪碧 填充量 Unity版本 Unity2019.4或更高版本 下载 执照 麻省理工学院执照
CSS3动画下载按钮特效是一款jQuery基于css3属性制作的点击下载动画按钮ui交互式特效。
多媒体技术及应用:第5章 动画处理技术.ppt
flash是Macromedia公司的一个的网页交互动画制作工具。 我们可以从Macromedia公司的主页上下载flash的试用版。与gif和jpg不同,用flash3.0制作出来的动化是矢量的,不管怎样放大、缩小,它还是清晰可见。 用flash...