Una de las mejoras de funciones de Flash Professional 8 es el nuevo componente FLVPlayback para Flash Video. Se ha acabado la espera para aquellos usuarios que deseaban disponer de un componente de Flash Video flexible gráficamente. El componente FLVPlayback ofrece una API de ActionScript ampliada y diversos enfoques para la personalización y adaptación del aspecto gráfico.
En este artículo se describen los tres enfoques disponibles para la aplicación de aspecto al componente FLVPlayback:
Elección de aspectos predefinidos a través del cuadro de diálogo Seleccionar aspecto
Utilización de los componentes de interfaz de usuario personalizada de FLVPlayback para combinar los controles personalizables
Creación de sus propios aspectos predefinidos La forma más sencilla de crear un nuevo archivo SWF de aspecto consiste en copiar uno ya existente y modificarlo. Comience creando una copia de uno de los archivos SWF de aspecto predefinidos que se suministran con Flash Professional 8. Los archivos FLA del conjunto de aspectos predeterminado están situados en la carpeta es\Configuration\SkinFLA de la aplicación Flash 8 en la unidad de disco duro.
Para comenzar a trabajar, siga estos pasos:
Suponiendo que tenga instalado Flash Professional 8, vaya a la carpeta de la aplicación Flash 8 y abra la carpeta es\Configuration\SkinFLA.
Debería ver archivos FLA para cada uno de los archivos SWF de aspecto predefinidos (observe la Figura 6). Elija un aspecto que se asemeje a lo que busca y abra el archivo FLA del aspecto en Flash.
Figura 6. Vista de la carpeta SkinFLA en Windows XP.
Guarde el archivo FLA en la carpeta es\Configuration\SkinFLA con otro nombre. Observe que no tiene que guardar el archivo FLA en esta ubicación. El archivo SWF producido a partir de este FLA se situará en la carpeta Configuration. Puede guardar el archivo FLA en el lugar que prefiera de la unidad de disco duro.
Examine el archivo FLA unos instantes. Recuerde que su objetivo es mantener sin cambios los nombres de instancia proporcionados y la estructura de archivos.
Observe que todos los gráficos de controles están dispersos por el escenario. Haga clic en los diversos gráficos y vea los elementos seleccionados. Los conjuntos de gráficos que crean cada control se agrupan en un clip de película. Puede editar los gráficos de los clips de película como desee, pero deberá mantener sin cambios la estructura de anidación del clip de película y los nombres de instancias.
Eso es todo. El nuevo archivo SWF de aspecto ya está listo para ser personalizado.
Modificaciones gráficas en el archivo SWF de aspecto
Una vez que ha creado su propia versión de un archivo SWF de aspecto ya existente, la forma más rápida de modificarlo consiste en editar los gráficos que aparecen en los clips de película del escenario. Dedique algún tiempo a experimentar y realizar cambios gráficos.
El archivo SWF de aspecto utiliza una nueva función de escala de Flash 8 denominada Scale 9. Scale 9 coloca una cuadrícula de guías sobre un clip de película en la biblioteca. Las guías de escala dividen los gráficos en nueve secciones que permiten que Flash les aplique escala de instancia a instancia sin que se produzca distorsión. Para comprobarlo, abra la carpeta Chromes en la biblioteca y haga doble clic en su símbolo para entrar en su línea de tiempo. Observe las guías que se solapan con el gráfico cromático rectangular. Son visibles cuando se edita un clip de película o botón en el modo de edición de biblioteca. Los efectos de la función Scale 9 sólo pueden verse en el archivo SWF durante la ejecución. Aplique escala a varias instancias en la línea de tiempo principal y luego exporte la película (Control > Probar película) para comprobar el resultado.
Las modificaciones sencillas que cambian el aspecto de los botones o el cromatismo (o fondo) de los botones sin cambiar las dimensiones del clip de película funcionan sin necesidad de realizar ninguna otra modificación. Las modificaciones sencillas que implican el cambio de ubicación de los controles también funciona en la mayoría de los casos.
Siga estos pasos para comenzar a explorar y editar el archivo:
Abra el FLA del SWF de aspecto que desea editar en Flash Professional 8.
Observe que el archivo consta de una serie de capas con gráficos en el fotograma 1 de la línea de tiempo raíz. La capa situada más arriba de la pila de capas contiene la instancia layout_mc (el contenedor de los controles montados) y el código ActionScript que inicializa las diversas propiedades del clip de película layout_mc. No será necesario que edite este código, pero puede que le interese observar y explorar los comentarios y la configuración de propiedades predeterminada.
Para editar un gráfico, primero deberá entrar en el área de edición (la línea de tiempo) del clip de película en el que está contenido el gráfico. Haga doble clic en un gráfico del escenario varias veces hasta que llegue a la línea de tiempo que contiene las capas e imágenes editables.
Para editar el gráfico del fondo cromático, por ejemplo, que aparece horizontalmente en la parte inferior de la pantalla, haga doble clic una vez para entrar en la línea de tiempo del clip de película y en el área de edición. Observe que el clip de película contiene los gráficos editables distribuidos por varias capas (observe la Figura 7). El nombre del clip de película cambia dependiendo del archivo, pero siempre aparece en la capa inferior de la línea de tiempo raíz y contiene la misma estructura de capas internamente.
Figura 7. Vista de la línea de tiempo del clip de película del gráfico cromático tal y como se observe en un archivo SWF de aspecto copiado del archivo ClearOverNoVol.fla.
Desbloquee la capa Clear Plate y seleccione el relleno en el escenario. Con el relleno seleccionado, cambie el color de la muestra de Color de relleno en la barra de herramientas. Observe que el color del clip de película layout_mc en la línea de tiempo raíz se actualiza automáticamente. Puede experimentar con cambios de color de relleno, contorno y sombra.
Cuando haya terminado, haga clic en el botón de la escena 1 (Control E) de la barra de edición para regresar a la línea de tiempo principal.
El proceso es el mismo para cualquier gráfico que desee modificar. Haga doble clic en el gráfico hasta que llegue al área de edición. Tenga en cuenta que es posible que tenga que hacer doble clic más de una vez para llegar al área de edición. Esto sucede cuando los botones están anidados con una profundidad de dos o tres niveles.
Guarde el archivo y exporte el archivo SWF. Consulte la siguiente sección para aprender a cargar el archivo SWF de aspecto exportado en el componente FLVPlayback.
Sugerencia: Las modificaciones de los colores del gráfico cromático y el gráfico de fondo permiten variar enormemente el aspecto del reproductor de vídeo sin demasiado esfuerzo.
Carga manual de un aspecto personalizado
Para cargar un archivo SWF de aspecto personalizado en el componente FLVPlayback, utilice el parámetro de aspecto y el cuadro de diálogo Seleccionar aspecto para ir al archivo SWF. Aunque puede ir hasta un archivo SWF situado en cualquier ubicación, probablemente lo más cómodo sea situar el archivo en la carpeta Configuration de Flash para que aparezca junto a la lista de aspectos predeterminada. Esto le permite obtener una vista previa del archivo SWF de aspecto entre los demás archivos predeterminados. También sitúa automáticamente una copia del archivo SWF de aspecto junto al archivo SWF FLVPlayback que está desarrollando.
Para crear un archivo SWF de aspecto que esté permanentemente disponible en el cuadro de diálogo Seleccionar aspecto, guarde el archivo SWF de aspecto personalizado en la carpeta es\Configuration\Skins de la carpeta de la aplicación Flash 8. Al guardar el archivo SWF en esta ubicación, éste se incluye en el cuadro de diálogo Seleccionar aspecto. El aspecto personalizado estará disponible siempre que utilice el cuadro de diálogo Seleccionar aspecto.
Para cargar el archivo SWF de aspecto en un componente FLVPlayback:
Cree un archivo FLA en Flash Professional 8 y arrastre una instancia del componente FLVPlayback del panel Componentes al escenario.
Guarde el archivo.
Seleccione la instancia de FLVPlayback y abra el inspector de componentes desde el menú Ventana (Ventana > Inspector de componentes).
Haga clic en el parámetro skin una vez para seleccionarlo y luego otra vez para abrir el cuadro de diálogo Seleccionar aspecto.
Desplace la lista de opciones hacia abajo en el menú emergente Aspecto y busque el nombre con el que ha guardado el aspecto. Puede utilizarlo de la misma forma que los aspectos predeterminados aquí disponibles.
Para cargar un archivo SWF de aspecto que no aparece en el cuadro de diálogo Seleccionar aspecto de manera predeterminada, puede utilizar la opción URL de aspecto personalizado. Ésta puede resultar útil si examina los archivos SWF ubicados en el servidor de su empresa o guarda archivos en su escritorio para mayor comodidad:
Abra de nuevo el cuadro de diálogo Seleccionar aspecto desde los parámetros de FLVPlayback.
Desplácese hasta la última opción del menú emergente Aspecto: URL de aspecto personalizado (observe la Figura 8).
Figura 8. Vista del cuadro de diálogo Seleccionar aspecto actualizado con el cuadro de texto URL que acepta la ruta del archivo SWF personalizado.
Introduzca la ruta en el cuadro de texto URL y haga clic en Aceptar. La ruta debe ser el nombre del archivo SWF de aspecto, incluida la extensión .swf.
Eso es todo. El archivo SWF debería aparecer en la previsualización dinámica del componente y en el archivo al exportarlo.
Carga de un aspecto personalizado con ActionScript
Puede omitir los parámetros del inspector de componentes y asignar un archivo SWF de aspecto al componente mediante código ActionScript. Esto resulta especialmente útil en una aplicación dinámica que se inicializa durante la ejecución.
Para asignar un archivo SWF de aspecto al componente mediante código ActionScript:
Cree un archivo FLA en Flash Professional 8 y arrastre una instancia del componente FLVPlayback del panel Componentes al escenario.
Guarde el archivo y exporte el archivo SWF.
Cree una copia del archivo SWF de aspecto que desea utilizar y colóquelo junto al archivo que acaba de guardar.
En el archivo FLA que contiene el componente de vídeo, seleccione la instancia de FLVPlayback y asigne un nombre a la instancia (por ejemplo, flvPlayback).
Añada una nueva capa a la línea de tiempo y asígnele el nombre actions. Seleccione la capa actions y abra el panel Acciones para añadir código.
Escriba el siguiente código, reemplazando flvPlayback por el nombre de la instancia que está utilizando y la ruta por el nombre correcto del archivo SWF de aspecto que está intentando cargar. La ruta al archivo SWF puede ser una URL relativa o absoluta:
// Asignar un aspecto nuevo a la instancia FLVPlayback con ActionScript
flvPlayback.skin = "myCustomSkin.swf";
Exporte el archivo SWF para ver los cambios. Tenga en cuenta que la configuración de ActionScript no puede verse hasta la ejecución en el archivo SWF.
Anatomía de un archivo SWF de aspecto
Los usuarios interesados en la creación de archivos SWF de aspecto partiendo de cero deberán aprender la anatomía que se espera que tenga el diseño del archivo. En la siguiente sección de la documentación de ayuda de Flash se esbozan algunos puntos clave de la estructura del archivo:
Referencia del lenguaje de componentes > Componente FLVPlayback > Personalización del componente FLVPlayback > Aplicación de aspectos a componentes individuales de interfaz de usuario personalizados de reproducción FLV
Siguientes pasos
Los tres enfoques de aplicación de aspectos descritos en este artículo le ofrecen gran cantidad de opciones para personalizar el aspecto y el funcionamiento del componente FLVPlayback y los controles. Dedique algún tiempo a experimentar y explorar los archivos de aspecto predefinidos que se suministran con Flash Professional 8. El componente FLVPlayback también incluye una API ActionScript ampliada que le proporciona bastante control sobre el estado y el funcionamiento del reproductor de vídeo. Consulte la documentación de ayuda de Flash para más detalles (Ayuda de Flash > Referencia del lenguaje de componentes > Componente FLVPlayback > Clase mx.video.FLVPlayback).
En este artículo se describen los tres enfoques disponibles para la aplicación de aspecto al componente FLVPlayback:
Elección de aspectos predefinidos a través del cuadro de diálogo Seleccionar aspecto
Utilización de los componentes de interfaz de usuario personalizada de FLVPlayback para combinar los controles personalizables
Creación de sus propios aspectos predefinidos La forma más sencilla de crear un nuevo archivo SWF de aspecto consiste en copiar uno ya existente y modificarlo. Comience creando una copia de uno de los archivos SWF de aspecto predefinidos que se suministran con Flash Professional 8. Los archivos FLA del conjunto de aspectos predeterminado están situados en la carpeta es\Configuration\SkinFLA de la aplicación Flash 8 en la unidad de disco duro.
Para comenzar a trabajar, siga estos pasos:
Suponiendo que tenga instalado Flash Professional 8, vaya a la carpeta de la aplicación Flash 8 y abra la carpeta es\Configuration\SkinFLA.
Debería ver archivos FLA para cada uno de los archivos SWF de aspecto predefinidos (observe la Figura 6). Elija un aspecto que se asemeje a lo que busca y abra el archivo FLA del aspecto en Flash.
Figura 6. Vista de la carpeta SkinFLA en Windows XP.
Guarde el archivo FLA en la carpeta es\Configuration\SkinFLA con otro nombre. Observe que no tiene que guardar el archivo FLA en esta ubicación. El archivo SWF producido a partir de este FLA se situará en la carpeta Configuration. Puede guardar el archivo FLA en el lugar que prefiera de la unidad de disco duro.
Examine el archivo FLA unos instantes. Recuerde que su objetivo es mantener sin cambios los nombres de instancia proporcionados y la estructura de archivos.
Observe que todos los gráficos de controles están dispersos por el escenario. Haga clic en los diversos gráficos y vea los elementos seleccionados. Los conjuntos de gráficos que crean cada control se agrupan en un clip de película. Puede editar los gráficos de los clips de película como desee, pero deberá mantener sin cambios la estructura de anidación del clip de película y los nombres de instancias.
Eso es todo. El nuevo archivo SWF de aspecto ya está listo para ser personalizado.
Modificaciones gráficas en el archivo SWF de aspecto
Una vez que ha creado su propia versión de un archivo SWF de aspecto ya existente, la forma más rápida de modificarlo consiste en editar los gráficos que aparecen en los clips de película del escenario. Dedique algún tiempo a experimentar y realizar cambios gráficos.
El archivo SWF de aspecto utiliza una nueva función de escala de Flash 8 denominada Scale 9. Scale 9 coloca una cuadrícula de guías sobre un clip de película en la biblioteca. Las guías de escala dividen los gráficos en nueve secciones que permiten que Flash les aplique escala de instancia a instancia sin que se produzca distorsión. Para comprobarlo, abra la carpeta Chromes en la biblioteca y haga doble clic en su símbolo para entrar en su línea de tiempo. Observe las guías que se solapan con el gráfico cromático rectangular. Son visibles cuando se edita un clip de película o botón en el modo de edición de biblioteca. Los efectos de la función Scale 9 sólo pueden verse en el archivo SWF durante la ejecución. Aplique escala a varias instancias en la línea de tiempo principal y luego exporte la película (Control > Probar película) para comprobar el resultado.
Las modificaciones sencillas que cambian el aspecto de los botones o el cromatismo (o fondo) de los botones sin cambiar las dimensiones del clip de película funcionan sin necesidad de realizar ninguna otra modificación. Las modificaciones sencillas que implican el cambio de ubicación de los controles también funciona en la mayoría de los casos.
Siga estos pasos para comenzar a explorar y editar el archivo:
Abra el FLA del SWF de aspecto que desea editar en Flash Professional 8.
Observe que el archivo consta de una serie de capas con gráficos en el fotograma 1 de la línea de tiempo raíz. La capa situada más arriba de la pila de capas contiene la instancia layout_mc (el contenedor de los controles montados) y el código ActionScript que inicializa las diversas propiedades del clip de película layout_mc. No será necesario que edite este código, pero puede que le interese observar y explorar los comentarios y la configuración de propiedades predeterminada.
Para editar un gráfico, primero deberá entrar en el área de edición (la línea de tiempo) del clip de película en el que está contenido el gráfico. Haga doble clic en un gráfico del escenario varias veces hasta que llegue a la línea de tiempo que contiene las capas e imágenes editables.
Para editar el gráfico del fondo cromático, por ejemplo, que aparece horizontalmente en la parte inferior de la pantalla, haga doble clic una vez para entrar en la línea de tiempo del clip de película y en el área de edición. Observe que el clip de película contiene los gráficos editables distribuidos por varias capas (observe la Figura 7). El nombre del clip de película cambia dependiendo del archivo, pero siempre aparece en la capa inferior de la línea de tiempo raíz y contiene la misma estructura de capas internamente.
Figura 7. Vista de la línea de tiempo del clip de película del gráfico cromático tal y como se observe en un archivo SWF de aspecto copiado del archivo ClearOverNoVol.fla.
Desbloquee la capa Clear Plate y seleccione el relleno en el escenario. Con el relleno seleccionado, cambie el color de la muestra de Color de relleno en la barra de herramientas. Observe que el color del clip de película layout_mc en la línea de tiempo raíz se actualiza automáticamente. Puede experimentar con cambios de color de relleno, contorno y sombra.
Cuando haya terminado, haga clic en el botón de la escena 1 (Control E) de la barra de edición para regresar a la línea de tiempo principal.
El proceso es el mismo para cualquier gráfico que desee modificar. Haga doble clic en el gráfico hasta que llegue al área de edición. Tenga en cuenta que es posible que tenga que hacer doble clic más de una vez para llegar al área de edición. Esto sucede cuando los botones están anidados con una profundidad de dos o tres niveles.
Guarde el archivo y exporte el archivo SWF. Consulte la siguiente sección para aprender a cargar el archivo SWF de aspecto exportado en el componente FLVPlayback.
Sugerencia: Las modificaciones de los colores del gráfico cromático y el gráfico de fondo permiten variar enormemente el aspecto del reproductor de vídeo sin demasiado esfuerzo.
Carga manual de un aspecto personalizado
Para cargar un archivo SWF de aspecto personalizado en el componente FLVPlayback, utilice el parámetro de aspecto y el cuadro de diálogo Seleccionar aspecto para ir al archivo SWF. Aunque puede ir hasta un archivo SWF situado en cualquier ubicación, probablemente lo más cómodo sea situar el archivo en la carpeta Configuration de Flash para que aparezca junto a la lista de aspectos predeterminada. Esto le permite obtener una vista previa del archivo SWF de aspecto entre los demás archivos predeterminados. También sitúa automáticamente una copia del archivo SWF de aspecto junto al archivo SWF FLVPlayback que está desarrollando.
Para crear un archivo SWF de aspecto que esté permanentemente disponible en el cuadro de diálogo Seleccionar aspecto, guarde el archivo SWF de aspecto personalizado en la carpeta es\Configuration\Skins de la carpeta de la aplicación Flash 8. Al guardar el archivo SWF en esta ubicación, éste se incluye en el cuadro de diálogo Seleccionar aspecto. El aspecto personalizado estará disponible siempre que utilice el cuadro de diálogo Seleccionar aspecto.
Para cargar el archivo SWF de aspecto en un componente FLVPlayback:
Cree un archivo FLA en Flash Professional 8 y arrastre una instancia del componente FLVPlayback del panel Componentes al escenario.
Guarde el archivo.
Seleccione la instancia de FLVPlayback y abra el inspector de componentes desde el menú Ventana (Ventana > Inspector de componentes).
Haga clic en el parámetro skin una vez para seleccionarlo y luego otra vez para abrir el cuadro de diálogo Seleccionar aspecto.
Desplace la lista de opciones hacia abajo en el menú emergente Aspecto y busque el nombre con el que ha guardado el aspecto. Puede utilizarlo de la misma forma que los aspectos predeterminados aquí disponibles.
Para cargar un archivo SWF de aspecto que no aparece en el cuadro de diálogo Seleccionar aspecto de manera predeterminada, puede utilizar la opción URL de aspecto personalizado. Ésta puede resultar útil si examina los archivos SWF ubicados en el servidor de su empresa o guarda archivos en su escritorio para mayor comodidad:
Abra de nuevo el cuadro de diálogo Seleccionar aspecto desde los parámetros de FLVPlayback.
Desplácese hasta la última opción del menú emergente Aspecto: URL de aspecto personalizado (observe la Figura 8).
Figura 8. Vista del cuadro de diálogo Seleccionar aspecto actualizado con el cuadro de texto URL que acepta la ruta del archivo SWF personalizado.
Introduzca la ruta en el cuadro de texto URL y haga clic en Aceptar. La ruta debe ser el nombre del archivo SWF de aspecto, incluida la extensión .swf.
Eso es todo. El archivo SWF debería aparecer en la previsualización dinámica del componente y en el archivo al exportarlo.
Carga de un aspecto personalizado con ActionScript
Puede omitir los parámetros del inspector de componentes y asignar un archivo SWF de aspecto al componente mediante código ActionScript. Esto resulta especialmente útil en una aplicación dinámica que se inicializa durante la ejecución.
Para asignar un archivo SWF de aspecto al componente mediante código ActionScript:
Cree un archivo FLA en Flash Professional 8 y arrastre una instancia del componente FLVPlayback del panel Componentes al escenario.
Guarde el archivo y exporte el archivo SWF.
Cree una copia del archivo SWF de aspecto que desea utilizar y colóquelo junto al archivo que acaba de guardar.
En el archivo FLA que contiene el componente de vídeo, seleccione la instancia de FLVPlayback y asigne un nombre a la instancia (por ejemplo, flvPlayback).
Añada una nueva capa a la línea de tiempo y asígnele el nombre actions. Seleccione la capa actions y abra el panel Acciones para añadir código.
Escriba el siguiente código, reemplazando flvPlayback por el nombre de la instancia que está utilizando y la ruta por el nombre correcto del archivo SWF de aspecto que está intentando cargar. La ruta al archivo SWF puede ser una URL relativa o absoluta:
// Asignar un aspecto nuevo a la instancia FLVPlayback con ActionScript
flvPlayback.skin = "myCustomSkin.swf";
Exporte el archivo SWF para ver los cambios. Tenga en cuenta que la configuración de ActionScript no puede verse hasta la ejecución en el archivo SWF.
Anatomía de un archivo SWF de aspecto
Los usuarios interesados en la creación de archivos SWF de aspecto partiendo de cero deberán aprender la anatomía que se espera que tenga el diseño del archivo. En la siguiente sección de la documentación de ayuda de Flash se esbozan algunos puntos clave de la estructura del archivo:
Referencia del lenguaje de componentes > Componente FLVPlayback > Personalización del componente FLVPlayback > Aplicación de aspectos a componentes individuales de interfaz de usuario personalizados de reproducción FLV
Siguientes pasos
Los tres enfoques de aplicación de aspectos descritos en este artículo le ofrecen gran cantidad de opciones para personalizar el aspecto y el funcionamiento del componente FLVPlayback y los controles. Dedique algún tiempo a experimentar y explorar los archivos de aspecto predefinidos que se suministran con Flash Professional 8. El componente FLVPlayback también incluye una API ActionScript ampliada que le proporciona bastante control sobre el estado y el funcionamiento del reproductor de vídeo. Consulte la documentación de ayuda de Flash para más detalles (Ayuda de Flash > Referencia del lenguaje de componentes > Componente FLVPlayback > Clase mx.video.FLVPlayback).
No hay comentarios:
Publicar un comentario