Specifying controller options via FlashVars

If options were not passed in controller constructor FlashVars are checked. The same options can be specified there:

<script type="text/javascript">
var flashvars = 
{
	lookLinksXMLURL: "/swf/lookLinks.xml",
	// lookLinkNames: "Plastic,Sky,Red",
	// lookLinksURLBase: "/some/dir/",
	// showDefaultLook: "false"
};
swfobject.embedSWF("/swf/app.swf", "swfContainer", "100%", "450", "10.1", 
	"/playerProductInstall.swf", flashvars);
</script>
<div id="swfContainer">

Default behavior - load lookLinks.xml

If controller options were not specified and FlashVars are empty then FTheme tries to load XML file lookLinks.xml and expects to get this:

<lookLinks>
	<lookLink name="Plastic"/>
	<lookLink name="Yakuza"/>
	<lookLink name="Red"/>
	...
</lookLinks>

<lookLink> node can also have the following attributes:

• txtFileURL - URL to look txt file. If not specified Name.txt is used
• zipFileURL - URL to look zip file. If not specified Name.zip is used if look has bitmap fills.

How does FTheme work?

It works nearly the same way as default spark.swc or wireframe.swc via defining skin for each component like Button, CheckBox and so on. The key difference is that FTheme does not define the actual pixels, they are drawn by fills and strokes that are generated at runtime.

Compare ButtonSkin in two themes:

<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0x000000" 
                             color.down="0xFFFFFF"
                             alpha="0.01"
                             alpha.down="0" />
            <s:GradientEntry color="0x000000" 
                             color.down="0xFFFFFF" 
                             alpha="0.07"
                             alpha.down="0.5" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xFFFFFF" 
                             color.over="0xBBBDBD" 
                             color.down="0xAAAAAA" 
                             alpha="0.85" />
            <s:GradientEntry color="0xD8D8D8" 
                             color.over="0x9FA0A1" 
                             color.down="0x929496" 
                             alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
    <s:fill>
        <s:LinearGradient rotation="270">
            <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
            <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
            <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 4: fill highlight -->
<!--- @private -->
<s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.0"
                             alpha="0.33" 
                             alpha.over="0.22" 
                             alpha.down="0.12"/>
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.48"
                             alpha="0.33"
                             alpha.over="0.22"
                             alpha.down="0.12" />
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.48001"
                             alpha="0" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 5: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
    <s:stroke>
        <s:LinearGradientStroke rotation="90" weight="1">
            <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
            <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>

<!-- layer 6: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
    <s:stroke>
        <s:LinearGradientStroke rotation="90" weight="1">
            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
    <s:stroke>
        <s:LinearGradientStroke rotation="90" weight="1">
            <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>

<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<!--- @private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
    <s:stroke>
        <s:LinearGradientStroke rotation="90" weight="1">
            <s:GradientEntry color="0x000000" 
                             alpha="0.5625"
                             alpha.down="0.6375" />
            <s:GradientEntry color="0x000000" 
                             alpha="0.75" 
                             alpha.down="0.85" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>

<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay"
         textAlign="center"
         verticalAlign="middle"
         maxDisplayedLines="1"
         horizontalCenter="0" verticalCenter="1"
         left="10" right="10" top="2" bottom="2">
</s:Label>

<s:Rect left="1" right="1" top="1" bottom="1"
    fill.up="{getStyle('buttonUpFill')}"
    fill.over="{getStyle('buttonOverFill')}"
    fill.down="{getStyle('buttonDownFill')}"
    fill.disabled="{getStyle('buttonDisabledFill')}"
    radiusX="{getStyle('buttonCornerRadius')}"/>

<s:Rect left="1" right="1" top="1" bottom="1"
    stroke="{getStyle('highlightStroke')}"
    radiusX="{Math.max(0, getStyle('buttonCornerRadius') - 1)}"/>

<s:Rect left="0" right="0" top="0" bottom="0"
    stroke="{getStyle('buttonStroke')}"
    radiusX="{getStyle('buttonCornerRadius')}"/>

<s:Label id="labelDisplay" textAlign="center" verticalAlign="middle"
    maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1"
    left="10" right="10" top="2" bottom="2"/>

As you see FTheme skin uses styles like buttonUpFill that is mx.graphics.IFill instance and buttonStroke that is mx.graphics.IStroke. That's what FTheme does - sets those styles to .global CSS style declatation inside Flex StyleManager.

What properties and values are supported in look?

Here is the list of currently supported look properties:

