收藏本站
 
设为主页
     您的位置:首页资源库动画制作Flash教程
== 资 源 搜 索 ==
 
高级搜索
== 学 习 资 源 ==
操 作 系 统
Windows DOS
Linux Unix
Novell OS/2
办 公 软 件
Word Excel
Access Powerpoint
Outlook Wps
媒 体 处 理
网页制作 动画制作
图片处理 视频处理
媒体播放 音频处理
课件制作 其它……
网 络 工 具
网页浏览 下载工具
FTP 工具 邮件工具
网络安全 服 务 器
联络聊天 其它……
工 具 软 件
压缩工具 系统工具
文件工具 磁盘工具
病毒防治 阅读工具
测试工具 程序设计
== 素 材 资 源 ==
GIF动画 Flash动画
按钮图库 图标图库
线条图库 背景图库
创意图库 音频素材
== 教 程 下 载 ==

FLASH入门动画

幸运鸟
新闪光时代

第八节 按钮制作(一)

这一节,我们来学习按钮的制作方法。在上一节中,我们曾经做过一个简单的按钮,但是很不全面,现在我们就来学习一个完整按钮的制作过程。

新建一个文件,按Ctrl-F8创建元件,命名新元件为Button,并在下面的作用(Behavior)选项中选按钮(Button),确定。这样我们就进入了按钮的编辑窗口。注意这时时间轴上只有四帧,如右图所示:。这四帧的含义分别如下:一般--我们平时所看到的样子(鼠标未移到上面);鼠标经过--当鼠标位于按钮上的样子;鼠标按下--当鼠标在按钮上按下的样子;反应区--设置相应鼠标的范围。

首先我们来画一般(Up)帧上的内容,也就是正常状态下按钮的外观。选绘图工具栏中的矩形工具,在编辑窗口中间拉出一个不带边线的矩形来,为了美观起见,也可以选选项中的设置圆角。用颜料桶工具选中深蓝色,在矩形上点一下,矩形这时以深蓝色填充。选文字工具,设置适当的字体,颜色,字号等,在矩形中间写上“按我”。选箭头工具,在刚刚输入的文字上点鼠标右键,在弹出的菜单中选比例(Scale)。我们对文字进行放缩处理,使它排放在深蓝色矩形的合适位置。

一般(Up)帧下的内容已经做好了,我们现在再来做鼠标经过(Over)帧的内容,也就是鼠标滑过按钮表面时按钮的外观。在鼠标经过(Over)帧上用鼠标左键点一下,并按F6把这一帧设为关键帧,这时该帧具有和一般(Up)帧相同的内容。选择颜料桶工具,选中灰绿色,用颜料桶在矩形上边线附近点一下,注意点中间的文字不会有效果,这时矩形框填充灰绿色。选择箭头工具,双击矩形中间的文字,进入文字编辑模式,通过字符面板改变文字的字号和颜色,并在文字输入框中输入“我会变色”。这样,我们又做好了按钮的第2帧。

鼠标按下(Down)这一帧的做法和前两帧相同,先用F6在这一帧插入一关键帧,然后一方面用颜料桶工具选黄色填充矩形,另一方面用箭头工具双击矩形中间的文字部分,在文本编辑状态下改为“再变一次”。

最后一帧是反应区(Hit)帧。它的作用是定义按钮对鼠标做出反应的区域。一般情况下这一帧可以省略掉,但对于某些特殊情况,你可能会需要为按钮指定对鼠标做出响应的特殊区域,这时这一帧就很关键了。按下F6插入关键帧,把文字部分选中删除掉就行了,这样就设定对鼠标响应的区域就是这个矩形区域。

这四帧全部设置好以后。我们点时间轴窗口左上角的回到主场景中,按Ctrl-L打开图库面板,从它的预览窗口中把刚才做好的按钮拖到工作区中。按Ctrl-Enter观看一下效果,应该和我上面的按钮差不多。

                 

下面我们玩大一点,做一个比较逼真一些的按钮。按钮的样子就如上面所示,怎么样,还不算太差吧。其实做这个按钮也不难,幸运鸟之前也从来没有做过按钮,这次破例做了一次竟然只用了半个小时就做好了,相信大家不会比我差,我也会把制作的步骤说得尽量详细一些的。

