introducción a flash

INTRODUCCIÓN A FLASHFlash es un programa para la creación de: animación en 2D y aplicaciones multimedia interactivas. Genera archivos .fla, pero permite publicarlos según la necesidad; para visualizarlos con el plug-in de flash (Flash Player), los archivos son .swf, para visualizarlos como páginas Web (en el navegador), los archivos son .html.

Animación en 2DAl indicar que Flash es un programa para la creación de animaciones en 2 dimensiones se está refiriendo a que maneja un plano con sus ejes x (horizontal) y y (vertical). Animar no significa movimiento, significa que durante un tiempo hay una generación de cuadros que pueden tener cambios y simular una secuencia. Los gráficos en 3 dimensiones no tienen lugar en este programa, no cuenta con eje z para ubicarse en el espacio. Sin embargo sí es posible simular una animación en 3 dimensiones a través de cada uno de los cuadros que la conforman.

Aplicaciones multimedia interactivasMultimedia es una palabra que se puede descomponer en múltiples medios, esto significa que Flash permite la combinación de Texto, imágenes, animaciones, vídeo y sonido, que con un buen diseño y contenido se convierten en una aplicación o presentación. Al permite adicionarle el concepto de interactividad, la aplicación puede ser controlada por el usuario, de esta forma, un mínimo de interactividad es cuando el usuario puede seleccionar una opción de un menú y así poder ver el tema que desee sin necesidad de pasearse secuencialmente por el contenido.

Tanto las animaciones como las aplicaciones multimedia interactivas pueden crearse para ser vistas en disco (duro, cd, dvd) o en Internet. Después de definir esto, debe tener en cuenta las siguientes consideraciones:

Tamaño de la película

Resolución del monitor Multimedia en CD Página Web

800 x 600 px 800 x 600 px 780 x 415 px1024 x 768 px 1024 x 768 px 980 x 580 px

Nota: Para utilizar tamaños superiores a 800 x 600 debe indicarse una nota al inicio de la película que diga:Para una mejor visualización debe tener una resolución de pantalla de 1024 x 768 px

Para banners, botones o cualquier otro objeto, el tamaño de la película debe ser del mismo tamaño que se necesita insertar en un archivo. Con una regla de píxeles (píxel ruler1) mida los siguientes espacios que aparecen actualmente en la página principal de la Universidad de Medellín (http://www.udea.edu.co):

Objeto Tamaño en px.

1 Descárguela gratuitamente de Internet http://www.mioplanet.com/products/pixelruler/index.htm

Material elaborado por: Claudia P. Vásquez L. y adaptado por Liliana Páez CruzDerechos reservados ® 2008

1

http://www.udea.edu.co/

http://www.mioplanet.com/products/pixelruler/index.htm

Peso de los archivosMultimedia Página Web

700 Mb para todos los archivos, si se presenta en CD

Máximo 120 Kb por cada archivo html para ser descargado rápidamente en un equipo con conexión vía Módem de 56Kb

Para tamaños mayores utilizar DVD u otros discos

TipografíasPresentación en CD Página Web

Cualquiera garantizando que el equipo la tiene o recomendando su instalación, no debe olvidarse las características de la tipografía para una mejor lectura.

Sans Serif, Times New Roma, Times, Serif, Courier, Courier New, Georgia

Recomendables (palo seco):Arial, Tahoma, Verdana, Trebuchet

Resolución y formatos de imagenImpresión Visualización en pantalla

Resolución Superior a 150 dpiRecomendable: 300 dpi

Inferior a 150 dpiRecomendable: 72 dpi

Formatos Enumere aquí los formatos que usted conozca:

JPG, GIF

PNG: No es reconocido por todos los navegadores

¿Cuál es el formato recomendable cuando la imagen tiene muchos


2

Indique cuáles son los más utilizados:

colores y degradados?

¿Cuál es el formato que acepta transparencias?

ColoresImpresión Visualización en pantalla

CMYKRGBHSB (Hue, Saturation, Bright)

Hexadecimal: Para páginas Web.

INTERFAZ DEL PROGRAMA

CAJA DE HERRAMIENTAS Activar/Desactivar la Caja de Herramientas

Menú: Window – ToolsTeclado: Ctrl + F2

Se ubica generalmente al lado izquierdo de la pantalla, contiene grupos de herramientas organizados así: Herramientas de selección y transformación Herramientas de dibujo y texto Herramientas de relleno y trazo Herramientas de visualización Herramientas de colores Opciones de la herramienta seleccionada.


3

En la parte superior de la barra aparece:

Este símbolo indica que la caja de herramientas se puede visualizar en una sola línea. El caso contrario cuando se quiere visualizar tal como se ve en la figura.

Algunas herramientas tienen una flecha que indica que contiene más herramientas.

Cada herramienta se puede activar con teclado, a algunas de ellas les corresponde la primera letra del nombre en inglés.

A continuación se presentan las herramientas clasificadas según su función:

Herramientas de selección y transformaciónEspañol Inglés

SelecciónSubselecciónTransformación libreTransformación de degradadoLazo

Herramientas de dibujo y textoEspañol Inglés

PlumaAñadir punto de anclaEliminar punto de anclaConvertir punto de anclaTextoLíneaRectánguloÓvaloPolystarLápizPincel

Herramientas de relleno y trazo


4

Español InglésBote de tintaCubo de pinturaCuentagotasBorrador

Herramientas de visualizaciónEspañol Inglés

ManoZoom

Herramientas de coloresEspañol Inglés

Color de trazoColor de rellenoBlanco y negroIntercambiar coloresSin color

Opciones de la herramientaEstas opciones cambian para cada herramienta seleccionada, por ejemplo:Selección Transformación

libre Lazo Pincel Borrador

BARRAS DE HERRAMIENTAS Activar/Desactivar las Barras de Herramientas

Menú: Window – Toolbars

Flash cuenta con tres barras de herramientas:

Principal (Main)Es la que se conoce generalmente en todos los programas como barra de herramientas estándar, contiene los iconos más comunes para el manejo de archivos, edición y transformación de objetos


5

Opción: Ajustar a objetosMenú: View – Snapping – Snap to ObjectTeclado: Ctrl + Shift + } Aparecen también en las

