Creating Library Skins and Icons

The AdvancedTree component allows for any of its skins or icons to be overridden with either symbols in your FLA's Library or through external classes that extend MovieClip. What follows is a step by step for replacing the skins in the tree using Library symbols. See Creating Class Skins and Icons for using class files for replacing skins.

All skins and icons require top left registration of their graphics. Any resizable skins should be defined using a 9-slice grid. Any of skins that do not contain states, like the scrollpane back, the tooltip back or the scrollwell, can simply be single frame movie clip symbols. Any skins with states, like the scroll slider, scroll buttons or selection highlight, need to be movie clips with "_Up", "_Over" and "_Down" keyframes that define each of the states. Icons with states follow a similar scheme. The open/close and branch icons need to be movie clips with an "open" frame and a "closed" frame. The vertical scroll arrow icon needs a "up" and "down" frame. The horizontal scroll arrow icon needs a "left" and "right" frame. All other non-state icons (the leaf, an empty branch) need just be single frame movie clips.

The following describes the steps for replacing skins using Library symbols. The example, librarySkins.fla, can be found in the samples downloaded with the component.

  1. Create a new Flash ActionScript 3.0 file and set its dimensions to 200x300. Drag an AdvancedTree instance to the stage and set its dimensions to match. Specify an XML file to load in its parameters so that you can see the skins (you can use the bigDataset.xml file included with the download). Set useConnectors to true, the iconBuffer to 2, and publish the file to see how it looks with no skins applied.


  2. Select Insert > New Symbol... to open the Create New Symbol dialog. Enter GradientRoundedRect as the Name. Click Advanced if the dialog is in Basic mode in order to see the more advanced options. Check the Export for ActionScript checkbox under Linkage (the Class should automatically populate with GradientRoundedRect with flash.display.MovieClip as the Base class). Make sure Export in firt frame is also checked, as it should be by default. Finally, check Enable guides for 9-slice scaling at the bottom of the dialog and click OK.


  3. In symbol editing mode for GradientRoundedRect create a total of three layers. Name the layers, top to bottom "labels", "inner" and "outer". In the outer layer draw a rounded rect with a fill of #521D1D. Align this graphic so that its top left is at the symbol registration point. On the inner layer, draw another rounded rect that is inset from the outer rect. Give it a vertical linear gradient going from #944E4E on the top to #7F2C2C on the bottom. In the labels and inner layers, add keyframes at frames 11 and 21, then add frames to each of the layers to give a total of 30 frames a layer. Give frame 1 the label "_Up", frame 11 the label "_Over" and frame 21 the label "_Down". In the _Over frame, change the inner rect's inner gradient to use the colors #D49696 to #C47575. In the _Down frame, use the same colors as the _Up frame, just reverse them (#7F2C2C on the top to #944E4E on the bottom). Make sure to move the 9-slice guides so that the rounded corners will not get scaled with the rects.


  4. Back on the main timeline, select the tree and in the Parameters panel click on the skinDefinitions field. In the Values dialog that opens, click the plus icon and enter "innerBackGraphic" as the skinName and "GradientRoundedRect" as the skinClass, which is the Library symbol created in the previous steps. Click plus a second time to create another new item, and set its skinName to "outerBackGraphic" and its skinClass to "GradientRoundedRect".


    5. For a full list of skins that can be set, see TreeSkins class. If you publish your movie now, you will see the new skins applied.

  5. Even though the scrollpane back graphics do not need states, we added states so that the same skin could be used for the buttons. Click on the skinDefinitions once more to open the Values dialog and enter "horizontalScrollSliderGraphic", "verticalScrollSliderGraphic", "horizontalScrollButtonGraphic" and "verticalScrollButtonGraphic" for skinNames and for each give it the skinClass "GradientRoundedRect".


  6. Next we'll tackle the scrollwells in the scrollbars. Duplicate the GradientRoundedRect in the Library and name it RoundedRect. Make sure it is exported for ActionScript with the class name RoundedRect and that it has 9-slice scaling enabled.


  7. Enter symbol editing mode for RoundedRect and delete the inner and labels layers completely. Rename the outer layer to "face", and make it a single frame. Scrollwells do not need states, so a single frame is all that is necessary. The end result is seen below.


  8. Return to the main timeline, select the tree, and click on the skinDefinitions once more in the Parameters panel to open the Values dialog and enter "horizontalScrollWellGraphic", "horizontalScrollBackGraphic", "verticalScrollWellGraphic" and "verticalScrollBackGraphic" for skinNames and for each give it the skinClass "RoundedRect". Publish to see the result.


  9. The final piece for the scrollbars is the arrows. Create a new movie clip symbol named HorizontalScrollArrow, exported for ActionScript as a class with the same name (do not worry about 9-slice scaling). In the symbol, create a labels layer and an arrows layer. Add a keyframe at frame 11 on each and extend the timeline to 20 frames. Name keyframe 1 "left" and keyframe 11 "right" in the labels layer. In keyframe 1 of the arrows layer, draw a 4x7 triangle pointing to the left. Make sure it is aligned at the upper left. Draw the same triangle pointing to the right in keyframe 11 of the arrows layer.


  10. Duplicate the HorizontalScrollArrow symbol and name it VerticalScrollArrow, exported as a class with the same name. Change the keyframes to say "up" and "down" and rotate the arrows to match. Now return to the main timeline, select the tree, and click the skinDefinitions field in the Properties panel to open the Values dialog. Enter "horizontalScrollArrowGraphic" as a skinName with "HorizontalScrollArrow" as the skinClass, then "verticalScrollArrowGraphic" as a skinName with "VerticalScrollArrow" as the skinClass. Publish your movie to see the result.


  11. Now it's time to tweak some styles that will work better with these skins. With the tree selected in the main timeline, click the styleProperties field in the Parameters panel to open the Values dialog. Click plus to add a new value (and for each subsequent new value), and for the property enter "icon" and for the value enter "0xFFFFFF'. Continue and add the following values:

    12. property: rollover-icon, value: 0x000000

    property: selected-icon, value: 0xFFFFFF

    property: text-color, value: 0xFFFFFF

    property: highlight-text-color, value: 0x000000

    property: selected-highlight, value: 0x521D1D

    property: rollover-highlight, value: 0xD8AFAF

    property: connector-line-color, value: 0x000000



  12. We're going to remove the icons for branches and leaves. To do that, create a new movie clip symbol named Invisible, and exported for ActionScript with the same class name. Exit symbol editing mode, since there are no graphics to add, and return the to main timeline. Select the tree, click on the skinDefinitions field to open the Values dialog, and enter "branchGraphic" and "leafGraphic" as skinNames with "Invisible" as the skinClass for both (if you wish to supply a leaf graphic, it need only be a single frame movie clip; a branch graphic should have two keyframes defined, "open" and "closed", similar to the open/close icon that we will define in the next step). Publish to see the result.


  13. The final symbol we will create is the open/close icon. Create a new movie clip symbol named OpenCloseIcon, exported for ActionScript with the same class name. 9-slice scaling does not need to be enabled. In symbol editing mode, create four layers, named, top to bottom, "labels", "icon", "fill" and "border". Add a keyframe to the labels and icon layers at frame 11 and extend the timeline to frame 20 on all layers. Set the label at keyframe 1 to be "closed" and the label at keyframe 11 to be "open". In the border layer, draw a 11x11 black rectangle aligned at the top left. In the fill layer, draw a 9x9 rectangle with a #D8AFAF fill and set it at (1, 1). In the icon layer in the closed frame, draw a black plus icon. In the open frame on the icon layer, draw a minus icon. (Creating a branch icon would be done in exactly the same way.)


  14. Return to the main timeline, select the tree, and click on the skinDefinitions in the Parameters panel. Add a new value with the skinName "openCloseGraphic" with the skinClass "OpenCloseIcon". Publish to see the final result.