|
La mejor forma de crear un archivo SWF de aspecto es copiar uno de los archivos de aspecto que incorpora Flash y utilizarlo como punto de partida. Los archivos FLA de estos aspectos se encuentran en la carpeta de la aplicación Flash, en Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/. Para que el archivo SWF de aspecto finalizado esté disponible como una opción en el cuadro de diálogo Seleccionar aspecto, colóquelo en la carpeta Configuration/FLVPlayback Skins/ActionScript 3.0, ya sea en la carpeta de la aplicación Flash o en una carpeta Configuration/FLVPlayback Skins/ActionScript 3.0 local de un usuario.
Dado que es posible establecer el color de un aspecto independientemente de que se elija o no el aspecto, no es necesario editar el archivo FLA para modificar el color. Si se crea un aspecto que tiene un color específico y se quiere evitar que pueda modificarse en el cuadro de diálogo Seleccionar aspecto, debe establecerse
this.border_mc.colorMe = false;
en el código ActionScript del archivo FLV de aspecto. Para información sobre cómo establecer el color de un aspecto, consulte
Selección de un aspecto prediseñado
.
Al observar los archivos FLA de aspectos de Flash instalados, puede parecer que algunos elementos del escenario no son necesarios, pero muchos de estos elementos se incluyen en capas de guía. Con el uso de la previsualización dinámica con la escala de 9 divisiones se puede ver rápidamente cómo aparecerá realmente del archivo SWF.
En las siguientes secciones se describen personalizaciones y cambios más complejos de los clips de película SeekBar, BufferingBar y VolumeBar.
Uso del diseño del aspecto
Cuando se abre un archivo FLA de aspectos de Flash, los clips de película del aspecto aparecen dispuestos en la línea de tiempo principal. Estos clips y el código ActionScript que se encuentran en el mismo fotograma definen la disposición de los controles en tiempo de ejecución.
Aunque la capa de diseño se parezca mucho a la apariencia del aspecto en tiempo de ejecución, el contenido de esta capa no es visible en tiempo de ejecución. Sólo se utiliza para calcular dónde se ubicarán los controles. Los otros controles del escenario se utilizan en tiempo de ejecución.
En la capa de diseño hay un marcador de posición del componente FLVPlayback, denominado video_mc. Todos los demás controles se disponen con respecto a video_mc. Si se empieza con uno de los archivos FLA de Flash y se cambia el tamaño de los controles, probablemente se podrá ajustar el diseño moviendo estos clips de marcador de posición.
Cada uno de los clips de marcador de posición tiene un nombre de instancia específico. Los nombres de los clips de marcador de posición son: playpause_mc, play_mc, pause_mc, stop_mc, captionToggle_mc, fullScreenToggle_mc, back_mc, bufferingBar_mc, bufferingBarFill_mc, seekBar_mc, seekBarHandle_mc, seekBarProgress_mc, volumeMute_mc, volumeBar_mc y volumeBarHandle_mc. La parte que cambia de color cuando se elige un color de aspecto se denomina border_mc.
No importa qué clip se utilice para un control. Normalmente, en los botones se utiliza el clip de estado normal. En los demás controles, se utiliza el clip para dicho control, pero esto es sólo por comodidad. Lo único que importa es la ubicación de
x
(horizontal) e
y
(vertical) y la altura y anchura del marcador de posición.
Se pueden tener tantos clips adicionales como se desee, además de los controles estándar. El único requisito de estos clips es que sus símbolos de biblioteca tengan activada la casilla de verificación Exportar para ActionScript en el cuadro de diálogo Vinculación. Los clips personalizados de la capa de diseño pueden tener cualquier nombre de instancia, excepto los nombres de instancia reservados que aparecen en la lista anterior. El nombre de instancia sólo se necesita para establecer código ActionScript en los clips que determinan el diseño.
El clip border_mc es especial. Si se establece la propiedad
FlvPlayback.skinAutoHide
en
true,
el aspecto muestra cuándo se desplaza el ratón por encima del clip border_mc. Es importante para los aspectos que aparecen fuera de los límites del reproductor de vídeo. Para información sobre la propiedad
skinAutoHide
, consulte
Modificación del comportamiento del aspecto
.
En los archivos FLA de Flash, border_mc se utiliza para el fondo cromático y para el borde de los botones para avanzar y retroceder.
El clip border_mc es también la parte del aspecto cuyo alfa y color cambia a través de las propiedades
skinBackgroundAlpha
y
skinBackgroundColor.
Para permitir la personalización del color y del alfa, el código ActionScript del archivo FLA de aspecto debe incluir lo siguiente:
border_mc.colorMe = true;
ActionScript y diseño del aspecto
El siguiente código ActionScript se aplica de forma general a todos los controles. Algunos controles tienen código ActionScript específico que define un comportamiento adicional y que se explica en la sección correspondiente a dicho control.
El código ActionScript inicial es una sección amplia que especifica los nombres de clase para cada estado del componente. Todos estos nombres de clase se encuentran en el archivo SkinOverAll.fla. El código tiene el siguiente aspecto para los botones de pausa y reproducción, por ejemplo:
this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled";
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown";
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal";
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver";
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled";
this.playButtonDownState = "fl.video.skin.PlayButtonDown";
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal";
this.playButtonOverState = "fl.video.skin.PlayButtonOver";
Los nombres de clase no tienen archivos de clase externos reales; simplemente se especifican en el cuadro de diálogo Vinculación para todos los clips de película de la biblioteca.
En el componente ActionScript 2.0, había clips de película en el escenario que se utilizaban realmente en tiempo de ejecución. En el componente ActionScript 3.0, estos clips de película continúan en el archivo FLA, pero simplemente para facilitar la edición. Ahora se incluyen todos en capas de guías y no se exportan. Todos los aspectos de la biblioteca se exportan en el primer fotograma y se crean dinámicamente con código como el siguiente, por ejemplo:
new fl.video.skin.PauseButtonDisabled();
Después de esa sección, se encuentra el código ActionScript que define los valores máximos de altura y anchura del aspecto. El cuadro de diálogo Seleccionar aspecto muestra estos valores, que se utilizan en tiempo de ejecución para evitar que el aspecto ajuste su escala por debajo del tamaño mínimo. Si no desea especificar un tamaño mínimo, déjelo como valor undefined, o inferior o igual a cero.
// minimum width and height of video recommended to use this skin,
// leave as undefined or <= 0 if there is no minimum
this.minWidth = 270;
this.minHeight = 60;
En cada marcador de posición pueden aplicarse las siguientes propiedades:
|
Propiedad
|
Descripción
|
|
anchorLeft
|
Boolean. Ubica el control con respecto al lado izquierdo de la instancia de FLVPlayback. El valor predeterminado es
true
a menos que
anchorRight
se establezca explícitamente en
true
; luego el valor predeterminado pasa a ser
false
.
|
|
anchorRight
|
Boolean. Ubica el control con respecto al lado derecho de la instancia de FLVPlayback. El valor predeterminado es
false
.
|
|
anchorBottom
|
Boolean. Ubica el control con respecto a la parte inferior de la instancia de FLVPlayback. El valor predeterminado es
true
a menos que
anchorTop
se establezca explícitamente en
true
; luego el valor predeterminado pasa a ser
false
.
|
|
anchorTop
|
Boolean. Ubica el control con respecto a la parte superior de la instancia de FLVPlayback. El valor predeterminado es
false
.
|
Si las propiedades
anchorLeft
y
anchorRight
tienen el valor
true
, el control ajusta su escala horizontalmente en tiempo de ejecución. Si las propiedades
anchorTop
y
anchorBottom
tienen el valor
true
, el control ajusta su escala verticalmente en tiempo de ejecución.
Para ver los efectos de estas propiedades, consulte su uso en los aspectos de Flash. Los controles BufferingBar y SeekBar son los únicos que ajustan su escala, y se disponen uno encima del otro y tienen las propiedades
anchorLeft
y
anchorRight
establecidas en
true
. Todos los controles a la izquierda de BufferingBar y SeekBar tienen la propiedad
anchorLeft
establecida en
true
, y todos los controles a la derecha tienen la propiedad
anchorRight
establecida en
true
. Todos los controles tienen la propiedad
anchorBottom
establecida en
true
.
Se puede intentar editar los clips de película en la capa de diseño para crear un aspecto donde los controles se sitúen en la parte superior en lugar de en la parte inferior. Simplemente necesita mover los controles a la parte superior, con respecto a
video_mc
, y establecer
anchorTop
en
true
en todos los controles.
Barra de almacenamiento en búfer
La barra de almacenamiento en búfer tiene dos clips de película: bufferingBar_mc y bufferingBarFill_mc. La posición de cada clip en el escenario con respecto al otro clip es importante porque se mantiene su posición relativa. La barra de almacenamiento en búfer utiliza dos clips independientes porque el componente ajusta la escala de bufferingBar_mc pero no de bufferingBarFill_mc.
El clip bufferingBar_mc tiene aplicada una escala de 9 divisiones, de forma que los bordes no se verán distorsionados al cambiar la escala. El clip bufferingBarFill_mc es muy amplio y no necesita ningún ajuste de escala. Se enmascara automáticamente en tiempo de ejecución para mostrar únicamente la parte situada por encima del clip bufferingBar_mc estirado. De forma predeterminada, las dimensiones exactas de la máscara mantendrán un margen igual a izquierda y derecha en el clip bufferingBar_mc, basándose en la diferencia entre las posiciones de
x
(horizontal) de bufferingBar_mc y _mc. Para personalizar la posición, utilice código ActionScript.
Si la barra de almacenamiento en búfer no necesita ajustar la escala o no utiliza escala en 9 divisiones, puede configurarla como el componente de interfaz de usuario personalizado de reproducción FLV BufferingBar. Para más información, consulte
Componente BufferingBar
.
La barra de almacenamiento en búfer tiene la siguiente propiedad adicional:
|
Propiedad
|
Descripción
|
|
fill_mc:MovieClip
|
Especifica el nombre de instancia del relleno de la barra de almacenamiento en búfer. Su valor predeterminado es bufferingBarFill_mc.
|
Barra de búsqueda y barra de volumen
La barra de búsqueda también tiene dos clips de película: seekBar_mc y seekBarProgess_mc. La posición de cada clip en la capa de diseño con respecto al otro clip es importante porque se mantiene su posición relativa. Aunque ambos clips ajustan su escala, el clip seekBarProgress_mc no puede anidarse en seekBar_mc porque seekBar_mc utiliza la escala en 9 divisiones, que no funciona correctamente con clips de película anidados.
El clip seekBar_mc tiene aplicada una escala de 9 divisiones, de forma que los bordes no se verán distorsionados al cambiar la escala. El clip seekBarProgress_mc también ajusta su escala pero no se distorsiona. No utiliza la escala de 9 divisiones porque es un relleno y no se ve afectado cuando se distorsiona.
El clip seekBarProgress_mc funciona sin fill_mc, de forma muy similar al modo en que el clip progress_mc funciona en los componentes de interfaz de usuario personalizados de reproducción de FLV. Dicho de otro modo, no se enmascara y ajusta su escala horizontalmente. Las dimensiones exactas del clip seekBarProgress_mc al 100% se definen por los márgenes izquierdo y derecho del clip seekBarProgress_mc. Estas dimensiones son iguales, de forma predeterminada, y se basan en la diferencia entre las posiciones de
x
(horizontal) de seekBar_mc y seekBarProgress_mc. Puede personalizar las dimensiones mediante código ActionScript en el clip de película de la barra de búsqueda, tal y como se muestra en el siguiente ejemplo:
this.seekBar_mc.progressLeftMargin = 2;
this.seekBar_mc.progressRightMargin = 2;
this.seekBar_mc.progressY = 11;
this.seekBar_mc.fullnessLeftMargin = 2;
this.seekBar_mc.fullnessRightMargin = 2;
this.seekBar_mc.fullnessY = 11;
Se puede incluir este código en la línea de tiempo del clip de película SeekBar o bien junto el otro código ActionScript en la línea de tiempo principal. Si se personaliza con código en lugar de modificarse el diseño, no es necesario que el relleno esté en el escenario. Basta con que esté en la biblioteca y se haya establecido que se debe exportar para ActionScript en el fotograma 1 con el nombre de clase correcto.
Al igual que el componente de interfaz de usuario personalizado de reproducción de FLV SeekBar, es posible crear un clip de película de grado de relleno para la barra de búsqueda. Si la barra de búsqueda no necesita un ajuste de escala o si se ajusta su escala pero no utiliza la escala de 9 divisiones, puede configurar el clip progress_mc o fullness_mc mediante cualquiera de los métodos que se utilizan para los componentes de interfaz de usuario personalizados de reproducción FLV. Para más información, consulte
Clips de película de progreso y grado de relleno
.
Dado que la barra de volumen de aspectos de Flash no ajusta su escala, se crea de la misma forma que el componente de interfaz de usuario personalizado de reproducción de FLV VolumeBar. Para más información, consulte
Componentes SeekBar y VolumeBar
. La excepción es que el selector se implementa de forma distinta.
Selectores SeekBar y VolumeBar
Los selectores de SeekBar y VolumeBar se colocan en la capa de diseño, junto a la barra. De forma predeterminada, el margen izquierdo, el margen derecho y los valores del eje
y
del selector se establecen mediante su posición relativa al clip de película de la barra. El margen izquierdo se establece mediante la diferencia entre la posición
x
(horizontal) del selector y la posición
x
(horizontal) de la barra, y el margen derecho es igual al margen izquierdo. Puede personalizar estos valores mediante código ActionScript en el clip de película SeekBar o VolumeBar. El siguiente ejemplo es el mismo código ActionScript que se utiliza con los componentes de interfaz de usuario personalizados de reproducción de FLV:
this.seekBar_mc.handleLeftMargin = 2;
this.seekBar_mc.handleRightMargin = 2;
this.seekBar_mc.handleY = 11;
Se puede incluir este código en la línea de tiempo del clip de película SeekBar o bien junto el otro código ActionScript en la línea de tiempo principal. Si se personaliza con código en lugar de modificarse el diseño, no es necesario que el selector esté en el escenario. Basta con que esté en la biblioteca y se haya establecido que se debe exportar para ActionScript en el fotograma 1 con el nombre de clase correcto.
Más allá de estas propiedades, los selectores son simples clips de película configurados del mismo modo que en los componentes de interfaz de usuario personalizados de reproducción de FLV. Ambos tienen fondos rectangulares con la propiedad
alpha
establecida en 0. Estos fondos sólo sirven para aumentar la zona activa y no son necesarios.
Clips de fondo y primer plano
Los clips de película chrome_mc y forwardBackBorder_mc se implementan como clips de fondo.
De los clips de película ForwardBackBorder, ForwardBorder y BackBorder situados en el escenario y los botones de marcador de posición para avanzar y retroceder, el único que
no
es una capa de guía es ForwardBackBorder. Sólo se encuentra en los aspectos que utilizan realmente los botones para avanzar y retroceder.
El único requisito para estos clips es que necesitan exportarse para Actionscript en el fotograma 1 en la biblioteca.
|
|
|