opciones de la herramienta Selección

(V)

Opción: SuavizarMenú: Modify – Shape - Smooth

Opción: EnderezarMenú: Modify – Shape - Straighten

Opción: RotarMenú: Modify – Transform – Rotate and Skew Aparecen también en las

opciones de la herramienta

Transformación Libre (Q)Opción: EscalarMenú: Modify – Transform - ScaleOpción: Activar/Desactivar el panel AlineamientoMenú: Window – AlignTeclado: Ctrl + K

Controlador (Controller)Es la que permite controlar la reproducción de la película. De izquierda a derecha, contiene los iconos para Detener, Ir al primer fotograma, Retroceder un fotograma, Reproducir, Adelantar un fotograma, Ir al último fotograma

Barra de Edición (Edit Bar)

Mediante la barra de edición se puede: Ocultar o mostrar la línea de tiempo Visualizar la escena donde se está trabajando Configurar el espacio de trabajo Editar la escena y los símbolos Observar y modificar el porcentaje de visualización de la película

LÍNEA DE TIEMPO

Activar/Desactivar la Línea de TiempoMenú: Window – TimelineTeclado: Ctrl + Alt + T


6

ESCENARIO También conocido como ventana de documento. El área de trabajo contiene elementos que no se verán en la película y el lienzo es el espacio con elementos de la escena.

Ver/Ocultar el área de trabajoMenú: View – PasteboardTeclado: Ctrl + Shift + W

PANELES Panel Propiedades (Properties)Está ubicado en la parte inferior de la ventana. Es el encargado de indicar las propiedades de todos los objetos (formas, fotogramas, grupos, mapa de bits, símbolos). Contiene tres ficheros: propiedades, filtros y parámetros.

Activar/Desactivar el Panel PropiedadesMenú: Windows – Properties - PropertiesTeclado: Ctrl + F3


7

Lienzo (hoja o escena)

Área de trabajo

Área de capas

Área de fotogramas

A B CD

A. Expandir y contraer el área de informaciónB. Separar panelC. Expandir y contraer panelD. Menú del panel

Otros PanelesSon todas las ventanas que generalmente se ubican al lado derecho de la aplicación o aparecen flotantes, algunos de ellos son: Mezclador de colores, Muestras de color, Componentes, entre otros.

