Creating Skins

Skin Properties

The following properties can be used to assign new skins to a single advancedTree instance. The value of the property needs to be an identifier for an exported movie clip symbol, created in the method described in the section following the table. Those properties flagged with an asterisk (*) are icons in the tree. These do not need to be resizable and should instead be created in the method detailed in the Specifying Icons section.

Property Description
branchGraphic* The icon used for nodes that have children.
branchEmptyGraphic* The icon used for nodes that have been set to be branches but do not have children.
leafGraphic* The icon used for nodes with no children.
nodeFieldGraphic The rectangle behind individual nodes' labels.
openCloseGraphic* The icon to the left of branches to denote open/close state.
scrollArrowGraphic* The icon used for the arrow on the horizontal and vertical scrollbars.
scrollButtonGraphic The rectangle used for the buttons on the scrollbar.
scrollpaneInnerGraphic The rectangle behind the tree in the scrollpane, drawn within the boundaries of the scrollbars.
scrollpaneOuterGraphic The rectangle behind the entire scrollpane, including scrollbars.
scrollSliderGraphic The rectangle used for the slider in the scrollbars.
scrollWellGraphic The rectangle used for the well between the buttons in the scrollbar, defining the slider's movement range.


Resizable skins need to be created in a certain way for them to work with the advancedTree component. However, not all of the skins need to be resizable. In fact, the only skins that are required to be resizable are the scrollbar slider and the nodes' field graphic (but in the latter case, only if this is visible and the nodes are not locked to a fixed size). In all other cases, the skins are not resized at runtime and so can be made a single size in the IDE, without having to follow the slice method and naming convention detailed below.

Using the Built-in Skins

The advancedTree component comes with three built-in skins, "Flashloaded Block graphic" (which is used by default), "Flashloaded Block rounded graphic" (which has a slight round at the corners of the rectangle) and "Flashloaded invisible graphic" (which is invisible and so allows for graphics to be placed below the component). To use any of these built-in skins, use the names listed in the previous sentence to assign to the component's skins properties. If the first of these two skins are used, then styles may be applied using the methods described in Creating Styles.

Creating a Resizable Widget

To create a resizable skin that can be used with the advancedTree, you need to follow a certain structure and naming convention. Resizable skins should be able to scale both vertically and horizontally, and this is done in the standard convention of slicing a graphic into nine distinct pieces and making each one into a separate movie clip. The steps, which are elaborated upon in the tutorial at the end of this section, are:
  1. Create a new movie clip symbol with a unique identifier.
  2. Draw a graphic in the symbol using the symbol registration as the top left corner.
  3. Slice the image (this can be accomplished with the Line tool) into nine pieces, three columns by three rows. The center column/middle row will be scaled both horizontally and vertically. The center column/top row and the center column/bottom row will be scaled horizontally. The left column/middle row and the right column/middle row will be scaled vertically. The four corners will not scale.
  4. Convert each slice into a movie clip symbol. Name all instances on the top row "top", those in the middle "middle", and those on the bottom row "bottom".
  5. Select the three slices in the left column and convert them into a movie clip. Name the instance "left".
  6. Select the three slices in the center column and convert them into a movie clip. Name the instance "center".
  7. Select the three slices in the right column and convert them into a movie clip. Name the instance "right".
At this point, using the naming convention detailed above, the skin can be used in the advancedTree and will automatically resize.

Creating a Skin with States

The advancedTree component supports skins with multiple states for the scrollbar buttons. To create a skin with states, follow the following steps:
  1. If you wish to have the buttons be resizable, follow the steps directly above, then skip to step 4.
  2. The buttons do not have to be resizable if you are certain of the size required. For instance, if the scrollerwidth of the tree is 15, then you can simply create a 15x15 button (the scrollbar buttons are always calculated to have a width and height that are equal to the scrollwidth). In this case, create a new movie clip symbol with a unique identifier.
  3. In the first frame of the symbol, draw a graphic to represent the up state of the button.
  4. Create two new layers in the symbol, naming them "code" and "labels". Rename the default layer "graphics".
  5. Add a stop(); action to the code layer in the first frame.
  6. Give the first frame the label "_Up" in the labels layer using the Properties panel.
  7. Add a new keyframe in the labels and graphics layers. Give the label layer's new keyframe the label "_Over".
  8. In the new keyframe of the graphics layer, draw a graphic to represent the button's over state.
  9. Add another new keyframe in the labels and graphics layers. Give the label layer's new keyframe the label "_Down".
  10. In the new keyframe of the graphics layer, draw a graphic to represent the button's down state.
