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
Top Related