Todos los paneles se activan y desactivan por el menú Window, cada uno tiene asignado un atajo por teclado.

Organizar los paneles:

Menú Window – Workspace

Existen varias posibilidades de organizar el espacio de trabajo con los paneles. Estas son: predeterminado, iconos y texto, sólo iconos.

La resolución de pantalla para visualizar correctamente los elementos de la ventana de Flash debe ser mínimo de 1024 x 768 píxeles, de lo contrario es posible que los paneles no se visualicen correctamente.

Ocultar/Mostrar todos los paneles:

Presionar F4

Guardar disposición de paneles:1. Organizar los paneles en el lugar deseado2. Menú Window – Workspace – Save Current


8

3. Digitar un nombre – Ok

Utilizar la ubicación de los paneles guardada:Menú Window – Workspace – seleccionar el nombre de la disposición guardada.

REGLAS - GUÍAS - CUADRÍCULA - AJUSTE

Reglas (Rulers)

Activar/Desactivar las reglasMenú: View – RulersTeclado: Ctrl + Alt + Shift + R

Los archivos que se producen en Macromedia Flash son para visualización en pantalla, es por esto que la unidad de medida de la regla debe estar en píxeles.

Cambiar o verificar la unidad de medida del documento

Menú: Modify – DocumentTeclado: Ctrl + J

Guías (Guides)

Colocar las guías:Arrastrar desde la regla

Borrar una guía:Arrastrar la guía hacia la regla utilizando la herramienta Selección

Bloquear/Ocultar/Ajustar y Editar guías:Menú View – Guides

En la opción editar guías se puede adicionalmente: borrar todas las guías y cambiar su color.

Cuadrícula (Grid)

Activar/Desactivar la cuadrículaMenú: View – GridTeclado: Ctrl + ´ (tilde)


9

Opciones de ajuste

Para ajustar los objetos a la cuadrícula, las guías, los píxeles, entre otros, se debe activar la opción deseada en el menú View - Snnaping:

La opción alineación de ajuste (snap align) permite mostrar una línea punteada indicando el lugar de alineación, la figura se observa que al mover la elipse se está ajustando al objeto rectángulo en la parte superior.

Las opciones de reglas, guías, cuadrícula y ajuste también aparecen al presionar clic derecho sobre el escenario.

FORMAS DE VISUALIZACIÓN

UBICACIÓN DEL LIENZO EN EL ESCENARIO

Estas son algunas de las opciones que se pueden utilizar para ubicar el lienzo en el lugar deseado del escenario:

Procedimiento 1

Arrastrar sobre el escenario utilizando la herramienta Mano (H)

Procedimiento 2

Presionar Barra espaciadora + arrastrar sobre el escenario (esta opción puede ser utilizada teniendo activada cualquier herramienta)

ZOOM DEL LIENZO

Existen varios procedimientos para visualizar la escena:

Procedimiento 1


10

Cambiar el porcentaje de visualización en la línea de tiempo.

También permite escoger las opciones:Mostrar Todo (Ctrl + 3): Acerca todos los objetos ubicados en el escenarioMostrar Fotograma (Ctrl + 2): Encaja el lienzo en el escenario.

Procedimiento 2

Herramienta Zoom (M o Z): Permite acercar o alejar presionando clic sobre el escenario, depende del icono activado en el área de opciones de la caja de herramientas.

Para alejar también se puede presionar Alt + Clic sobre el escenario con la herramienta Zoom.

Procedimiento 3

Teclado:

Acercar Ctrl + +

Alejar Ctrl + -Encajar a la ventana (Mostrar Fotograma) Ctrl + 2Visualización 100% Ctrl + 1

Procedimiento 4

Menú View - Magniication

Procedimiento 5

Otros procedimientos rápidos son:

Doble clic sobre la herramienta Mano = Mostrar Fotogramas Doble clic sobre la herramienta Zoom = Visualizar 100%

Ubicados en cualquier herramienta que no sea Mano y Zoom, puede utilizar las siguientes teclas:

Barra espaciadora = ManoCtrl + Alt + Barra espaciadora = Zoom para alejarCtrl + Barra espaciadora = Zoom para acercar


