制作Slider组件

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

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

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

package org.summerTree.components

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

01.//滚动的组件
02.
03.package org.summerTree.components
04.{
05.
06.    import flash.display.Sprite;
07.    import flash.display.Shape;
08.    import flash.events.*;
09.    import flash.geom.Rectangle;
10.    import flash.display.DisplayObjectContainer;
11.    import flash.text.*;
12.    public class Slider extends Sprite
13.    {
14.
15.        private var bar_control:Sprite;
16.        private var values:Number=0;
17.        private var msg:TextField=new TextField();
18.        private var minValue:Number=0;
19.        private var maxValue:Number=100;
20.        private var initializtion:Number;
21.        public function Slider(contain:DisplayObjectContainer=null,minValue:Number=0,maxValue:Number=100,initializtion:Number=0)  22.        {
23.        }
24.}

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

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

01.private function init():void
02.        {
03.            //控件底座
04.            var bar_bottom:Shape=new Shape();
05.            addChild(bar_bottom);
06.            bar_bottom.graphics.lineStyle(0);
07.            bar_bottom.graphics.beginFill(0x666666);
08.            bar_bottom.graphics.drawRect(0,0,116,16);
09.            bar_bottom.graphics.endFill();
10.            var array:Array=new Array();
11.
12.            //设置显示区域
13.            var format:TextFormat=new TextFormat ();
14.            format.size=5;
15.            msg=new TextField();
16.            msg.border=true;
17.            msg.setTextFormat(format);
18.            this.value=initializtion;//设置初始值
19.            msg.text=String(this.value);
20.            msg.width=25;
21.            msg.height=16;
22.            msg.x=117;
23.            msg.y=0;
24.            msg.selectable=false;
25.            addChild(msg);
26.            bar_control=new Sprite();
27.            bar_control.x=Math.abs(initializtion-minValue)/ Math.abs(maxValue-minValue)*100;
28.
29.            bar_control.y=0;
30.            addChild(bar_control);
31.            bar_control.buttonMode=true;
32.            bar_control.graphics.lineStyle(0);
33.            bar_control.graphics.beginFill(0xCCCCCC);
34.            bar_control.graphics.drawRect(0,0,16,16);
35.            bar_control.graphics.endFill();
36.
37.
38.            bar_control.addEventListener(MouseEvent.MOUSE_DOWN,onStaDragHandler);
39.            bar_control.stage.addEventListener(MouseEvent.MOUSE_UP,onStopDragHandler);
40.        }

总的代码

01.//滚动的组件
02.
03.package org.summerTree.components
04.{
05.
06.    import flash.display.Sprite;
07.    import flash.display.Shape;
08.    import flash.events.*;
09.    import flash.geom.Rectangle;
10.    import flash.display.DisplayObjectContainer;
11.    import flash.text.*;
12.    public class Slider extends Sprite
13.    {
14.
15.        private var bar_control:Sprite;
16.        private var values:Number=0;
17.        private var msg:TextField=new TextField();
18.        private var minValue:Number=0;
19.        private var maxValue:Number=100;
20.        private var initializtion:Number;
21.        public function Slider(contain:DisplayObjectContainer=null,minValue:Number=0,maxValue:Number=100,initializtion:Number=0)
22.        {
23.            if(contain!=null)
24.            contain.addChild(this);
25.
26.            this.minValue=minValue;
27.            this.maxValue=maxValue;
28.            this.initializtion=initializtion;//默认位置值
29.            init();
30.        }
31.
32.        private function init():void
33.        {
34.            //控件底座
35.            var bar_bottom:Shape=new Shape();
36.            addChild(bar_bottom);
37.            bar_bottom.graphics.lineStyle(0);
38.            bar_bottom.graphics.beginFill(0x666666);
39.            bar_bottom.graphics.drawRect(0,0,116,16);
40.            bar_bottom.graphics.endFill();
41.            var array:Array=new Array();
42.
43.            //设置显示区域
44.            var format:TextFormat=new TextFormat ();
45.            format.size=5;
46.            msg=new TextField();
47.            msg.border=true;
48.            msg.setTextFormat(format);
49.            this.value=initializtion;//设置初始值
50.            msg.text=String(this.value);
51.            msg.width=25;
52.            msg.height=16;
53.            msg.x=117;
54.            msg.y=0;
55.            msg.selectable=false;
56.            addChild(msg);
57.            bar_control=new Sprite();
58.            bar_control.x=Math.abs(initializtion-minValue)/ Math.abs(maxValue-minValue)*100;
59.
60.            bar_control.y=0;
61.            addChild(bar_control);
62.            bar_control.buttonMode=true;
63.            bar_control.graphics.lineStyle(0);
64.            bar_control.graphics.beginFill(0xCCCCCC);
65.            bar_control.graphics.drawRect(0,0,16,16);
66.            bar_control.graphics.endFill();
67.
68.
69.            bar_control.addEventListener(MouseEvent.MOUSE_DOWN,onStaDragHandler);
70.            bar_control.stage.addEventListener(MouseEvent.MOUSE_UP,onStopDragHandler);
71.        }
72.        private function onStaDragHandler(event:MouseEvent):void
73.        {
74.            bar_control.stage.addEventListener(MouseEvent.MOUSE_MOVE,onMoveHandler);
75.            event.currentTarget.startDrag(false,new Rectangle(0,0,100,0));//控制拖动局域
76.        }
77.
78.        private function onMoveHandler(event:MouseEvent):void
79.        {
80.            var evt:Event=new Event(Event.CHANGE);
81.            this.value=bar_control.x*(maxValue-minValue)/100+minValue;//计算元件块位置对于的值
82.            msg.text=String(this.value);
83.            this.dispatchEvent(evt);
84.        }
85.        //停止拖动处理
86.        private function onStopDragHandler(event:MouseEvent):void
87.        {
88.            msg.text=String(this.value);
89.            bar_control.stopDrag();
90.            bar_control.stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMoveHandler);
91.        }
92.        //设置拖动的值
93.        public function set value(dataValue:Number):void
94.        {
95.            this.values=dataValue;
96.        }
97.        //返回拖动的值
98.        public function get value():Number
99.        {
100.            return values;
101.        }
102.        //设置对象坐标
103.        public function move(x:Number,y:Number):void
104.        {
105.            this.x=x;
106.            this.y=y;
107.        }
108.    }
109.}

