Home Flex Flex Circle drawing example

Flex Circle drawing example
Posted on: September 9, 2008 at 12:00 AM

Example below draws a circle on the panel background of your application. Circle and its properties like color, size and dimensions will completely depend on you as here you are both the artist and the button operator.

Flex circle drawing example

Example below draw circles on the panel background of your application. Circles drawn and its properties like color, size and dimensions will completely depend on you as here you are both the artist and the button operator. The circle is not a default feature, the instructions for drawing a circle is defined inside the Sprite class of flash.display package and so it has been imported in the application. The Sprite class elements demands UIComponent platform. In the program, we have used addChild function which is used by the UIComponents variable to call the sprite class variable inside them.

In the program code, addChild function is been used by two components, first by an UIComponent variable regularObject to call the flash.Sprite variable circle inside it and second by a flex container Panel whose id is bond077, to call the UIComponent variable regularObject inside it.

In the program, a colorObject name variable is used which has value type Number.

Within the action script portion of file, two packages have been imported namely: flash.display and mx.core. This import is done to get Sprite and UIComponent classes instances. In the code, a geometrical figure is created and for creating this figure a Sprite type variable has been created. Now graphics feature of Sprite class provides two methods: beginFill() and drawCircle(). Among these methods the first one fills color in the figure and the second one creates the figure. Now the Sprite variable is called inside the UIComponent variable through addChild function and the UIComponent variable is called inside the panel container through the panel id. Here calling UIComponent variable inside the panel container means figures will form on the panel background.

circle.mxml


<?xml version = '1.0' encoding = 'ISO-8859-1'?>

