Dynamically creating ActionScript cue points from FlashVars received from the HTML container

In a previous post, “Creating ActionScript cue points with the VideoDisplay controlEdit”, reader Florian asks how you can set cue points dynamically from FlashVars.

Well, here’s one method of passing a single name/value pair from the HTML template into our Flex application and having Flex parse the string and dynamically add the ActionScript cue points to the VideoDisplay control.

Hope that helps.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from-flashvars-received-from-the-html-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="init()">

    <mx:Script>
        <![CDATA[
            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;

            private function init():void {
                arrColl = new ArrayCollection();

                var cpObj:Object;

                var item:String;
                var itemArr:Array;
                var params:Object = Application.application.parameters;
                if (params.hasOwnProperty("cuepoints")) {
                    cpObj = URLUtil.stringToObject(params.cuepoints);
                    for (item in cpObj) {
                        itemArr = item.split(":");
                        videoDisplay.cuePointManager.addCuePoint({name:itemArr[0], time:Number(itemArr[1])});
                    }
                }
            }

            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>

And in my HTML I add the following FlashVars string to my AC_FL_RunContent function:

AC_FL_RunContent(
    "src", "main",
    "width", "100%",
    "height", "100%",
    "align", "middle",
    "id", "main",
    "quality", "high",
    "bgcolor", "#ffffff",
    "name", "main",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer",
    "FlashVars", "cuepoints=one:1;two:2;three:3"
);

We’re passing a single name/value pair where the name is “cuepoints” and the value is a set of three cue points with the syntax “<cuePointName />:<cuePointTime /> and each cue point is separated by a “;”. So, our first cue point is given a name of “one” at 1.0 seconds, the second cue point has a name of “two” at 2.0 seconds, and the final cue point is “three” at 3.0 seconds.

In our Flex application these cue points are separated out using the URLUtil.stringToObject() method, and the Array.split() method.

View source is enabled in the following example.

Happy Flexing!

For another example of creating cue points dynamically see “Dynamically creating ActionScript cue points from FlashVars loaded using the HTTPService tag” which uses an HTTPService tag to load a text file of name/value pairs which get converted to new ActionScript cue points.