Flex Dynamically creating ActionScript cue points from FlashVars loaded using the HTTPService tag

This example could easily be extended further to pass a variable to a server-side script which would grab cue point information from a database and pass it back into Flex either as a string of name/value pairs, or as an XML document.

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

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

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

creationComplete="httpService.send()">

<mx:HTTPService id="httpService"

url="cuepoints.txt"

result="httpService_result(event)"

resultFormat="flashvars" />

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.events.VideoEvent;

import mx.collections.ArrayCollection;

import mx.events.CuePointEvent;

import mx.managers.SystemManager;

import mx.utils.URLUtil;

import mx.utils.ObjectUtil;

[Bindable]

private var arrColl:ArrayCollection = new ArrayCollection();

private function httpService_result(evt:ResultEvent):void {

var flashVars:Object = httpService.lastResult;

var item:String;

for (item in flashVars) {

videoDisplay.cuePointManager.addCuePoint({name:item, time:flashVars[item]});

}

}

private function videoDisplay_cuePoint(evt:CuePointEvent):void {

var cpDate:Date = new Date(evt.cuePointTime * 1000);

arrColl.addItem({name:evt.cuePointName, time:dateFormatter.format(cpDate)});

}

private function videoDisplay_playheadUpdate(evt:VideoEvent):void {

var pDate:Date = new Date(evt.playheadTime * 1000 || 10);

var tDate:Date = new Date(evt.currentTarget.totalTime * 1000);

progressBar.setProgress(evt.playheadTime, evt.currentTarget.totalTime);

progressBar.label = dateFormatter.format(pDate) + " / " + dateFormatter.format(tDate);

}

private function videoDisplay_progress(evt:ProgressEvent):void {

progressBar.conversion = 1024; /* Convert bytes to kilobytes. */

progressBar.label = "%1 of %2 KB (%3%%)";

progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);

}

private function videoDisplay_click(evt:MouseEvent):void {

videoDisplay.play();

}

]]>

</mx:Script>

<mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

<mx:HBox>

<mx:Canvas>

<mx:VideoDisplay id="videoDisplay"

autoPlay="false"

autoRewind="false"

source="http://www.helpexamples.com/flash/video/water.flv"

cuePointManagerClass="mx.controls.videoClasses.CuePointManager"

cuePoint="videoDisplay_cuePoint(event)"

playheadUpdate="videoDisplay_playheadUpdate(event)"

progress="videoDisplay_progress(event)"

click="videoDisplay_click(event)"

rewind="arrColl=new ArrayCollection()"

rollOver="progressBar.visible = true"

rollOut="progressBar.visible = false" />

<mx:ProgressBar id="progressBar"

mouseChildren="false"

labelPlacement="center"

visible="false"

mouseEnabled="false"

mode="manual" left="5" right="5" bottom="5" />

</mx:Canvas>

<mx:DataGrid id="dataGrid"

height="100%"

dataProvider="{arrColl}">

<mx:columns>

<mx:DataGridColumn dataField="name"

headerText="CuePoint Name:" />

<mx:DataGridColumn dataField="time"

headerText="CuePoint Time:" />

</mx:columns>

</mx:DataGrid>

</mx:HBox>

</mx:Application>

Flex Samples

Latest Flex Samples

Flex Top Links

Flex Dynamically creating ActionScript cue points from FlashVars loaded using the HTTPService tag

0 comments:

Related Flex Samples

Search Flex Samples
	Submit search form