Comunidad de diseño web y desarrollo en internet

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.

Linkage MovieClip

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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate