在Authorware中实现拖动图片及改变图片的大小,这对于交互型的课件是非常重要的。那么,在Flash中可不可以实现以上的功能呢?答案是肯定的,Flash凭借强大的ActionScript脚本语言,可以轻松达到这个目的。下面我们来具体看看怎么制作。
一、自由拖动图片
如果仅仅是要实现拖动图片的话,制作是非常简单的。我们只需把图片先放到一个按钮中,再把这个按钮放到一个电影剪辑(MovieClip)中,配合几句简单的动作脚本即可实现。制作方法如下:
1. 启动Flash MX,单击“插入→新建元件”,在出现的“创建新元件”对话框中选择“行为”为“按钮”,然后在制作按钮的场景中把需要的图片导入。
2. 继续制作一个电影剪辑,单击“插入→新建元件”,在出现的“创建新元件”对话框中选择“行为”为“电影剪辑”。按Ctrl+L组合键调出库,从库中把刚才做好的按钮拖到影片剪辑的场景中,选定按钮,按F9调出动作面板,输入如下的语句:
on (press) {
startDrag(this);
// 拖动当前的电影剪辑
}
on (release) {
stopDrag();
}
这几句命令很简单,即当鼠标按下时,拖动按钮当前所在的电影剪辑,当鼠标松开时,停止拖动。
3. 回到主场景,从库中把第二步中制作的电影剪辑拖到主场景中。测试影片,图片可以自由拖动了吧。
二、同时实现拖动图片和改变图片的大小
要同时达到以上两个目的,我们可以模仿Windows窗口的操作,即制作两个按钮,一个按钮放在图片的上部,作为模拟的“标题栏”,拖动它即可拖动图片;一个按钮放在图片的右下角,按下它拖动即可改变图片的大小。制作方法如下:
1. 启动Flash MX,单击“插入→新建元件”,在“创建新元件”对话框中选择“行为”为“按钮”,名称定为“按钮1”,然后制作一个形如图1的按钮。
2. 继续制作一个按钮元件,取名为“按钮2”,接着在按钮的第一帧中用矩形工具画一个小正方形就可以了(图2)。
3. 制作影片剪辑。单击“插入→新建元件”,在“创建新元件”对话框中选择“行为”为“影片剪辑”,名称定为“图片剪辑”。然后在影片剪辑的场景中,把按钮1、按钮2及所需的图片导入,调整好三者的位置及大小(图3)。这里要注意的是,三者的位置都必须在影片剪辑中心的右下方,并且总体位置上要稍稍往右往下移一点点。(具体移多少,最后测试影片后可以再进行微调)
4. 编写ActionScript脚本
(1) 选定按钮1,输入如下AS脚本:
(2) on (press) {
tuodong = 1;
}
on (release) {
tuodong = 0;
}
(3) 在这段AS脚本中,定义了一个变量:tuodong,当鼠标在按钮1上按下不松开时,变量的值为1;松开后,变量值为0。这个变量的作用是在后面的脚本中,依靠判断它的值来确定是否移动图片。
(4) 选定按钮2,输入如下AS脚本:
on (press) {
daxiao = 1;
x1 = this._x;
y1 = this._y;
}
on (release) {
daxiao = 2;
x2 = _root._xmouse;
y2 = _root._ymouse;
}
这段AS脚本中,定义了五个变量,“daxiao”变量的作用和上段脚本中的“tuodong”变量作用相同;x1、y1这两个变量记录当鼠标在按钮2上按下鼠标时,当前的这个影片剪辑的x方向位置和y方向位置;而x2和y2则记录了当鼠标在按钮2上松开时,鼠标在主场景中的x方向位置和y方向位置。
(3)返回主场景,从库中把刚制作的“图片剪辑”拖入到主场景中,选定该剪辑,输入如下AS语句:
onClipEvent (enterFrame) {
// 剪辑事件为进入帧
if (tuodong==1) {
startDrag(this);
} else {
stopDrag();
}
// 判断变量 tuodong的值,来确定是否拖动影片剪辑
if (daxiao==1) {
this._width = _root._xmouse-x1;
this._height = _root._ymouse-y1;
} else if (daxiao==2) {
this._width = x2-x1;
this._height = y2-y1;
}
}
// 根据变量daxiao的值来确定是否改变影片剪辑的大小
说明:这段脚本中,选择的剪辑事件为进入帧,这样,这段脚本在整个影片剪辑存在过程中会反复地不断被执行。在第一个if判断中,判断变量tuodong的值,如果为1则可以自由拖动,否则的话,停止拖动;在第二个if判断中,判断变量daxiao的值,如果为1,则影片剪辑的宽度和高度会随着鼠标的位置不断改变,而如果为2的话,则停止改变大小。