Flash/Flex学习笔记(36):自己动手实现一个滑块控件(JimmySilder)

先看最终的演示:

滑块条的应用实在太广泛了:mp3播放器中声量的大小控制,视频播放时的画面亮度调节,阅读新闻时字体大小的实时调整,对象的大小互动控制...

分析:

1.任何一个滑块条控件的UI部分,基本上可以分为:背景滑块条 + 滑块按钮 二个部分

所以我分成了三部分: JimmySilderBar(背景条),JimmySilderButton(拖动钮),JimmySilder(真正的滑动控件,将前二个组合在一起),为了重用,这三个部分都做成MovieClip元件放在库里,这样以后要换风格或颜色时,只要在库里编辑元件,所有的地方自然全变了.

另外在JimmySilder这个元件中,为了能在代码中引用到另外二个元件的实例,JimmySilderButton实例被命名为_mcBtn,而JimmySilderBar实例被命名为_mcBar

2.拖动问题

MovieClip有startDrag/endDrag方法,而且startDarg方法还能方便的设置拖动的边界(即拖动时,滑块钮不能拖到背景条以外的地方),so...这个问题也解决了

3.属性/事件支持

既然是滑块控件,肯定要能得到当前的位置/值,另外拖动(以导致值变化)时,应该能触发使用者自己定义的处理方法(否则就变成一个单纯只能拖来拖去的东东,不能跟其它对象的属性关联交互,那就没啥意义了)

实现:

1.为了支持事件,首先也定义一个Event子类:

package Jimmy.Event {
	import flash.events.Event;

	public class ValueChangeEvent extends Event {		
		public static const VALUE_CHANGE:String = "VALUE_CHANGE";		
		private var _OldValue:Number,_NewValue:Number;
		
		public function ValueChangeEvent(eventType:String,oldValue:Number,newValue:Number){
			this._OldValue = oldValue;
			this._NewValue = newValue;
			super(eventType);
		}
		
		public function get OldValue():Number{
			return _OldValue;
		}
		
		public function get NewValue():Number{
			return _NewValue;
		}
	}
}

2.控件代码的实现:

//滑块控件 beta 0.001 -- by 菩提树下的杨过 http://yjmyzz.cnblogs.com/
package {
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.ui.Mouse;
	import flash.events.Event;
	import flash.ui.MouseCursor;
	import flash.geom.Rectangle;
	import Jimmy.Event.ValueChangeEvent;

	public class JimmySilder extends MovieClip {

		private var _btnWidth:uint;//滑块宽度
		private var _btnHeight:uint;//滑块高度
		private var _barWidth:uint;//滑块背景条宽度
		private var _barHeight:uint;//滑块背景条高度
		private var _isDragging:Boolean=false;//是否正在拖动
		private var _value:Number=0.0;//滑块的值(百分比)

		public function JimmySilder(btnWidth:uint = 10,btnHeight:uint = 30,barWidth:uint=200,barHeight:uint=10,v:Number=0.5):void {

			//trace("JimmySilder's constructor is called.");

			this._btnWidth=btnWidth;
			this._btnHeight=btnHeight;
			this._barWidth=barWidth;
			this._barHeight=barHeight;

			init();

			this.Value=v;
			
			this.addEventListener(Event.ADDED_TO_STAGE,AddedToStage);
			
			
		}
		
		private function AddedToStage(e:Event):void{
			this.stage.addEventListener(MouseEvent.MOUSE_MOVE,stageMouseMoveHandler);
			this.stage.addEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
		}

		//属性Value的setter方法
		public function set Value(v:Number):void {
			if (v<=0) {
				v=0.0;
			}
			if (v>=1) {
				v=1.0;
			}
			this._value=v;
			this._mcBtn.x = _mcBar.width/(-2) + _mcBar.width * _value;//根据value百分比值来定位mcBtn的横坐标
		}

		//属性Value的getter方法
		public function get Value():Number {
			return _value;
		}
		
		//初始化
		private function init():void {
			this._mcBtn.width=_btnWidth;
			this._mcBtn.height=_btnHeight;
			this._mcBar.width=_barWidth;
			this._mcBar.height=_barHeight;

			this._mcBtn.addEventListener(MouseEvent.MOUSE_OVER, mcBtnMouseOverHandler);
			this._mcBtn.addEventListener(MouseEvent.MOUSE_OUT, mcBtnMouseOutHandler);
			this._mcBtn.addEventListener(MouseEvent.MOUSE_DOWN,mcBtnMouseDownHandler);			

			this._mcBar.addEventListener(MouseEvent.MOUSE_DOWN,mcBarMouseDownHandler);
			//trace("init 初始化完成");
		}
		
		//切换光标为手形
		private function mcBtnMouseOverHandler(e:MouseEvent) {
			Mouse.cursor=MouseCursor.HAND;
		}

		//切换光标为系统光标
		private function mcBtnMouseOutHandler(e:MouseEvent) {
			Mouse.cursor=MouseCursor.AUTO;
		}

		//开始拖动
		private function mcBtnMouseDownHandler(e:MouseEvent) {
			//trace("开始拖动");
			_mcBtn.startDrag(true,new Rectangle(_mcBar.width/(-2),0,_mcBar.width,0));//注意:这里锁定中心在指定区域拖动
			_isDragging=true;
		}

		//停止拖动
		private function stageMouseUpHandler(e:MouseEvent) {
			//trace("停止拖动");
			_mcBtn.stopDrag();
			_isDragging=false;
		}

		//在自身区域上移动时,动态计算_value值
		private function stageMouseMoveHandler(e:MouseEvent) {
			if (_isDragging) {
				RaiseEvent();
				//trace(_value);
			}
		}

		

		//在背景条上点击时,滑块直接跳到该位置
		private function mcBarMouseDownHandler(e:MouseEvent) {
			_mcBtn.x=mouseX;
			RaiseEvent();
		}
		
		//触发事件
		private function RaiseEvent():void {
			var _oldValue:Number=_value;
			_value = (_mcBtn.x + _mcBar.width/2)/_mcBar.width;
			var _valueChangeEvent:ValueChangeEvent=new ValueChangeEvent(ValueChangeEvent.VALUE_CHANGE,_oldValue,_value);
			dispatchEvent(_valueChangeEvent);//触发事件  
		}
	}
}

