在Flash中实现拖放物体的功能是利用startDrag()和stopDrag()

通过拖放物体,输出拖放物体所在的相对位置,利用物体相对位置的比例改变图像显示的比例,这样也就实现了我们通过滑块控制图片大小的方法。

观看实例效果:

 

这个实例,我们分为四步:

一、实现物体的拖动

通过鼠标拖动物体分为两个步骤,在物体上单击鼠标并移动,然后释放鼠标停止拖放,所以采用:MOUSE_UP和MOUSE_DOWN两个事件来控制物体拖动的过程。

1 绘制一个小圆做为滑块,尽量小一些,并取实例名:cir_mc

2在时间轴上添加如下代码

/* 拖放
通过拖放移动指定的元件实例。
*/

cir_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag_2);

function fl_ClickToDrag_2(event:MouseEvent):void
{
    cir_mc.startDrag(true,myRect);
}

stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop_2);

function fl_ReleaseToDrop_2(event:MouseEvent):void
{
    cir_mc.stopDrag();
}

二、实现滑块在指定的范围内移动

上面虽然实现了滑块的移动,但滑块可以在舞台的任意位置移动,可以通过为startDrag指定一个矩形范围,让滑块只能在指定的矩形范围内移动,从而控制滑块的移动范围。

1 用线条在舞台上画线,并转换为影片剪辑,实例名为bar_mc(其注册点为相对于舞台左中对齐,如下图所示,cir_mc为居中对齐),它所在的位置实际就是滑动的移动位置。

注册点

2 定义矩形范围,即bar_mc所占位置:bar_mc.x bar_mc.y即矩形的左上角坐标,bar_mc.width为矩形的宽,因为是线条,所以矩形的高设置为0.

代码如下

//定义滑块滑动范围,实际就是bar_mc的范围,高为0,让其沿直线运动。

var left:int = bar_mc.x;
var bottom:int =bar_mc.y;
var barwidth:int = bar_mc.width;
var barheight:int = 0;
var myRect:Rectangle = new Rectangle(left,bottom,barwidth,barheight);

3 为startDrag设置参数,即将拖动代码中的stargDrag()改为startDrag(true,myRect);

三、取得滑块所在的相对位置

因为cir_mc可以通过鼠标来拖动,所以水平坐标cir_mc是变化的,其相对于bar_mc的位置可以用以下的方式来表示:

cir_mc离bar_mc左侧的距离与bar_mc的宽度的比值

即:

(cir_mc-bar_mc)/bar_mc.width

代码如下

//控制图片缩放的比例
var imgscale:Number;

imgscale=(cir_mc.x-left)/barwidth;

四控制图片的显示大小

图片的大小改变可以通过改变其scaleX和scaleY比例来改变大小,即宽度与高度的比例

因为在拖动cir_mc时会发生MOUSE_MOVE事件,所以通过此事件来响应图片的大小的改变。

完整的代码如下

//滑块线条图片的影片剪辑实例名分别为:cir_mc bar_mc img_mc
//初始化滑块位置
//cir_mc注册点为居中,bar_mc注册点为右侧
cir_mc.x = bar_mc.x+bar_mc.width-100;
cir_mc.y = bar_mc.y;
//定义滑块滑动范围,实际就是bar_mc的范围,高为0,让其沿直线运动。

var left:int = bar_mc.x;
var bottom:int =bar_mc.y;
var barwidth:int = bar_mc.width;
var barheight:int = 0;
//控制图片缩放的比例
var imgscale:Number;
//取得原图片的宽度与高度
var imgwidth:int = img_mc.width;
var imgheight:int = img_mc.height;

var myRect:Rectangle = new Rectangle(left,bottom,barwidth,barheight);

/* 拖放
通过拖放移动指定的元件实例。
*/

cir_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag_2);

function fl_ClickToDrag_2(event:MouseEvent):void
{
    cir_mc.startDrag(true,myRect);
}

stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop_2);

function fl_ReleaseToDrop_2(event:MouseEvent):void
{
    cir_mc.stopDrag();
}
cir_mc.addEventListener(MouseEvent.MOUSE_MOVE,changimg);
function changimg(event:MouseEvent):void
{
    imgscale=(cir_mc.x-left)/barwidth;
    //加上100是为了防止图片在鼠标刚移到到cir_mc上时图片消失。
    img_mc.width =imgwidth*imgscale+100;
    img_mc.height =imgheight*imgscale+100;
    }

原程序下载(需要flash cs5版本打开原文件):http://down.qiexing.com/2010/11/as3_img_change.html