RSS : Articles / Comments


cargar fotos y videos con comportamientos en flash

lunes, febrero 15, 2010, Posted by Xabier Pérez, No Comment

Los comportamientos son scripts de ActionScript integrados que se añaden a un objeto, como una pantalla, para controlarlo. Descubre a través de este post cómo utilizar los comportamientos para cargar imágenes y vídeos en una pantalla creada por ti.


Según el Manual Oficial de Adobe Flash CS4, la utilización de comportamientos permite crear controles y transiciones para las pantallas. Los controles facilitan el flujo entre las distintas pantallas; por ejemplo, para pasar a otra pantalla, ocultar una pantalla o mostrarla. Las transiciones crean animaciones visuales que se reproducen a medida que el documento de Flash muestra los cambios de una pantalla a otra.

CARGAR IMÁGENES CON COMPORTAMIENTOS 

Lo primero que tenemos que hacer es tener en una misma ubicación el archivo de Flash con el que vamos a trabajar y las diferentes imágenes (en .jpg) que deseamos cargar en el visor de imágenes. Las imágenes las bajaremos de la Web, o serán imágenes propias o fotos; pero deberemos asegurarnos que todas tengan el mismo tamaño (para el ejercicio con el que trabajaremos a continuación las imágenes tienen unas dimensiones de 400 X 400 píxeles). Para reducir las dimensiones de las imágenes, lo mejor es hacerlo con un programa de edición de imágenes como Adobe Photoshop.

El segundo paso será, ya con el programa Adobe Flash abierto, modificar las dimensiones de nuestro escenario y, si queremos, también el color del mismo. Para ello haremos clic con la herramienta Selección (la flecha negra) sobre el Escenario e iremos al panel de Propiedades. En el Panel de propiedades haremos clic en el botón Editar que aparece a la derecha del mismo (si no ves el Panel de Propiedades, haz clic en Ventana>Propiedades). Se abrirá entonces una ventana emergente donde podremos modificar los valores correspondientes (para el ejemplo le di al Escenario unas dimensiones de 800 X 600 píxeles y un color de fondo Gris)

Una vez modificado nuestro Escenario, vamos a poner en el mismo una serie de botones pero, esta vez, en vez de crearlos (ver creación de un botón en flash) vamos a selecionar los que vienen predeterminados en el sistema. Haremos entonces clic en Ventana>Bibliotecas comunes>Botones y en la ventana emergente que se nos abre, arrastraremos al Escenario el botón que más nos guste.


Una vez tenemos el botón en el Escenario, podemos proceder a editarlo. Haciendo doble clic encima del botón, entraremos en el Modo de Edición del botón. Podremos entonces seleccionar por ejemplo la capa de texto y cambiarle el nombre al botón ( en el ejemplo se cambia el nombre de "Enter" a "Pop"). Si queremos también es posible cambiar otras propiedades como color, tamaño, etc. Cuando estés satisfecho del resultado, pulsa Escena 1 en la barra gris que se encuentra justo encima de nuestro Escenario para salir del Modo de Edición del botón.


Una vez en el Escenario, pulsando la tecla ALT mientras arrastramos el botón, duplicaremos este cuatro veces. Después, trazando con la herramienta de Selección un recuadro que incluya a los cuatro botones, pasaremos a alinearlos. Para ello, abriremos la Paleta Alinear (Ventana>Alinear) y pulsaremos los botones de Alineado al centro y de Distribución de Centros horizontales.



Crearemos ahora dos cuadrados con diferentes dimensiones y características:
  1. contenedor: un cuadrado de trazo azul de y sin relleno de 420 x 420 píxeles
  2. visor: un cuadrado de relleno negro y sin trazo de 400 x 400 píxeles

Con la herramienta selección, seleccionaremos ambos cuadrados y alinearemos entre sí. Después, seleccionaremos únicamente el cuadrado negro (el que va a realizar las labores de visor de fotografías) y haciendo clic con el botón derecho del ratón lo convertiremos en un Símbolo.


En la ventana emergente que se nos abre, le ponemos en qué tipo de símbolo queremos que se convierta, en este caso en un Clip de Película y marcamos como punto de registro la esquina superior izquierda. Le daremos entonces a Aceptar y en el Panel de Propiedades, justo a la derecha del icono de Clip de Película, le pondremos un nombre.

Dentro del Modo de edición del Clip de película, seleccionaremos el cuadrado negro y pulsando la tecla SUPR lo eliminaremos, ya que lo único importante es obtener el punto de registro del Clip. Una vez eliminado el cuadrado negro, pulsaremos Escena 1 para volver al Escenario.

Vamos ahora a aplicar los comportamientos a los botones. Para ello, con el primer botón seleccionado, abrimos la Paleta Comportamientos (Ventana>Comportamientos) y hacemos clic en el signo más de color azul y vamos a Clip de película>Cargar gráfico.


Se nos abrirá entonces una ventana emergente donde:
  • seleccionaremos el nombre de nuestro Clip de película para que las imágenes se carguen ahí
  • copiaremos el nombre de nuestra imagen y lo pegaremos en el recuadro Especifica la URL terminado en .jpg o .jpeg (dependiendo de la extensión final de cada archivo).

Pulsaremos en Aceptar y procederemos de la misma forma con el resto de los botones (asignando siempre una imagen por botón). Para comprobar los resultados iremos a Archivo >Publicar.

CARGAR VÍDEOS CON COMPORTAMIENTOS 

Para la carga de vídeos procederemos de igual forma. Solo será necesario acordarse de :
  • Que los archivos .swf se encuentren en la misma carpeta que el archivo .fla, para que se puedan cargar debidamente
  • Cuando le otorguemos los Comportamientos al botón, iremos a Clip de película>Cargar clip de película externo.
  • En la ventana emergente que se abre, copiaremos el nombre del vídeo terminado en .swf.


No Comment