FlashMX经典实例(4)
作者 佚名技术
来源 服务器技术
浏览
发布时间 2012-07-13
|
Flash经典实例之弹缩按钮 效果预览图：  ? 图2-1 效果简介： 当鼠标移动到该按钮上，小球被弹开，变成一个如图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键。接着点选“矩形”工具，拉出一个可以覆盖圆球的矩形，然后把把这个圆球（就是“指针经过”元件）删除。
到这里，弹缩按钮的效果就制作好了。在这个效果笔者使用到了帧的复制、翻转；元件的交换等技巧。希望读者朋友们在自己制作的过程中能够好好的理解并掌握，这对你以后的设计很有帮助。
关键词： |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于FlashMX经典实例(4)的所有评论
