高级搜索|网站地图|TAG标签|RSS订阅【设为首页】【加入收藏】

信息技术

搜索

热门标签:

当前位置: 主页 > 编程语言 > ActionScript >

Flash与组件：制作Slider组件

时间:2010-05-27 15:34来源:未知 作者:admin 点击:次
利用as3，我们可以尝试制作一些有趣的组件，虽然现在已经有很多实用的组件，但是自己尝试写一下也是不错的。利用as3语法，借用了绘图Api我们尝试制作一下这个组件。因为我们不需要很强大的功能，对此我们只是需要选取其一部分就可以。 首先,我们

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

 

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

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

package org.summerTree.components

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

 view plaincopy to clipboardprint?
//滚动的组件  
 
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)  
        {  
        }  
} 
//滚动的组件

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)
  {
  }
} 

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

我们创建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; 这样换算则可以实现到。

 view plaincopy to clipboardprint?
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 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);
  }

总的代码

 view plaincopy to clipboardprint?
//滚动的组件  
 
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;  
        }  
    }  
} 
//滚动的组件

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;
  }
 }
}

测试：

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

view plaincopy to clipboardprint?
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);  
} 
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 最大值次数。

 

总的代码

view plaincopy to clipboardprint?
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);              
        }  
          
    }  
} 

(责任编辑：admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
最新评论 进入详细评论页>>
栏目列表
推荐内容
热点内容
囧搞笑视频

QQ:1148691864 湿疹的新药痛风的症状及治疗方法治疗湿疹痛风定片官方治疗白发痛风吃什么好白发的治疗药痛风十八味官方治疗癫痫痛风的治疗新药十八味治疗脱发的方法治疗癫痫治疗牛皮癣的药物五花茶颗粒治疗癫痫的药物痛风的症状脱发的症状如何治疗痛风精乌片官方癫痫症状痛风十八味价格治疗湿疹的药品癫痫药白发痛风的治疗治疗痛风的药品痛风的症状及治疗痛风偏方治闲灵如何治疗牛皮癣痛风的治疗手册湿疹吃什么好白发的症状五花茶颗粒脱发的症状以及治疗方法脱发的症状及治疗办法关于痛风的症状牛皮癣吃什么好中药治疗癫痫治疗牛皮癣的方法湿疹症状及治疗办法