Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.
Transcript of Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.
![Page 1: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/1.jpg)
Introducción a FlashPublicación de Mapas en InternetMaster en TIG, UAH, 2013-2014
![Page 2: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/2.jpg)
• 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
![Page 3: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/3.jpg)
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
![Page 4: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/4.jpg)
El entorno Flash (cs4)
BibliotecaY propiedades
Línea de tiempo
Espacio de trabajo / escenario
Herramientas
Barra de comandos
Escena / símbolo
Capas
Formato interfaz
![Page 5: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/5.jpg)
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
![Page 6: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/6.jpg)
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)
![Page 7: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/7.jpg)
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
![Page 8: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/8.jpg)
Fotogramas
![Page 9: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/9.jpg)
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…)
![Page 10: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/10.jpg)
Propiedades
• Permite ver y cambiar los atributos de un objeto seleccionado o del documento
![Page 11: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/11.jpg)
Biblioteca
• Almacena los símbolos• Edición de símbolos: dibujados (+ conversión a
símbolo) o importados (a biblioteca)
![Page 12: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/12.jpg)
Objetos de Flash
• Todo aquello que se dibuja o importa en Flash• Con borde y relleno• Pueden convertirse en símbolos
![Page 13: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/13.jpg)
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
![Page 14: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/14.jpg)
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
![Page 15: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/15.jpg)
Acciones
• Acción en la capa: afecta a la película• Acciones sobre los objetos; (sobre BOTÓN)
![Page 16: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/16.jpg)
Documentos y entorno
• Configuración• Reglas• Cuadrícula• Guías• Zoom…
…misma lógica que illustrator
![Page 17: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/17.jpg)
Técnicas de dibujo y escritura de textos
• Excepto… primitivos, trazos y rellenos independientes o unidos
…misma lógica que illustrator
![Page 18: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/18.jpg)
Transformar objetos
• Tamaño• Rotación• Efectos…
…misma lógica que illustrator
![Page 19: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/19.jpg)
Importar objetos
• Desde Illustrator– Importar a biblioteca
![Page 20: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/20.jpg)
Animaciones
• Tres tipos:– Fotograma a fotograma– Interpolación de forma– Interpolación de movimiento
![Page 21: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/21.jpg)
Videos tutoriales en Adobe
• https://helpx.adobe.com/creative-cloud/learn/start/flash.html
![Page 22: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/22.jpg)
Ejercicio 1• Acciones “play” y “stop” en botones
(tutoriales de Ssaipriya)https://www.youtube.com/watch?v=tU9OWTtDAMY
![Page 23: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/23.jpg)
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
![Page 24: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/24.jpg)
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();}
![Page 25: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/25.jpg)
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);}
![Page 26: Introducción a Flash Publicación de Mapas en Internet Master en TIG, UAH, 2013-2014.](https://reader036.fdocuments.net/reader036/viewer/2022070304/54d9f40b4979599e0a8b457e/html5/thumbnails/26.jpg)
Pasos principales (4)
14.Probar película
15.Exportar a película flash (.swf) para publicar en web