INTRODUCCIÓN
¿Por qué Adobe Edge Animate?
La familia Adobe
Sobre este libro
Requisitos previos
Instalación de Adobe Edge Animate
Windows
Mac OS
Descargar los archivos de ejemplo
Los proyectos de ejemplo
Cómo utilizar los capítulos del libro
Recursos en línea
1. PRIMEROS PASOS
Comencemos
Crear y guardar una nueva composición
Espacio de trabajo
Escenario
Acercar o alejar
Cambiar las propiedades del Escenario
Nombrar la composición
Trabajar con elementos
Añadir un elemento
Colocar un elemento
Modificar el tamaño de un elemento
Cambiar el nombre de un elemento
Crear texto
Elementos superpuestos
Paneles Elementos y Línea de tiempo
Opciones Visibilidad y Bloqueo
Añadir movimiento
Animación
Insertar el fotograma clave inicial
Modos Fotograma clave automático y Transición automática
Previsualizar el movimiento
Vista previa en Edge Animate
Vista previa en el navegador
Continuar y modificar el movimiento
Insertar fotogramas clave adicionales
Eliminar fotogramas clave y propiedades
Mover fotogramas clave para cambiar el ritmo
Mover fotogramas clave para cambiar la duración
Siguientes pasos
2. CREAR GRÁFICOS E IMPORTAR IMÁGENES Y FUENTES
Comencemos
Formatos gráficos
Trabajar con mapas de bits
Importar la imagen de fondo
Modificar la opacidad
Importar la hoja de árbol
Trabajar con gráficos vectoriales
Importar gráficos vectoriales
Redimensionar elementos
Crear elementos HTML
Crear un rectángulo
Modificar rectángulos
Redondear las esquinas
Crear esquinas redondeadas asimétricas
Inclinar el rectángulo
Herramienta rectángulo redondeado
Cambiar el color, la opacidad o el borde
Trabajar con reglas y guías
Utilizar reglas guías
Editar las guías
Utilizar guías inteligentes
Crear texto
Agregar etiquetas
Aplicar estilo al texto
Duplicar el texto
Editar el texto
Crear texto con ancho fijo inicial
Incrustar fuentes personalizadas
Añadir una fuente Web a la Biblioteca
Aplicar una fuente Web
Perfeccionar el texto
Ordenar los elementos
Alinear elementos
Organizar los elementos
Agrupar elementos
Distribuir elementos
Modificar y editar grupos
Añadir efectos especiales
Aplicar sombras paralelas
Rotaciones
Rotar elementos
Cambiar el centro de rotación
Animar una rotación
3. DISEÑAR LA ANIMACIÓN
Comencemos
Sobre la animación
Archivos del proyecto
Animar la posición con el Pin
Importar la imagen de fondo
Utilizar el Pin para crear fotogramas clave
Añadir el título en movimiento
Añadir una fuente Web
Cambiar el ritmo y la duración
Cambiar la duración de la animación
Añadir tiempo
Cambiar el ritmo de la animación
Activar y desactivar la visualización
Ocultar a Aquiles
Hacer aparecer a Aquiles
Animar la escala
Cambiar la escala de un elemento
Cambiar el origen de la transformación
Crear el efecto desvanecimiento
Animar un cambio de opacidad
Animar un efecto desvanecimiento de entrada
Opciones del panel Línea de tiempo
Acercar y alejar la Línea de tiempo
Contraer y ocultar elementos en la Línea de tiempo
Intercambiar activos
Sustituir una imagen
Copiar y pegar animaciones
Copiar animaciones
Pegar animaciones
Añadir aceleración para completar el movimiento
Aceleración y desaceleración
Añadir desaceleración
Añadir desaceleración a un cambio de escala
Editar la duración
Modificar la duración total
Editar animaciones seleccionadas
4. COMPLETAR LA ANIMACIÓN Y AÑADIR COMPLEJIDAD
Comencemos
Símbolos
Crear animaciones anidadas
Convertir elementos en símbolos
Crear animaciones dentro de los símbolos
Salir del modo edición de símbolo
Animar símbolos en el Escenario
Crear la cinta
Transformar el símbolo
Rotar dos elementos alrededor de un punto central común
Animar la cinta y el rollo
Crear una animación en bucle
Añadir un activador a la Línea de tiempo de un símbolo
Instancias de símbolo
Añadir instancias adicionales de un símbolo
Transformar la segunda instancia del símbolo
Añadir la segunda animación
Comandos de reproducción
Detener una animación anidada
Reproducir una animación anidada
Editar los comandos de reproducción
Editar símbolos
Modificar los gráficos del rollo de cinta
Opciones de símbolo
Añadir los personajes
Añadir las imágenes
Animar las imágenes
Recortar
Añadir el cartel con el título
Cambiar la propiedad Recortar
Sombras
Crear una sombra paralela
Aceleraciones avanzadas
Importar símbolos
Añadir los elementos finales
Crear movimiento de rebote
Retoques finales
5. AÑADIR INTERACTIVIDAD BÁSICA
Comencemos
Composiciones interactivas
JavaScript
Dónde reside JavaScript
jQuery y la API de Edge Animate
Activadores, eventos y acciones
Activadores de la Línea de tiempo
Crear un bucle
Editar activadores
Sintaxis
Eventos y acciones
Crear los botones
Añadir las miniaturas
Añadir los eventos
Añadir las acciones
Completar la interactividad
Navegar por el panel Código
Ver el código
Crear etiquetas
Añadir etiquetas
Editar etiquetas
Cambiar las referencias en la Línea de tiempo
Añadir respuesta visual
Añadir las miniaturas mouseover
Ocultar las miniaturas mouseover
Insertar el evento mouseover
Insertar el evento mouseout
Editar el evento click
Personalizar el cursor del ratón
Cursor con forma de mano
Controlar elementos animados
Añadir el botón y el símbolo animado
Reproducir la animación de un símbolo
Restablecer la animación del símbolo
6. INSERTAR CONTENIDO MULTIMEDIA E INTERACTIVIDAD AVANZADA
Comencemos
Insertar contenido multimedia
Crear un elemento para el mapa
Agregar eventos al Escenario
Agregar un mapa de Google
Mostrar contenido multimedia insertado
Crearlos el contenedor, la cobertura y el botón
Agregar el vídeo de YouTube
Mostrar el vídeo y la cobertura
Eliminar contenido multimedia
Eliminar el vídeo YouTube
Ocultar el vídeo y la cobertura
Añadir hipervínculos
Añadir un hipervínculo a un botón de página principal
Añadir contenido HTML
Reemplazar texto
Establecer hipervínculos en el texto
Eventos del teclado
Añadir un evento keydown
Gestionar la lógica con condicionales
Establecer comparaciones
Códigos de tecla
Utilizar variables
Crear variables
Modificar variables
Imponer límites
Añadir más interactividad a la presentación
Concatenación
Bucles
Modificaciones finales
7. PUBLICACIÓN Y DISEÑO CON CAPACIDAD DE RESPUESTA
Comencemos
Publicar la composición
Publicar para la Web
Opciones de publicación
Escenario de nivel inferior
Crear el Escenario de nivel inferior
Guardar una imagen de póster
Modificar la imagen de póster
Añadir un hipervínculo
Precargadores
Añadir un precargador
Insert
Adobe Edge Animate permite a los diseñadores y animadores el desarrollo Web con HTML5, CSS3 y JavaScript, ofreciendo una interfaz intuitiva y fácil de usar. Con este libro oficial descubrirá cómo crear contenido interactivo y animado para la Web, que se ejecute sin complicaciones en ordenadores, smartphones y tabletas.
Este libro es la forma más completa de aprender Adobe Edge Animate. La colección de Diseño y Creatividad incluye los principales programas desarrollados por Adobe y ofrece lo que nadie más puede hacer: contenidos creados por los propios expertos de Adobe, los mismos que han desarrollado los programas. Esto otorga un valor añadido a la serie y la aconseja para cualquier tipo de curso.
Aprenda a crear formas, a hacer transformaciones y a añadir tipografía creativa en sus diseños con herramientas intuitivas. Cree gráficos asombrosos con movimiento, incluyendo fotogramas clave, y añada complejidad a sus animaciones. Integre interactividad con JavaScript. Realice de forma sencilla diseño Web adaptativo. Todo se encuentra en las 7 lecciones de este libro; más trucos y técnicas para incrementar la eficiencia. En la página Web de Anaya Multimedia, www.anayamultimedia.es, encontrará material complementario para desarrollar los ejercicios.