测试：

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

01.import org.summerTree.components.Slider;
02.var i:int=0;
03.while (i<10)
04.{
05.    i++;
06.    var silder:Slider=new Slider(this);
07.    silder.move(250,100+i*20);
08.    silder.addEventListener(Event.CHANGE,onChange);
09.}
10.function onChange(event:Event):void
11.{
12.    trace("ww"+silder.value);
13.}

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

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

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

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

代码解析：

使用媒体包下的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 最大值次数。

总的代码

01.package
02.{
03.
04.    import flash.display.MovieClip;
05.    import flash.events.*;
06.    import flash.media.*;
07.    import flash.net.*;
08.    import flash.text.TextField;
09.    import org.summerTree.components.Slider;
10.
11.    public class Main extends MovieClip
12.    {
13.        private var sound:Sound;
14.        private var channel:SoundChannel=new SoundChannel();
15.        private var Soundtrans:SoundTransform=new SoundTransform();
16.        private var slider:Slider;
17.        private var msg:TextField;
18.        public function Main()
19.        {
20.            init();
21.        }
22.        private function init():void
23.        {
24.            slider=new Slider(this,0,100,100);
25.            slider.move(250,200);
26.            slider.addEventListener(Event.CHANGE,onSoundChange);
27.
28.            //左输入在左扬声器里播放的量。
29.            var left_slider:Slider=new Slider(this,0,100,50);
30.            left_slider.move(250,220);
31.            left_slider.addEventListener(Event.CHANGE,onLeftSoundChange);
32.
33.            //左输入在右扬声器里播放的量。
34.            var right_slider:Slider=new Slider(this,0,100,40);
35.            right_slider.move(250,240);
36.            right_slider.addEventListener(Event.CHANGE,onRightSoundChange);
37.
38.            //声音从左到右的平移
39.            var pan_slider:Slider=new Slider(this,-100,100,0);
40.            pan_slider.move(250,260);
41.            pan_slider.addEventListener(Event.CHANGE,onPanSoundChange);
42.
43.            msg=new TextField();
44.            addChild(msg);
45.            msg.x=200;
46.            msg.y=100;
47.
48.            //创建声音
49.            sound=new Sound();
50.            sound.load(new URLRequest("http://au.9you.com/download/song/22.mp3"));
51.            sound.addEventListener(Event.COMPLETE,onLoadComplete);
52.            sound.addEventListener(ProgressEvent.PROGRESS,onProgress);
53.            sound.addEventListener(IOErrorEvent.IO_ERROR,onError);
54.        }
55.
56.
57.        private function onLeftSoundChange(event:Event):void
58.        {
59.
60.             if(channel!=null)
61.             {
62.                 channel.soundTransform=Soundtrans;
63.                 Soundtrans.leftToLeft=event.currentTarget.value/100;
64.             }
65.
66.        }
67.
68.        private function onRightSoundChange(event:Event):void
69.        {
70.
71.             if(channel!=null)
72.             {
73.                 channel.soundTransform=Soundtrans;
74.                 Soundtrans.leftToRight=event.currentTarget.value/100;
75.             }
76.
77.        }
78.
79.        private function onPanSoundChange(event:Event):void
80.        {
81.
82.             if(channel!=null)
83.             {
84.                 channel.soundTransform=Soundtrans;
85.                 Soundtrans.pan=event.currentTarget.value/100;
86.             }
87.
88.        }
89.
90.        private function onSoundChange(event:Event):void
91.        {
92.            trace(slider.value);
93.             if(channel!=null)
94.             {
95.                 channel.soundTransform=Soundtrans;
96.                 Soundtrans.volume=slider.value/100;
97.             }
98.        }
99.        //加载显示数据
100.        private function onProgress(event:ProgressEvent):void
101.        {
102.           msg.text=String(Math.round(event.bytesLoaded/event.bytesTotal*100))+"/%";
103.        }
104.
105.        private function onError(event:IOErrorEvent):void
106.        {
107.           msg.text="加载发生了错误";
108.        }
109.        private function onLoadComplete(event:Event):void
110.        {
111.            sound.removeEventListener(ProgressEvent.PROGRESS,onProgress);
112.            sound.removeEventListener(Event.COMPLETE,onLoadComplete);
113.            if(channel!=null)
114.            channel=sound.play(0,int.MAX_VALUE);
115.        }
116.
117.    }
118.}