事实上,要做一个逼真的按钮,最关键的不是制作方法,而是对光影效果的掌握。如上图所示,现在按钮处在正常状态下,也就是对应着按钮里的Up帧。大家一看就知道,这个按钮的外观实际上是由几个图片组合在一起的。没错,我们现在把组成按钮外形的几个图形类元件分离开来,大家就更清楚了。下图所示就是在按钮正常状态下,组成按钮外观的三个元件,从左到右按它们在按钮中的位置排列。当它们三个叠在一起时,由于各部分光强和阴影效果的反差,就形成了上图所示的样子。

                
我们先来看一看位于最上面的这个桔黄色圆盘是怎么做的。其实这也是由两个元件组成的,见下图。按下Ctrl-F8,新建一个元件,命名为top,并确认是图形类元件后回车。在该元件的编辑模式中,我们先用椭圆工具出除边线,选棕黄渐进色,拉出一个圆球来,注意在绘制圆球前按下Shift键,这样保证拉出的是正圆而不是椭圆。绘制好以后,我们用颜料桶工具,还选用刚才的棕黄渐进色在球的右上方点一下,这样就把高亮点移到了球的右上方,如下面的右图所示。背景球做好以后,我们点时间轴下方的新建一个层。选中新层的第一帧,用椭圆工具去除边线,选桔黄色按住Shift键拉出一个比刚才的球小一圈的圆来。我们可以在这个桔黄色的圆上点鼠标右键,用菜单中的比例(Scale)命令调整它的大小。然后,我们用鼠标或方向键把圆移到球的中间,让它们的圆心位于同一位置,因为圆所在的层位于球所在层的上面,所以圆也位于球的上面。当然,为了更真实一些,这个桔黄色的圆实际也是用渐进色填充的,只不过色彩上变化不明显罢了。
                 
下面我们来做按钮的中间部分,就是上面那个中间亮两端暗的金属片样子的元件。再创建一个图形类元件,命名为Middle,这些我就不多说了。制作这个金属片的光效有两种方法。一种方法如下图所示,先绘制一个任意颜色,不带边线且比刚才做的桔黄色圆盘稍大一点的正圆,如下图一所示。然后我们用箭头工具在图中拉出一个矩形框选中这个圆的上半部分,见图二。选择油漆桶工具,将颜色设置为黑白线性渐进色,在图中圆形的阴影部分点一下,结果变成图三所示那样。接着我们在油漆桶工具的选项中选中来改变渐进色的方向。在圆的上半部分点一下,结果如图四所示。
            
     图一            图二            图三           图四
用鼠标拖动平行线上圆形的旋转修改手柄调整渐进色方向为上面暗下面亮的状态,见图五。再用鼠标拖动平行线上方形的手柄将渐进色范围压缩为图六所示状态。现在我们就得到了如图七所示的半个金属片光效的元件。用同样的方法将圆的下半部分也做好,或者把下面的部分删除,把上面做好的部分复制做镜像再拼在一起也可以得到相同的效果。关于油漆桶工具的这个选项我们上一章曾详细介绍过,这一节只是它的一个实际应用。
                   
      图五                 图六                 图七
另外一种做金属光效的方法是先选择椭圆工具,点击菜单项的窗口->面板->填充打开填充面板,选择线性渐进色,按New键新建一个颜色,把左边黑色的指针井拖进关键色设置滑杆的中心位置,并在左边增加一个控制滑杆并设置其颜色为黑色,将中间的颜色调为白色,两端的颜色设为黑色,即得到中间亮两端暗的新线性渐进色。如图所示。用这个颜色直接绘制出一个圆来,该圆就是以这种颜色填充的,然后我们只需要对圆作一个旋转处理以获得所需的颜色方向就行了。

按钮的最下面的那一层是一个球,我想大家肯定都会做的,我就不再多说了,不过这个球要比中间的那个金属片还要大一圈。

以上是制作按钮一般(Up)帧所要用到的元件。现在来做按钮,按Ctrl-F8新建一元件,命名为Button,且作用选项为Button。在一般(Up)帧把图库中已经做好的三个元件依次拖到编辑窗口中,中心对齐排列好即可。

按钮的鼠标经过(Over)帧与一般(Up)帧的内容很接近,只不过最下面的那个球的颜色稍微调亮了一些,如下图所示,其余的桔黄圆盘和金属片都不变。

                  
按钮的鼠标按下(Down)帧在鼠标经过(Over)帧的基础上稍加变化,把桔黄色圆盘缩小一些就行了。至于反应区(Hit)帧,我们只需要把鼠标按下(Down)帧中桔黄色圆盘和金属片删除即可。

这样我们就做好了一个样子不错的按钮,大家也可以多看看别人的按钮是如何利用光影效果的,本节中的这个按钮大家如果还有什么不懂的地方,可以点这里下载原文件再好好研究一下。

[上一页] [下一页]


Copyright © 2001-2002 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View