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

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

2. 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

3. 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

4. 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

5. 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

6. 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)

7. 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

8. Fotogramas

9. 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…)

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

11. Biblioteca • Almacena los símbolos • Edición de símbolos: dibujados (+ conversión a símbolo) o importados (a biblioteca)

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

13. 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

14. 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

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

16. Documentos y entorno • Configuración • Reglas • Cuadrícula • Guías • Zoom… …misma lógica que illustrator

17. Técnicas de dibujo y escritura de textos • Excepto… primitivos, trazos y rellenos independientes o unidos …misma lógica que illustrator

18. Transformar objetos • Tamaño • Rotación • Efectos… …misma lógica que illustrator

19. Importar objetos • Desde Illustrator • Importar a biblioteca

20. Animaciones • Tres tipos: • Fotograma a fotograma • Interpolación de forma • Interpolación de movimiento

21. Videos tutoriales en Adobe • https://helpx.adobe.com/creative-cloud/learn/start/flash.html

22. Ejercicio 1 • Acciones “play” y “stop” en botones (tutoriales de Ssaipriya) https://www.youtube.com/watch?v=tU9OWTtDAMY

23. 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

24. 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(); }

25. 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” on (release) { gotoAndStop(1); }

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