Search Flex Components Free

Custom Search

December 25, 2007

Flex Media VideoDisplay with Text Synchronization Source Code


Flex Sample Source Code:

Creat a new file:

VedioDemo.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

import mx.events.CuePointEvent;

private function cuePointHandler(event:CuePointEvent):void
{
if (event.cuePointName=="step1")
step.text="Step 1: Remove the Battery";
else if (event.cuePointName=="step2")
step.text="Step 2: Slide SIM chip into place";
else if (event.cuePointName=="step3")
step.text="Step 3: Replace the Battery";
}

</mx:Script>

<mx:Panel title="SIM Card Installation">

<mx:VideoDisplay id="video" source="../assets/phone.flv" autoPlay="false" volume=".8" cuePoint="cuePointHandler(event);">
<mx:cuePoints>
<mx:Array>
<mx:Object name="step1" time="2"/>
<mx:Object name="step2" time="5"/>
<mx:Object name="step3" time="10"/>
</mx:Array>
</mx:cuePoints>
</mx:VideoDisplay>

<mx:ControlBar>
<mx:Button label="Play" click="video.play()" toggle="true" selected="{video.playing}" enabled="{!video.playing}"/>
<mx:Button label="Pause" click="video.pause()" toggle="true" enabled="{video.playing}"/>
<mx:Button label="Stop" click="video.stop()" enabled="{video.playing}"/>
</mx:ControlBar>

</mx:Panel>

<mx:Label id="step" fontSize="20" width="100%" textAlign="center"/>

</mx:Application>

Related Flex Tutorials