Cambiar el skin de los componentes v2 de Flash

1. Skineando componentes con el evento "initialize"

La forma más rápida para skinnear un componente v2 de Macromedia es arrastrándolo al escenario (p.ej. Componente Button), haz click una vez sobre él para seleccionarlo y en sus acciones (F9 para abrir el panel) poner lo siguiente:

onClipEvent(initialize)
{
    falseUpSkin = "falseUpClab";
    falseDownSkin = "falseDownClab";
    falseOverSkin = "falseOverClab";
    falseDisabledSkin = "falseDisabledClab";
    trueUpSkin = "trueUpClab";
    trueDownSkin = "trueDownClab";
    trueOverSkin = "trueOverClab";
    trueDisabledSkin = "trueDisabledClab";
}

Una vez hecho esto, podemos hacer nuestros clips de película llamándolos igual que en el código y exportándolos para Actionscript con el mismo nombre.

De esta forma ya tendremos nuestro primer componente skinneado, de una forma rápida y sencilla.

2. Skineando componentes con createClassObject()

Skinnear componentes con initialize esta bien, pero no sirve si creamos nuestros componentes dinámicamente mediante createClassObject, ya que aún nos están instanciados en el escenario.

Con el mismo archivo que antes, guardalo con otro nombre y borra el componente Button que hay en el escenario, ahora coloca este código en el fotograma 1:

//Skin para la flecha del comboBox
var skin_obj:Object = new Object();
skin_obj.falseUpSkin = "falseUpClab";
skin_obj.falseDownSkin = "falseDownClab";
skin_obj.falseOverSkin = "falseOverClab";
skin_obj.falseDisabledSkin = "falseDisabledClab";
skin_obj.trueUpSkin = "trueUpClab";
skin_obj.trueDownSkin = "trueDownClab";
skin_obj.trueOverSkin = "trueOverClab";
skin_obj.trueDisabledSkin = "trueDisabledClab";

createClassObject(mx.controls.Button, "button", 1, skin_obj);
button.move(100, 89);
button.label = "Button";

Esta es la mejor forma de skinnear nuestros componentes, así conseguimos crear dinámicamente componentes skinneados y tenemos el código mucho más ordenado en un único fotograma.

3. Skinnear componentes globalmente

Una buena forma de skinnear un componente que esta dentro de otro, por ejemplo, un ScrollBar de un DataGrid, es hacerlo a nivel global, modificando directamente el prototipo de la clase.

Crea un skin para una ScrollBar de la misma forma que has hecho antes. Esta vez no utilizaremos ni initialize, ni createClassObject, lo que haremos será modificar la clase ScrollBar directamente. Entra dentro de cada clip y en el fotograma 1 de su línea de tiempo, escribe este código.

#initclip 10
    import mx.controls.scrollClasses.ScrollBar;
    ScrollBar.prototype.scrollTrackName = "BackScrollSB";
#endinitclip

Repite el mismo paso para cada uno de los clips hasta que la ScrollBar este totalmente modificada.

Ahora podemos colocar cualquier componente y ver como todas las ScrollBar de la aplicación están con nuestro skin. Puedes añadir este código en el fotograma 1 de la línea de tiempo principal para probarlo.

createClassObject(mx.controls.List, "lista", 1);
createClassObject(mx.controls.ComboBox, "combo", 2);

var contactos_array:Array = new Array("Jordi", "Josep", "Humphrey", "David", "Javi", "Orestes", "Pedro", "Ernest", "Lisa");

lista.move(10, 10);
combo.move(190, 10);

lista.dataProvider = contactos_array;
combo.dataProvider = contactos_array;

4. Lista de propiedades de cada componente

He agrupado todas las propiedades de configuración de skins de cada componente, todo esto lo podéis encontrar de todas formas en la ayuda de Flash 8 pero he creído que estaría bien tenerlo todo junto como si de una referencia se tratase. La ayuda de mi programa está en inglés, así que cada uno deberá traducirlo como pueda.

Accordion

Property	Description	Default value
falseUpSkin	The up (normal) state of the header above all collapsed children.	accordionHeaderSkin
falseDownSkin	The pressed state of the header above all collapsed children.	accordionHeaderSkin
falseOverSkin	The rolled-over state of the header above all collapsed children.	accordionHeaderSkin
falseDisabled	The disabled state of the header above all collapsed children.	accordionHeaderSkin
trueUpSkin	The up (normal) state of the header above the expanded child.	accordionHeaderSkin
trueDownSkin	The pressed state of the header above the expanded child.	accordionHeaderSkin
trueOverSkin	The rolled-over state of the header above the expanded child.	accordionHeaderSkin
trueDisabledSkin	The disabled state of the header above the expanded child.	accordionHeaderSkin

