Flex Examples

Here’s a simple example that listens for the cuePoint event on a VideoDisplay control and updates a DataGrid control whenever the cue point is encountered.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" >
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CuePointEvent;

            [Bindable]
            private var arrColl:ArrayCollection = new ArrayCollection();

            [Bindable]
            private var FLV_URL:String = "http://www.helpexamples.com/flash/video/cuepoints.flv";

            private function doCuePoint(evt:CuePointEvent):void {
                var eType:String = evt.type;
                var cpName:String = evt.cuePointName;
                var cpTime:Number = evt.cuePointTime;
                var cpType:String = evt.cuePointType;

                arrColl.addItem({type:eType, cuePointName:cpName, cuePointTime:cpTime, cuePointType:cpType});
            }
        ]]>
    </mx:Script>

    <mx:VideoDisplay id="vid" autoPlay="true" source="{FLV_URL}" cuePoint="doCuePoint(event);" />

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" width="400" rowCount="5">
        <mx:columns>
            <mx:DataGridColumn id="typeCol" dataField="type" />
            <mx:DataGridColumn id="cuePointNameCol" dataField="cuePointName" />
            <mx:DataGridColumn id="cuePointTimeCol" dataField="cuePointTime" textAlign="right" />
            <mx:DataGridColumn id="cuePointTypeCol" dataField="cuePointType" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>