Home Flex Flex Circle drawing example

Related Tutorials


 
 

Share on Google+Share on Google+

Flex Circle drawing example

Advertisement
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

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 9, 2008

Related Tutorials

Discuss: Flex Circle drawing example  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com