转载于:https://www.cnblogs.com/sinsoul/archive/2011/04/08/2009441.html

制作Slider组件相关推荐

Flash与组件：制作Slider组件
利用as3,我们可以尝试制作一些有趣的组件,虽然现在已经有很多实用的组件,但是自己尝试写一下也是不错的.利用as3语法,借用了绘图Api我们尝试制作一下这个组件.因为我们不需要很强大的功能,对此我们只 ...
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
文章目录一.布局中设置拖动条 Slider 组件二.代码中控制拖动条 Slider 组件一.布局中设置拖动条 Slider 组件注意该 Slider 组件与进度条 Progressbar 组 ...
C# 制作Com组件:java调用.net DLL的方法
本文将详细为大家介绍一个java调用.net DLL的方法,以实现特殊的客户的特殊要求:"在Java项目中必须使用其提供的用.net写的DLL加密机制!" 环境与工具: ◆.net ...
Python数据可视化案例三：使用Slider组件调整曲线参数
首先更正一个地方,昨天的文章Pythonic:递归.回溯等5种方法生成不重复数字整数中最后一段代码的注释中不小心把"排列"写成了"组合",抱歉抱歉! 今天的内容 ...
weex android 滑动事件,【报Bug】weex编译模式下slider组件 @scroll 事件, 滑块左右滑动, @scroll 回调的值始终是负数, 判断不了左右动作...
详细问题描述 weex编译模式下slider组件 @change事件, 滑块左右滑动, @change回调的值始终是负数, 判断不了左右动作 weex官方文档 (DCloud产品不会有明显的bug,所 ...
后台管理制作首页组件及ui框架的使用
制作首页组件整体结构分为左右结构,右边分为上下结构布局 1.左侧菜单项添加 2.顶部 3.下边框显示栏使用Element-ui框架中的Container 布局容器页面整体布局 <div c ...
使用react制作点赞组件
使用react制作点赞组件 import React from 'react' import { Icon } from 'antd'; // import ReactDOM from 'react- ...
用php制作微信小程序,微信小程序自己制作小组件
这篇文章主要介绍了微信小程序自己制作小组件实例详解的相关资料,自己制作小组件在项目中应用,需要的朋友可以参考下微信小程序制作小组件对于我们日常中一些公共的东西可以封装成组件,然后在各个页面使用 ...
Flutter Slider组件
文章目录 Flutter Slider组件 Slider 滑块组件基本用法其他用法 RangeSlider 范围滑块组件 iOS风格的Slider Flutter Slider组件 Slider ...

制作Slider组件

制作Slider组件相关推荐

最新文章

热门文章