Grupo de Apoyo a la Teleenseñanza Fotos de la Universidad

SERVICIOS » Desarrollo multimedia » Tutorial de Flash I

En éste documento se detallará mediante dos pequeños ejemplos los pasos, trucos y procedimientos para crear unas presentaciones dinámicas en Flash. Flash es una herramienta de Macromedia para realizar contenido para la web dinámicos, es una herramienta sencilla de manejar una vez se tiene conocimiento de las herramientas básicas y permite realizar contenidos de gran vistosidad y que involucran al usuario en la presentación creada.

Todos los ejemplos están basados en la versión Flash MX (2003). Pero en su mayoría se pueden exportar a versiones anteriores ya que no se hace uso de las características avanzadas de ésta versión.

 

Conociendo el entorno de Macromedia Flash

Todas las herramientas de Flash están concentradas en una sola ventana con diferentes pestañas que podemos ir haciéndolas aparecer o desaparecer cuando nos sea necesario.

Entorno de trabajo de Flash

click sobre la imagen para ampliarla 

En la parte izquierda de la pantalla tenemos la barra de herramientas con las opciones más comunes -selección, inserción de texto, dibujo a mano alzada, lineas, rectángulos, elipses, relleno de lineas y objetos, etc... - así como la selección de color.

En la parte superior de la pantalla tenemos primero el menú del programa y debajo la línea de tiempo, que nos servirá para ir midiendo el tiempo que durará la pelicula , así como las distintas capas y su transición en el tiempo. En éste mismo panel se encuentran también los botones para añadir capas y capas de movimiento, éstos últimos para dirigir el movimiento de objetos por la pantalla de forma que no se muevan siempre en línea recta.

En la parte derecha se encuentran los paneles de selección de colores personalizados (útiles para efectos de degradados), panel de objetos (no los usaremos en esta explicación) y el panel de ayuda rápida.

En la parte inferior de la pantalla finalmente tenemos el panel de Acciones y el panel de Propiedades, normalmente estos paneles se pueden ocultar o hacer aparecer al gusto del usuario para aumentar el área de trabajo en un momento dado para poder dibujar con más precisión.

 

Creando formas y símbolos

Es muy recomendado familiarizarse con las técnicas más comunes para crear formas (dibujos) y simbolos (graficos, botones o películas) para desarrollar presentaciones en Flash más rápidamente.

Creando formas básicas

Podemos crear formas básicas en Flash rápidamente con los botones de elipse o rectángulo.

Cuadro de Herramientas Cuadro de Herramientas

<- Herramientas de selección

 

<- Herramientas de dibujo de elipses y rectángulos
<- Herramientas de dibujo a mano alzada









<- Color de la línea

<- Color de fondo



<- Imán


Mediante el botón de elipse podemos crear tanto elipses como círculos perfectos, para realizar un círculo deberemos dibujarlo como si dibujasemos una elipse pero dejando pulsado el botón Mayúsculas. Lo mismo si queremos dibujar cuadrados con la herramienta de Rectánculos.

Cuando dibujamos formas cerradas podemos especificar si queremos color de fondo o no, y el color que deseamos tanto para el fondo como para la línea.

Con la herramienta Imán Flash no dejará situar las figuras en cualquier posición sino sólamente en unas posiciones definidas en la cuadrícula. Si lo deseleccionamos podremos situar las figuras en cualquier lugar del lienzo de flash.

También podremos crear figuras a mano alzada o dibujar simplemente con las herramientas de lápiz y pincel , al pulsar sobre estas herramientas aparecerá como última opción de la barra de herramientas si quiere que Flash atenue las formas que dibuje a mano alzada o no. De esta manera si una linea curva dibujada a mano alzada no le ha quedado parecida a una curva, puede decir a Flash que atenue el dibujo automáticamente, así al pintar los errores al temblar el trazo son subsanados de forma fácil y cómoda.

Mediante la herramienta de selección podemos seleccionar las líneas de contorno de las figuras así como el interior de ellas (si se ha aplicado color de relleno). Si acercamos el puntero del ratón hacia una línea, teniendo seleccionado la herramienta de selección veremos que cambia el cursor de forma apareciendo una pequeña línea curva junto al cursor, esto indica que podemos pinchar sobre la línea y arrastras para así crear una curva a partir de una línea recta, esto nos servirá para crear formas más complejas a partir de las formas básicas, la linea, el rectángulo y la elipse. Igualmente si acercamos el cursor hacia una esquina de la forma cambiará la forma del cursor apareciendo un angulo recto que indicara que estamos sobre una esquina o punto de unión y podemos arrastrarlo para modificar su posición.

Creando Simbolos

Los simbolos son elementos de Flash (películas, botones, gráficos) que son completamente manejables por él y con los que puede hacer degracaciones de color o animarlos y moverlos por la pantalla.

