One of my favorite items is to develop Flash components where the skins and even sizes are controlled by external data. Or as we say they are data driven.
One technique to deliver those parameters is via style sheets.
Flash allows you to create any style property you want. So you are not limited to just CSS standards. For example you can create a style named outerBorderGutterWidth. Flash will provide it nicely in the StyleSheet object.
I recently created a slide out menu component. It contains default skin and size parameters. Its data is dynamically driven as you might expect. But also its skin defaults are dynamically changeable both at design time and run time.
The component can open close by sliding up, right, down and left. The slide’s tween can do any of the easing in the Flash Tween component code such as bounce, elastic, regular, strong, back and none. As well the speed is a property of the component.
When the component is accessed on stage as a drag and drop or in code or in code, these properties can be set. On stage we use the Flash component parameters panel. In code we set these properties via the init parameter of attachMovieClip method. As well we can expose class properties for runtime access per design needs.
Great for the programmer! But can we give access to less technical user?
Part of the component properties is a style selector. As well as part of an overall site framework a style sheet is made available to component. If the style selector contains custom properties they override any created at instantiation either from attachMovie code or on the components parameters panel.For example a properties in the style sheet selectors may be
.testSelector{
backgroundColor:)xff0ff;
openDirection:up;
openCloseTweenEasing:Bounce;
openCloseTweenSeconds:1;
scrollBarVisiblity:always;
}
Thus the open direction is up, it uses a bounce easing for one second. I do like bounce. And the scroll bar is visible even when there are not enough items to merit it.
When the component is used in a movie, the selector as well the other properties can be set via the attachMovie init object property or in the component parameters panel.
In the component we might have these as initialization parameters for example:
[Inspectable(name=”style selector (ex:myStyleSelector)”)]
public var _styleSelector:String;
private var __styleSelector:String;
[Inspectable(name=”open position” enumeration=”Top,Left,Right,Bottom”, defaultValue=”Bottom”)]
public var _openPosition:String = “Bottom” ;
private var __openPosition:String ;
[Inspectable(name=”Open close animation easing”, enumeration = “Strong, Bounce, Elastic, Regular, Back, None”)]
public var _openCloseTweenEasing:String = “Regular”;
private var __openCloseTweenEasing:String;
In the constructor I copy the initialization properties to a private variable to prevent access after initialization. Thus they are write once unless they are exposed via a method.
The component then will choose the selector properties as an override to those in code or in the components properties panel. For example in the constructor or in an initialization function.
Also in the constructor on in an initialization method at style object is obtained from the framework loaded stylesheet and the properties are checked for overrides as follows:
__styleSheet = _global.styleManager.getStyleSheet();
__style = __styleSheet.getStyle(“.” + __styleSelector);
if (__style.openCloseTweenEasing != undefined)
{
__openCloseTweenEasing = __style.openCloseTweenEasing;
}
This gives a level of component customization in the system that does not require touching code. Generally users do not change style sheets, so a technician without programming or Flash skills may be required. However via content server interfaces users can get at style values in a code controlled environment. The content servers can generate style sheets.
At least with AS 2 and Flash 8 we sure do have a number of ways to initialize a component: attachMovie init parameter, Flash components parameters panels and dynamically from data sources including style sheets. Still we have traditional methods such as passing them as a constructor argument list or creating a constructor argument class.