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

In a previous post, “Dynamically creating ActionScript cue points from FlashVars received from the HTML container”, we looked at how to create ActionScript cue points based on variables passed in to our Flex application from the HTML template’s “FlashVars” parameter. In this post we look at a similar approach, although using the <mx:HTTPService /> tag to load cue points from an external file of name/value pairs. 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.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/12/dynamically-creating-actionscript-cue-points-from-flashvars-loaded-using-the-httpservice-tag/ -->
<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>

cuepoints.txt

one=1&two=2&three=3

For each name/value pair in the cuepoints.txt file, the name is mapped to the cue point name, and the value is the number of seconds to create the ActionScript cue point at.

View source is enabled in the following example.