Using skins with the Menu component

The Menu component uses an instance of RectBorder for its border (see RectBorder class).

The Menu component has visual assets for the branch, check mark, radio dot, and separator graphics. These assets are not dynamically skinnable, but the assets can be copied from the Flash UI Components 2/Themes/MMDefault/Menu Assets/States folder in both themes, and can be modified as desired. The linkage identifiers cannot be changed, and all Menu instances must use the same symbols.

To create movie clip symbols for Menu assets:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Select File > Import > Open External Library and select the HaloTheme.fla file.

    This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes in Using ActionScript 2.0 Components.

  3. In the theme's Library panel, expand the Flash UI Components 2/Themes/MMDefault folder and drag the Menu Assets folder to the library of your document.
  4. Expand the Menu Assets/States folder in the library of your document.
  5. Open the symbols that you want to customize for editing.

    For example, open the MenuCheckEnabled symbol.

  6. Customize the symbol as desired.

    For example, change the image to be an X instead of a check mark.

  7. Repeat steps 6-7 for all symbols that you want to customize.
  8. Click the Back button to return to the main timeline.
  9. Drag a Menu component from the Components panel to the current document's library.

    This adds the Menu component to the library and makes it available at runtime.

  10. Add ActionScript to the main timeline to create a Menu instance at runtime:
    var myMenu = mx.controls.Menu.createMenu();
    myMenu.addMenuItem({label: "One", type: "check", selected: true});
    myMenu.addMenuItem({label: "Two", type: "check"});
    myMenu.addMenuItem({label: "Three", type: "check"});
    myMenu.show(0, 0);
    
  11. Select Control > Test Movie.