Æliens

  <mx:Script>
  <![CDATA[
  import mx.collections.ArrayCollection;
  import mx.events.CuePointEvent;
  import mx.controls.videoClasses.CuePointManager;
  [Bindable] public var movie:String = "../assets/clips/tube/china/calligraphy.flv";
  
  [Bindable] private var arrColl:ArrayCollection = new ArrayCollection();
  [Bindable] private var state:uint = 0;
  private var off:int = 0;
  
  [Bindable] private var cuepoints:Array = [
   {name:'cue 0', time:0.00},
   {name:'cue 1', time:4.60},
   {name:'cue 2', time:6.75},
   {name:'cue 3', time:12.75},
   {name:'cue 4', time:20.75}
   ];
  [Bindable] private var info:String = "cue -";
  
  [Bindable] private var show:uint = 0;
  private function clear(video:Object):void {
  if (show == 0) {
  show = 1; tileList.visible = false;
  arrColl.removeAll();
  tileList.invalidateList();
  }
  else { show = 0; tileList.visible = true; }
  }
  
  private function cue(evt:Object):void {
  if (show == 1) { show = 0; tileList.visible = true; }
  var pad:String = "                     ";
  var bm:Bitmap = copy(myVid as DisplayObject);
  var time:String = format(myVid.playheadTime);
  
  if (state < 4) info = cuepoints[state].name;
  if (state == 0) { story.text = "..."; }
  else if (state == 1) { story.text = "... once upon a time"; }
  else if (state == 2) { story.text = "there was a ..."; }
  else if (state == 3) { story.text = ""; }
  else { off = 1; story.text = ""; info="cue -"; state = 0; }
  
  arrColl.addItem({pad:pad, bitmap:bm, info:info, time:time});
  state += 1;
  if (off == 1) story.text = "";
  }
  
  private function copy(source:DisplayObject):Bitmap {
  var bmd:BitmapData = new BitmapData(source.width, source.height);
  bmd.draw(source);
  return new Bitmap(bmd);
  }
  
  private function format(value:Number):String{
      var sec:int = (value * 60) / 60; 
      var mil:int = (value - sec) * 100; 
      var result:String = sec.toString() + "." + mil.toString();
      return result;
     }
  
  ]]>
  </mx:Script>
  

  <mx:VideoDisplay id="myVid" source="{movie}" height="100%" width="100%" autoPlay="false"
  cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
  cuePoints="{cuepoints}"
  cuePoint="cue(event)"
  />
  <mx:Label text="{movie} / {state}" color="white" top="10" right="20"/>
  <mx:Label id="story" text="" color="white" top="75" left="100" fontSize="40"/>
  <mx:Label text="{format(myVid.playheadTime)} / {info}" color="white" top="10" left="20"/>
  

  <mx:HBox left="20" bottom="10">
  <mx:Button color="white" borderColor="0" fillAlphas="[0,0]" label="!" click="cue(myVid);"/>
  <mx:Button color="silver" borderColor="0" fillAlphas="[0,0]" label="clear" click="clear(myVid);"/>
  </mx:HBox>
  <mx:HBox right="20" bottom="10">
  <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label=">" click="myVid.play();"/>
  <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="||" click="myVid.pause();"/>
  <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="_" click="myVid.stop();"/>
  </mx:HBox>
  
  

  
  <mx:TileList
  top="50" right="10" 
  backgroundAlpha="0"
  borderColor="0"
  borderThickness="0" 
  id="tileList"
  columnCount="1" dataProvider="{arrColl}"
  width="170"
  height="{myVid.height - 100 }"
  verticalScrollPolicy="off">
  <mx:itemRenderer>
  <mx:Component>
  <mx:HBox right="0" paddingBottom="0" paddingTop="0">
  <mx:Text textAlign="right">
  <mx:htmlText>
  &lt;br;\ &gt;
  name: {data.info}
  time: {data.time}
  </mx:htmlText>
  </mx:Text>
  <mx:HBox right="0">
  <mx:Image source="{data.bitmap}" toolTip="{data.time}"
  maintainAspectRatio="false"
  scaleX="0.07" scaleY="0.07" />
  </mx:HBox>
   </mx:HBox>
  </mx:Component>
    </mx:itemRenderer>
  </mx:TileList>
  
  </mx:Application>