FLASH按钮详解.docx
- 文档编号:7179667
- 上传时间:2023-01-21
- 格式:DOCX
- 页数:9
- 大小:58.61KB
FLASH按钮详解.docx
《FLASH按钮详解.docx》由会员分享,可在线阅读,更多相关《FLASH按钮详解.docx(9页珍藏版)》请在冰豆网上搜索。
FLASH按钮详解
FLASH按钮详解
(二)目标区交互
目标区交互常用来制作拼图游戏或者分类练习。
在Flash中我们一般用hitTest、startDrag和stopDrag函数来实现。
下面就用一个自然课件的实例"分一分"来讲解Flash目标区交互的实现方法。
同时也巩固一下上面讲到的知识。
闪吧新社区9~%o_N.is
HE+s_Cu(o6K_f0由于FlashMX开始支持MC的按钮事件,如果使用FlashMX的编程方法来写这篇教程,制作上会简化许多。
但考虑到许多老师现在还在使用Flash5开发课件,因此本文中使用到的编程方法均基于Flash5。
但是,本例中的某些功能必须在FlashMX的环境下才能实现,这在下文中会有提及。
闪吧新社区_@8k_L5Y_b1s
闪吧新社区"W#S&tJ_q_d*X
下面具体分析这个课件的功能。
课件提供了三个练习,本别是"按形状分"、"按颜色分"和"按运动方式分"。
学生用鼠标拖动不同的物体进行分类,如果分类正确,则放置在正确的位置,并且禁止再次拖动这个物体;如果拖动错误,那么就将这个物体放回原处。
由于三个练习实现方式基本相同,本文仅介绍第一个练习的实现方法。
(课件界面和主时间线如图4-9,4-10)闪吧新社区7d+BM_W3C/\_k.m8d4t
_d$y_L+Z_p0
(R_p'a,F_R_d_I_R~_n,}0闪吧新社区&V&^!
e_i%M/s_V_D(y_s3i
_m_oo+Q&m01.设计课件结构
7V_M4j.w_p0
_l7Q_VI-x_{4__D0①在主时间线中新建4个层,由上至下分别命名为"脚本"、"外框"、"按钮"、"主要"。
/[
f_u_A_^_q6C,g0闪吧新社区_]9[:
T#h7h_~_T
②在"脚本"和"主要"层的第10帧、第20帧和第30帧各插入一个关键帧,并为"脚本"层的四个关键帧分别命名为"start"、"shape"、"colour"和"mode",在这四个关键帧上都加入stop();脚本。
(如图4-10)
8^X#g_l2w_q~9P_o__0闪吧新社区_x4h3F_f_^~_q
M
③新建一个按钮,在其中绘制一个矩形。
然后从库中拖动三个按钮元件至"按钮"层中,排列到舞台左边。
在三个按钮上方分别输入"按形状分"、"按颜色分"和"按运动方式分"(注意:
没有必要制作三个不同的按钮元件,舞台上的按钮是库中按钮的"分身",每个分身可以设置不同的脚本)。
这三个按钮上的脚本分别如下:
.C#e_H8I_{8O_~0
V_S+n_m1~P1k0"按形状分"按钮:
闪吧新社区_~4[9Y"~"y_Yg
on(release){闪吧新社区_W#L_o3G1a_O7C
gotoAndStop("shape");闪吧新社区#]_R/}2B*t_h_T_avX
}
h_s0m9z_v_N0"按颜色分"按钮:
闪吧新社区%_)A+F_|/S_L_I4D
on(release){
$d_\_K__.?
_k7U_z_a.K0gotoAndStop("colour");闪吧新社区n$o_r_r/t_{
}
闪吧新社区]_zl*bE.t_R(T
"按运动方式分"按钮:
闪吧新社区*i)K_|_H(}|"U%JP&Nx
on(release){
^_F_Tb:
x4w0gotoAndStop("mode");闪吧新社区_|&?
+e[;D&r7{
}
闪吧新社区_k_~6[2G;C_se.c
④制作外框、课题,放置在"外框"层中。
闪吧新社区_U_\_r_^_Y+K3M_E
'U1i_B0x9v3c02.作限制框
&l
`_}_~#k3P9X0
闪吧新社区!
ME_^'B,n;N}
①建一个名为"k"的影片剪辑,并在其中绘制一个无边框的矩形。
%X!
P)?
_{C3g0
/Q_y4`_`-s_h8O0②从库中拖动三个"k"的分身到舞台上,排列好后为他们分别命名为"k_circle","k_rectangle"和"k_triangle"。
3M*y_w_^6h0
4Um!
Oq.`
h_r0③分别绘制一个圆形、一个矩形和一个三角形,将他们放在相应的框上方。
(如图4-11)
]X'?
^_g,W_D_H0
_I_B(i_\X-I0
闪吧新社区G1h_B(w_yG_o_{_i{
闪吧新社区_K_F_W7f_H_a
_y`7s2k_m_C03.作可拖动的MC
A___q_y:
R_f'O"n5Ph0
闪吧新社区_K,VM2e0}5w
①择"主要"层的第10帧(即"shape"帧),绘制一个黑色无边框的圆形。
闪吧新社区'e9c
s_^Y9[!
`X7k_p
闪吧新社区_Z_C)D_fe_^
②将其转换为按钮,命名为"circle",确定定位点在圆形的中心。
闪吧新社区_x*{Z_\4p_Z,vg_F
_N0c;Wn/l/_"W'{_J0③将这个按钮转换为影片剪辑,并命名为"circle_mc"。
_[5u_b_q_}_t0L0闪吧新社区_h,v_H_?
(W4C8V_s_|_}
④双击这个影片剪辑进入其内部,选择圆形按钮,打开"动作"面板并输入以下脚本:
闪吧新社区_S_k^@w_r_f_j,v_a
on(press){闪吧新社区*G1h_k"{(~0G"zL_P
startDrag("",true);闪吧新社区_Z
UBQ;Q4lu_R_NW6w
}闪吧新社区5Hc_?
s%}$m(A+V|I3N
on(release,releaseOutside){闪吧新社区:
q!
K_s*\@_?
stopDrag();闪吧新社区"t_s0[1`#O'Q!
M4n
}
闪吧新社区}_s'EW_`[%K%JB
将这段脚本"翻译"成中文就是:
_}7F8a/v5j_A_N_T_h_W0
当按下鼠标时闪吧新社区_n_n+o$h_b+O
h#c9o
开始拖动本影片剪辑闪吧新社区_g#{/g!
i/Q
当释放或者外部释放鼠标时闪吧新社区$r_`_]3e_m"^_E
停止拖动
闪吧新社区)K_?
_{
c+X_N
⑤现在测试一下影片,可以看到圆形可以被拖动到任意的位置。
但我们需要的不仅仅是这些。
我们现在要圆形影片剪辑是否被拖动到了圆形分类框中,如果是,则放置在原地;如果否,则放回原处。
闪吧新社区G%S___M4w3t6n;C[RN
VoI_u8L_s*_-Y'R9W0⑥要将圆形影片剪辑放回原处,必须得知圆形影片剪辑最原始的位置。
可以很容易的在"信息"面板中知道它的位置是x:
183.5,y:
212.5,但这并不是一种聪明的方法。
在这里,我们使用变量来记住圆形影片剪辑的位置。
将下面的脚本放在startDrag脚本上面:
闪吧新社区!
s_Y_R1Z___V_k"Hx"K_V-P
oldX=_x;
1?
:
i_K6K_A7C_n*v-J0oldY=_y;
+[;e_C#w_a_Q0由于当前的圆形按钮处于圆形剪辑的内部,所以无需为_x和_y属性指定目标,默认既是当前的影片剪辑。
这也是startDrag命令为什么没有目标的原因。
闪吧新社区_M_u!
O_n_CT
闪吧新社区0h_s_Ew_p_x$g_R"v
⑦要实现判断的功能,我们使用函数hitTese。
这个函数能够判断两个影片剪辑是否重合,如果重合则返回true。
我们先来看看这个当前这个例子的"中文"脚本:
1|8L_k6r7f_T_qIdD2}$G0闪吧新社区2j_C
K_B1b&k*W_c9{___i
如果圆形影片剪辑没有和圆形分类框重合,那么将圆形影片剪辑放回原处。
_S_j4B*t_H!
A
?
1~0注意到这里的条件是"没有重合",我们很容易判断圆形影片剪辑是否与圆形分类框重合,如果需要"没有重合"这个条件,我们需要加上一个"!
"(非)运算符。
将下面的脚本放置在stopDrag下面,也就是一停止拖动马上执行:
闪吧新社区0D_x_j9[+S:
kA*M
if(!
hitTest(_parent.k_circle)){
_\_[_G(B8N0?
0_x=oldX;
0b3J_WV]:
Wy^
b5q%g0_y=oldY;
_p^s_x;O0}
+N_[_O,{&|1M&{0⑧现在测试一下影片,可以看到当拖动圆形影片剪辑到除圆形分类框的其他位置是,圆形影片剪辑会自动放回原处。
但又出现了一个问题,因为圆形影片剪辑是随时可以拖动的,如果现在使用者试图再次拖动圆形影片剪辑,则圆形影片剪辑仍会放回前一次拖动的目的地。
闪吧新社区_~l/`)I0s_Ld_Es
闪吧新社区1P_A_F!
w__#H)N
要解决这个问题,我们需要禁止圆形影片剪辑再次被拖动。
最简单的方法就是禁用按钮。
FlashMX将按钮也列为标准对象,并为其加入了enlabled属性,通过将enlabled的值设为真或假,可以启用或禁用按钮。
要使用这个属性,我们需要先为按钮的分身命名。
闪吧新社区$P)k2?
t%|
闪吧新社区2Cw_S~_^$K
在舞台上选择圆形按钮分身,将其命名为"b"。
(如图4-12)
v_@_A$v%d+s0
uP#}.q.O9d_g~0
7q_y
?
_Ms+L0Z_Q0闪吧新社区_m5x_]_R6_
_O8b*H7u6K_j_c0⑨实现禁用按钮的"中文"脚本应为:
_ZkF
mr*So_y_Q#a0闪吧新社区${_q_|'A_]f
如果圆形影片剪辑和圆形分类框重合,那么禁用按钮,否则就启用按钮。
7[_o_R_b6[8k0
9w_Q(i_ck0最先想到的应该是用if…else…语句实现这个功能,但没有必要,应该尽量减少代码。
本例中已经有了一个if条件语句。
我们只要利用现有的就可以了。
按钮"b"上的脚本全部完成后如下:
闪吧新社区_G_c5L(b)Ip5X+S!
L_r__
on(press){
z5J_HT_C7k8s_N_^_[0oldX=_x;闪吧新社区_z_sk_]2N_~
m_RK_D
oldY=_y;闪吧新社区1i_'w_V(l4Z_s_Z(j}
startDrag("",true);
_{_Rq_X-Y_u_q_J_b0}闪吧新社区+C_i%V_t*H5|
on(release,releaseOutside){闪吧新社区_I_G.X_F_A)\|5V_x
stopDrag();闪吧新社区h,k(JO_\_Kx"AX_u.X
b.enabled=0;
_b_~4Z_~*v_j$E_w_x_Ss_c_h0if(!
hitTest(_parent.k_circle)){闪吧新社区f
d_sm7^_]-b_J2W
_x=oldX;
"}_L_j_Z
R0_y=oldY;
_k_v\_L_f_H0b.enabled=1;闪吧新社区+P9N0v_\*]-V(lz
S'H
}闪吧新社区3w_x_A_C_Q_bOi_f9]e#c
}
.V_A)s_A_\x+K_O0解释一下关于禁用按钮的语句。
当停止拖动时将按钮"b"的enlabled属性设为0,禁用按钮。
这时如果圆形影片剪辑的位置处于圆形分类框中,接下来的if代码块不会执行。
圆形影片剪辑不能再被拖动。
但如果当前的圆形影片剪辑和圆形分类框不重合,则会执行if中的代码,圆形影片剪辑被放置回原处,按钮"b"又被设为可用。
(N%\"hh2Z_?
(I.j0
_F_o_U(Q)u6r#S04.完善程序
.D$n$L9M_F_Z_g0
闪吧新社区_I_u+J8\_Z_?
9bp_j
①同样的方法制作矩形按钮并转换成影片剪辑,分别命名为"rectangle"和"rectangle_mc"。
用同样的方法制作三角形按钮并转换成影片剪辑,分别命名为"triangle"和"triangle_mc"。
(注意,上面的命名指的是元件在库中的名称,并不是指元件在舞台上的分身名。
)
c_`_v*f_A_w_I_}e_R0闪吧新社区_d_t
z_N,N8{_^_AY
②矩形影片剪辑和三角形影片剪辑中的按钮分身均命名为"b"。
_]_k4^+C_j_S_z;[0闪吧新社区;v6{_M.S1aw_j)V_|
③两个按钮上的脚本几乎完全相同,需要改动的只是hitTest函数的对象。
_uHaq_Z0
_]7dHL4D;j_C_q0
_O5p_~_H_a6Y"j0矩形按钮上的脚本为:
闪吧新社区_a^_a@_b_t_x_U%wT
on(press){闪吧新社区_P_cc_H]_gl
oldX=_x;闪吧新社区8hh1[_z_n
oldY=_y;闪吧新社区/N_j_}_G_|n+o
startDrag("",true);
+y
b_q_o2G3[_[)A0}
_l_z_p(p7[*v_Q_Sd0on(release,releaseOutside){闪吧新社区_Mp_H1L4@_{7\+O
stopDrag();闪吧新社区S4v"I__({
b.enabled=0;
A)x_R*Z(T)l_v_A0if(!
hitTest(_parent.k_rectangle)){闪吧新社区1J_M0Oz$XxE\_T
_x=oldX;闪吧新社区-OI1a_`.D
_y=oldY;闪吧新社区_`0__e7|'z7A`
b.enabled=1;
_g$__w_F8H-P_O0}闪吧新社区_c*j_T_[-T#g_i)on
}
闪吧新社区'a5LT_w!
i_T
三角形按钮上的脚本为:
H_N2|&Z_B"~2^;k0
on(press){
_S\_U0Y}n0]F0oldX=_x;
.Q(z5Y_|3m_V_I#I0oldY=_y;
[_H5CD_Z3x_P0startDrag("",true);闪吧新社区_j_O\_n_V8d
}
1R2H_X,\/A0on(release,releaseOutside){
_X_P2Q5\:
@0stopDrag();
%m_m_z!
L_L_h_qu8F2P4W_H_`0b.enabled=0;
_Y5M)`%Eg/c#@0if(!
hitTest(_parent.k_rectangle)){
_w'Z;f(Z$X
c$@3F0_x=oldX;闪吧新社区_j_}U5h-x_P_[$H#N5F
_y=oldY;闪吧新社区1I_o_Cc_C$V_n_o
b.enabled=1;
_V_pn_k_x9_0}闪吧新社区_{Q_n_T!
xZ_V_w
}
闪吧新社区/}!
D(u_?
W_m
④此时舞台上已经有圆形、矩形和三角形影片剪辑各一个了。
再从库中各拖动一个到舞台上,分别改变他们的位置、色彩、大小和角度,测试影片,观看效果。
(如图4-13)闪吧新社区_[_B!
f_`!
~9HM-q3}
闪吧新社区_C+}1FL_s_v:
_4i_e1C6N
_J1~_W_O&W7L0闪吧新社区z^6e!
w_H_@_l
闪吧新社区&x"H+^B&B
|$X'O
5.完成课件
_d_F9m_a#`#[-u0
闪吧新社区[7d_P:
D"u_^-d_q
课件的第一个部分"按形状分"已经完成,另外两个部分"按颜色分"和"按运动方式分"的制作大同小异,在此不再赘述。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FLASH 按钮 详解