"outline" and "shadow"

"outline" and "shadow"

The Aspire UI library implements two additional text formatting rules you can use to style the text in your applications - the “outline” and “shadow” properties.

The "outline" Property

The “outline” property when defined will cause an outline to be drawn on the text glyphs. This is commonly seen in video subtitles.

The property is defined in CSS just like the other text formatting properties:

specialstyle
{
    color:#FFFFFF;
    outline:#333333;
}

If you prefer to define the style within your application code using ActionScript:

uiTextStyles.manager.setStyle("specialstyle",
    {color:"#FFFFFF",outline:"#333333"});

Let's create a uiText instance and set its textStyle property to “specialstyle”:

    var txt:uiText = new uiText("Hello World!");
    txt.textStyle = "specialstyle";
    addChild(txt);

The "outlineWeight" Property

Required: v1.2.2+

The “outlineWeight” property specifies the thickness of the outline. The greater the value, the thicker the outline. The default value is 4. The minimum value is 2 (very thin, faded outline).

The property is defined in CSS just like the other text formatting properties:

specialstyle
{
    color:#FFFFFF;
    outline:#333333;
    outlineWeight:8;
}

If you prefer to define the style within your application code using ActionScript:

uiTextStyles.manager.setStyle("specialstyle",
    {color:"#FFFFFF",outline:"#333333",outlineWeight:8});

The "shadow" Property

The “shadow” property when defined will cause the text to cast a subtle shadow, resulting in either a raised or lowered look depending on the color combinations used.

Let's consider the following CSS:

specialstyle
{
    color:#FFFFFF;
    shadow:#333333;
}

If you prefer to define the style within your application code using ActionScript:

uiTextStyles.manager.setStyle("specialstyle",
    {color:"#FFFFFF",shadow:"#333333"});

The “specialstyle” now produce the following effect:¹⁾

The following produce a text style commonly seen in classic Windows applications, the style used for text in disabled controls:

specialstyle
{
    color:#808080;
    shadow:#FFFFFF;
}

Example

ActionScript 3.0 TextStylesExample class

package
{
    import com.ghostwire.ui.containers.uiBox;
    import com.ghostwire.ui.controls.uiText;
    import com.ghostwire.ui.managers.uiSkins;
    import com.ghostwire.ui.managers.uiTextStyles;
 
    import flash.display.Sprite;
    import flash.events.Event;
 
    public class TextStylesExample extends Sprite
    {
        public function TextStylesExample()
        {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
 
        private function init(evt:Event):void
        {
            // ** optional but recommended **
            stage.scaleMode    = "noScale";
            stage.align        = "TL";
 
            // ** uncomment to use "classic" theme **
            // uiSkins.initialize("classic");
 
            // ** optional but recommended **
            // ** let assets preload before starting application **
            uiSkins.manager.addEventListener(Event.INIT,main);
        }
 
        private function main(evt:Event):void
        {
            // ** main application code **
            uiTextStyles.manager.setStyle("style1",{shadow:"#808080"});
            uiTextStyles.manager.setStyle("style2",{color:"#ffffff",outline:"#000000"});
            uiTextStyles.manager.setStyle("style3",{color:"#ffffff",outline:"#000000",shadow:"#808080"});
            uiTextStyles.manager.setStyle("style4",{color:"#ffffff",outline:"#000000",shadow:"#808080",fontWeight:"bold"});
            uiTextStyles.manager.setStyle("style5",{color:"#ffffff",outline:"#000000",shadow:"#808080",fontStyle:"italic"});
            uiTextStyles.manager.setStyle("style6",{color:"#ffffff",outline:"#000000",shadow:"#808080",fontStyle:"italic",fontWeight:"bold"});
 
            var txt0:uiText = new uiText("this is normal text");
 
            var txt1:uiText = new uiText("this text has gray shadow");
            txt1.textStyle = "style1";
 
            var txt2:uiText = new uiText("this is white text with black outline");
            txt2.textStyle = "style2";
 
            var txt3:uiText = new uiText("this is white text with black outline and gray shadow");
            txt3.textStyle = "style3";
 
            var txt4:uiText = new uiText("combined with bold style");
            txt4.textStyle = "style4";
 
            var txt5:uiText = new uiText("combined with italic style");
            txt5.textStyle = "style5";
 
            var txt6:uiText = new uiText("combined with bold and italic style");
            txt6.textStyle = "style6";
 
            var box:uiBox = new uiBox();
            box.spacing = 3;
            box.vertical = true;
            addChild(box)
 
            box.addChild(txt0);
            box.addChild(txt1);
            box.addChild(txt2);
            box.addChild(txt3);
            box.addChild(txt4);
            box.addChild(txt5);
            box.addChild(txt6);
        }
    }
}

TextStylesExample.as

If defined in CSS:

style1
{
    shadow:#808080;
}
style2
{
    color:#FFFFFF;
    outline:#000000;
}
style3
{
    color:#FFFFFF;
    outline:000000;
    shadow:#808080;
}
style4
{
    color:#FFFFFF;
    outline:#000000;
    shadow:#808080;
    font-weight:bold;
}
style5
{
    color:#FFFFFF;
    outline:#000000;
    shadow:#808080;
    font-style:italic;
}
style6
{
    color:#FFFFFF;
    outline:#000000;
    shadow:#808080;
    font-style:italic;
    font-weight:bold;
}

¹⁾ Remember that when using external CSS file, you do not need to re-compile the SWF after modifying the CSS.