Built-in flash UI components

This page contains a list of flash elements that are used in the default Valve UI. You can use these elements yourself by replacing placeholder movieclips in your actionscript. To do this you firstly have to add import: 
import flash.utils.getDefinitionByName;
Then add the following function: 
//Parameters: 
    mc - The movieclip to replace
    type - The name of the class you want to replace with
    keepDimensions - Resize from default dimensions to the dimensions of mc (optional, false by default)
public function replaceWithValveComponent(mc:MovieClip, type:String, keepDimensions:Boolean = false) : MovieClip {
    var parent = mc.parent;
    var oldx = mc.x;
    var oldy = mc.y;
    var oldwidth = mc.width;
    var oldheight = mc.height;
    
    var newObjectClass = getDefinitionByName(type);
    var newObject = new newObjectClass();
    newObject.x = oldx;
    newObject.y = oldy;
    if (keepDimensions) {
        newObject.width = oldwidth;
        newObject.height = oldheight;
    }
    
    parent.removeChild(mc);
    parent.addChild(newObject);
    
    return newObject;
}
Once you replaced an element with a valve component you can just manipulate it like any other movieclip, setting properties, adding eventlisteners (make sure you have the right imports!). These elements have all common properties (x, y, width, height, visible, etc...).
Here is a small example: 
import scaleform.clik.events.*;

var slider = replaceWithValveComponent(oldMovieClip, "Slider_New");
slider.maximum = 3000;
slider.addEventListener(SliderEvent.VALUE_CHANGE, handler);

(Most) Valve-made components:


Slider_New
Properties:
  • maximum
  • minimum
  • value
  • snapInterval
Events:
  • SliderEvent.VALUE_CHANGE

DotaCheckBoxDota subclass of Button

Use movieclips with their origin in the top-left corner (not the center!) to position this component! Setting a label will make that label appear to the right of the checkbox.

Properties:
  • selected
  • enabled
  • label
Events:
  • Event.SELECT
  • ButtonEvent.CLICK

TabBar_Settings_Button
Properties:
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

d_RadioButton_2nd
Properties:
  • label
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

d_RadioButton_2nd_side

label
enabled

Properties:
  • label
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

button_big
Properties:
  • label
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

s_play_settings_button
Properties:
  • label
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

chrome_button_primary
Properties:
  • label
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

chrome_button_normal
Properties:
  • label
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

ComboBoxSkinned

Add items like this: combobox.dataprovider = ["Item1", "Item2", "etc"];

Properties:
  • enabled
  • dataprovider
  • dropdown
  • menuDirection
  • menuMargin
  • menuOffset
  • menuPadding
  • menuRowCount
  • menuWidth
  • thumbOffset
  • selectedIndex
  • scrollbar
Events:
  • ListEvent.INDEX_CHANGE

d_ListItemRendererSkinned
Properties:
  • label
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

ButtonRefresh2
Properties:
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

arrow_down
Properties:
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

arrow_right
Properties:
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

arrow_left
Properties:
  • enabled
Events:
  • ButtonEvent.PRESS
  • ButtonEvent.CLICK
  • ButtonEvent.DRAG_OVER
  • ButtonEvent.DRAG_OUT
  • ButtonEvent.RELEASE_OUTSIDE

bg_overlayBox
Properties:
Events:

DB4_floading_panel subclass of MovieClip

Just a movieclip containing a background image.

Properties:
Events:

DB4_outerpanel subclass of MovieClip

Just a movieclip containing a background image.

Properties:
Events:

ButtonThinPrimary

[WIP] component_library
For gray button use ButtonThinSecondary

Properties:
Events:

button_big_purchase

[WIP] component_library

Properties:
Events:

WindowSkinned

[WIP] component_library
Can be closed and dragged around.

Properties:
Events:

ButtonSkinned

[WIP] component_library

Properties:
Events:

s_closeBtn

[WIP] component_library

Properties:
Events:

s_RoshanPopup

[WIP] overlay

Properties:
Events:

s_SpecSpellSteal

[WIP] overlay

Properties:
Events:

ScrollBarDota subclass of UIScrollBar

direction can be ScrollBarDirection.HORIZONTAL or ScrollBarDirection.VERTICAL (from fl.controls.ScrollBarDirection)

scrollTarget can be an object like a TextField

Properties:
  • scrollTarget
  • direction = ScrollBarDirection.VERTICAL
Events:
  • scroll
List by SinZ & Perry
Edit