Flex Examples
The following example shows how you can specify a background image for a Flex VideoDisplay control by setting the backgroundImage style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.VideoEvent;
import mx.utils.StringUtil;
private const src:String =
"http://www.helpexamples.com/flash/video/water.flv";
private function loadBtn_click(evt:MouseEvent):void {
videoDisplay.source = src;
}
private function playBtn_click(evt:MouseEvent):void {
videoDisplay.stop();
videoDisplay.play();
}
private function videoDisplay_ready(evt:VideoEvent):void {
loadBtn.enabled = false;
playBtn.enabled = true;
}
private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
var playTime:Number = videoDisplay.playheadTime;
var totTime:Number = videoDisplay.totalTime;
progressBar.setProgress(playTime, totTime);
progressBar.label = StringUtil.substitute("{0} of {1}",
playTime.toFixed(3),
totTime.toFixed(3));
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button id="loadBtn"
label="Load"
click="loadBtn_click(event);" />
<mx:Button id="playBtn"
label="Play"
enabled="false"
click="playBtn_click(event);" />
</mx:ApplicationControlBar>
<mx:VideoDisplay id="videoDisplay"
autoPlay="true"
backgroundImage="@Embed('Fx2.png')"
width="230"
height="220"
ready="videoDisplay_ready(event);"
playheadUpdate="videoDisplay_playheadUpdate(event);" />
<mx:ProgressBar id="progressBar"
mode="manual"
label="{videoDisplay.state}"
labelPlacement="center"
width="{videoDisplay.width}" />
</mx:Application>
View source is enabled in the following example.
You can also set the backgroundImage style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
VideoDisplay {
backgroundImage: Embed("assets/Fx2.png");
}
</mx:Style>
<mx:VideoDisplay id="videoDisplay"
source="http://www.helpexamples.com/flash/video/water.flv"
autoPlay="true"
width="230"
height="220" />
</mx:Application>
Or, you can set the backgroundImage style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.VideoDisplay;
[Embed("assets/Fx2.png")]
private var flexLogo:Class;
private var videoDisplay:VideoDisplay;
private function init():void {
videoDisplay = new VideoDisplay();
videoDisplay.autoPlay = true;
videoDisplay.source = "http://www.helpexamples.com/flash/video/water.flv";
videoDisplay.width = 230;
videoDisplay.height = 220;
videoDisplay.setStyle("backgroundImage", flexLogo);
addChild(videoDisplay);
}
]]>
</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
Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…
Hi,
Is it possible to load image on the fly and display as background image, instead of hard coding “[Embed("assets/Fx2.png")]“?
Thanks.
kevin,
Yes, it is possible, just use image path in flexLogo variable in this string:
videoDisplay.setStyle(“backgroundImage”, flexLogo);
But note, that each time this picture will be downloaded.
hi,
I would like to load a image in my application itself.. how it is possible?
Thanks in advance
Diny