· 用户注册 · 设为首页 · 加入收藏 · 联系站长 · · ·
 | 网站首页 | 文章中心 | 图片中心 | 影音在线 | 下载中心 | 许愿祝福 | 我要投稿 | 
您现在的位置: 生物小吧 >> 文章中心 >> 网站建设 >> 正文 今天是:
第10课 交互动画的灵魂——按钮
作者:佚名    文章来源:不详    点击数:811    更新时间:2010/6/3
         【字体:

第10课 交互动画的灵魂——按钮

素材和源文件素材和源文件下载

按钮元件是Flash的基本元件之一,它具有多种状态,并且会响应鼠标事件,执行指定的动作,是实现动画交互效果的关键对象。
   从外观上,“按钮”可以是任何形式,比如,可能是一幅位图,也可以是矢量图;可以是矩形,也可以是多边形;可以是一根线条,也可以是一个线框;甚至还可以是看不见的“透明按钮”。
   先来看一看各种各样的按钮吧!

各种各样的按钮范例

学习目的

  u       创建按钮的方法
  u      
用按钮控制动画的播放

课前热身

本实例是一个精美的按钮元件,下面是这个按钮的运行效果。

 

按钮效果

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】,并从【库】面板中将“圆形按钮”元件拖放一个实例到舞台上,然后按下CtrlEnter组合键测试一下,怎么样?将你的鼠标指针移动到按钮上,够漂亮吧?

课堂讲解

1.再说按钮
  
按钮有特殊的编辑环境,通过在四个不同状态的帧时间轴上创建关键帧,可以指定不同的按钮状态,如图
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控制的对象。
   你一定为那些精彩的动画游戏以及丰富多彩的网络交互动画所惊叹,按钮在其中起着举足轻重的作用,其实,通过自己不断的磨练,你完全能够做出让别人赞叹的作品!

2.用按钮控制动画播放
  
按钮元件是
Flash的基本元件之一,它具有多种状态,并且会响应鼠标事件,执行指定的动作,是实现动画交互效果的关键对象。

用按钮控制动画播放 

这是一个用按钮控制动画播放的实例。动画运行时,一个小球在画面上循环不停的跳动,在画面左上角有两个按钮,分别单击它们可以控制停止和播放小球的动画,

以下是制作过程:
   (
1)打开小球动画影片文档
   在
Flash MX 2004中,执行[文件]|[打开]命令将小球动画影片文档(小球跳动.fla)打开。打开以后,我们可以先按下Ctrl+Enter组合键对动画进行测试,观察一下动画效果。在[测试窗口]中我们可以观察到,小球在舞台上一直循环不停的跳动。下面我们就创建一个按钮对象,用按钮来控制这个小球动画的播放。
   (
2)创建按钮元件
  这里创建一个五角形的按钮。制作步骤略。我们已经在“小球跳动.fla”元件中包括了这个按钮元件,你打开库就可以看到。
   (
3)引用按钮实例
  步骤
1 引用第1个按钮
   现在按下
F11打开[]面板,在其中你会发现一个按钮元件,即我们刚才创建的名字为“播放按钮”的按钮元件,如图7所示。用鼠标单击这个按钮元件的名字,在[]面板上面可以看到这个元件的预览效果。拖动鼠标将这个按钮元件从[]面板拖放到舞台的左上角合适位置。这个按钮将要定义的功能是,单击它可以让小球动画继续播放。

7 〔库〕面板中的按钮 

  步骤2 引用第2个按钮
   现在我们还需要一个控制小球动画停止播放的按钮。再从
[]面板拖放一个按钮元件的实例到舞台左上角,然后执行[修改]|[变形]|[水平翻转]命令,使这个按钮实例水平翻转一下,这样,舞台上就出现了两个不同效果的按钮元件实例了。

说明:我们在场景中将按钮元件实例更改了效果,并不影响[]面板中的按钮元件原来的效果。

  (4)定义按钮的动作脚本
  步骤
1 定义第1个按钮的动作脚本
   选择舞台上的第
1个按钮,打开[动作]面板,在其中输入on(,这时弹出一个鼠标事件下拉列表,从其中选择[press],然后输入:   
   {
  play
();
   }

这样,第一个按钮的动作脚本就定义完成了,完整的动作脚本是:
  
onpress{
   play
();
  
}

这个动作脚本的功能是,当用鼠标单击这个按钮时,舞台上的动画开始播放。

  步骤2 定义第2个按钮的动作脚本
   第
2个按钮的动作脚本和第1个的定义过程类似,先选择第2个按钮,在[动作]面板中按照前面的方法定义这个按钮的动作脚本是:   
   onpress{
   stop
();
   }

这个动作脚本的功能是,当用鼠标单击这个按钮时,舞台上的动画停止播放。
  好,下面我们按下按下
Ctrl+Enter组合键测试一下吧,怎么样?两个按钮实现控制小球动画播放的效果了吧。

课后练习

  1.  本课前向你演示了各种各样的按钮,你根据看到的效果制作出相应的按钮元件
 
2.  下面一个范例是一个隐藏按钮的应用,你能制作出来吗?

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    生物小吧