Escola Massana Soporte web en programación CSS y gestores de contenidos

Transcripción

1 Escola Massana Soporte web en programación CSS y gestores de contenidos Modulo de Flash e introducción a Actionscript 3.0 Profesor: Claudio Molina Video en Flash (SOLO CS4) A Flash CS4 solo se pueden importar dos tipos de formatos de video FLV (para flash player 8) y F4V (para flash player 9). Estos son formatos de video comprimidos. Para comprimirlos uno de los programas que puedo usar es el Adobe Media Encoder. Adobe Media Encoder es una aplicación para codificar audio y video para diferentes aplicaciones. FLV y F4V para usar con Flash Player, H.264 Para Ipod con Video, teléfonos móviles etc, MPEG-1 (para CD-ROM) Y MPEG-2 (para DVD), Apple Quick Time, Windows Media. Mira toda la información y descarga el pdf con info técnica desde: OBJETIVOS - COMPRIMIR EL VIDEO EN ADOBE MEDIA ENCODER CS4 Primero vamos a comprimir el video para luego importarlo a Flash - IMPORTAR VIDEO EN FLASH para streaming (descarga progresiva) - APLICAR EL ASPECTO DEL REPRODUCTOR SKIN Controles del video - PUBLICAR LA APLICACIÓN PARA VERLA ON-LINE Html, swf + flv y skin PASOS A SEGUIR - COMPRIMIR EL VIDEO EN ADOBE MEDIA ENCODER CS4 A) Abrir Adobe media encoder

2 B) En la ventana de codificación presionar Añadir y buscar el fichero en el escritorio de tu ordenador NOTA: Verás que el nombre del fichero aparece en la cola de compresión.

3 C) Elije un formato de salida. Haz click sobre la miniatura del triángulo debajo de la palabra formato escoge FLV F4V EXPORTAR LOS AJUSTES D) Luego de eso haz click sobre la palabra en amarillo debajo de Ajustes preestablecidos para que aparezca la ventana Exportar Ajustes Aparecerá esta ventana

4 E) Para obtener un video del mismo tamaño que el original: En la parte derecha de ajuste predeterminado puedes seleccionar por ejemplo: Igual que origen Flash 8 y superior. Para que salga con el mismo tamaño y se vea a partir del Player de Flash 8. Tendrás como resultado un video de 720 px de alto por 480 px de ancho. F) Clica Aceptar G) Luego de esto, exporta el fichero presionando Iniciar Cola. Verás que comienza la codificación. H) Ve a la carpeta en donde tenías tu fichero Penguins.mov y verás que hay un fichero de nombre Penguins.flv este es el fichero que debes importar en Flash. I) Importar a Flash (ver más adelante) J) Para obtener un video de distinto tamaño que el original: Puedes Personalizar el tamaño y proporción de tu video manipulando la herramienta Recorte, manualmente con los valores de ajuste horizontal y vertical y con la herramienta Proporciones de recorte. Ejemplos e proporciones de video personalizadas: * Repetir los pasos de A hasta D

5 L) Personaliza el tamaño de tu video con las herramientas antes mencionadas. Recorte Puntos de entrada y salida Formato LL) Antes de exportar tu fichero, puedes consultar la Paleta de Salida para ver la proporción de marcos negros en el proyecto

6 Encontrarás más ayuda específica en la página oficial M) Clica Aceptar N) Luego de esto, exporta el fichero presionando Iniciar Cola. Verás que comienza la codificación. Ñ) Ve a la carpeta en donde tenías tu fichero Penguins.mov y verás que hay un fichero de nombre Penguins.flv este es el fichero que debes importar en Flash. Terminado :) - IMPORTAR VIDEO EN FLASH para streaming (descarga progresiva) Crearemos componentes para ver y controlar al video. A) Abre el Flash. B) Luego abre la aplicaión Plantilla.fla. C) Pon el cursor en la capa Video e Importa el fichero Penguins.flv, Menu / Archivo / Importar / Importar video y en Seleccionar vídeo selecciona: A B C D

7 - APLICAR EL ASPECTO DEL REPRODUCTOR SKIN D) Selecciona uno de los aspectos del reproductor de video y aplícale un color. Aspectos Color NOTA: Puedes seleccionar un aspecto que esté por debajo del video, grupo Skin Under ó seleccionar un aspecto que esté por sobre el video Skin Over. También puedes escoger que tu video no tenga aspectos aplicados. D) Clicka, Continuar y luego Finalizar. Verás una superficie negra, con el aspecto escogido en la mesa de trabajo. E) Mueve el video a la posición que quieras en la mesa de trabajo, y salva tu aplicación si no lo has hecho hasta ahora :) F) Prueba tu película Menu / Control / Probar Película para ver tu video.

8 G) Luego de eso ve al escritorio y fíjate ahora que tienes 3 iconos, Plantilla.fla, Plantilla.swf y SkinUnderPlaySeekFullscreen.swf (el aspecto escogido) NOTA: Los componentes que has creado PLAYBACK (para ver el video) y SKIN (controlar la reproducción del video) son Clips de Película ya programados listos para usar. Los Skins son customizables pero no es sencillo hacerlo, pues tienen una compleja estructura de Clips de película dentro de otros Clips de película. Veremos otros componentes más adelante en las clases. - PUBLICAR LA APLICACIÓN PARA VERLA ON-LINE Html, swf + flv y skin A) Ahora vas a publicar tu aplicación desde el propio Flash para verla on-line. Crearás un Html que tendrá el swf embebido y el llamará al Skin que estará externo. Solo tienes que ir a: Menu / Archivo / Configuración de Publicación Nombres

9 B) Crea el Html y que salga centrada tu película. Selecciona estos datos. C) Presiona Publicar para crear tus ficheros. D) Y luego Aceptar para terminar. E) En el escenario de Flash selecciona el playback (de color negro) y trabaja un poco sus carácterísticas y parámetros desde la ventana Parámetros. ir a Menu / Ventana / Inspector de Componentes Puedes poner por ejemplo autoplay para que se ejecute automáticamente tu video al iniciar la película.

10 F) Mira referencias aqui Referencias al componente Playback (cuidado que es de Flash 8 :P) Más referencias aqui html Encuentra todos los flash abiertos de los skins players en esta dirección: Aplicaciones / Adobe Flash CS4 / Common / Configuration / FLVPlayback Skins / FLA / ActionScript 3.0 Una vez que has customizado tu player, para que salga en la lista debes meterlo aqui: Aplicaciones / Adobe Flash CS4 / Common / Configuration / FLVPlayback Skins / ActionScript 3.0

11 G) Luego de esto solo mira los ficheros que se han creado y listo! Ya puedes cogerlos y subirlos a internet :) Estos van online! Este no!