文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计Flash → FlashMX经典实例-按扭类:弹缩按钮

FlashMX经典实例-按扭类:弹缩按钮

时间:2004/11/7 2:25:00来源:本站整理作者:蓝点我要评论(0)


            
             
              
             
            

               
               

            



             按钮是Flash的三大元件之一,其重要性自不必说,按钮本身的使用也简单。但为了照顾一些初级读者,笔者在这里先简单地讲解一下按钮中各帧的作用,这也可以方便下面实例的制作。按钮元件初始时有四个帧,分别是“弹起”、“指针经过”、“按下”、“点击”帧。这四帧的作用分别是:鼠标不在按钮上、经过按钮时、按下按钮时按钮的显示状态以及按钮的有效的触发区域。

效果预览图:



图 2-1a


效果简介:


  当鼠标移动到该按钮上,小球被弹开,变成一个如图2-1所示的按钮。当鼠标离开按钮时,按钮又会缩为一个小球。如果读者在自己的MTV作品或是网站中用上这个弹缩按钮,效果一定很酷。


文章简介:


  该按钮效果的实现技巧主要就是在按钮的“弹起”和“按下”这两帧的场景里添加两个含有控制语句的影片剪辑元件(弹和缩)。因此,该例中读者将学到一个最简单的动作“stop”。从该例开始,读者将开始接触并学习Flsah的编程。


制作步骤:


  1.设置场景的大小为200px×80px,背景为白色,帧频为12fps。


  2.按快捷键Ctrl+F8打开“创建新元件”面板创建一个“弹起”影片剪辑元件。然后如图2-2所示为该元件建立“左半圆”、“右半圆”、“主体”三个层。分别用来放置按钮的三个组成部分。



图 2-2


  3.按快捷键Shift+F9打开“混色器”面板并进行如图2-3所示设置。“混色器”下拉菜单中选择“放射渐变”。其中两个滑块的颜色分别为#FF0000和#6D0101。



图 2-3


  4.用“椭圆”工具在“弹起”元件“左半圆”层的场景中绘制一个直径为30px的圆(不要边线)。然后用“箭头”工具框选右半边圆,并按Delete键删除。如果半圆的宽度不精确(不是15px),可以在“属性”面板中进行设置。


  5.点选中刚制作好的“左半圆”,按快捷键Ctrl+G组合,然后在“属性”面板中将其X轴和Y轴的值设置为-55px和-15px(以场景的左上角为顶点)。如图2-4所示。



图 2-4


  6.选中“左半圆”层的第8帧,按F6键创建关键帧。接着把第8帧中“左半圆”的X轴设置为-15px,Y轴值不变。右键单击第1帧,在弹出菜单中点选“创建补间动画”命令建立补间动画。


  7.按住Shift键,用鼠标左键分别点选“左半圆”层的第1和第8帧,接着右键单击被选中的阴影部分,在弹出的菜单中点选“拷贝帧”命令。然后右键点选“右半圆”层的第1帧并在弹出的菜单中选择“粘贴帧”命令。


  8.点选“右半圆”层第1帧的元件,接着打开“变形”面板,在面板的“旋转”选项中输入180,按“回车”确定,这样,“左半圆”元件就变成了“右半圆”。然后在“属性”面板中设置其X轴值为40px(使按钮两边对称),Y轴值不变。同样,把第8帧中的“左半圆”元件转变成“右半圆”,并设置其X轴值为0px,Y轴值不变。


  9.选择“工具”面板中的“矩形”工具,在“主体”层的场景中用鼠标拉出一个宽为80px,高为22px的矩形,接着用“颜料桶”工具“浇灌”颜色。颜色的设置同图2-2所示。在“属性”面板中设置这个矩形方块的X、Y轴值为-40px、-11px。


  10.为“主体”层的第8帧创建关键帧,并建立补间动画。打开“变形”面板,并如图2-5所示去除“约束”框中的对钩,并设置X轴方向的值为20%,即在X轴方向上缩小元件到原来的20%大小。



图 2-5


  点选中第8帧,按F9键打开“动作”面板,键入代码“stop;”,其作用是使影片停止播放。当帧中含有代码(哪怕只有一个空行)时,帧上就会出现一个小写字母“a”。元件“弹起”层和帧的最后设置如图2-6所示。



图 2-6


  11.按快捷键Ctrl+L打开库。右键单击“弹起”影片剪辑元件,点选“复制”命令打开“复制元件”面板,如图2-7所示。单击“确定”按钮创建一个内容一样的拷贝。然后双击“弹起 拷贝”元件的名字,并将其改为“指针经过”。



图 2-7


  12.双击“指针经过”元件进入其编辑场景。按住Shift键,用鼠标左键点选“左半圆”层的第1和第8帧,接着右键单击被选中的阴影部分,在弹出的菜单中点选“翻转帧”命令。把另外两个层所有的帧也同样进行翻转。最后别忘了把“stop”动作转移到第8帧上。这样,“指针经过”影片剪辑元件在不到一分钟的时间里就制作好了。


  13.按快捷键Ctrl+F8打开“创建新元件”面板创建一个名为“弹缩按钮”的按钮元件。然后打开库,把“弹起”元件拖拽到“弹起”帧的场景中。


  14.点选中“指针经过”帧,先按一下F6键,再按一下F5键。接着点选中“指针经过”帧中的“弹起”元件,再单击“属性”面板中的“交换”按钮打开“交换元件”元件面板,然后选中面板中的“指针经过”元件,确定。



图 2-8


  这样设计的好处是,避免了拖拽时引起的元件位置不对应的问题,跳过了再次调整的步骤,节约了宝贵的设计时间。


  15.选中“点击”帧,按F6键。接着点选“矩形”工具,拉出一个可以覆盖圆球的矩形,然后把把这个圆球(就是“指针经过”元件)删除。


  到这里,弹缩按钮的效果就制作好了。在这个效果笔者使用到了帧的复制、翻转;元件的交换等技巧。希望读者朋友们在自己制作的过程中能够好好的理解并掌握,这对你以后的设计很有帮助。


相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 Flash CS4基础入门 如何在Flash中打开一个定制的浏览器新窗口?学习ActionScript 3.0的6个好处几个小技巧精简Flash文件体积在Flash动画中添加“加为收藏”和“设为首页

人气排行 Flash游戏制作--小熊拼图用Flash实现几种镜头效果Flash制作动画知识:遮罩Flash如何做鼠标指针样式Flash制作环形文字Flash制作声情并茂的电子相册实例讲解flashMTV制作全过程(3)鼠标效果系列教程:游动的鱼