• alternatingItemColors Array of colors Corresponds to Flex SDK "alternatingItemColors" style for list items backgrounds.
• applicationFill Fill Application background fill.
• borderStroke Stroke General stroke that is used in MX components borders and in other components that do not have implicit borders (like inputs that have "inputStroke").
• borderStroke Stroke General border. Also sets "borderColor" and "borderAlpha" Flex SDK styles.
• buttonCornerRadius Number Various buttons border corner radius.
• buttonDisabledFill Fill Various buttons disabled fill.
• buttonDownFill Fill Various buttons down fill.
• buttonMinHeight Number Button min height. Default is 21.
• buttonMinWidth Number Button min width. Default is 21.
• buttonOverFill Fill Various buttons over fill.
• buttonSelectedFill Fill Various buttons selected fill.
• buttonStroke Stroke Various buttons border stroke.
• buttonUpFill Fill Various buttons up fill.
• checkBoxSize Number Check box width and height. Default is 13.
• color null Text color in the application.
• contentCornerRadius Number Content areas border corner radius.
• contentFill Fill Content areas background fill e.g. list background fill.
• contentStroke Stroke Content areas border stroke.
• controlbarColor Color Controlbar text color.
• controlbarFill Fill Controlbar is a component introduced by FTheme is much like mx:ControlBar but it can be placed everywhere in the application. Background fill.
• controlbarStroke Stroke Controlbar top border stroke.
• errorColor Color Error text color.
• hScrollBarThumbDownFill Fill
• hScrollBarThumbOverFill Fill
• hScrollBarThumbUpFill Fill
• hScrollBarTrackFill Fill
• headerColors Array of colors Array of 2 colors for mx:DateChooser header fill.
• headerFill Fill Data grid and some other components header fill.
• highlightStroke Stroke Stroke that goes right next to the common interactive component border. Default is "0xFFFFFF alpha 0.2"/span>
• inputCornerRadius Number Various inputs border corner radius.
• inputFill Fill Various inputs background fill.
• inputStroke Stroke Various inputs border stroke.
• panelCornerRadius Number Panel corner radius.
• panelFill Fill Panel content area background fill.
• panelStroke Stroke Panel border stroke.
• progressBarFill Fill Progress bar fill.
• progressBarHeight Number Progress bar height.
• progressBarStroke Stroke Progress bar border stroke.
• progressBarTrackFill Fill Progress bar track fill.
• radioButtonDotSize Number Radio button dot size. Default is 5
• radioButtonSize Number Radio button width and height. Default is 13
• rollOverColor Color Background color for hovered item renderers.
• scrollBarButtonSize Number Defailt is 17.
• scrollBarCornerRadius Number Defailt is 0.
• scrollBarSize Number Defailt is 14.
• scrollBarStroke Stroke
• scrollBarThumbMinSize Number Defailt is 17.
• selectionColor Color Background color for selected item renderers.
• sliderThumbSize Number Defailt is 11.
• sliderTrackCornerRadius Number Defailt is 3.
• sliderTrackFill Fill
• sliderTrackSize Number Defailt is 6.
• sliderTrackStroke Stroke
• symbolColor Color
• symbolFill Fill
• titlebarColor Color Titlebar text color.
• titlebarFill Fill Titlebar fill. Titlebar is the topmost area of panel with panel title inside.
• titlebarStroke Stroke Titlebar bottom border stroke.
• toolbarButtonDisabledFill Fill Toolbar button disabled background fill.
• toolbarButtonDownFill Fill Toolbar button down background fill.
• toolbarButtonOverFill Fill Toolbar button over background fill.
• toolbarButtonUpFill Fill ToolbarButton is a component introduced by FTheme. Button up background fill.
• toolbarColor Color Toolbar text color.
• toolbarFill Fill Toolbar background fill. Toolbar is a component introduced by FTheme. Is usually placed right below the panel titlebar.
• toolbarStroke Stroke Toolbar bottom border stroke.
• vScrollBarThumbDownFill Fill
• vScrollBarThumbOverFill Fill
• vScrollBarThumbUpFill Fill
• vScrollBarTrackFill Fill

Types

Number

Color

• 0xFFCC00
• #FFCC00
• 0x333
• #333

Array of colors

• 0xFFCC00 0xFF0000 0xCC5500
• #333 #222
• 0x333

Fill

Linear or solid color fill

• 0xFFCC00
• 0xFFCC00 alpha 0.5
• 0xFFCC00 0xFF0000 rotation 45
• 0xFFCC00 alpha 0.5 ratio 0.2 0xFF0000 alpha 0.85 spreadMethod reflect scaleX 150

Valid values of spreadMethod are pad, reflect and repeat.

Default rotation is 90 so that gradient draws vertically.

Radial fill

• radial 0xFFCC00
• radial 0xFFCC00 alpha 0.5
• radial 0xFFCC00 0xFF0000 rotation 45 scaleX 100 scaleY 200 focalPointRatio -1

Valid values of spreadMethod are pad, reflect and repeat.

Default rotation is 90.

Valid values of focalPointRatio are from -1.0 to 1.0.

Bitmap fill

• bitmap assetId
• bitmap assetId fillMode clip horizontalAlign right verticalAlign bottom smooth true
• bitmap assetId fillMode clip horizontalAlign right y -30
• bitmap assetId fillMode scale maintainAspectRatio true

Before specifying bitmap fill ensure that you've got bitmaps with corresponding names in your ZIP archive:

Stroke

• 0xFFCC00
• #333 alpha 0.5 pixelHinting true