Flex Examples
The following example shows how you can control the volume on a Flex VideoDisplay control by setting the volume property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_volume_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="volume:">
<mx:HSlider id="slider"
minimum="0.0"
maximum="1.0"
value="0.7"
snapInterval="0.01"
tickInterval="0.1"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:VideoDisplay id="videoDisplay"
source="http://www.helpexamples.com/flash/video/cuepoints.flv"
volume="{slider.value}"
autoPlay="false" />
<mx:Button id="playBtn"
label="Play"
click="videoDisplay.play();"
enabled="{!videoDisplay.playing}" />
</mx:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_volume_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.containers.ApplicationControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.Button;
import mx.controls.HSlider;
import mx.controls.VideoDisplay;
import mx.controls.sliderClasses.Slider;
import mx.events.SliderEvent;
import mx.events.VideoEvent;
private var slider:HSlider;
private var videoDisplay:VideoDisplay;
private var playBtn:Button;
private function init():void {
slider = new HSlider();
slider.minimum = 0.0;
slider.maximum = 1.0;
slider.value = 0.7; /* 70% */
slider.snapInterval = 0.01;
slider.tickInterval = 0.1;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE, slider_change);
videoDisplay = new VideoDisplay();
videoDisplay.source = "http://www.helpexamples.com/flash/video/cuepoints.flv";
videoDisplay.volume = slider.value;
videoDisplay.autoPlay = false;
videoDisplay.addEventListener(VideoEvent.PLAYHEAD_UPDATE, videoDisplay_playheadUpdate);
playBtn = new Button();
playBtn.label = "Play";
playBtn.enabled = !videoDisplay.playing;
playBtn.addEventListener(MouseEvent.CLICK, playBtn_click);
var formItem:FormItem = new FormItem();
formItem.label = "volume:";
formItem.addChild(slider);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
Application.application.addChildAt(appControlBar, 0);
addChild(videoDisplay);
addChild(playBtn);
}
private function slider_change(evt:SliderEvent):void {
videoDisplay.volume = evt.value;
}
private function playBtn_click(evt:MouseEvent):void {
videoDisplay.play();
}
private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
playBtn.enabled = !videoDisplay.playing;
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hi Peterd,
I’m trying to make simple MP3 player from Livedoc, but I can’t add PAUSE and VOLUME control.
I need a little help,
http://japonyol.net/mp3.swf
Code:
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"> <mx:Style> .playStyle { skin: Embed('assets/control_play.png'); } .stopStyle { skin: Embed('assets/control_stop.png'); } </mx:Style> <mx:Script> <![CDATA[ import flash.media.*; [Embed(source="h_suazo.mp3")] [Bindable] public var sndCls:Class; public var snd:Sound = new sndCls() as Sound; public var sndChannel:SoundChannel; public function playSound():void { sndChannel=snd.play(); } public function stopSound():void { sndChannel.stop(); } ]]> </mx:Script> <mx:ControlBar paddingBottom="0" paddingTop="0"> <mx:Button styleName="playStyle" click="playSound();"/> <mx:Button styleName="stopStyle" click="stopSound();"/> </mx:ControlBar> </mx:Application>Thanks in advance…
Seis Pesos,
Try something like the following:
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"> <mx:Style> .playStyle { /* skin: Embed("assets/control_play.png"); */ } .stopStyle { /* skin: Embed("assets/control_stop.png"); */ } .pauseStyle { /* skin: Embed("assets/control_pause.png"); */ } </mx:Style> <mx:Script> <![CDATA[ import flash.media.*; import mx.events.SliderEvent; [Bindable] [Embed(source="song.mp3")] public var sndCls:Class; public var pos:Number = 0; public var snd:Sound = new sndCls() as Sound; public var sndChannel:SoundChannel; public function playSound():void { sndChannel = snd.play(pos); } public function stopSound():void { sndChannel.stop(); pos = 0; } public function pauseSound():void { pos = sndChannel.position; sndChannel.stop(); } public function volume_change(evt:SliderEvent):void { var sndTransform:SoundTransform = sndChannel.soundTransform; sndTransform.volume = evt.value; sndChannel.soundTransform = sndTransform; } ]]> </mx:Script> <mx:ControlBar paddingBottom="0" paddingTop="0"> <mx:Button id="playButton" label="play" styleName="playStyle" click="playSound();" /> <mx:Button id="stopButton" label="stop" styleName="stopStyle" click="stopSound();" /> <mx:Button id="pauseButton" label="pause" styleName="pauseStyle" click="pauseSound();" /> <mx:HSlider id="volume" minimum="0.0" maximum="1.0" value="1.0" snapInterval="0.01" liveDragging="true" change="volume_change(event);" /> </mx:ControlBar> </mx:Application>Peter
Peter,
I never imagine “var pos”, thank you!
Seis Pesos,
Yeah, I don’t know if that is the best approach, but I didn’t see a way to pause the Sound/SoundChannel object. So I just kept track of the current audio playhead position and passed that parameter to the
play()method.As for controlling the volume, I just set the
volumeproperty on a SoundTransform object.Peter
That was useful, thanks
Hi Peter,
how to set the controls directly over the VideoDisplay?
For Example how could i fade in the volume slider if the mouse is over that video?
WIth AS dynamically