Flash与组件制作Slider组件

利用as3，我们可以尝试制作一些有趣的组件，虽然现在已经有很多实用的组件，但是自己尝试写一下也是不错的。利用as3语法，借用了绘图Api我们尝试制作一下这个组件。因为我们不需要很强大的功能，对此我们只是需要选取其一部分就可以。

首先,我们所需的制作两个图形，一个是拖动的方块，一个是底图片。对于这两个图我们都不难做，采用绘图APi当中的绘制矩形的办法就能实现到。

我们需要定义个包，这个包是为了防止与flash内部组件类名称冲突如下：

package org.summerTree.components

所需要做的工作是，定义好构造函数里面的参数。设置容器，最大值和最小值。两个值就是两端的位置，以及初始化的默认值

在这里过程，我们导入我们所需要的包，包括事件类型，包括几何图形库等等。

我们创建Slider 作为这个组件的类名称，建立起第一步之后，我们就可以实现进行绘制图案进行创作。

第二步：创始化，

在这个过程当中，实例化控制的拖动的元件，并设置底的图形，在这里过程设置不同颜色以区别。并且对元件进行监听鼠标拖动，在拖动的过程当中，元件的x坐标会产生改变，这样我们需要把这个值通过计算出来传递设置value的值，

this.value=bar_control.x*(maxValue-minValue)/100+minValue;//计算元件块位置对于的值

如果按0-100这样的区间，只有我们获取到拖动的元件的坐标值，即可以得到我们所需要的数据。bar.x=[0,100]之间的区间

如果这个区间不在0-100 ，可以随意一个区间，我们则可以通过简单的换成就可以

(bar.x/bar.width)*(max-min)+min; 这样换算则可以实现到。