The skin is now ready to be used in the advancedTree component.

Special Case with Scrollbars

Scrollbars are unique in that they require both vertical and horizontal skins to be created in the library. If the value of the scrollSliderGraphic is "scroller graphic", then the advancedTree will look in the library for "scroller graphic horizontal" and "scroller graphic vertical". Such is the case with all the scrollbar skin properties (scrollSliderGraphic, scrollWellGraphic and scrollButtonGraphic). Because of this separation, obviously different graphics can be used for the vertical and horizontal scrollbars instead of requiring a single graphic that is rotated. The only caveat is that whatever value the skin properties have for a component instance, there needs to be two symbols exported from the library with that value, plus " horizontal" and " vertical" appended. As another example, if the scrollButtonGraphic property has a value of "scrollbutton", then the component will look for "scrollbutton horizontal" and "scrollbutton vertical" in the library.

The icons for the scrollbars also require a special naming convention. In the case of icons, there should exist in the library four symbols exported with the same name with " up", " down", " right" or " left" appended, respectively. Therefore, if the scrollArrowGraphic property has a value of "newArrow", then the component will look to attach "newArrow up", "newArrow down", "newArrow right" and "newArrow left".

Step-by-Step with Skins

The following tutorial details how new skins may be applied to the advancedTree.
  1. Create a new Flash document and make it two frames with three layers named, top to bottom, "styles", "setup" and "tree".
  2. Create a keyframe in frame 2 of the tree layer and drop a advancedTree component instance onto the stage in this new keyframe. Set its parameters to suit your needs, but do not change the skin properties as of yet. Name the instance "tree".
  3. Create a keyframe in frame 2 of the setupIn frame 2 of the setup layer and add the following code to the ActionScript panel:

    var xml:String = "";
    xml += "<root>";
    xml +=   "<one>";
    xml +=     "<one />";
    xml +=     "<two />";
    xml +=     "<three />";
    xml +=   "</one>";
    xml +=   "<two>";
    xml +=     "<one />";
    xml +=     "<two />";
    xml +=     "<three />";
    xml +=   "</two>";
    xml +=   "<three>";
    xml +=     "<one />";
    xml +=     "<two />";
    xml +=     "<three />";
    xml +=   "</three>"";
    xml += "</root>";

    tree.populate(new XML(xml));
    tree.refresh();
    tree.expandAll();
    stop();

    At this point, with no styles or skins applied other than the defaults, your tree should look like this:

  4. First, we will apply some styles to the tree to take care of elements not affected by skins. Export a font symbol from the library (we chose Tahoma) (for more info on exporting fonts, please look to the Flash help files). Select frame 1 of the styles layer and enter the following into the ActionScript panel:

    import com.flashloaded.ui.graphic.StyleFormat;

    defaultFormat = new StyleFormat("defaultFormat");
    defaultFormat.textFormat = new TextFormat("Tahoma", 10, 0x000000);
    defaultFormat.embedFonts = true;
    defaultFormat.lineColor = 0x516466;
    defaultFormat.lineWidth = 2;
    defaultFormat.icon = 0x333333;
    defaultFormat.selected = 0xFFEE99;

    new com.flashloaded.ui.managers.StyleManager(defaultFormat);

    With styles applied, your tree should now look like this:

  5. The next thing we will do is replace the icons. This is detailed further in the Specifying Icons section. Create a new movie clip symbol named "branch" and export it from the library as "branch" as well. Inside symbol editing mode, add a stop(); action to frame 1 and draw a graphic to represent the closed state of the branch icon, centering it on the registration point. Create a keyframe in frame 2 and draw a graphic to represent the open state.

  6. Create a new movie clip symbol named "leaf". This should be one frame with the graphic centered on the registration point representing a node with no children.

  7. Return to the main timeline and select the tree. In the Properties panel, set the branchGraphic parameter to "branch" and the leafGraphic parameter to "leaf". Your tree should now look like this:

  8. The next step will be to take care of the scrollpane back graphics, both inner (inside the scrollbars) and outer (encompassing the entire scrollpane, including the scrollbars). We will make the outer graphic invisible and create a new skin for the inner graphic. To start with this new skin, create a new movie clip symbol named "rounded rect" and export it using the same name.

  9. Inside symbol editing mode for rounded rect, draw your desired graphic on frame 1 using the registration point as the top left of the graphic.

  10. To slice up the image, use the line tool to cut the graphic into nine sections. The very middle will scale both horizontally and vertically. The top and bottom slices in the center will scale horizontally and the right and left slices in the middle will scale vertically. The four corners will not scale at all.

  11. Select the middle slice and convert it into a movie clip symbol with a top left registration. Do the same with all eight other slices.

  12. Select each of the top row of slices (now movie clips) and name each one "top". Select the middle row of slices and name each "middle". Select the bottom row and name each slice "bottom".
  13. Once all nine slices are named, select the three slices on the left of the graphic and convert them into a SINGLE movie clip symbol with a top left registration. Name the instance of this new symbol "left".

  14. Select the three slices in the center and convert them into a movie clip symbol with a top left registration. Name the instance "center".
  15. Select the three slices on the right of the graphic and convert them into a movie clip symbol with a top left registration. Name the instance "right".
  16. Back on the main timeline, select the tree and, using the Properties panel, change the scrollpaneOuterGraphic to "Flashloaded invisible graphic" (this is a built-in skin that makes its component invisible) and the scrollpaneInnerGraphic to "rounded rect". Your tree should look like this:

  17. To make a scrollbar button skin, create a new movie clip symbol and export it as "scrollbutton horizontal". The process from this point is the same as when creating any movi clip button. In symbol editing mode, place a stop(); action on frame 1. Create three keyframes and label them "_Up", "_Over" and "_Down". On each of these keyframes, draw a graphic representing the button at these three states, using the registration point as the top left corner. This skin does not need to be built resizable (with the slices) since we know how large the button will need to be on our instance. In this example, the scrollerWidth has been set to 15 so the scrollbutton has been made to be 15x15.

  18. The vertical scrollbar buttons will be identical, so duplicate the scrollbutton horizontal symbol and rename the duplicate "scrollbutton vertical". Export the symbol with the identifier "scrollbutton vertical" as well.
  19. For the scrollbar arrows, create four new movie clip symbols named "scrollarrow down", "scrollarrow up", "scrollarrow left" and "scrollarrow right". Each symbol should have a graphic in its first frame with the regristration point being at the graphic's top left.

      
  20. Back on the main timeline, select the tree and, using the Properties panel, change the scrollButtonGraphic to "scrollbutton" and the scrollArrowGraphic to "scrollarrow".



    Your tree should look like this:

  21. Almost home! Next, for the scrollbar slider, create a new movie clip symbol named and exported as "capsule vertical". Since the slider needs to be resizable, it will need to be sliced as we did the rounded rect in steps 9-15. Do this for the vertical capsule, then create "capsule horizontal" in the same way.

      
  22. On the main timeline, give the tree's scrollSliderGraphic the value "capsule". You tree should now look like this:

  23. All that is left is the scrollbar well. For this example, this was created in the same way as the capsule in order to be resizable, though it does not have to be made that way if you know its fixed size. Create the graphic and export it from the library. Give its identifier to the tree as its scrollWellGraphic property.



    When all is said and done, your tree should look like this: