[Flex]-把问题弄复杂了的滑动条效果

看着JE人气很火, 忍不住也想出来露露脸了``这人就喜欢凑热闹~

前两天应聘实习的时候(偶还小, 还在校, 什么都不懂), 被要求做一个效果, 需要做两个版本, 现在说明一下Flex这个版本, 效果就是下面有一个滑动条, 拖动条的时候, 上面的图片就跟着动了,

既然都用点到要用FLEX了, 当然很直接的就想到HSlider组件`

这样就产生了思路一:使用Slider组件进行数值绑定, 使上面的东西坐标变化.

进而就得改变Slider的样式, 在网上搜了好久, 发现这样可以改样式:
做个宣传, 不知道哪位牛哥的JE. http://wangcheng.iteye.com/blog/78689

看那个地址就知道怎么改样式了, 毕竟自己不是美工, 改出来的样式实在难看, 自己都不好意思拿出手, 但想想还是算了,

但是后来发现, 在运行的时候, click事件和onChange事件会有冲突, 按运行效果来看, 应该是onChange事件包含了click事件, 现在都得把这两个事件得分开, 弄得很头疼``不知道哪儿没弄好.

最后忍不住, 还是自己写个Slider吧,

使用的算法都是在javascript里比较常见的, 只是改在AS3下而已.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="100%" height="{componentsHeight+bg.y}" cornerRadius="4"
  creationComplete="init()">
  <mx:Canvas width="{bgWidth}" height="{bgHeight}" horizontalScrollPolicy="off">
		<mx:Image source="assets/images/tp_bg.png" x="0" y="0" />
	  <mx:HBox id="slider" width="0" height="100%"
	    verticalAlign="middle" horizontalGap="4" 
	  	horizontalScrollPolicy="off">
		</mx:HBox>	
	</mx:Canvas>
	<mx:Canvas id="bg" width="100%" height="{componentsHeight}" x="0" 
		cornerRadius="4" backgroundColor="#EEEEEE" backgroundAlpha="0.7" y="198">
		<mx:Button id="bar" width="80" height="{componentsHeight}" 
			fillAlphas="[1.0, 1.0, 1.0, 1.0]" 
			fillColors="[#F8B566, #FF9517, #F8B566, #FF9517]" 
			cornerRadius="4" themeColor="#E77F05" x="0"/>
	</mx:Canvas>
		
	<mx:HTTPService id="xmlService" url="{url}" result="resultHandler(event)" />
	
	<mx:Script>
		<![CDATA[
			import mx.utils.ArrayUtil;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			import mx.controls.Image;
			import mx.collections.XMLListCollection;
			import flash.utils.clearTimeout;
			import flash.utils.setTimeout;
			import mx.core.UIComponent;
			import mx.controls.Alert;
			
			[Bindable]
			public var componentsHeight:Number;
			public var flag:Boolean = false;
			public var moving:Boolean = false;
			public var timer:Timer;
			public var speed:Number = 4;
			public var _bgWidth:Number;
			public var _bgHeight:Number;
			[Bindable]
			public var url:String;
			
			public var imgModel:ArrayCollection = new ArrayCollection();

			private var moveInt:uint;
			private var point:Point;
			private var offset:Point;
			private var percent:Number;
			
			private var _target:UIComponent;
			
			public function get target():UIComponent {
				return _target;
			}
			public function set target(_target:UIComponent):void {
				this._target = _target;
			}
			
			[Bindable]
			public function get bgWidth():Number {
				return _bgWidth;
			}
			public function set bgWidth(val:Number):void {
				_bgWidth = val;
			}
			
			[Bindable]
			public function get bgHeight():Number {
				return _bgHeight;
			}
			public function set bgHeight(val:Number):void {
				_bgHeight = val;
			}
			
			public function init():void {
				flash.system.Security.allowDomain("*");
				
				target = slider;
 				
 				xmlService.send();
			}
			
			private function resultHandler(event:ResultEvent):void {
				imgModel = event.result.data.row as ArrayCollection;
				
				for(var i:int=0;i<imgModel.length;i++) {
 					var image:Image = new Image();
 					image.source = imgModel.getItemAt(i).path;
 					image.width=128;
 					
 					slider.addChild(image);
 					slider.width = slider.width + image.width + 4;
 				}
 				
 				process();
			}
			
			public function process():void {
				bar.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
				this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
				this.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
				bg.addEventListener(MouseEvent.CLICK, click);
				
				percent = (target.width-bg.width)/(bg.width-bar.width);
			}
			
			private function mouseDown(event:MouseEvent):void {
				flag = true;
				offset = bar.globalToLocal(new Point(mouseX, mouseY));
			}
			private function mouseMove(event:MouseEvent):void {
				if(flag) {
					point = this.globalToLocal(new Point(mouseX, mouseY));
					moveBar();
				}
			}
			private function mouseUp(event:MouseEvent):void {
				flag = false;
				offset = null;
			}
			private function click(event:MouseEvent):void {
				if(event.target == bar) {
				}
				else if(!flag) {
					if(timer != null && timer.running)
						timer.stop();
					//point = bg.globalToLocal(new Point(mouseX, mouseY));
					point = new Point(event.localX-40,event.localY);
					if(point.x<0)
						point.x = 0;
					if(point.x>this.width-80)
						point.x = this.width-80;
					
					moving = true;
					timer = new Timer(10);
					timer.addEventListener("timer", moveBar);
					timer.start();
				}
			}
			
			private function moveBar(event:TimerEvent=null):void {
				if(flag) {
					if(point.x<offset.x) {
						bar.x = 0;
						target.x = 0;
					}
					else if(point.x>this.width-(bar.width-offset.x)) {
						bar.x = this.width-bar.width;
						target.x = - (bar.x*percent);
					}
					else {
						bar.x = point.x - offset.x;
						target.x = - (bar.x*percent);
					}
				}
				else if(moving) {
					if(bar.x+speed<point.x) {
						bar.x += speed;
					}
					else if(bar.x>point.x) {
						bar.x -= speed;
					}
					else {
						moving = false;
						timer.stop();
					}
					target.x = - (bar.x*percent);
				}
			}
		]]>
	</mx:Script>
</mx:Canvas>

应该算是做成一个组件了, 控制, 数据和一些样式该暴露的都暴露了,

在主页面里调用:

<ui:iSlider id="component" width="950" y="202" 
 		componentsHeight="20" speed="6"
 	  bgWidth="950" bgHeight="200" url="assets/xml/data.xml"/> 

XML文件里格式是这样的:

<data>
	<row>
		<title></title>
		<alt></alt>
		<url></url>
		<path>assets/images/1.png</path>
	</row>
</data>

做完以后, 虽然是可以交任务了, 但感觉并没有发挥出FLEX的优势,

额~`发了篇烂文`~我已经准备好接受各位大牛的批判了``