多语言展示
当前在线:713今日阅读:138今日分享:33

flashCS6基础教程-11-按钮详解

本节课详解flash内的按钮,稍显抽象,但是很重要。知识点有:按钮内的4个帧详解、绘图纸外观的应用
工具/原料

flashCS6

一、建立一个flash文档

本文对于AS的版本号没有要求。既可以用AS2,也可以用AS3。这里有一个小技巧:即使已经建立了flash文档,也可以随时修改AS的版本号。只要保证没有选中舞台上的任何对象,在属性面板内,就可以如下图所示的进行随时更改了:

二、制作一个按钮
1

1、因为只是演示按钮的原理,所以,本例的按钮我只用一个非常简单的长方形。没错,当然是用工具箱内的矩形工具来绘制了。在这里,我们不需要边框,因此在工具箱的 区域5 内,先去掉边框色【并设置填充色为蓝色】,然后使用矩形工具在舞台上绘制一个矩形

2

2、然后,使用工具箱内的选择工具,单击舞台上的长方形,按F8键【这个快捷键一定要记住】,会弹出对话框,我们选择为“按钮”,单击确定

三、准备进入按钮的内部
1

请按照下图的数码顺序阅读:步骤2内操作之后,打开库面板(快捷键Ctrl+L):发现①那里有一个 元件1 ,这就是在步骤2内操作之后所生成的元件。flash文档内的所有的元件都被存储于库面板内请保证当前的工具是②的选择工具,双击舞台上的元件③就会进入这个按钮的内部。此时,在④那里,显示的不再是 场景1,而是在后面跟上了元件的名字 元件1现在,我们已经在按钮内部了。接下来,我重点介绍⑤里的四个关键帧

2

特别强调:1、必须进入按钮的内部,才可以修改按钮的各种样式。===================================2、进入按钮内部的方法有两种,除了上面的方法之外,还可以在库面板内直接双击元件的图标。注意:必须双击元件的图标才可以,如果你双击的是元件名,那么将无法进入元件内部,而是给元件重命名了

四、按钮的四个帧详解
1

请参考下图我们发现,按钮内部 有且只有4帧而且,被分别命名为 弹起、指针...、按下、点击我们虽然可以在第4帧后面插入新的帧,但都无效。有效的帧只有前4帧现在,本别简述一下4个帧的含义:第1帧(弹起) :鼠标在按钮热区的外部时,按钮的外观第2帧(指针...) :将鼠标移动到按钮的热区上(但没有按下鼠标)时,按钮的外观第3帧(按下) :在按钮的热区上按下了鼠标(但没有松开鼠标)时,按钮的外观第4帧(点击):按钮的热区【按钮生效的区域】

2

现在,详解一下 按钮的第4帧:热区热区非常重要,它是按钮能否交互的关键。我在这里以具体实例为例进行讲解。你按照我的步骤操作一遍,然后测试影片(Ctrl+回车)看看效果,就明白热区的具体含义了1、如果前面的步骤,你与我的一样,那么,现在,在按钮的内部,时间轴上只有1帧【弹起 帧】我们直接测试影片,发现,按钮是有效的。不过,按钮很呆板,一直都保持原样2、关闭测试影片后出现的播放窗口,回到flashCS6的编辑画面内,然后按照左下图的数码顺序进行操作:我们在第4帧直接按F6键,如①所示接下来,在工具箱内使用②的选择工具,单击选中舞台上的长方形,然后将其移动位置到③那里在④那里 开启 绘图纸外观。它的作用是,将前面几帧内的画面都在舞台上进行显示(呈现为半透明状),当前帧的画面是完全不透明的我们可以在⑤那里,通过拖动左右两侧的【和】来限定哪些帧被同时显示。在这里,我设置了4个帧同时显示3、现在测试影片吧。发现问题了吧【看右下图】:将鼠标移动到按钮上时,鼠标竟然没有变成小手的模样,必须将鼠标往右下角移动一下,才会出现小手的模样。这就是热区的概念,生成swf文件后,观众将鼠标移动到热区的范围内,才可以与按钮进行交互。

3

一般情况下,我们将按钮内的第1帧和 第4帧都设置的一模一样,这样一来,观众就可以方便的与按钮进行交互了。但也有例外:如果,将文本转换为按钮元件,如左下图,各个文字之间还有空格测试影片,你会发现,必须将鼠标放到有文字的地方,才可以与按钮进行交互如果观众将鼠标移动到四个文字中间的空格处,按钮将没有任何反应!此时,正确的办法是(见右下图):在第4帧插入一个空白关键帧(按F7键),开启绘图纸外观,然后用矩形工具绘制一个可以恰好覆盖住四个文字的长方形这里,为了大家能看清第1帧和第4帧的相对位置关系,我将第4帧内的长方形设置为半透明了。你在操作时,无需额外进行这样的设计。因为第4帧内生效的只是图形的范围,图形的颜色和透明度等因素不会影响最终的swf文件

4

精力所限,按钮的前3帧不再详解了。这里只给出文字叙述:1、第1帧很容易理解,就是鼠标没有在按钮上的时候,按钮的外观。也就是观众一打开swf文件时,看到的按钮的模样2、关于第2和第3帧,可如下进行测试:我们以一开始建立的 元件1 为例讲解在2、3帧上,都按F6键(插入关键帧),然后在第2帧内,用选择工具单击舞台上的长方形,在属性面板内修改填充色为红色同理,第3帧修改填充色为黑色测试影片,就可以理解到2、3帧的具体含义了

五、第4帧的补充说明

第4帧内如果插入的是空白关键帧(按F7键),按钮将完全失效【看左下图】但,如果,第4帧没有插入任何帧,按钮是有效的【看右下图】,那么,此时按钮的热区是谁呢?经过反复实验,发现,如果第4帧没有插入任何形式的帧,按钮的热区是第4帧前面的最近的帧本例中,因为第3帧内有画面,所以,按钮的热区就是第3帧的

注意事项
1

若要给按钮加代码,必须将代码加在按钮的外部,而不是加在按钮内部

2

必须先用选择工具单击舞台上的对象之后,才可以在属性面板内进行修改,否则无效

推荐信息