Feathers ui skin replacement

Feathers is a lightweight, easy-to-Customize skin and extended UI component (applicable to mobile devices and desktops ). Feathers uses the Starling framework and powerful GPU rendering components to achieve a smoother and more friendly experience.

It is now a Class Library Supported by Adobe!

Features:

Cross-platform
Easy to customize skin
Free and open source code

 

Here we will mainly talk about how to skin over the skin. Although the official website has provided four sets of themes, Custom Skin is definitely necessary!

Take the BUTTON as an example:

I. Theme skin

Set toptheme skin using TextureAtlas
Note that the setting skin should be used before all controls are instantiated.
This. theme = new AeonDesktopTheme (this. stage );
Before
Var mybtn: Button = new Button ();
AddChild (mybtn );

Custom Skin:

[Embed (source = "/../assets/images/aeon.png")]
Protected static const ATLAS_IMAGE: Class;

[Embed (source = "/../assets/images/aeon. xml", mimeType = "application/octet-stream")]
Protected static const ATLAS_XML: Class;

Method 1, // used to change a single topic
The user-defined skin does not change the original resource file. It inherits the built-in skin and can expand its own skin. The simplest method is as follows:
Http://wiki.starling-framework.org/feathers/extending-themes

Var theme: MetalWorksMobileTheme = new MetalWorksMobileTheme ();
Theme. setInitializerForClass (Button, myCustomButtonInitializer, "my-custom-button"); // the key method to override a topic

Var button: Button = new Button ();
Button. nameList. add ("my-custom-button"); // bind the topic you have defined
This. addChild (button );

// Reset the button topic
Private function myCustomButtonInitializer (button: Button): void
{
Button. defaultSkin = new Image (upTexture );
Button. downSkin = new Image (downTexture );
Button. hoverSkin = new Image (hoverTexture );

Button. defaultLabelProperties. textFormat = new TextFormat ("fontName", 18, 0 xffffff );
}

 

Another method is to change the global topic.
Inherit from the aeontopics toptheme class in

Override protected function initialize (): void
{
Super. initialize ();

This. setInitializerForClass (Button, myCustomButtonInitializer, ALTERNATE_NAME_MY_CUSTOM_BUTTON );
}

Private function myCustomButtonInitializer (button: Button): void
{
Button. defaultSkin = new Image (upTexture );
Button. downSkin = new Image (downTexture );
Button. hoverSkin = new Image (hoverTexture );

Button. defaultLabelProperties. textFormat = this. smallUIDarkTextFormat;
Button. disabledLabelProperties. textFormat = this. smallUIDisabledTextFormat;
Button. selectedDisabledLabelProperties. textFormat = this. smallUIDisabledTextFormat;
}

 

 

Rewrite topic:
Extends DisplayListWatcher:

Override protected function initialize (): void

 

 

 

 

 

Related information:

Http://www.starlinglib.com/wiki/News:Starling_Feathers

• Download: https://github.com/joshtynjala/feathers/zipball/master
• API documentation: http://feathersui.com/documentation/
• Submit Bug: https://github.com/joshtynjala/feathers/issues
• Getting Started: http://wiki.starling-framework.org/feathers/getting-started
• FAQ: http://wiki.starling-framework.org/feathers/faq
• Feathers code style convention: http://wiki.starling-framework.org/feathers/coding-conventions

Instance demo

• Components Explorer
• Layout Explorer
• Tile List
• Gallery
• Display Object Explorer