关于FLV播放器VideoDisplay的自作,其实很多它外国友人已经把它做得屈近于完美,出于空闲加上一下自己个人的想法,自己就做了一个关于声音并自带喇叭的控制,我称它为VolumeControl.
喇叭的波形是由右边的值来控制的,你可以通过按喇叭来控制是否要静音,而且提供了3个颜色的接口(不填也有默认色),可以对喇叭,波,背景进行颜色的变化,当然,因为静音的符号一般都是红的,所以我没有对它提供颜色的变化接口,如果你要改变,当然改一下代码就可以了拉.
下面一段是喇叭控制的部分代码和VolumeControl的源代码.
PS:希望用到的朋友们能注明一下出处.
喇叭控制的部分代码:
private function setControlStatus():void{
FlexFLVVideoPlayer.volume = volumeControl.volume;
trace('mute'+FlexFLVVideoPlayer.volume);
}
< id="volumeControl" change="setControlStatus()" volume="0.3" loudspeakercolor="#000000" loudspeakerwavecolor="#ff0000" backgroundcolor="#00f000">
VolumeControl的源代码:
// ActionScript file--Edited By Aedis.Ju
package FlexFLV
{
import mx.core.UIComponent;
import mx.events.FlexEvent;
import flash.events.Event;
import mx.controls.Button;
import mx.controls.HSlider;
import mx.containers.HBox;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;
import flash.events.MouseEvent;
import mx.events.SliderEvent;
import flash.display.Graphics;
[Event(name="change", type="mx.events.SliderEvent")]
[Style(name="loudSpeakerColor", type="uint", format="Color", inherit="yes")]
[Style(name="loudSpeakerWaveColor", type="uint", format="Color", inherit="yes")]
[Style(name="backGroundColor", type="uint", format="Color", inherit="yes")]
public class VolumeControl extends UIComponent
{
[Embed(source="../Img/thumbDownSkin.gif")]
private var thumbDownSkin:Class;
[Embed(source="../Img/thumbOverSkin.gif")]
private var thumbOverSkin:Class;
[Embed(source="../Img/thumbUpSkin.gif")]
private var thumbUpSkin:Class;
private var _loudSpeaker:Button;
private var _loudControl:HSlider;
private var _backGround:HBox;
public function VolumeControl(){
super();
addEventListener(FlexEvent.CREATION_COMPLETE, drawBackGround);
}
//set defalut Style
private static var stylesInited:Boolean = initStyles();
private static var defalutStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
private static function initStyles():Boolean {
defalutStyle = new CSSStyleDeclaration();
defalutStyle.setStyle("backgroundColor",0x000000);
defalutStyle.setStyle("loudSpeakerWaveColor",0x00ff00);
defalutStyle.setStyle("loudSpeakerColor",0xffffff);
StyleManager.setStyleDeclaration("VolumeControl", defalutStyle, true);
return true;
}
private function drawBackGround(e:FlexEvent):void {
//drawBackGround!
var backgroundColorUint:uint = getStyle('backGroundColor');
_backGround.setStyle('backgroundColor',backgroundColorUint);
}
private var _volume:Number;
public function get volume():Number {
if(_loudSpeaker.selected) return 0;
return _loudControl.value;
}
public function set volume(value:Number):void {
if(value < _volume =" 0;"> 1) {
_volume = 1;
} else {
_volume = value;
}
}
//if mute is true,thate means it is mute.
private var _mute:Boolean;
public function get mute():Boolean {
if(_loudSpeaker) return _loudSpeaker.selected;
return _mute;
}
override protected function createChildren():void{
super.createChildren()
if(!_backGround) {
_backGround = new HBox();
addChild(_backGround);
_backGround.setStyle('horizontalGap', 0);
}
if(!_loudSpeaker && _backGround) {
_loudSpeaker = new Button();
_loudSpeaker.toggle = true;
_loudSpeaker.useHandCursor = true;
_backGround.addChild(_loudSpeaker);
_loudSpeaker.addEventListener(MouseEvent.CLICK, drawloudSpeaker);
_loudSpeaker.setStyle("overSkin", null);
_loudSpeaker.setStyle("upSkin", null);
_loudSpeaker.setStyle("downSkin", null);
_loudSpeaker.setStyle("selectedUpSkin", null);
_loudSpeaker.setStyle("selectedOverSkin", null);
_loudSpeaker.setStyle("selectedDownSkin", null);
_loudSpeaker.setStyle("selectedDisabledSkin", null);
}
if(!_loudControl && _backGround) {
_loudControl = new HSlider();
_loudControl.snapInterval = 0.1;
_loudControl.maximum = 1;
_loudControl.value = _volume;
_backGround.addChild(_loudControl);
_loudControl.liveDragging = true;
_loudControl.addEventListener(SliderEvent.CHANGE, drawloudSpeaker);
_loudControl.addEventListener(FlexEvent.CREATION_COMPLETE, drawloudSpeaker);
_loudControl.setStyle("thumbDownSkin",thumbDownSkin);
_loudControl.setStyle("thumbOverSkin",thumbOverSkin);
_loudControl.setStyle("thumbUpSkin",thumbUpSkin);
}
}
private function drawloudSpeaker(e:Event):void {
//do change event!
var eventObj:SliderEvent = new SliderEvent("change");
dispatchEvent(eventObj);
//draw!
var loudSpeakerColorUint:uint = getStyle('loudSpeakerColor');
var graphics:Graphics = _loudSpeaker.graphics;
graphics.clear();
graphics.beginFill(loudSpeakerColorUint, 1);
graphics.moveTo(6,2);
graphics.lineTo(4,6);
graphics.lineTo(2,6);
graphics.lineTo(2,14);
graphics.lineTo(4,14);
graphics.lineTo(6,18);
graphics.moveTo(6,2);
graphics.curveTo(10,10,6,18);
graphics.endFill();
if(!_loudSpeaker.selected) {
_volume = _loudControl.value;
if(_loudControl.value <= 0) return; var loudSpeakerWaveUint:uint = getStyle('loudSpeakerWaveColor'); graphics.lineStyle(1.2, loudSpeakerWaveUint, 1); if(_loudControl.value > 0) {
graphics.moveTo(10, 2);
graphics.curveTo(14, 10, 10, 18);
}
if(_loudControl.value >= 1/2*_loudControl.maximum) {
graphics.moveTo(14, 4);
graphics.curveTo(18, 10, 14, 16);
}
if(_loudControl.value == _loudControl.maximum) {
graphics.moveTo(18, 6);
graphics.curveTo(20, 10, 18, 14);
}
} else {
_volume = 0;
graphics.lineStyle(2,0xff0000,1);
graphics.drawCircle(14.5, 10, 4.5);
graphics.moveTo((14.5 + 4.5*Math.sin(45)), (10 - 4.5*Math.sin(45)));
graphics.lineTo((14.5 - 4.5*Math.sin(45)), (10 + 4.5*Math.sin(45)));
}
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
if(_loudSpeaker) {
_loudSpeaker.width = 20;
_loudSpeaker.height = 20;
_loudSpeaker.x = 0;
_loudSpeaker.y = 0;
}
if(_loudControl) {
_loudControl.width = 80;
_loudControl.height = 10;
_loudControl.x = _loudSpeaker.width;
_loudControl.y = 3;
}
if(_backGround) {
_backGround.width = _loudSpeaker.width+_loudControl.width;
_backGround.height = Math.max(_loudSpeaker.height, _loudControl.height);
_backGround.x = 0;
_backGround.y = 0;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
}
}