Podemos crear simbolos a partir las figuras que dibujamos o podemos importar gráficos (fotos) o películas AVI para con ello crear simbolos de Flash.

Para crear un símbolo a partir de una figura dibujada en Flash usaremos la herramienta de selección para seleccionar la región que queremos convertir y luego con el botón derecho sobre el símbolo en el menú contextual pulsar en Convertir en Símbolo . Aparecerá un cuadro indicándonos si queremos que el símbolo sea tratado como un símbolo gráfico, un botón o una película de animación.

Creando Simbolos a partir de formas

Click sobre la imagen para ampliarla

Una vez tenemos creado el símbolo lo podremos insertar todas las veces que querramos durante la animación acudiendo al menú Ventana->Biblioteca o pulsando sobre la tecla F11. En la biblioteca se encuentran todos los símbolos que hemos creado y que posteriormente podremos editar de nuevo cada uno para modificar sus propiedades, simplemente pulsando soble click sobre el simbolo creado dentro de la biblioteca.

 

Animaciones básicas y degradados

Podemos ver la forma de realizar animaciones simples así como degradados o fusionados de los gráficos para poder realizar transiciones entre cada contenido básico de una presentación.

Movemos un gráfico por la pantalla

Vamos a intentar crear una animación donde un gráfico se mueva por la pantalla. Para ello buscamos un archivo gráfico común (podría ser un archivo BMP o JPG), dentro de Flash usaremos el menú Archivo->Importar, y elegiremos el archivo gráfico. Automáticamente aparecerá en el lienzo de Flash, podemos hacerlo más grande o más pequeño a nuestro gusto mediante el menú Modificar-> Transformar -> Escalar Aparecerán unos pequeños puntos alrededor del gráfico para poder estirar las esquinas y poder escalarlo.

Hemos de tener en cuenta que si escalamos demasiado para hacer más grande una imágen, ésta al ser simplemente un conjunto de puntos en la pantalla (mapa de bits) aparecerá un efecto de pixelado degradando la calidad del gráfico.

Ahora que lo tenemos al tamaño que queremos lo convertimos en símbolo Flash gráfico para poder interactuar con él. Menú Insertar -> Convertir en símbolo.

Ahora crearemos el movimiento por la pantalla, esto nos ayudará a familiarizarnos con la línea de tiempo y como poder realizar transiciones de imágenes.

Conceptos

  • fotograma.- Un fotograma es una imágen fija, dentro de una película o animación, una sucesión de fotogramas rápidamente en los que en cada uno hay una leve diferencia de posición representarán al ojo humano que la figura se está moviendo. En una animación clásica de Flash, la velocidad de la animación es de 12 fotogramas por segundo, siendo modificable este parámetro en caso que sea necesario suavizar el movimiento. En una película de cine para televisión la velocidad es de 25 fotogramas por segundo y para cine podría ser mayor.
  • fotograma clave.- Un fotograma clave en Flash es aquel que marca un principio y un fin en una transición, el resto de fotogramas simplemente son el movimiento dentro de una animación desde una posición inicial en el fotograma clave de inicio y una posición de fin en el fotograma clave final.

Siempre que se comienza un nuevo proyecto Flash, el primer fotograma inicial es un fotograma clave. Los fotogramas clave estarán marcados por un punto tal y como se muestra en la figura.

Se puede ver que a lo largo de la línea de tiempo hay marcados unos números que indican el número de fotograma, podémos calcular fácilmente la duración de la animación simplemente contando el número de fotogramas y dividiendolo por la velocidad de la película (normalmente 12 fotograma por segundo).

Vamos a crear otro fotograma clave que indicará el punto final a donde queremos que se mueva la figura, pulsamos sobre el fotograma número 24 (2 segundos) y pulsamos la tecla F6 del teclado para crear un fotograma clave en éste lugar. Veremos que entre los dos fotogramas, el inicial y el final se ha rellenado el resto de fotogramas de color gris, esto es porque estos fotogramas tendrán como contenido la animación o la transición de un fotograma clave a otro. Estando en el último fotograma (el 24 de la animación) veremos en el lienzo de Flash la misma imágen que teníamos (pulsando F6 hemos creado un fotograma clave con una copia del contenido del fotograma anterior), moveremos la imágen o figura a la posición final en el lienzo. Luego pulsamos sobre el primer fotograma en la línea de tiempo, y pulsando con el botón derecho sobre él pulsaremos Crear interpolación de movimiento.

Aparecerá una flecha que parte del fotograma inicial al fotograma final.

Si vamos pulsando sobre cada fotograma intermedio vemos como la figura se va moviendo poco a poco de posición hasta terminar en la posición final.

Ahora podremos comprobar el resultado mediante el Menú Control -> Probar película.

 

 

Mediante la herramienta de Flash podremos crear contenidos dinámicos que pueden ser útil para la docencia. Si quiere ver un ejemplo pulse en este enlace.