Alert

Property	Description	Default value
buttonUp	The up state of the buttons.	ButtonSkin
buttonUpEmphasized	The up state of the default button.	ButtonSkin
buttonDown	The pressed state of the buttons.	ButtonSkin
buttonDownEmphasized	The pressed state of the default button.	ButtonSkin
buttonOver	The rolled-over state of the buttons.	ButtonSkin
buttonOverEmphasized	The rolled-over state of the default button.	ButtonSkin
titleBackground	The window title bar.	TitleBackground

Button

Property	Description
falseUpSkin	The up (normal) state.
falseDownSkin	The pressed state.
falseOverSkin	The over state.
falseDisabledSkin	The disabled state.
trueUpSkin	The toggled state.
trueDownSkin	The pressed-toggled state.
trueOverSkin	The over-toggled state.
trueDisabledSkin	The disabled-toggled state.
falseUpSkinEmphasized	The up (normal) state of an emphasized button.
falseDownSkinEmphasized	The pressed state of an emphasized button.
falseOverSkinEmphasized	The over state of an emphasized button.
falseDisabledSkinEmphasized	The disabled state of an emphasized button.
trueUpSkinEmphasized	The toggled state of an emphasized button.
trueDownSkinEmphasized	The pressed-toggled state of an emphasized button.
trueOverSkinEmphasized	The over-toggled state of an emphasized button.
trueDisabledSkinEmphasized	The disabled-toggled state of an emphasized button.
falseUpIcon	The icon up state.
falseDownIcon	The icon pressed state.
falseOverIcon	The icon over state.
falseDisabledIcon	The icon disabled state.
trueUpIcon	The icon toggled state.
trueOverIcon	The icon over-toggled state.
trueDownIcon	The icon pressed-toggled state.
trueDisabledIcon	The icon disabled-toggled state.
falseUpIconEmphasized	The icon up state of an emphasized button.
falseDownIconEmphasized	The icon pressed state of an emphasized button.
falseOverIconEmphasized	The icon over state of an emphasized button.
falseDisabledIconEmphasized	The icon disabled state of an emphasized button.
trueUpIconEmphasized	The icon toggled state of an emphasized button.
trueOverIconEmphasized	The icon over-toggled state of an emphasized button.
trueDownIconEmphasized	The icon pressed-toggled state of an emphasized button.
trueDisabledIconEmphasized	The icon disabled-toggled state of an emphasized button.

CheckBox

Property	Description
falseUpSkin	The up (normal) unchecked state. The default is CheckFalseUp .
falseDownSkin	The pressed unchecked state. The default is CheckFalseDown .
falseOverSkin	The over unchecked state. The default is CheckFalseOver .
falseDisabledSkin	The disabled unchecked state. The default is CheckFalseDisabled .
trueUpSkin	The toggled checked state. The default is CheckTrueUp .
trueDownSkin	The pressed checked state. The default is CheckTrueDown .
trueOverSkin	The over checked state. The default is CheckTrueOver .
trueDisabledSkin	The disabled checked state. The default is CheckTrueDisabled .

ComboBox

Property	Description
ComboDownArrowDisabledName	The down arrow's disabled state. The default is ComboDownArrowDisabled .
ComboDownArrowDownName	The down arrow's down state. The default is ComboDownArrowDown .
ComboDownArrowUpName	The down arrow's up state. The default is ComboDownArrowOver .
ComboDownArrowOverName	The down arrow's over state. The default is ComboDownArrowUp .

DataGrid

Ver UIScrollBar.

DateChooser

Property	Description
backMonthButtonUpSymbolName	The month back button up state. The default value is backMonthUp .
backMonthButtonDownSymbolName	The month back button pressed state. The default value is backMonthDown .
backMonthButtonDisabledSymbolName	The month back button disabled state. The default value is backMonthDisabled .
fwdMonthButtonUpSymbolName	The month forward button up state. The default value is fwdMonthUp .
fwdMonthButtonDownSymbolName	The month forward button pressed state. The default value is fwdMonthDown .
fwdMonthButtonDisabledSymbolName	The month forward button disabled state. The default value is fwdMonthDisabled .

