When often we are forced to use a bitmap as background (a very bad thing to do), the only viable alternative would be to create the effect programmaticaly in the component code. Besides the obvious the advantage of saving memory, it allows us to resize the container without any side effects – making it a truly reusable component.

With the GradientCanvas properties its easy to control the colors, alphas and corners of the container – up to 16 entries of colors and alphas can be used.
The container code is a very basic example on how to create a custom container, and using it from mxml to achieve different effects.

<box:GradientCanvas top="30" left="290" width="190" angle="75"
	colors="[0xffffe4 , 0xfff97f, 0xfff97f, 0xfff97f, 0xef8d23]"  corners="[4,4,16,16]">
	<mx:VBox width="100%" top="16" paddingLeft="16" paddingRight="16" horizontalAlign="center" >
		<mx:Label text="While Supplies Last"/>
		<mx:Button label="Press Me" />
		<mx:Text width="100%" text="{someText}"  fontWeight="normal"/>
		<mx:Spacer height="22"/>
	</mx:VBox>
</box:GradientCanvas>

The code is compact, and most of the work is done inside the updateDisplayList function. Gradients can be created directly with the graphics drawing calls, but since we extent UIComponent its better to use the helper function that is already provided in the class.

This component can be further enhanced to leverage the functionality and create far more complex gradients, as much as needed.

Inspired by the flexlib code, I decided to write my own container based on the same ideas, only with a slightly different implementation.

This resulted in ButtonScrollLite, a container suitable for games and touch displays, where you just tap the arrows to flip through content of any kind.  Its simple to use – just place any child elements inside it in the mxml and it works right out of the box. The arrow buttons are fully sinkable, so anyone can decide to roll their own buttons.

Properties:

• direction  – (horizontal|vertical) default is vertical
• scrollSize  – the size (in pixels) to scroll in a single step- default is 10. Typically you want to set it to the size of one item in your list, although they can be in different sizes.

The bulk of the code is in 2 functions: createChildren and updateDisplayList.

 override protected function createChildren():void
        {
            super.createChildren();
 
            // We have 4 buttons for each side of the conainter
	    	leftButton = new Button();
		rightButton = new Button();
		upButton = new Button();
		downButton = new Button();
 
		leftButton.styleName = getStyle("leftButtonStyleName");
		rightButton.styleName = getStyle("rightButtonStyleName");
		upButton.styleName = getStyle("upButtonStyleName");
		downButton.styleName = getStyle("downButtonStyleName");
 
		// this is the main canvas component, we tell it to
		// never show the scrollbars since we're controlling them
		// on our own
		innerCanvas = new Canvas();
		innerCanvas.document = this.document;
		innerCanvas.horizontalScrollPolicy = ScrollPolicy.OFF;
		innerCanvas.verticalScrollPolicy = ScrollPolicy.OFF;
 
		...
	}

First, createChildren sets up the four buttons and their styles (so they are skinnable). It also creates the inner canvas, that will hold the actual contents, and turns off the scroll policy so that no scrollbars will show.

All the rest is handled in updateDisplayList:

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth,unscaledHeight);
 
            ...
            var btnSpace:Number = btnHeight + _buttonGap;
 
            if (_direction == VERTICAL) {
            	innerCanvas.setActualSize(unscaledWidth,
            	            	      unscaledHeight - btnSpace*2);
            	innerCanvas.move(0, btnSpace);
            }
            else {
            	btnSpace = btnWidth + _buttonGap;
            	innerCanvas.setActualSize(unscaledWidth - btnSpace*2,
            	            	     unscaledHeight);
            	innerCanvas.move(btnSpace, 0);
            }
 
	    positionButtons(unscaledWidth, unscaledHeight);
            callLater(enableOrDisableButtons);
        }

The buttons and inner canvas are sized and placed in their position, depending on the layout direction (vertical or horizontal).

To perform the smooth scroll, I used a tweener (Greensock TweenLite) – this saved me the need to use timer events or enter frame, and the easing function gives it a more natural motion.

Feel free to use the class in any apps,  modify it , or use new skins.