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

FLASH入门动画

幸运鸟
新闪光时代

第九节 按钮制作(二)

大家试着点一点上面的按钮,看看这个按钮和上一节我们讲到的按钮有什么区别。对了,除了外形不一样以外,最大的区别就在于当鼠标滑过按钮上方时,是播放一小段动画而不仅仅是切换成另外一张图片。这就是我们这一节要学习的,制作一个动态按钮。

大家知道,按钮的制作实际上是按钮的一般(Up)鼠标经过(Over)、鼠标按下(Down)反映区(Hit)关键帧的制作,上一节中我们在这四帧中分别放上不同的静止的图形类元件,这样生成的按钮就成为静态按钮。相反,如果我们在其中某些关键帧中放入的是动态的影片剪辑(Movie Clip), 当特定鼠标事件产生时,就会表现为动态的效果。这个道理我想是很容易理解的,所以这一节也会相对简单一些。

下面就让我们来研究一下上面的这个动态按钮是怎么做出来的。

首先打开一个新文件,按Ctrl-F8新建一个图形类(Graphics)元件并将元件命名为Next Up。这个元件将用于按钮在正常状态下的外形。进入元件编辑模式后选矩形工具,拉出一个宽比高稍短一点的红色矩形来,如下图一所示。然后我们用箭头工具把矩形移动到如图二所示位置,让十字中心点位于矩形右边的中心。当箭头移到矩形右上角时,形状变成图三所示,大家一看就知道我们要做什么了。如图四和图五那样,分别把矩形的右上角和右下角拉到右边的中心点位置,这样,我们就把用作按钮一般(Up)帧的三角形图片做好了。做这个三角形的方法很多,大家也可以用铅笔或线条工具试一下。
                       
   图一          图二         图三         图四         图五

大家注意到鼠标滑过上面的按钮时,按钮变成黄色三角形,并且重复调用四次,所以我们需要为制作这个影片剪辑而事先准备一张黄色三角形元件。因为它的形状和刚才做的next up红色三角形元件一样,所以我们只要对上面做好的元件稍加修改就行了。新建一个图形类元件,命名为next over,进入元件编辑画面,按Ctrl-L打开图库面板,从预览窗口把红色的三角形直接拖到编辑区中,在该三角形被选中的情况下,按Ctrl-B把它打散,用油漆桶工具选黄色的填充色在三角形中点一下。这样我们就做好了这个元件。用同样的方法,我们再做一个名为next down的绿色三角形图符用做按钮按下状态时的外观。

下面我们来制作按钮鼠标按下(Over)帧上将要用到的影片剪辑(Movie Clip)。新建一个元件,起名为movie,并选择它的类型为影片剪辑(Movie Clip)。进入编辑画面,发现与主场景的编辑画面很相似。从图库窗口中选中next over,从预览窗口中把黄色的三角形拖到编辑区中。在第2帧按F6键插入一关键帧,在这一帧上再从预览窗口中把黄色的三角形拖到编辑区中,放在原来的那个三角形右边,这样就有两个并排放置的三角形。在第2帧用鼠标左键点击右边的三角形,并通过菜单项的窗口->面板->效果打开效果面板,选择效果为Alpha并将其值设为80,使得右边三角形稍稍透明一些。同样,在第3帧按F6键插入关键帧,与其上帧的操作一样,再拖进一个三角形并排放在右边,然后把最右边的三角形Alpha值设为60。第4帧也是如此,只不过最右边的三角形的Alpha值为40。

现在按钮主要关键帧上所要放的图片和影片剪辑我们都已经做好了,现在就可以动手制作了。按Ctrl-F8新建一按钮类元件,取名为button。在一般(Up)帧,把红色三角形next up从图库拖到编辑窗口。在鼠标经过(Over)帧上用鼠标点一下,按F6插入关键帧。因为我们要用电影片断取代红色的三角形放在这里,所以要求它们应放在同一位置,这里我们提供一种对齐方法。因为在鼠标经过(Over)帧按的是F6,所以这一帧的内容为一般(Up)帧一致,均为红色三角形,从图库中拖出名为next over的影片剪辑,把它放在红色三角形的上方,用键盘上的方向键调整它的位置,使它刚刚好把红色三角形完全遮住。现在在影片剪辑被选中的情况下,按Ctrl-X把它从画面中剪取出来,这时画面中只剩红色的三角形。用箭头工具选中红色的三角形,按Delete键把它删掉,再按Ctrl+Shift+V把剪取的影片剪辑粘帖到原处,这样影片剪辑就与刚才的红色三角形在同一位置。同样,也可以用相同的对齐方法把绿色的三角形放在Down帧同一位置上。这样,一个按钮就做好了。

为了看一下效果,我们回到主场景中,从图库中把这个按钮拖出来,再按下Ctrl-Enter查看结果。

               

严格地说,上面这个按钮并没有玩多大,大家一看就应该知道是怎么做的,所以幸运鸟也不准备讲得太多。不过这个按钮虽然很普通,但多少会给大家一些启发,其实按钮的变化千姿百态,大家多看看,多想想,就会设计出有创意的作品来。

这个按钮中,文字出现的次数比较多,且具有不同的效果,所以把文字做成元件是必要的,我们首先创建一个新的图形类元件,名为An Wo,在编辑状态下选文字工具以适当大小颜色的字体写上“按我”两个字。同样的方法,我们可以做好名为Xie Xie的元件,是由“谢谢”两个字组成的,用于按钮鼠标按下(Down)帧下影片剪辑的制作。

下面我们来做鼠标按下(Over)帧下将要用到的影片剪辑。按Ctrl-F8键新建一影片剪辑(Movie Clip)类元件,取名为over movie。从图库中把做好的“按我”元件拖动到编辑窗口中。现在新建两个层,在时间轴窗口把最初的那个层拖到新建的两个层之间。回到最初的那一层,用箭头工具选中“按我”,按Ctrl-C键把它复制到剪帖板中,分别点新建的两个层的第1帧,按Ctrl+Shift+V把刚才复制的内容分别粘帖到这两层中,这时三个“按我”文字重合。现在我们分别对这三个实例进行编辑,首先修改原有层。点击时间轴窗口新建两个层下对应的黑点,把这两层锁住。用鼠标左键双击“按我”文字,在实例属性对话框中把Alpha值改为80。然后把原来的层锁住,对新建两个层分别解锁进行编辑,把它们的第一帧“按我”文字的Alpha值均设为80。在新建两个层的第12帧分别按F6新增关键帧,然后在第12帧处把两层中的文字一个向右上方拖出一定距离,一个向左下方拖动一定距离,并分别设置这一帧中文字的Alpha属性值为0,也就是全透明,这时新建的这两层在这一帧中将看不到内容,但仍可以选择文字实例。接下来在这两个图层上创建动画动作,在原来层的第16帧按F5,使得该层内容一直保持到第16帧。这样这个影片剪辑就做好了,我们可以按下回车键查看效果。

鼠标按下(Down)帧所需要用到的影片剪辑我就不准备再讲了,因为和上面讲的差不多做法。这些都做好后,新建一个按钮类元件,先用矩形工具拉出一个矩形框来做背景,再把不同的元件和影片剪辑分别放在按钮的不同帧上,把位置放好就行了。

[上一页] [下一页]


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