private function init():void { //控件底座 var bar_bottom:Shape=new Shape(); addChild(bar_bottom); bar_bottom.graphics.lineStyle(0); bar_bottom.graphics.beginFill(0x666666); bar_bottom.graphics.drawRect(0,0,116,16); bar_bottom.graphics.endFill(); var array:Array=new Array(); //设置显示区域 var format:TextFormat=new TextFormat (); format.size=5; msg=new TextField(); msg.border=true; msg.setTextFormat(format); this.value=initializtion;//设置初始值 msg.text=String(this.value); msg.width=25; msg.height=16; msg.x=117; msg.y=0; msg.selectable=false; addChild(msg); bar_control=new Sprite(); bar_control.x=Math.abs(initializtion-minValue)/ Math.abs(maxValue-minValue)*100; bar_control.y=0; addChild(bar_control); bar_control.buttonMode=true; bar_control.graphics.lineStyle(0); bar_control.graphics.beginFill(0xCCCCCC); bar_control.graphics.drawRect(0,0,16,16); bar_control.graphics.endFill(); bar_control.addEventListener(MouseEvent.MOUSE_DOWN,onStaDragHandler); bar_control.stage.addEventListener(MouseEvent.MOUSE_UP,onStopDragHandler); }

总的代码

//滚动的组件package org.summerTree.components{ import flash.display.Sprite; import flash.display.Shape; import flash.events.*; import flash.geom.Rectangle; import flash.display.DisplayObjectContainer; import flash.text.*; public class Slider extends Sprite { private var bar_control:Sprite; private var values:Number=0; private var msg:TextField=new TextField(); private var minValue:Number=0; private var maxValue:Number=100; private var initializtion:Number; public function Slider(contain:DisplayObjectContainer=null,minValue:Number=0,maxValue:Number=100,initializtion:Number=0) { if(contain!=null) contain.addChild(this); this.minValue=minValue; this.maxValue=maxValue; this.initializtion=initializtion;//默认位置值 init(); } private function init():void { //控件底座 var bar_bottom:Shape=new Shape(); addChild(bar_bottom); bar_bottom.graphics.lineStyle(0); bar_bottom.graphics.beginFill(0x666666); bar_bottom.graphics.drawRect(0,0,116,16); bar_bottom.graphics.endFill(); var array:Array=new Array(); //设置显示区域 var format:TextFormat=new TextFormat (); format.size=5; msg=new TextField(); msg.border=true; msg.setTextFormat(format); this.value=initializtion;//设置初始值 msg.text=String(this.value); msg.width=25; msg.height=16; msg.x=117; msg.y=0; msg.selectable=false; addChild(msg); bar_control=new Sprite(); bar_control.x=Math.abs(initializtion-minValue)/ Math.abs(maxValue-minValue)*100; bar_control.y=0; addChild(bar_control); bar_control.buttonMode=true; bar_control.graphics.lineStyle(0); bar_control.graphics.beginFill(0xCCCCCC); bar_control.graphics.drawRect(0,0,16,16); bar_control.graphics.endFill(); bar_control.addEventListener(MouseEvent.MOUSE_DOWN,onStaDragHandler); bar_control.stage.addEventListener(MouseEvent.MOUSE_UP,onStopDragHandler); } private function onStaDragHandler(event:MouseEvent):void { bar_control.stage.addEventListener(MouseEvent.MOUSE_MOVE,onMoveHandler); event.currentTarget.startDrag(false,new Rectangle(0,0,100,0));//控制拖动局域 } private function onMoveHandler(event:MouseEvent):void { var evt:Event=new Event(Event.CHANGE); this.value=bar_control.x*(maxValue-minValue)/100+minValue;//计算元件块位置对于的值 msg.text=String(this.value); this.dispatchEvent(evt); } //停止拖动处理 private function onStopDragHandler(event:MouseEvent):void { msg.text=String(this.value); bar_control.stopDrag(); bar_control.stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMoveHandler); } //设置拖动的值 public function set value(dataValue:Number):void { this.values=dataValue; } //返回拖动的值 public function get value():Number { return values; } //设置对象坐标 public function move(x:Number,y:Number):void { this.x=x; this.y=y; } }}

测试：

参数含义：第一个容器，第二个最小值，第三个最大值。调用监听事件。

import org.summerTree.components.Slider;var i:int=0;while (i<10){ i++; var silder:Slider=new Slider(this); silder.move(250,100+i*20); silder.addEventListener(Event.CHANGE,onChange);}function onChange(event:Event):void{ trace("ww"+silder.value);}

利用这个简单的制作，我们可以制作一些调节的参数变化，如声音大小。介于一个区间内变化的情况。

通过控制组件，达到声音的变化。大概制作就在如下。

在初始化的时候，需要进行加载声音，初始化组件，等待完成之后，就可以实现对音乐的参数一种交互了。

发布的时候，我们可以选择在网络环境进行，而本地环境调用远程的资源会出现一种错误。不妨试试。

代码解析：

使用媒体包下的sound 声音类，我们就可以进行加载本地或者远程的资源。达到播放音乐的功能，同时可以进行监听数据加载进度和错误的情况发生。

   sound=new Sound();
   sound.load(new URLRequest("http://au.9you.com/download/song/22.mp3"));
   sound.addEventListener(Event.COMPLETE,onLoadComplete);
   sound.addEventListener(ProgressEvent.PROGRESS,onProgress);
   sound.addEventListener(IOErrorEvent.IO_ERROR,onError);

当完成加载声音后就可以进行播放

channel=sound.play(0,int.MAX_VALUE); 指定一个声道了进行播放，选择int 最大值，这个会循环int 最大值次数。

总的代码

package { import flash.display.MovieClip; import flash.events.*; import flash.media.*; import flash.net.*; import flash.text.TextField; import org.summerTree.components.Slider; public class Main extends MovieClip { private var sound:Sound; private var channel:SoundChannel=new SoundChannel(); private var Soundtrans:SoundTransform=new SoundTransform(); private var slider:Slider; private var msg:TextField; public function Main() { init(); } private function init():void { slider=new Slider(this,0,100,100); slider.move(250,200); slider.addEventListener(Event.CHANGE,onSoundChange); //左输入在左扬声器里播放的量。 var left_slider:Slider=new Slider(this,0,100,50); left_slider.move(250,220); left_slider.addEventListener(Event.CHANGE,onLeftSoundChange); //左输入在右扬声器里播放的量。 var right_slider:Slider=new Slider(this,0,100,40); right_slider.move(250,240); right_slider.addEventListener(Event.CHANGE,onRightSoundChange); //声音从左到右的平移 var pan_slider:Slider=new Slider(this,-100,100,0); pan_slider.move(250,260); pan_slider.addEventListener(Event.CHANGE,onPanSoundChange); msg=new TextField(); addChild(msg); msg.x=200; msg.y=100; //创建声音 sound=new Sound(); sound.load(new URLRequest("http://au.9you.com/download/song/22.mp3")); sound.addEventListener(Event.COMPLETE,onLoadComplete); sound.addEventListener(ProgressEvent.PROGRESS,onProgress); sound.addEventListener(IOErrorEvent.IO_ERROR,onError); } private function onLeftSoundChange(event:Event):void { if(channel!=null) { channel.soundTransform=Soundtrans; Soundtrans.leftToLeft=event.currentTarget.value/100; } } private function onRightSoundChange(event:Event):void { if(channel!=null) { channel.soundTransform=Soundtrans; Soundtrans.leftToRight=event.currentTarget.value/100; } } private function onPanSoundChange(event:Event):void { if(channel!=null) { channel.soundTransform=Soundtrans; Soundtrans.pan=event.currentTarget.value/100; } } private function onSoundChange(event:Event):void { trace(slider.value); if(channel!=null) { channel.soundTransform=Soundtrans; Soundtrans.volume=slider.value/100; } } //加载显示数据 private function onProgress(event:ProgressEvent):void { msg.text=String(Math.round(event.bytesLoaded/event.bytesTotal*100))+"/%"; } private function onError(event:IOErrorEvent):void { msg.text="加载发生了错误"; } private function onLoadComplete(event:Event):void { sound.removeEventListener(ProgressEvent.PROGRESS,onProgress); sound.removeEventListener(Event.COMPLETE,onLoadComplete); if(channel!=null) channel=sound.play(0,int.MAX_VALUE); } }}

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

Flash与组件 制作Slider组件

猜你喜欢

Flash与组件制作Slider组件