flex3 - Implementation of colorpicker in flex -

i new flex , don't know classes , all. taking "http://help.adobe.com/en_us/flex/using/ws2db454920e96a9e51e63e3d11c0bf63b33-7fa7.html". colopicker not appearing on screen when run code. please find below code of .mxml file. in advance.

<?xml version="1.0" encoding="utf-8"?> <mx:box xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:script>         <![cdata[        import mx.controls.colorpicker;             import mx.events.colorpickerevent;              private var scribbletoolsbutton:button;             private var scribbleflyout:slideouttoolbar;  //slideouttoolbar extends sprite              //creating slide out toolbar             private function createscribbletoolsmenu():void             {                 scribbletoolsbutton = button();                 scribbletoolsbutton.popupposition = button.popup_position_right;                 scribbletoolsbutton.popupverticalalignment = button.vertical_align_middle;                 scribbleflyout = new slideouttoolbar();                 scribbleflyout.filters = [ new dropshadowfilter(4, 45, 0, 0.6) ];                  button = new button();  // code create black button on slide out tool bar                 button.id = "black";                 var mycolortransform = new colortransform();                 mycolortransform.color = 0x000000;                 button.transform.colortransform = mycolortransform;                 button.width=25;                 button.addeventlistener(mouseevent.click,toolhandler);                 scribbleflyout.addcontrol(button);                  button = new button();  // code create green button on slide out tool bar                 button.id = "green";                 var mycolortransform1 = new colortransform();                 mycolortransform1.color = 0x008000;                 button.transform.colortransform = mycolortransform1;                 button.width=25;                 button.addeventlistener(mouseevent.click, toolhandler);                 scribbleflyout.addcontrol(button);                  var _colorbox:colorpicker = new colorpicker();                 _colorbox.id="colorpicker";                 scribbleflyout.addcontrol(_colorbox);  // colorpicker not appearing on screen. in place of different color buttoon in slideout tool bar, want display colopicker select color.             }             private function toolhandler(event:event):void             {                 selectedoption(event.target.id);             }              private function selectedoption(tool:string):void             {                 switch (tool)                 {                     case "black":                             viewer.colorolor = 0x000000;                             break;                       case "green":                             viewer.color = 0x008000;                             break;                  }             }              public function populatetoolbar():void             {                 buttonbox.addchild(scribbletoolsbutton);                 buttonbox.addchild(printbutton);             }                     ]]>     </mx:script>         <mx:colorpicker id="colorpicker" />         <mx:box id="buttonbox"             direction="{ this.direction }"             stylename="buttonbox"             width="100%"             height="100%"/> </mx:box>