11

Estos atajos por teclado sólo funcionan con el teclado alfanumérico

MODO DE VISTA PREVIA

La opción contornos (outlines) muestra únicamente el trazo del objeto, rápido (fase) muestra los objetos de baja calidad, suavizado (antii-alias) muestra los objetos de buena calidad. Estas opciones se encuentran en el menú View – Preview Mode. Observe la diferencia en la calidad del trazo de cada una:

Outlines Fast Anti-Alias

Es útil para visualizar objetos que hay detrás

de otros

La pantalla se redibuja más rápido, es útil

cuando la película esté muy pesada

Muestra los objetos en su calidad original

OBJETOS EN FLASH CS3Flash acepta diferentes tipos de objetos, al seleccionarlo su nombre aparece en el panel propiedades. Estos son:

Identificación Descripción

Forma Objeto vectorial que se corta al sobreponerse con otras formas (Dibujos de fusión)

Objeto de dibujo Objeto vectorial que no se corta al sobreponerse con otros objetos

Rectángulo simple (primitive)

Rectángulo con posibilidad de redondear las esquinas

Óvalo simple (primitive)

Elipse con posibilidad de modificar el radio interior

Grupo Objetos agrupados

Mapa de bits Imágenes


12

Identificación Descripción

Mezclado Varios tipos de objetos

Gráfico Objeto convertido en símbolo gráfico

Clip de película Objeto convertido en símbolo clip de película

Botón Objeto convertido en símbolo botón

DIBUJO DE OBJETOS VECTORIALESLos objetos vectoriales en flash pueden ser creados utilizando dos modelos: modelo de dibujo de fusión y modelo de dibujo de objeto. En el primer caso el panel propiedades los identifica como forma y en el segundo caso como objeto de dibujo. Se utilizan con las herramientas: Lápiz, Línea, Pincel, Óvalo, Rectángulo y Polystar.

MODELO DE DIBUJO DE FUSIÓN (FORMAS)Este modelo tiene dos características:

1. Conjunto de vectorialesUna forma en Flash está compuesta por un conjunto de vectoriales, así, un rectángulo puede tener 4 líneas y un relleno (5 vectoriales, compuestos a su vez por otras pequeñas partes).

2. SuperposiciónAl dibujar formas que se superpongan a otras, las intersecciones serán cortadas por las nuevas formas. Esto es porque no actúan como entes completos según la característica anterior.

Según esto, las formas no pueden tener niveles de atrás y adelante; para organizarlas y trabajarlas independientemente existen algunas alternativas:

1. Convertirlas en objetos de dibujo2. Crear grupos3. Utilizar capas4. Crear símbolos

Convertir una forma de modelo de dibujo de fusión a modelo de dibujo de objeto:Menú Modify – Combine Objects – Union


13

Convertir una forma de modelo de dibujo de objeto a modelo de dibujo de fusión: Existen dos procedimientos: Menú Modify – Ungroup (Ctrl + Shift + G) Menú Modify – Break Apart (Ctrl + B)

MODELO DE DIBUJO DE OBJETO (OBJETO DE DIBUJO)

Para dibujar vectoriales con el modelo de dibujo de objeto se debe activar el icono.

Con esta opción los objetos no se cortan los objetos al sobreponerse.

EjemploDibujo de fusión (Forma) Dibujo de objeto

(Objeto de dibujo)Se corta con las demás formas

No se corta, aparece con un marco azul al seleccionarlo.

HERRAMIENTAS DE DIBUJO

Las herramientas de dibujo disponibles en flash son: línea, óvalo, rectángulo, lápiz, polystar, pincel, óvalo simple, rectángulo simple y pluma. Todas pueden ser utilizadas como dibujos de fusión o dibujos de objeto.

El procedimiento general para la creación de los objetos vectoriales es seleccionar la herramienta y arrastrar sobre el escenario.

Utilice Shift + Arrastar para crear un objeto proporcional, como por ejemplo un círculo o un cuadrado. También para líneas rectas de 0º, 45º y 90º.

Utilice Alt + Arrastrar para crear objetos vectoriales desde el centro. También puede combinar Shift + Alt + Arrastrar para crear figuras proporcionales desde el centro.


14

introducción a flash

Documents