3.测试代码:

import Jimmy.Event.ValueChangeEvent;

var silder:JimmySilder = new JimmySilder();

silder.width = 200;
silder.height = 20;
silder.x = stage.stageWidth/2;
silder.y = 200;

//trace(silder.Value);

addChild(silder);

silder.addEventListener(ValueChangeEvent.VALUE_CHANGE, ValueChangeHandler);

testObj.scaleX = testObj.scaleY = silder.Value;

testObj2.rotation = silder.Value * 360;

function ValueChangeHandler(e:ValueChangeEvent){
	//trace("当前滑块的值是:" + e.NewValue);	
	testObj.scaleX = testObj.scaleY = e.NewValue;
	
	testObj2.rotation = silder.Value * 360;
}

源文件下载: http://cid-2959920b8267aaca.skydrive.live.com/self.aspx/Flash/JimmySilder.rar

后记:可能有人会问,为啥不直接用系统内置的组件,要费这么大劲自己重造轮子? 如果您自己试下就会知道了,用了系统组件后,swf文件大约会在19k或22k,而按本文的办法,同样的swf,最终只有7K(精简了1/3左右),所以还是那句话,能自己手写的就自己手写,除非自己写不了,再用系统的组件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

Vue 各类数据绑定

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会;更是对待现实工作不懈渴求,乃至苛求。因为这已不是遁隐修行,而是职场卖命,唯有先快速...

3807
来自专栏跟着阿笨一起玩NET

C# 使用 NPOI 库读写 Excel 文件

NPOI 是开源的 POI 项目的.NET版,可以用来读写Excel,Word,PPT文件。在处理Excel文件上,NPOI 可以同时兼容 xls 和 xlsx...

2621
来自专栏闻道于事

IDEA快捷键

Editing方面: Ctrl+Space: Basic code completion(the name of any class,method or var...

2894
来自专栏华章科技

10个非常实用的Excel技巧

Excel可以说是MS Office系列中最神奇也最重要的软件。对于专业的职场人士,工作中经常需要用到Excel来分析数据。亲们别再傻傻地用鼠标点来点去啦,用这...

1538
来自专栏机器学习算法与Python学习

Python:matplotlib

原文链接:http://blog.csdn.net/ywjun0919/article/details/8692018 来源于书籍:《Python科学计算》 ...

3928
来自专栏技术博客

Win8中缩放视图(SemanticZoom控件)

    SemanticZoom控件可以让用户缩放具有相同内容的两个不同视图。其中有一个是主视图。另外一个视图可以让用户进行快速导航。例如,当用户查看地址簿时,...

641
来自专栏菩提树下的杨过

silverlight中"制作逐帧动画"/"播放gif"收集

“逐帧动画”与“播放GIF”貌似二个风马牛不相干的问题,其实不然! 因为silverlight中的image控件不支持直接把gif动画做为source,所以象做...

2077
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:带CheckBox复选框的树形TreeView控件

在web开发中,带checkbox的tree是一个很有用的东东,比如权限选择、分类管理,如果不用sl,单纯用js+css实现是很复杂的,有了SL之后,就变得很轻...

4847
来自专栏张善友的专栏

在ASP.NET MVC 4中使用Kendo UI Grid

Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu 、Grid 、Combox等......

2477
来自专栏JackieZheng

可视化工具solo show-----Prefuse自带例子GraphView讲解

  2014.10.15日以来的一个月,挤破了头、跑断了腿、伤透了心、吃够了全国最大餐饮连锁店——沙县小吃。其中酸甜苦辣,绝不是三言两语能够说得清道的明的。校招...

4836

扫码关注云+社区