|
Los componentes de interfaz de usuario personalizados de reproducción FLV permiten personalizar la apariencia de los controles de FLVPlayback en el archivo FLA y permiten ver los resultados en una previsualización de la página web. Sin embargo, estos componentes no están diseñados para cambiar de tamaño. Debería editar un clip de película y su contenido con un tamaño específico. Por este motivo, es preferible tener el componente FLVPlayback en el escenario con el tamaño deseado, con la propiedad
scaleMode
establecida en
exactFit
.
Para empezar, arrastre simplemente los componentes de interfaz de usuario personalizados de reproducción de FLV que desee del panel Componentes al escenario y asigne a cada uno de ellos un nombre de instancia.
Estos componentes pueden funcionar sin ningún código ActionScript. Si se colocan en la misma línea de tiempo y el mismo fotograma que el componente FLVPlayback y no hay ningún aspecto establecido en el componente, el componente FLVPlayback se conectará automáticamente a ellos. Si hay varios componentes FLVPlayback en el escenario, o si el control personalizado y la instancia de FLVPlayback no están en la misma línea de tiempo, es necesario realizar alguna acción.
Cuando los componentes estén en el escenario, podrá editarlos como haría con cualquier otro símbolo. Cuando abra los componentes observará que la configuración de cada uno de ellos es ligeramente distinta.
Componentes Button
Los componentes Button tienen una estructura similar. Los distintos tipos de botón son: BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton y StopButton. La mayoría tiene un solo clip de película en el fotograma 1, con el nombre de instancia placeholder_mc. Suele ser una instancia del estado normal del botón, aunque no siempre es así. En el fotograma 2, hay cuatro clips de película en el escenario para cada estado de visualización: normal, over, down, y disabled. (En tiempo de ejecución, el componente nunca pasa realmente al fotograma 2; estos clips de película se colocan aquí para facilitar la edición y para obligarles a que se carguen en el archivo SWF sin necesidad de activar la casilla de verificación Exportar en primer fotograma en el cuadro de diálogo Propiedades de símbolo. No obstante, debe activar la opción Exportar para ActionScript.)
Para aplicar aspectos al botón, edite cada uno de estos clips de película. Puede cambiar su tamaño y su apariencia.
Normalmente se muestra parte del código ActionScript en el fotograma 1. No es necesario modificar este script. Simplemente detiene la cabeza lectora en el fotograma 1 y especifica los clips de película que se utilizarán en cada estado.
Botones PlayPauseButton, MuteButton, FullScreenButton y CaptionButton
Los botones PlayPauseButton, MuteButton, FullScreenButton y CaptionButton se configuran de forma distinta al resto de botones; sólo tienen un fotograma con dos capas y ningún script. En dicho fotograma, hay dos botones, uno encima del otro: en el caso de PlayPauseButton, un botón de reproducción y otro de pausa; en el caso de MuteButton, un botón para activar el silencio y otro para desactivarlo; en el caso de FullScreenButton, un botón para activar la pantalla completa y otro para desactivarla; en el caso de CaptionButton, un botón para activar la subtitulación y otro para desactivarla. Para aplicar un aspecto a estos botones, aplique un aspecto a cada uno de estos dos botones internos como se describe en
Aplicación de aspectos a componentes individuales de interfaz de usuario personalizados de reproducción FLV
; no se requiere ninguna acción adicional.
El botón CaptionButton se utiliza en el componente FLVPlaybackCaptioning y debe asociarse a él y no al componente FLVPlayback.
Botones BackButton y ForwardButton
Los botones BackButton y ForwardButton también se configuran de forma distinta al resto de botones. En el fotograma 2, disponen de clips de película adicionales que pueden utilizarse como fotogramas alrededor de uno de los botones o de ambos. Estos clips de película no son necesarios ni ofrecen ninguna función especial y simplemente se proporcionan como una opción más. Para utilizarlos, arrástrelos al escenario desde el panel Biblioteca y colóquelos en el lugar que elija. Si no le interesan, no los utilice o elimínelos del panel Biblioteca.
La mayoría de los botones proporcionados se basan en un conjunto común de clips de película, de forma que es posible cambiar la apariencia de todos los botones de una sola vez. Puede utilizar esta capacidad o puede reemplazar los clips de película comunes y dotar a cada botón de un aspecto distinto.
Componente BufferingBar
El componente BufferingBar es simple. Está formado por una animación que se hace visible cuando el componente entra en estado de almacenamiento en búfer y no requiere ningún código de ActionScript especial para configurarlo. De forma predeterminada, es una barra discontinua que se mueve de izquierda a derecha y tiene aplicada una máscara rectangular que le confiere un aspecto de barra móvil. Esta configuración no presenta ninguna característica especial.
Aunque las barras de almacenamiento en búfer de los archivos SWF de aspecto utilizan la escala de 9 divisiones porque deben ajustar su escala en tiempo de ejecución, el componente de interfaz de usuario personalizado de reproducción de FLV BufferingBar
no puede
utilizar la escala de 9 divisiones porque tiene clips de película anidados. Si desea alargar o ensanchar el componente BufferingBar, quizá deba cambiar su contenido en lugar de ajustar su escala.
Componentes SeekBar y VolumeBar
Los componentes SeekBar y VolumeBar son similares, aunque tienen distintas funciones. Cada uno de ellos tiene selectores, utiliza los mismos mecanismos de seguimiento de selectores y admite clips anidados para realizar un seguimiento del progreso y del grado de relleno.
En muchas partes del código ActionScript en el componente FLVPlayback se supone que el punto de registro (también denominado
punto de origen
o
punto cero
) del componente SeekBar o VolumeBar está situado en la esquina superior izquierda del contenido, de modo que es importante mantener esta convención. De lo contrario, podría tener problemas con los selectores y con los clips de película de progreso y grado de relleno.
Aunque las barras de búsqueda de los archivos SWF de aspecto utilizan la escala de 9 divisiones porque deben ajustar su escala en tiempo de ejecución, el componente de interfaz de usuario personalizado de reproducción de FLV SeekBar
no puede
utilizar la escala de 9 divisiones porque tiene clips de película anidados. Si desea alargar o ensanchar el componente SeekBar, quizá deba cambiar su contenido en lugar de ajustar su escala.
Selector
El fotograma 2 contiene una instancia del clip de película de selector. Al igual que los componentes BackButton y ForwardButton, el componente nunca pasa realmente al fotograma 2; estos clips de película se colocan aquí para facilitar la edición y para obligarles a que se carguen en el archivo SWF sin necesidad de activar la casilla de verificación Exportar en primer fotograma en el cuadro de diálogo Propiedades de símbolo. No obstante, debe activar la opción Exportar para ActionScript.
Quizá haya observado que el clip de película del selector tiene un rectángulo en el fondo, cuyo alfa está establecido en 0. Este rectángulo aumenta el tamaño del área activa del selector para poder agarrarlo con mayor facilidad sin cambiar su aspecto, de forma similar al estado Zona activa de un botón. Dado que el selector se crea dinámicamente en tiempo de ejecución, debe ser un clip de película y no un botón. Este rectángulo con el alfa establecido en 0 no es necesario por ningún otro motivo y, normalmente, puede reemplazar el interior del selector por la imagen que desee. Sin embargo, es recomendable mantener el punto de registro centrado horizontalmente en mitad del clip de película del selector.
El siguiente código ActionScript del fotograma 1 del componente SeekBar controla el selector:
stop();
handleLinkageID = "SeekBarHandle";
handleLeftMargin = 2;
handleRightMargin = 2;
handleY = 11;
La llamada a la función
stop()
es necesaria debido al contenido del fotograma 2.
La segunda línea especifica el símbolo que se utilizará como selector. No es necesario cambiarlo si simplemente se edita la instancia del clip de película del selector en el fotograma 2. En tiempo de ejecución, el componente FLVPlayback crea una instancia del clip de película especificado en el escenario como elemento del mismo nivel de la instancia del componente Bar, lo que significa que tienen el mismo clip de película principal. De esta forma, si la barra se encuentra en el nivel raíz, el selector debe estar también en el nivel raíz.
La variable
handleLeftMargin
determina la ubicación original del selector (0%) y la variable
handleRightMargin
determina su ubicación final (100%). Los números indican los desplazamientos desde los extremos izquierdo y derecho del control de la barra, con números positivos que marcan los límites dentro de la barra y números negativos que marcan los límites fuera de ella. Estos desplazamientos especifican el lugar donde puede dirigirse el selector, en función de su punto de registro. Si coloca el punto de registro en mitad del selector, los extremos izquierdo y derecho del selector traspasarán los límites. Un clip de película de barra de búsqueda debe tener el punto de registro en la esquina superior izquierda de su contenido para que funcione correctamente.
La variable
handleY
determina la posición
y
del selector con respecto a la instancia de la barra. Esto se basa en los puntos de registro de cada clip de película. El punto de registro en el selector de ejemplo se encuentra en la punta del triángulo, lo que permite colocarlo con respecto a la parte visible, sin tener en cuenta el rectángulo de estado de zona activa invisible. Además, un clip de película de barra debe tener el punto de registro en la esquina superior izquierda de su contenido para que funcione correctamente.
De esta forma, con estos límites, si el control de la barra se establece en (100, 100) y tiene una anchura de 100 píxeles, el selector abarcará de 102 a 198 horizontalmente y se mantendrá en 111 verticalmente. Si cambia los valores de
handleLeftMargin
y
handleRightMargin
a -2 y de
handleY
a -11, el selector abarcará de 98 a 202 horizontalmente y se mantendrá en 89 verticalmente.
Clips de película de progreso y grado de relleno
El componente SeekBar tiene un clip de película de
progreso
y el componente VolumeBar tiene un clip de película de
grado de relleno
pero, en la práctica, los componentes SeekBar o VolumeBar pueden tener o no alguno de estos componentes, o ambos. Ambos componentes presentan la misma estructura y un comportamiento similar, pero realizan un seguimiento de distintos valores. Un clip de película de progreso se rellena a medida que se descarga el archivo FLV (lo que resulta útil sólo en las descargas de HTTP, porque siempre aparece lleno en las transmisiones desde servidores FMS) y un clip de película de grado de relleno se va rellenando a medida que el selector se mueve de izquierda a derecha.
El componente FLVPlayback busca estas instancias de clip de película a través de un nombre de instancia específico, de modo que la instancia del clip de película de progreso debe tener el clip de película de barra como elemento principal y el nombre de instancia progress_mc. La instancia del clip de película de grado de relleno debe tener el nombre de instancia fullness_mc.
Puede establecer clips de película de progreso y de grado de relleno con o sin la instancia del clip de película fill_mc anidada en ellos. El clip de película fullness_mc de VolumeBar muestra el método
con
el clip de película fill_mc y el clip de película progress_mc de SeekBar muestra el método
sin
el clip de película fill_mc.
El método con el clip de película fill_mc anidado resulta útil si se desea utilizar un relleno cuya escala no puede ajustarse sin distorsionar la apariencia.
En el clip de película fullness_mc de VolumeBar, se aplica una máscara a la instancia del clip de película fill_mc anidado. Se le puede aplicar una máscara cuando se cree el clip de película o esperar a que se cree la máscara dinámicamente en tiempo de ejecución. Si le aplica una máscara con un clip de película, denomine a la instancia
mask_mc
y configúrela de forma que fill_mc aparezca tal y como lo haría con un porcentaje del 100%. Si no aplica una máscara a fill_mc, la máscara creada dinámicamente será rectangular y tendrá el mismo tamaño que fill_mc al 100%.
Hay dos formas de mostrar el clip de película fill_mc con la máscara, en función de si el valor de fill_mc.slideReveal es
true
o
false
.
Si fill_mc.slideReveal es
true
, fill_mc se mueve de izquierda a derecha para mostrarse a través de la máscara. Con un porcentaje del 0%, aparecerá en el extremo izquierdo y no se mostrará a través de la máscara. A medida que aumenta el porcentaje, se va moviendo a la derecha hasta alcanzar el 100% y finalmente vuelve al lugar donde se creó en el escenario.
Si fill_mc.slideReveal es
false
o undefined (comportamiento predeterminado), se cambiará el tamaño de la máscara de izquierda a derecha para mostrar algo más de fill_mc. Si el porcentaje es 0%, se cambia el tamaño de la máscara a 05 horizontalmente y, a medida que va aumentando el porcentaje, el valor de
scaleX
aumenta hasta que, al 100%, muestra fill_mc completamente. En este punto, el valor de
scaleX
no es necesariamente 100 porque es posible que se ajustara la escala de mask_mc cuando se creó.
El método sin fill_mc es más sencillo que el método con fill_mc, pero distorsiona horizontalmente el relleno. Si se desea evitar dicha distorsión, debe utilizarse fill_mc. La instancia progress_mc de SeekBar ilustra este método.
El clip de película de progreso o de grado de relleno ajusta su escala horizontalmente en función del porcentaje. Al 0%, el valor de
scaleX
de la instancia se establece en 0, haciéndolo invisible. A medida que aumenta el porcentaje, el valor de
scaleX
se ajusta hasta que, al llegar al 100%, el clip alcanza el mismo tamaño que tenía cuando se creó en el escenario. Nuevamente, en este punto, el valor de
scaleX
no es necesariamente 100 porque es posible que se ajustara la escala de la instancia del clip cuando se creó.
Conexión de los componentes de interfaz de usuario personalizados de reproducción FLV
Si se colocan los componentes de interfaz de usuario en la misma línea de tiempo y el mismo fotograma que el componente FLVPlayback y no se ha establecido la propiedad
skin
, el componente FLVPlayback se conectará automáticamente a ellos sin necesidad de ActionScript.
Si hay varios componentes FLVPlayback en el escenario o si el control personalizado y el componente FLVPlayback no están en la misma línea de tiempo, se debe escribir código ActionScript para conectar los componentes de interfaz de usuario personalizados con la instancia del componente FLVPlayback. Primero, debe asignar un nombre a la instancia de FLVPlayback y utilizar código ActionScript para asignar las instancias del componente de interfaz de usuario personalizado de reproducción FLV a las propiedades de FLVPlayback correspondientes. En el siguiente ejemplo, la instancia de FLVPlayback es my_FLVPlybk, los nombres de propiedades de FLVPlayback se especifican después de los puntos (.) y las instancias de control de interfaz de usuario personalizado de reproducción FLV se sitúan a la derecha del signo igual (=):
//FLVPlayback instance = my_FLVPlybk
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc.
my_FLVPlybk.pauseButton = pausebtn;
my_FLVPlybk.playPauseButton = playpausebtn;
my_FLVPlybk.stopButton = stopbtn;
my_FLVPlybk.muteButton = mutebtn;
my_FLVPlybk.backButton = backbtn;
my_FLVPlybk.forwardButton = forbtn;
my_FLVPlybk.volumeBar = volbar;
my_FLVPlybk.seekBar = seekbar;
my_FLVPlybk.bufferingBar = bufbar;
Los siguientes pasos crean controles StopButton, PlayPauseButton, MuteButton y SeekBar personalizados:
-
Arrastre el componente FLVPlayback al escenario y asígnele el nombre de instancia
my_FLVPlybk
.
-
Establezca el parámetro
source
en
http://www.helpexamples.com/flash/video/cuepoints.flv
a través del inspector de componentes.
-
Establezca el parámetro Skin en None.
-
Arrastre una instancia de StopButton, PlayPauseButton y MuteButton al escenario y colóquelas sobre la instancia de FLVPlayback, apilándolas verticalmente a la izquierda. Asigne a cada botón un nombre de instancia en el inspector de propiedades (por ejemplo,
my_stopbttn
,
my_plypausbttn
y
my_mutebttn
).
-
En el panel Biblioteca, abra la carpeta FLVPlayback Skins y, a continuación, la subcarpeta SquareButton.
-
Seleccione el clip de película SquareBgDown y haga doble clic en él para abrirlo en el escenario.
-
Haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh), elija Seleccionar todo en el menú y elimine el símbolo.
-
Seleccione la herramienta Óvalo, dibuje un óvalo en la misma ubicación y establezca el color azul como relleno (
#0033FF
).
-
En el inspector de propiedades, establezca la anchura ( (W:) en
40
y la altura (H:) en
20
. Establezca la coordenada x (X::) en
0.0
y la coordenada y (Y::) en
0.0
.
-
Repita los pasos 6 a 8 para SquareBgNormal, pero cambie el color de relleno por amarillo (
#FFFF00
).
-
Repita los pasos 6 a 8 para SquareBgOver, pero cambie el color de relleno por verde (
#006600
).
-
Edite los clips de película de los diversos iconos de símbolos en los botones (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon y StopIcon). Encontrará estos clips de película en el panel Biblioteca, en la carpeta FLV Playback Skins/
Label
Button/Assets, donde
Label
es el nombre del botón; por ejemplo, Play, Pause, etc. Siga los pasos siguientes para cada elemento:
-
Elija la opción Seleccionar todo.
-
Cambie el color por rojo (
#FF0000
).
-
Aplique una escala de 300%.
-
Cambie la ubicación de X: del contenido por
7.0
para modificar la ubicación horizontal del icono en cada estado de botón.
Nota:
al cambiar la ubicación de esta forma, se evita tener que abrir cada estado de botón y mover la instancia de clip de película del icono.
-
Haga clic en la flecha Atrás azul situada por encima de la línea de tiempo para volver a la escena 1, fotograma 1.
-
Arrastre un componente SeekBar al escenario y colóquelo en la esquina inferior derecha de la instancia de FLVPlayback.
-
En el panel Biblioteca, haga doble clic en el componente SeekBar para abrirlo en el escenario.
-
Ajuste la escala un 400%.
-
Seleccione el contorno y establezca el color rojo (
#FF0000
).
-
Haga doble clic en SeekBarProgress en la carpeta FLVPlayback Skins/Seek Bar y establezca el color amarillo
#FFFF00
).
-
Haga doble clic en SeekBarHandle en la carpeta FLVPlayback Skins/Seek Bar y establezca el color rojo (
#FF0000
).
-
Haga clic en la flecha Atrás azul situada por encima de la línea de tiempo para volver a la escena 1, fotograma 1.
-
Seleccione la instancia de SeekBar en el escenario y asígnele el nombre de instancia
my_seekbar
.
-
En el panel Acciones del fotograma 1 de la línea de tiempo, añada una sentencia de
importación
para las clases de vídeo y asigne nombres de botón y de barra de búsqueda a las propiedades de FLVPlayback correspondientes, tal y como se muestra en el siguiente ejemplo:
import fl.video.*;
my_FLVPlybk.stopButton = my_stopbttn;
my_FLVPlybk.playPauseButton = my_plypausbttn;
my_FLVPlybk.muteButton = my_mutebttn;
my_FLVPlybk.seekBar = my_seekbar;
-
Pulse Control+Intro para probar la película.
|
|
|
