Archive for the ‘Flex 3’ Category

Wipe ButtonSkin

Monday, September 8th, 2008

Here’s a skin we built recently for a very popular AIR application.

Like the gingerbread man example this skin has seamless transitions between its different states but instead of using Flash assets, everything is created programmatically.

The skin supports the following styles:

fillColors – an Array of 4 colors (the first 2 used for the background, the last 2 used for wipe)

fillAlphas – an Array of values between 0 & 1 to control the alpha of the fillColors (the first 2 used for the background, the last 2 used for wipe)

fillRatios – an Array of values between 0 & 255 to control the gradient ratios of the fillColors (the first 2 used for the background, the last 2 used for wipe)

topLeftCornerRadius – Number to specify the radius of the top left hand corner

topRightCornerRadius – Number to specify the radius of the top right hand corner

bottomRightCornerRadius – Number to specify the radius of the bottom right hand corner

bottomLeftCornerRadius – Number to specify the radius of the bottom left hand corner

type – String to define the wipe type (“wipeOn” or “wipeOff”)

direction – String to specify the direction of the wipe (“up”, “down”, “left” or “right”)

Most of the above can’t be set on the Button directly due to the way styles are implemented in Flex 3.0 (i.e. styles that belong to a skin are set on the Button itself), but you can easily define them with inline (see example below), or external CSS. You can also use these skins as Tabs due to the fact that you can round the corners individually.


You can get the source code for the example by right clicking in the example above, but the source code for the skin can only be downloaded from our Google Code repository.


Thursday, February 14th, 2008

When creating the default styles on a component you need to know the name of the class you are inside. The most common way of creating default styles is to use a static initializer.

	import mx.core.UIComponent;
	import mx.styles.CSSStyleDeclaration;
	import mx.styles.StyleManager;
	public class MyFlexComponent extends UIComponent
		public function MyFlexComponent()
		private static var defaultStylesSet                : Boolean = setDefaultStyles();
		 *  @private
		private static function setDefaultStyles():Boolean
			var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration( "MyFlexComponent" );
			 if( !style )
		        	style = new CSSStyleDeclaration();
		        	StyleManager.setStyleDeclaration( "MyFlexComponent", style, true );
			if( style.defaultFactory == null )
	        		style.defaultFactory = function():void
					this.style0 = "style0";
	            			this.style1 = "style1";
	        	return true;

This works fine, but it can be a problem if you refactor the class and change the class name as the string that is used in the above example won’t be updated. We’ve stumbled across this a few times and so our solution has been to write a method to take care of this class name for us.


MirroredBox, HMirroredBox & VMirroredBox

Friday, February 1st, 2008

The other day John was asking me about getting children to lay themselves out in the opposite direction when added to a HBox.

I created a MirroredBoxLayout that extended BoxLayout and just reversed the order of the for loop that was used to position the children, both for vertical and horizontal layout. This is then used as the layoutObject in MirroredBox, which extends Box. HMirroredBox and VMirroredBox both extend MirroredBox, as you would expect.

MirroredBoxExample (right click for source).

Obviously you could just reverse the order you add the children in, or add them at a specific index, but if your comparing these to other arrays, or properties in these with other properties in other arraya you’d have to reverse those to. The MirroredBox’s keep everything in the order you would expect, but just lays them out in the opposite order. Anyway someone may find it useful, as John did ;) .

Note in our Google Code Library these have been replaced with ReverseBox, HReverseBox , VReverseBox & ReverseBoxLayout

Adding Children to Skins (SpriteBorder & SpriteProgrammaticSkin)

Friday, December 28th, 2007

I was creating a skin today and I need to be able to create children within the skin and add them to it’s display list. This wasn’t possible when extending Border or ProgrammaticSkin as they are not DisplayObjectContainers, they extend FlexShape (i.e. a DisplayObject).

I came across this post where Ely suggested creating some base classes that have this functionality (i.e. extend FlexSprite), so here they for anyone else who needs them.



Monday, November 26th, 2007

One of the limitations of the default TabNavigator in the Flex 3.0 framework is that it still only allows for tabs at the top of the component, either aligned on the left, right or in the center by applying the style “horizontalAlign”.

PositionedTabNavigator removes the “horizontalAlign” style, but lets you specify where you want the tabs using the style “tabPosition”.

Valid values are: topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight, leftTop, leftMiddle, leftBottom, rightTop, rightMiddle and rightBottom.

You can also fine tune the tabs position using the style “tabOffset”, as you can with TabNavigator.

A new TabBar was required where a position can be set so knows how to render the tabs. PositionedTabBar takes care of this, and sets its “direction” property automatically when its “position” styles is set. An instance of this in action is included in the example below.

Value values are: top, bottom, left and right.

PositionedTabSkin also checks the “position” style which is set on each PositionTab, and draws the tab with the correct rotation. PositionedTabSkin follows the Halo skin theme.

PositionedTabNavigatorExample (right click for source).

Please post any bugs in the comments and I will do my best to fix them.

Seamless Animated Skins in Flex

Wednesday, November 14th, 2007

In Joey Lotts session on styling Flex at FOTB (where he did a great job), one of the attendees asked about animated skins.

There’s obviously many ways to approach this but I thought I’d do an example of how you can have seamless transitions between these states using frame labels inside the symbol in Flash, and by adding code using addFrameScript().

AnimatedSkinExample (right click for source)

GingerbreadMan skins are going to be all the rage in Flex 3.0 ;) .

The animation for this skin was found on Flashkit.