AS3 Object Array not adding to stage

Question

So I am new to AS3 and AS in general. I do know Java to a degree and PHP very well.

I am trying to learn by writing an app that creates a hex map programatically. I am using a library for hexagons which I will include below however, here is my issue. When I run a for loop for say, a 10 count, and I then create a shape, add the shape and draw the shape, it has no issue. When in the same loop if I push a shape to an array, then add that array element, then draw it, I get nothing.

package
{
    import flash.display.MovieClip;
    import flash.display.Shape;
    import flash.text.TextField;

    public class Main extends MovieClip
    {
        private var radius:Number = 30;
        private var sides:Number = 6;
        private var myrotation:Number = 0;
        private var lineColor:Number = 0x000000;
        private var lineThickness:Number = 1;
        private var l:TextField = new TextField();
        private var f:Array = new Array(20);
        public function Main()
        {
            l.text = "test";
            addChild(l);
            //WORKS should be red
            for(var j:int = 0; j<stage.stageWidth/(radius*2);j++)
            {
                var t:Polygon = new Polygon();
                addChild(t);
                t.drawPolygon(radius,sides,2*radius*j,radius*2,0xFF0000,lineThickness,myrotation);
            }

            //DOES NOT WORK (note the *3 is so it is lower down) should be blue
            for(var j:int = 0; j<stage.stageWidth/(radius*2);j++)
            {
                f.push(new Polygon());
                addChild(f[j]);
                f[j].drawPolygon(radius,sides,2*radius*j,radius*3,0x0000FF,lineThickness,myrotation);
            }   
        }
    }
}

The polygon class I am using is below. I grabbed it off the internets somewhere.

 package
{
    import flash.display.MovieClip;
    import flash.events.Event;

    public class Polygon extends MovieClip
    {
        //PROPERTIES
        private var points:Array;

        private var id:int;
        private var ratio:Number;
        private var top:Number;

        private var fade_value:int;

        //CONSTRUCTOR
        public function Polygon()
        {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }

        private function init(evt:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE,init);
            stage.frameRate=31;
        }

        //METHODS
        public function drawPolygon(radius:int,segments:int,centerX:Number,centerY:Number,tint:uint,line:int,rotating:Number):void
        {
            id=0;
            points=new Array();
            ratio=360/segments;
            top=centerY-radius;
            for(var i:int=rotating;i<=360+rotating;i+=ratio)
            {
                var xx:Number=centerX+Math.sin(radians(i))*radius;
                var yy:Number=top+(radius-Math.cos(radians(i))*radius);
                points[id]=new Array(xx,yy);
                if(id>=1) 
                {
                    drawing(points[id-1][0],points[id-1][1],points[id][0],points[id][1],tint,line);
                }
                id++;
            }
            id=0;
        }

        private function radians(n:Number):Number 
        {
            return(Math.PI/180*n);
        }

        private function drawing(startX:Number,startY:Number,stopX:Number,stopY:Number,tint:Number,line:int):void 
        {
            graphics.lineStyle(line,tint,1);
            graphics.moveTo(startX,startY);
            graphics.lineTo(stopX,stopY);
        }

        public function fadeOut():void
        {
            fade_value=0;
            addEventListener(Event.ENTER_FRAME,fade);
        }
        public function fadeIn():void
        {
            fade_value=1;
            addEventListener(Event.ENTER_FRAME,fade);
        }

        //PRIVATE
        private function fade(evt:Event):void
        {
            var da:Number=fade_value-alpha;
            var aa:Number=da*.1;
            alpha+=aa;
            if(Math.abs(da)<=.05)
            {
                alpha=fade_value;
                removeEventListener(Event.ENTER_FRAME,fade);
                if(fade_value==0)
                    dispatchEvent(new Event('fadeOutDone'));
                else
                    dispatchEvent(new Event('fadeInDone'));
            }
        }
    }
}

----EDIT---- the code is now as follows with the same issues occurring. I've tried adding a vector and i tried casting the array element. package { import flash.display.MovieClip; import flash.display.Shape; import flash.text.TextField;

    public class Main extends MovieClip
    {
        private var radius:Number = 30;
        private var sides:Number = 6;
        private var myrotation:Number = 0;
        private var lineColor:Number = 0x000000;
        private var lineThickness:Number = 1;
        private var l:TextField = new TextField();
        private var f:Array = new Array(20);
        private var v:Vector.<Polygon> = new Vector.<Polygon>(10);
        public function Main()
        {
            l.text = "test";
            addChild(l);
            //WORKS should be red
            for(var i:int = 0; i<stage.stageWidth/(radius*2);i++)
            {
                var t:Polygon = new Polygon();
                addChild(t);
                t.drawPolygon(radius,sides,2*radius*i,radius*2,0xFF0000,lineThickness,myrotation);
            }

            //DOES NOT WORK (note the *3 is so it is lower down) should be blue
            for(var j:int = 0; j<stage.stageWidth/(radius*2);j++)
            {
                f.push(new Polygon());
                addChild(f[j]);
                Polygon(f[j]).drawPolygon(radius,sides,2*radius*j,radius*3,0x0000FF,lineThickness,myrotation);
            } 

            for(var k:int = 0; k<stage.stageWidth/(radius*2);k++)
            {
                v.push(new Polygon());
                addChild(v[k]);
                v[k].drawPolygon(radius,sides,2*radius*k,radius*3.5,0x00FF00,lineThickness,myrotation);
            }   
        }
    }
}

compile notes...

Loading configuration file C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\ sdks\4.6.0\frameworks\flex-config.xml Initial setup: 64ms start loading swcs 14ms Running Total: 78ms Loaded 30 SWCs: 484ms precompile: 841ms C:\Users\jmasiello.place\Documents\flash\Main.as: Warning: This compila tion unit did not have a factoryClass specified in Frame metadata to load the co nfigured runtime shared libraries. To compile without runtime shared libraries e ither set the -static-link-runtime-shared-libraries option to true or remove the -runtime-shared-libraries option.

Files: 145 Time: 961ms Linking... 25ms Optimizing... 26ms SWF Encoding... 11ms C:\Users\jmasiello.place\Documents\flash\Main.swf (1809 bytes) postcompile: 65ms Total time: 1595ms Peak memory usage: 47 MB (Heap: 29, Non-Heap: 18)

Answer 1

WWhen you do

private var f:Array = new Array(20);

You create an array with 20 elements in implements
Then later on you are pushing an element into the same array.
f.push(new Polygon()); By pushing an element you are adding to the last element
Which makes the array have the first 20 elements null and the 21st element be a Polygon
You can even verify it by doing.

for(var j:int = 0; j<stage.stageWidth/(radius*2);j++){
    f.push(new Polygon());
    trace(f)
}   

So in your code you are pushing into the 21st element and then accessing the array via

addChild(f[j]);

Which j = 0 and the element in 0 is still null
Then best way to fix it would be to

private var f:Array = new Array();

Answer 2

Are you getting any errors? You probably need to cast to Polygon in order for the compiler to accept the drawPolygon method.

for(var j:int = 0; j<stage.stageWidth/(radius*2);j++) {
 f.push(new Polygon());
 addChild(f[j]);
 Polygon(f[j]).drawPolygon(radius,sides,2*radius*j,radius*3,0x0000FF,lineThickness,myrotation;
} 

To skip the casting you can use a Vector instead of an Array as then the compiler will know that it handles Polygons exclusively.