I have finished the first component which accompanies the DynaSkin Library. The button component uses the "Button" "SkinObject" type, with a label and some positioning parameters. See DynaSkin Types.
Parameters include:
Label horizontal alignment
Label vertical alignment
Label Text
All other properties are managed by the accompanying Skin Xml file. See example file here. Files needed:
Here is a demo of the different types the DynaSkin Library currently supports.
Single - Only one state, used for single resizable images.
Double - Two states, example: A window header with a normal and disabled state.
Item - Three states, example: A item in a list with a normal state a selected state and a disabled state.
Button - Four states. Up, Over, Down and Disabled.
Each on of these Types have there own default Transition class which gives them there behaviors. Custom Transitions are available but will be explained at a later date.
The last few years have produced some really cool things and one of them has been the ability to create Flash content for the Desktop. Wrapped inside one small Exe. The result is an array of Flash apps with a wide variety of functionality. This opened up a window, an area were I wanted to focus on and find a way to easily Skin and "reSkin" these applications. Using external Png files (used for it's alpha 100% blending) as the visual data and XML files as the references and layout data, the result being the "DynaSkin Library 1.0". For example, a Button with four states - Up,Over,Down and Disabled. Design your states in Photoshop, or your choice of image editor and save them as one Png file. Create an accompanying Xml file defining your states and you have the following:
(Fig: 1)
The following Png file (Fig:2) is used for the skinning of the button, view the Xml sample here. For now the xml needs to be created manually for each Skin Object, but we are working on a Skin xml generator created in AIR.
(Fig:2)
The above is an example of an SkinObject with four states and a general button behavior. This type of skinObject is called "button", other types include, "Single","Double" and "Item". Version 1.0 of this Library only allows you to have these predefined Types. Future release will allow you to setup custom types to be created.
Here is a sample application that uses the "DynaSkin" Library for its components and a small bit of Actionscript code to manipulate the different types of SkinObjects inside its Ui.
(Fig: 3)
Files: DynaSkin Library V1.0 - Zip format. The documentation for this library is still a work in progress, I hope to have full docs for this before the next release. The sample files and Demo app will provide sufficient information on methods and properties available in the Skin Object.