<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' 

  creationComplete = 'mouseOverEvent()'>

  

  <mx:Script>

  

  <!-- flex packages -->

  

  import flash.display.Sprite;

  import mx.core.UIComponent;

  

  <!-- dimension variables -->

  

  public var x_axis:int = 0;  

  public var y_axis:int = 0;  

  public var z_axis:int = 0;

  

  

  <!-- 

  Defining functions for increasing and 

  decreasing the dimension variables values 

  -->

  

  public function Xdimension():void{

 x_axis = x_axis + 1;

  } 

  public function Ydimension():void{

  y_axis = y_axis + 1;  

  } 

  public function Zdimension():void{

  z_axis = z_axis + 1; 

  }

  

  public function minusXdimension():void{

  x_axis = x_axis - 1;

  }

  public function minusYdimension():void{

  y_axis = y_axis - 1;

  }

  public function minusZdimension():void{

  z_axis = z_axis - 1;

  }

  

  

  

  <!-- 

  Declaring color object for setting 

  colors to the figures 

  -->

  public var objectColor:Number;

  

  

  <!-- 

  creating functions for getting access

 to five different colors 

 -->  

  

  public function C0():void{

  objectColor = 0x6600FF;

  }

  public function C1():void{

  objectColor = 0xFF9900;

  }

  public function C2():void{

  objectColor = 0xCC00CC;

  }

  public function C3():void{

  objectColor = 0x99FF00;

  }

  public function C4():void{

  objectColor = 0x993300;

  }

  

  

  

  

  <!-- 

  creating function for creating required 

  figured variables 

  -->

  

  public function createCircle():void{

  

  <!-- a sprite type variable object -->

  

  var circle:Sprite;

  circle = new Sprite(); 

  

  circle.graphics.beginFill(objectColor);

  circle.graphics.drawCircle(x_axis, y_axis, z_axis);

  

  <!-- an UIComponent variable -->

  

  var regularObject:UIComponent;

  regularObject = new UIComponent();

  regularObject.addChild(circle);

  

  bond077.addChild(regularObject);

  }

  

  </mx:Script>

  





  <mx:Script>

  

  <!-- defining function for adding mouse over event over flex 

  button controls -->

  

  public function mouseOverEvent():void{

  b0.addEventListener(MouseEvent.MOUSE_OVER, task_0);  

  b1.addEventListener(MouseEvent.MOUSE_OVER, task_1);  

  b2.addEventListener(MouseEvent.MOUSE_OVER, task_2);  

  b3.addEventListener(MouseEvent.MOUSE_OVER, task_3);  

  b4.addEventListener(MouseEvent.MOUSE_OVER, task_4);  

  }



  

  <!-- functions for setting different text values to Label lb -->

  

  public function task_0(e:Event):void{

  lb.text = 'Blue-Violet';  

  }

  public function task_1(e:Event):void{

  lb.text = 'Intermediate (Red-Orange)';  

  }

  public function task_2(e:Event):void{

  lb.text = 'Secondary (Violet)';  

  }

  public function task_3(e:Event):void{

  lb.text = 'Intermediate (Yellow-Orange)';  

  }

  public function task_4(e:Event):void{

  lb.text = 'Intermediate (Red-Orange)';  

  }

  

  </mx:Script>





  

  <mx:Script>

  

  <!-- functions for getting dimension value details -->

  

  public function XDimensionDetails():void{

  txt_0.text = 'x axis :' + x_axis.toString();  

  } 

  public function YDimensionDetails():void{

  txt_1.text = 'y axis :' + y_axis.toString();  

  } 

  public function ZDimensionDetails():void{

  txt_2.text = 'z axis :' + z_axis.toString();  

  } 

  

  </mx:Script>

  

  

  <mx:Panel id = 'bond077' title = 'Choose appropriate dimension 

  select color and be a painter' width = '100%' 

  height = '100%' color = '#000066'/>



  

  

  

  <mx:Box>



 <mx:HBox>

  <mx:Button label = 'Execute' click = 'createCircle();' 

  x = '500' color = '#000000'/>

 </mx:HBox>

  

  <mx:HBox>

  <mx:Button label = '+ve x-axis' 

  click = 'Xdimension(); XDimensionDetails()'/>

  <mx:Button label = '+ve y-axis' 

  click = 'Ydimension(); YDimensionDetails()'/>

  <mx:Button label = '+ve z-axis' 

  click = 'Zdimension(); ZDimensionDetails()'/>

  </mx:HBox>

  

  <mx:HBox>

  <mx:TextArea id = 'txt_0' editable = 'false'/>

  <mx:TextArea id = 'txt_1' editable = 'false'/>

  <mx:TextArea id = 'txt_2' editable = 'false'/>

  </mx:HBox>

  

  <mx:HBox>

  <mx:Button label = '-ve x-axis' 

  click = 'minusXdimension(); XDimensionDetails()'/>

  <mx:Button label = '-ve y-axis' 

  click = 'minusYdimension(); YDimensionDetails()'/>

  <mx:Button label = '-ve z-axis' 

  click = 'minusZdimension(); ZDimensionDetails()'/>

  </mx:HBox>

  

  </mx:Box>





  <mx:HBox>

  <mx:Label text = 'Color picker Buttons' color = 'white'/>

  

  

  <mx:Button id = 'b0' label = 'C0' click = 'C0();'/> 

  <mx:Button id = 'b1' label = 'C1' click = 'C1();'/> 

  <mx:Button id = 'b2' label = 'C2' click = 'C2();'/> 

  <mx:Button id = 'b3' label = 'C3' click = 'C3();'/> 

  <mx:Button id = 'b4' label = 'C4' click = 'C4();'/> 

  </mx:HBox>



  <mx:Style>

  .weisz {color : #000000}

  Text {font-size : 18pt}

  </mx:Style>

  <mx:Text id = 'lb' styleName = 'weisz' />

  

</mx:Application>

circle.swf

Download the code

Related Tags for Flex Circle drawing example:
c, com, properties, application, button, io, size, color, background, operator, panel, opera, app, like, ie, example, irc, to, draw, round, exam, dimensions, raw, ci, ws, bot, e, il, it, back, circle, li, pe, im, complete, art, as, m, ca, let, cl, es, end, pen, rc, me, pro, pp, pan, ack, cat, tor, tie, xa, xamp, s, col, at, pane, k, is, ir, ime, ll, mpl, proper, dimension, and, ar, rt, rope, tt, z, s, s, th, cir, belo, st, ati, ap, ica, ica, ple, pl, prop, pr, nd, on, om, ol, o

«Previous Index Next»