Introducción a FlashPublicación de Mapas en InternetMaster en TIG, UAH, 2013-2014

• La cartografía interactiva y animada se compone de:– Textos– Gráficos (geometrías)– Capas (para la organización de los temas u otra

información)– Simbología– Interactividad– Movimiento

Introducción

Pasos principales

• Planificación y diseño• Elementos:– Gráficos vectoriales (menor espacio de

almacenamiento)– Textos– Información temática, capas de animaciones,

acciones y etiquetas– Simbología– Acciones

El entorno Flash (cs4)

BibliotecaY propiedades

Línea de tiempo

Espacio de trabajo / escenario

Herramientas

Barra de comandos

Escena / símbolo

Capas

Formato interfaz

Escenario

• Compuesto por los elementos que componen la película

• Área donde se representa el contenido de lo que se va a publicar

• El contenido se crea con el panel de herramientas o importando imágenes o vídeo

Línea de tiempo

• Organiza y controla el contenido del documento por medio de capas y fotogramas

Cabeza lectora (señala en el escenario el fotograma actual)

Fotograma

• Es un instante en la película (equivalente a un “frame”)

• Fotograma clave: usados para realizar un cambio en la película. Usados cuando hay interpolación de movimiento o interpolación de forma. Al insertar un fotograma clave, el contenido del fotograma anterior es traído a este nuevo punto de la película

Fotogramas

Capas

• Cada animación distinta irá en su propia capa• Todas las capas comparten la misma línea de

tiempo• (Añadir/borrar/renombrar/meter en

carpetas…)

Propiedades

• Permite ver y cambiar los atributos de un objeto seleccionado o del documento

Biblioteca

• Almacena los símbolos• Edición de símbolos: dibujados (+ conversión a

símbolo) o importados (a biblioteca)

Objetos de Flash

• Todo aquello que se dibuja o importa en Flash• Con borde y relleno• Pueden convertirse en símbolos

Símbolos

• Cada símbolo tiene su propia línea de tiempos• Se comportan como pequeñas películas

dentro de la película principal• Cuando un objeto es convertido en símbolo,

pasa a formar parte de la biblioteca

Símbolos - tipos

• Gráficos (objeto básico de Flash): empleados para animaciones por interpolación de movimiento

• Botones (para presionar): aportan la interacción a la película. Tienen su propia línea de tiempos con solo 4 fotogramas (reposo, sobre, presionado y zona activa)

• Clip de película: animación autónoma. Además permite interpolaciones de movimiento y emular la interacción de los botones

Acciones

• Acción en la capa: afecta a la película• Acciones sobre los objetos; (sobre BOTÓN)

Documentos y entorno

• Configuración• Reglas• Cuadrícula• Guías• Zoom…

…misma lógica que illustrator

Técnicas de dibujo y escritura de textos

• Excepto… primitivos, trazos y rellenos independientes o unidos

…misma lógica que illustrator

Transformar objetos

• Tamaño• Rotación• Efectos…

…misma lógica que illustrator

Importar objetos

• Desde Illustrator– Importar a biblioteca

Animaciones

• Tres tipos:– Fotograma a fotograma– Interpolación de forma– Interpolación de movimiento

Videos tutoriales en Adobe

• https://helpx.adobe.com/creative-cloud/learn/start/flash.html

Ejercicio 1• Acciones “play” y “stop” en botones

(tutoriales de Ssaipriya)https://www.youtube.com/watch?v=tU9OWTtDAMY

Pasos principales (1)

1. Dibujo de objeto (bola) y conversión a símbolo gráfico

2. Inserción de interpolación de movimiento en frame 1

3. Inserción de fotograma clave en frame 304. Arrastre del símbolo hasta nueva posición5. Probar película6. Crear nueva capa

Pasos principales (2)

7. Añadir objeto (para botón) en la nueva capa8. Convertir objeto a símbolo botón9. Copiar y pegar 2 veces10.Añadir textos “play”, “pause” y “stop”11.Seleccionar botón “play” y darle acción “play”:

on (release) {play();}

Pasos principales (3)

12.Seleccionar botón “pause” y darle la acción “stop”

on (release) {stop();}

13.Seleccionar botón “stop” y darle la acción “ir al principio” y “stop”

on (release) {gotoAndStop(1);}

Pasos principales (4)

14.Probar película

15.Exportar a película flash (.swf) para publicar en web