GhostWire TabView - Skinning
You can easily change the look-n-feel of the tabView component. All you need to do is to create a movieclip containing the visual assets (detailed below) and drag-n-drop the GhostWire TabView Behavior onto the movieclip on the Stage.
Visual Assets
The anatomy of the movieclip you need to create is as follows:

Therefore, you need to create
- a movieclip named tabTitle
- a movieclip named tabBody
After that, group both of the above into a movieclip named tab_mc and convert it into a movieclip (any name of your choice)
The movieclips tabTitle and tabBody determine the look of your component, and can look any way you want just make sure to name all the abovementioned movieclips accordingly.
Therefore, the hierarchy of the movieclips should be:
movieclip -> tab_mc -> tabTitle+tabBody
Inheriting the Behavior
Make sure you name your movieclip - it can be any name you choose, if you don't name it, it will automatically be named later as 'instance0' or similar.
After that, you can drag-n-drop the TabView Behavior onto your movieclip. The behavior has no visual asset in it, except for an invisible clip for identification purpose. It is recommended that you 'select all' (Ctrl-A) and then choose 'Distribute to Layers' (Ctrl-Shift-D). In this way, you can easily find the Behavior clip on the Stage.
*Note: if you later rename your movieclip, make sure to find the TabView Behavior clip (already on the Stage) and drag it and drop it again on the movieclip.
Tab Positions
If you want your tabs to appear at the bottom instead of at the top, simply position the tabTitle movieclip you created at the bottom of the tabBody movieclip. Also, where you place the tabTitle at the _x position determines the starting _x point where the tabs will appear during runtime.
Configure
Click on the Behavior clip and you will see the variables you can set in the Properties Panel. The most important thing to set is the ActiveTabOverlap variable. The number to set depends on your graphics - it specifies how many pixels the tabTitle movieclip should overlap the tabBody movieclip.
Example
You can look here (346KB) for a demo on a simple skinning in action.
Flash Components
Button
:: CheckBox
:: CollapsibleMenu
:: CollapsiblePane :: ColorPicker :: ComboBox
:: ContextMenu
:: DialogBox
:: InputField
:: ListBox :: Loader :: Menu
:: SlideMenu
:: NumericBox
:: Panel :: ProgressBar :: RadioButton
:: ScrollBar
:: ScrollPane
:: SlidePane
:: Slider
:: TabView
:: TextArea
:: TreeView
:: Window
See also
Documentation :: FAQs :: Testimonials
|