DateField

Property	Description
openDateUp	The up state of the pop-up icon.
openDateDown	The down state of the pop-up icon.
openDateOver	The over state of the pop-up icon.
openDateDisabled	The disabled state of the pop-up icon.

Label

No tiene skin.

List

Ver UIScrollBar.

MenuBar

Property	Description
menuBarBackLeftName	The up state of the pop-up icon
menuBarBackRightName	The down state of the pop-up icon
menuBarBackMiddleName	The disabled state of the pop-up icon

NumericStepper

Property	Description
upArrowUp	The up arrow button's up state. The default value is StepUpArrowUp .
upArrowDown	The up arrow button's pressed state. The default value is StepUpArrowDown .
upArrowOver	The up arrow button's over state. The default value is StepUpArrowOver .
upArrowDisabled	The up arrow button's disabled state. The default value is StepUpArrowDisabled .
downArrowUp	The down arrow button's up state. The default value is StepDownArrowUp .
downArrowDown	The down arrow button's down state. The default value is StepDownArrowDown .
downArrowOver	The down arrow button's over state. The default value is StepDownArrowOver .
downArrowDisabled	The down arrow button's disabled state. The default value is StepDownArrowDisabled .

Progress Bar

Property	Description
progTrackMiddleName	The expandable middle of the track. The default value is ProgTrackMiddle .
progTrackLeftName	The fixed-size left cap. The default value is ProgTrackLeft .
progTrackRightName	The fixed-size right cap. The default value is ProgTrackRight .
progBarMiddleName	The expandable middle bar graphic. The default value is ProgBarMiddle .
progBarLeftName	The fixed-size left bar cap. The default value is ProgBarLeft .
progBarRightName	The fixed-size right bar cap. The default value is ProgBarRight .
progIndBarName	The indeterminate bar graphic. The default value is ProgIndBar .

RadioButton

Name	Description
falseUpIcon	The unselected state. The default value is RadioFalseUp .
falseDownIcon	The pressed-unselected state. The default value is RadioFalseDown .
falseOverIcon	The over-unselected state. The default value is RadioFalseOver .
falseDisabledIcon	The disabled-unselected state. The default value is RadioFalseDisabled .
trueUpIcon	The selected state. The default value is RadioTrueUp .
trueDisabledIcon	The disabled-selected state. The default value is RadioTrueDisabled .

ScrollPane

Ver UIScrollBar.

TextArea

Ver UIScrollBar.

TreeComponent

Ver UIScrollBar.

UIScrollBar

Property	Description
upArrowUpName	The up (normal) state of the up and left buttons. The default value is ScrollUpArrowUp .
upArrowOverName	The rollover state of the up and left buttons. The default value is ScrollUpArrowOver .
upArrowDownName	The pressed state of the up and left buttons. The default value is ScrollUpArrowDown .
downArrowUpName	The up (normal) state of the down and right buttons. The default value is ScrollDownArrowUp .
downArrowOverName	The rollover state of the down and right buttons. The default value is ScrollDownArrowOver .
downArrowDownName	The pressed state of the down and right buttons. The default value is ScrollDownArrowDown .
scrollTrackName	The symbol used for the scroll bar's track (background). The default value is ScrollTrack .
scrollTrackOverName	The symbol used for the scroll track (background) when rolled over. The default value is undefined .
scrollTrackDownName	The symbol used for the scroll track (background) when pressed. The default value is undefined .
thumbTopName	The top and left caps of the scroll box (thumb). The default value is ScrollThumbTopUp .
thumbMiddleName	The middle (expandable) part of the thumb. The default value is ScrollThumbMiddleUp .
thumbBottomName	The bottom and right caps of the thumb. The default value is ScrollThumbBottomUp .
thumbGripName	The grip displayed in front of the thumb. The default value is ScrollThumbGripUp .

Window

Property	Description
skinTitleBackground	The title bar. The default value is TitleBackground .
skinCloseUp	The close button. The default value is CloseButtonUp .
skinCloseDown	The close button in its down state. The default value is CloseButtonDown .
skinCloseDisabled	The close button in its disabled state. The default value is CloseButtonDisabled .
skinCloseOver	The close button in its over state. The default value is CloseButtonOver .

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo