自制 flash slider滚动条

这段时间用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_height:Number;

		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