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
•
•
•
•
•
Configuración
Reglas
Cuadrícula
Guías
Zoom…
…misma lógica que illustrator
Técnicas de dibujo y escritura de textos
…misma lógica que illustrator
• Excepto… primitivos, trazos y rellenos
independientes o unidos
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/creativecloud/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 30
4. Arrastre del símbolo hasta nueva posición
5. Probar película
6. Crear nueva capa
Pasos principales (2)
7. Añadir objeto (para botón) en la nueva capa
8. Convertir objeto a símbolo botón
9. Copiar y pegar 2 veces
10.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
Descargar

Flash