I want to use the new graphics declarations to draw a bunch of 5px wide circles onto this canvas

Question

I'm learning this FB 2 IDE.
Could someone help me out here for a project I want to do.
Basically what I have is this
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:mx="library://ns.adobe.com/flex/halo" layout="absolute" minWidth="1024" minHeight="768" width="432" height="382">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Canvas width="100%" height="100%" backgroundColor="#FFFFFF">
    </mx:Canvas>
</mx:Application>
I want to use the new graphics declarations to draw a bunch of 5px wide circles onto this canvas but I don't know how. I want to evalve this into a strategy game
Any code tips would be appreciated
Is Canvas the best choice to draw stuff onto?
looking forward to your input and help as this app grows

Answer 1

Thanks very much so far, awesome code:)
I now have added some animation and logic.
If compile this and press start animation you will see what I mean
I would now like to draw a line from every gray ellipse to every blue ellipse but am not sure of the best way to do this using fxg.(connecting centers and behind the ellipsis)
Would love some expert advice
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:creationComplete>
        <![CDATA[
        setupScene();
        ]]>
    </s:creationComplete>
    <s:controlBarContent>
        <s:Button label="start Animation"
                  buttonDown="startAnimation();" />
        <s:Button label="stop Animation"
                  buttonDown="stopAnimation();" />
    </s:controlBarContent>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.core.IVisualElement;
            import mx.graphics.SolidColor;
            private var FPS:uint = 20;
            private var delay:uint = 1000/ FPS;
            private var repeat:uint = 100;
            private var myTimer:Timer = new Timer(delay, repeat);
            private var blueTeam:ArrayCollection =  new ArrayCollection();
            private var blueLeaders:ArrayCollection =  new ArrayCollection();
            private function startAnimation():void{
                myTimer.addEventListener("timer", updateState);
                myTimer.start();
            private function stopAnimation():void{
                myTimer.stop();
            protected function setupScene():void {
                for (var i :int = 0;i< 8;i++){
                    var c:bCirc = new bCirc();
                    c.x = uint(Math.random() * 400); // random X position
                    c.y = uint(Math.random() * 300); // random Y position
                    blueTeam.addItem(c);
                for (i = 0;i< 2;i++){
                    var c2:bLeader = new bLeader();
                    c2.x = uint(Math.random() * 400); // random X position
                    c2.y = uint(Math.random() * 300); // random Y position
                    blueTeam.addItem(c2);
            private function updateState(event:Event):void{
                for each (var o:IVisualElement  in blueTeam ){
                    o.x ++;
                for each (o  in blueLeaders ){
                    o.x ++;
                render();
            private function render():void{
                //clear all items from displaylist
                removeAllElements();
                for each (var o:IVisualElement in blueTeam ){
                    addElement(o );
        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:Component className="bCirc">
            <s:Ellipse width="30" height="30" alpha="0.8">
                <s:fill>
                    <s:SolidColor color="0x0000ff" />
                </s:fill>
            </s:Ellipse>
        </fx:Component>
        <fx:Component className="bLeader">
            <s:Ellipse x="0" y="0" width="30" height="30">
                <s:fill>
                    <s:LinearGradient x="0" y="0" rotation="90">
                        <s:entries>
                            <s:GradientEntry color="#FFFFFF" ratio="0" alpha="1" />
                            <s:GradientEntry color="#000000" ratio="1" alpha="1" />
                        </s:entries>
                    </s:LinearGradient>
                </s:fill>
            </s:Ellipse>
        </fx:Component>
        <fx:Component className="RCirc">
            <s:Ellipse width="30" height="30" alpha="0.8">
                <s:fill>
                    <s:SolidColor color="0xff0000" />
                </s:fill>
            </s:Ellipse>
        </fx:Component>
    </fx:Declarations>
</s:Application>