Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014

Introducción 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

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) Formato interfaz Barra de comandos Escena / símbolo Biblioteca Y propiedades Espacio de trabajo / escenario Herramientas Capas Línea de tiempo

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 …misma lógica que illustrator 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 …misma lógica que illustrator 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) Dibujo de objeto (bola) y conversión a símbolo gráfico Inserción de interpolación de movimiento en frame 1 Inserción de fotograma clave en frame 30 Arrastre del símbolo hasta nueva posición Probar película Crear nueva capa

Pasos principales (2) Añadir objeto (para botón) en la nueva capa Convertir objeto a símbolo botón Copiar y pegar 2 veces Añadir textos “play”, “pause” y “stop” Seleccionar botón “play” y darle acción “play”: on (release) { play(); }

Pasos principales (3) Seleccionar botón “pause” y darle la acción “stop” on (release) { stop(); } Seleccionar botón “stop” y darle la acción “ir al principio” y “stop” gotoAndStop(1);

Pasos principales (4) Probar película Exportar a película flash (.swf) para publicar en web