china.com
主页
新闻
体育
游戏
文化
教育
健康
财经
科技
旅游
军事
娱乐
商贸
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  


第九节 按钮制作(二)


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

大家知道,按钮的制作实际上是按钮的UpOverDownHit关键帧的制作,上一节中我们在这四帧中分别放上不同的静止的图形类图符,这样生成的按钮就成为静态按钮。相反,如果我们在其中某些关键帧中放入的是动态的电影片断(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帧用鼠标左键双击右边的三角形,进入图符属性对话框,在Color标签下把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帧所需要用到的电影片断我就不准备再讲了,因为和上面讲的差不多做法。这些都做好后,新建一个按钮类图符,先用矩形工具拉出一个矩形框来做背景,再把不同的图符和电影片断分别放在按钮的不同帧上,把位置放好就行了。

如果还有什么不明白的地方,可以点这里下载源文件,下去再好好研究一下。

  摘自《新闪光时代》 幸运鸟/文

 


科技检索


中华网推荐

  • 1000名医生在线咨询

  • 中国足球队官方网站

  • 鸦片玫瑰(新版)

  • 精选股票天地

  • 闪光的flash教程

  • 中华网汽车世界

  • 为你的爱情出谋划策

  • 网文精选——野百合集

  • 世界文化遗产在中国

  • 历届香港小姐风姿集




  • 网络教室编辑信箱
    版权声明 | 本站检索 | 联系方法 | 刊登广告 | 使用说明 | 关于中华网 | 豁免条款

    版权所有 中华网