Scrollable regions in ActionScript 3 Visualization

Question

What is the best way to create several scrollable regions in an ActionScript 3 visualization that extends flash.display.Sprite and makes use of hierarchy of of low level DisplayObjects (Sprite'a, Shape's, TextField)?

I have tried to use three mx.containers.Canvas objects added as children of the main Sprite and have also tried converting the main Sprite to a Canvas but am unable to get anything to show up using either method. I have also tried adding my DisplayObjects using both Canvas.addChild and Canvas.rawChildren.addChild.

Is it necessary/possible to rewrite the whole thing to use mx.* components or is there a trick to displaying more primitive objects inside of a Canvas object?

Here is some sample code for the way that works using sprites. We would like to make _colSprite, _rowSprite and _mapSprite sroll with linked scrolling bars. When i convert them to Canvas objects the code hangs silently before any display objects are drawn (at the addChild lines if i recall correctly).

Below is an excerpt of the code. This is all from a single actionscript class that extends sprite.

Seting up three regions i wish to scroll:

this._log("Creating Sprites"); 

                this._colSprite = new Sprite();

                this._colSprite.y=0;

                this._colSprite.x=this._rowLabelWidth + this._rowLabelRightPadding + this._horizontalPadding;


this._rowSprite = new Sprite();

                this._rowSprite.y=this._columnLabelHeight+this._columnLabelBottomPadding + this._verticalPadding;

                this._rowSprite.x=this._horizontalPadding;




                this._mapSprite = new Sprite();

                this._mapSprite.y=this._columnLabelHeight+this._columnLabelBottomPadding+ this._verticalPadding;

                this._mapSprite.x=this._rowLabelWidth + this._rowLabelRightPadding+this._horizontalPadding;


                    this._log("adding kids"); 

addChild(this._mapSprite);

addChild(this._rowSprite);

addChild(this._colSprite);

Sample drawing function:

 private function _drawColumLabels(colStartIndex: int): void {

        for (var col : int = colStartIndex; col < myData.g.length; col++) {

            var colName : String = this.myData.g[col].label;

            var bottomLeftPoint : Object = this._getCellXYTopLeft(0, col);

            bottomLeftPoint.y = this._columnLabelHeight + this._verticalPadding;

            var centerX : int = Math.round(this._cellWidth / 2 + (this._fontHeight / 2) - 1);



            var colLabel : TextField = new TextField();

                colLabel.defaultTextFormat = this._labelTextFormat;

                colLabel.width = this._columnLabelHeight+this._columnLabelBottomPadding;

                colLabel.text = colName;                

                colLabel.embedFonts = true;





                var colSprite : Sprite = new Sprite();

                colSprite.addChild(colLabel);

                colSprite.x = bottomLeftPoint.x;

                colSprite.y = bottomLeftPoint.y;



                colSprite.rotation = -45;



                this._colSprite.addChild(colSprite);



        }

    }

Answer 1

After adding the children to each Canvas you may need to call Canvas.invalidateSize() (on each one) to get them to recalculate their sizing.

Needing to do this depends on which stage in the Component Lifecycle you're adding the children - i.e. when you're calling '_drawColumLabels'.

I presume you're wanting a scollbar to appear on _colSprite (and _rowSprite) if there are more labels in it than can be displayed in it's visible area? If this is the case you'll need to use something other than Sprite, like Canvas as Sprite doesn't support scrolling.

You may also want to debug the x/y/width/height values of each of your components to make sure they're what you expect - something I find helpful with doing layout is to draw the layout on paper and start writing sizes and coordinates so that I can see that my calculations are right.