自制 flash slider滚动条
时间：2010-09-04 来源：橡树小屋
这段时间用flash做了一个项目，其中用到了flash slider滚动条的功能，本来想用官方的组件，无奈修改样式过于麻烦，也不好用，所以自己制作了一个，可以实现相类似的功能。
【实例演示】
代码结构如下：
mySlider是slider的主类，通过setMc(mc:ISlider);控制传入的操作接口，控制影片剪辑。rotateMc，Resize是操作方法，继承接口ISlider，以后要扩展各种功能，只要新建方法类继承ISlider就可以了。
其中用类updateAfterEvent（）强制刷新屏幕，虽然会对效率产生一些影响，但是对于提高用户体验是有必要的。下面示例是没有加updateAfterEvent的效果。主要差别在滑块拖动时候的反应上。
【示例演示】
【代码说明】
这里并没有完全按照官方slider组件的模式来开发，没有发送消息事件，而是通过setMc(mc:ISlider)来装载影片剪辑，内部发送数据到继承了ISlider接口的对象，这样的好处是按需订制功能。
【ISlider】
共同方法：updateData，获取slider对象的滑块数据
package com.babyzone.slider {
public interface ISlider {
function updateData(num:Number):void;
}
}
【mySlider】
package com.babyzone.slider {
import flash.display.MovieClip;
import flash.geom.Rectangle;
import flash.events.*;
/*
num:滚动条的最大刻度值，
setMiddle方法，设置滑块为中间的情况
reset 重置
setMc 控制传入的Islider
*/
public class mySlider extends MovieClip {
//滑块可拖动区域
private var drag_area:Rectangle;
//滑块移动的刻度
private var numBer:Number;
//滑块的最大刻度
private var maxNum:Number;
//要处理的对象
private var iObj:ISlider;
//设置滑块参照的坐标
private var relateX:Number;
private var relateWidth:Number;
public function mySlider(num:Number) {
maxNum = num;
drag_area = new Rectangle(this.scrollable_area.x,this.scrollable_area.y, this.scrollable_area.width - this.scroller.width,0);
this.scroller.addEventListener( MouseEvent.MOUSE_DOWN, scroller_drag );
relateX = drag_area.x;
relateWidth = drag_area.width;
}
/*----------------------------滑块拖动效果--------------------------------*/
private function scroller_drag( e:MouseEvent ):void {
this.scroller.startDrag(false, drag_area);
stage.addEventListener(MouseEvent.MOUSE_UP, up);
//当移动滑块，强制重绘屏幕
stage.addEventListener(MouseEvent.MOUSE_MOVE,updateScreen);
}
private function up( e:MouseEvent ):void {
this.scroller.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, up);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateScreen);
}
private function updateScreen(e:MouseEvent) {
//当前刻度
numBer = maxNum * (this.scroller.x - relateX) / drag_area.width;
numBer = numBer < -0.8? -0.8:numBer;
if (iObj) {
deliveData(numBer);
}
}
public function reset():void {
this.scroller.x = this.scrollable_area.x;
numBer = maxNum * (this.scroller.x - drag_area.x) /relateWidth ;
deliveData(numBer);
}
public function setMiddle():void {
this.scroller.x =drag_area.x+(this.scrollable_area.width - this.scroller.width) / 2;
relateX =this.scroller.x;
relateWidth = drag_area.width/2;
}
/*----------------------------滑块拖动效果 end----------------------------*/
/*----------------------------对传入的MC，设置----------------------------*/
public function setMc(mc:ISlider):void {
iObj = mc;
}
private function deliveData(num:Number):void {
iObj.updateData(num);
}
}
}
【rotateMc】
实现旋转+缓动功能的类。
package com.babyzone.slider {
/*
mc: 重设角度的元件剪辑
angle: 角度,1代表一圈
speed 缓动的速度 0-1
*/
import flash.display.MovieClip;
import flash.events.Event;
public class rotateMc extends MovieClip implements ISlider {
private var this_mc:MovieClip;
private var realNum:Number=0;
private var mcSpeed:Number;
public function rotateMc(mc:MovieClip,speed:Number) {
this_mc = mc;
mcSpeed = speed;
this.addEventListener(Event.ENTER_FRAME, setRotate);
}
public function updateData(num:Number):void{
realNum = num * 360;
}
public function setRotate(e:Event):void {
var thisRotation = this_mc.rotation >= 0? this_mc.rotation:this_mc.rotation + 360;
this_mc.rotation += (realNum - thisRotation) * mcSpeed;
}
}
}
【Resize】
实现扩大缩小的类
package com.babyzone.slider {
import flash.display.MovieClip;
import flash.events.Event;
/*
mc: 重设大小的元件剪辑
speed: 缓动状态：0-1，1是正常状态
*/
public class Resize extends MovieClip implements ISlider {
private var old_width:Number;//原始影片剪辑的属性
private var old_
private var mcSpeed:Number;
private var this_mc:MovieClip;
private var scale:Number=1;
public function Resize(mc:MovieClip,speed:Number) {
old_width=mc.width;
old_height=mc.height;
this_mc = mc;
mcSpeed = speed;
this.addEventListener(Event.ENTER_FRAME, set_size);
}
public function updateData(num:Number):void{
num++;
scale = num;
}
private function set_size(e:Event):void {
this_mc.scaleX+=(scale-this_mc.scaleX)*mcSpeed;
this_mc.scaleY+=(scale-this_mc.scaleY)*mcSpeed;
}
}
}
【调用方法】
import com.babyzone.slider.*; //参数2是指3倍 var mc1:mySlider = new mySlider(1); mc1.x = 100; mc1.y = 20; stage.addChild(mc1); //测试扩大缩小 var obj:sampleObj=new sampleObj(); obj.x = 200; obj.y = 160; stage.addChild(obj); var resizeObj:Resize = new Resize(obj,0.3); mc1.setMc(resizeObj); //测试旋转 var mc2:mySlider = new mySlider(1); mc2.x = 100; mc2.y = 40; stage.addChild(mc2); var resizeObj1:rotateMc = new rotateMc(obj,0.3); mc2.setMc(resizeObj1);
《自制 flash slider滚动条》
BY橡树小屋
from http://www.cnblogs.com/babyzone2004/ 本文地址：http://www.cnblogs.com/babyzone2004/archive/2010/09/04/1818084.html 相关阅读 更多 +
