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
