Act 1 AEA
0 recomendaciones324 vistas
Edge Anime permite crear animaciones para la web usando textos e imágenes. Proporciona paneles para añadir elementos, definir sus propiedades y posicionarlos a lo largo de una línea de tiempo. El documento explica cómo crear una animación básica mostrando el texto "Grand Prix" mientras un automóvil da la vuelta a una portada, usando fotogramas clave para controlar la posición y rotación de los objetos a través del tiempo.
Act 1 AEA
- 1. 1.1 Què es Edge Anime Es una aplicación perteneciente a la suite Adobe y que permite por medio a textos e imágenes tener en cuenta su distribución espacial y temporal en la creación de animaciones para la web adaptada al nuevo estándar con tecnología HTML5, CSS3 y Javascript. 1.2 Entorno La ventana de "Biblioteca" permite ir añadiendo los elementos gráficos que vayamos a utilizar Panel “propiedades” define las opciones de posicionamiento, transformación, posición y tamaño para el e elemento activo o del escenario. Panel “Elementos” Muestra los distintos elementos que forman la animación y que aparecen en el escenario El panel de la línea de tiempo, muestra todos los elementos situados en el escenario superpuesto por capas a lo largo del tiempo de la animación denotado por miliseguntos.
- 2. PANEL PROPIEDADES VETANA BIBLIOTECA TIMELINE
- 3. 1.3 Para saber màs Desbordamiento:(P. Propiedades) Determina como quedaran los elementos fuera del escenario. Elemento: Objeto importado o creado debe tener un nombre único Símbolo: La agrupación de elementos formando objetos especiales Fotogramas clave: Puntos de inicio y final para un objeto que cambia a lo largo de la línea de tiempo Automòvil en movimiento 1. Guardar archivo: Crear una carpeta con el nombre “Proyecto 1” y allí guardar el archivo llamado “Proyecto” con el tipo html, es importante guardar periódicamente el trabajo, el programa mostrara un asterisco * como recordatorio de la acción de guardar y se almacenarà todos los archivos formados . 2. Cambio de propiedades al escenario: En el panel Propiedades se ingresara - Color: negro - Titulo de barra navegador: ”Proyecto” - Medidas - Ancho: 500 Alto: 300 (en pixeles) 3. Creando un objeto figura: Pulsar en la Barra herramienta, se usará el rectángulo de color rosa degradado a blanco y con contorno blanco y situarlo sobre la mitad del escenario de manera vertical, observando en el panel propiedades sus valores para corregirlos de ser necesario
- 4. 4. Cambio de nombre al objeto: El objeto aparece con el nombre rectángulo tanto en el panel elementos como en la línea de tiempo y se hará cambio a “Portada” 5. Introduciendo elemento texto: Nuevamente en la Barra herramientas se pulsa ahora sobre herramienta texto y se clickea sobre el escenario se digita “Grand Prix” y en el panel propiedades se dan las suguientes pautas Nombre: Texto-Logo Tamaño: 20 Color: Amarillo Alineado en el centro del escenario 6. Solapar objetos: En el panel elementos se intercambian Texto-logo y Portada, ascendiendo a logo para esconderlo detrás del objeto Portada 7. Animación de un objeto: Mostrar logo
- 5. Seleccionar objeto a trabajar: Se aísla (con icono ojo) el elemento “portada” pues al no necesitarse se debe bloquear desde el panel de elementos y allí mismo se selecciona elemento a trabajar es decir, “Texto-logo”. Insertar fotograma clave inicial: En el panel línea de tiempo se observa la cabeza lectora ubicada en el punto 0:0 del objeto seleccionado, se le añade un fotograma clave en el panel de propiedades para X, apareciendo una etiqueta nombrada como “izquierda” en la línea de tiempo junto con un numero que se debe dejar en cero, que son los pixeles de distancia hacia el inicio del escenario Insertar fotograma clave final: Se mueve la cabeza lectora medio segunda adelante o pulsando doble click en el visor de la línea de tiempo y colocando 00:00,500. Seleccionar el elemento “logo” y desde el panel elemento se deja visible el elemento “portada” pero con bloqueo (icono candado) para evitar que se mueva éste, ahora se desplaza el “logo” solo horizontalmente hasta el final del escenario (pulsando al tiempo la tecla Mayúsculas para evitar que se mueva en la otra componente) con ello automáticamente muestra la distancia recorrida 200 px, al soltar el “logo” en su posición final aparece automáticamente el fotograma. (Como hubo cambio en el objeto el fotograma se creó automáticamente) Probar con el botón de control de reproducción “Play”, o pulsando la barra espaciadora Pre visualizar en el navegador: Control+ Enter
- 6. 8. Animación de un objeto: Mostrar logo y mantenerlo durante un segundo Añadir un fotograma clave intermedio: Se mueve la cabeza lectora hasta 00:1,500. Y ahora se pulsa en el icono de rombo de la línea de tiempo se crea un nuevo fotograma clave en el lugar de la cabeza lectora y el objetivo de este fotograma es que se mantenga el efecto del fotograma anterior, es decir visible el logo (Como no hubo cambio en el objeto el fotograma se tuvo que crear manualmente). Añadir un fotograma clave final: Se mueve la cabeza lectora hasta 00:2,000.Se pulsa sobre la tecla mayúscula y se mueve el logo hasta que salga completamente del escenario Probar con el botón de control de reproducción “Play”, o pulsando la barra espaciadora Pre visualizar en el navegador: Control+ Enter 9. Cambiar el ritmo de la animación para conseguir mayor o menor lentitud en la reproducciòn Colocar el cursor sobre el fotograma clave final de la primera animación, el cursor cambia y se clickea sobre el botón izquierdo y se arrastra hacia la derecha para ampliar el tamaño de la animación logrando que la animación tarde mas tiempo asi mismo hacer ampliación para todos los fotogramas hasta completar 00:4,000 para la totalidad de la animación distribuida con aparición rápida y desaparición lenta 10. Cambiar la sincronización de la animación para conseguir que empiece en un momento diferente Se selecciona la primera animación (por defecto toma los fotogramas inicio y final de la misma) y se hace click sobre ella, se mueve el cursor sobre la animación cambiando su posición no su duración . En el resultado primer tiempo ahora no pasa nada.
- 7. 11. Importar elementos “Se pueden importar otros objetos como audios grabados o descargados en formato mp3, teniendo en cuenta el tiempo de duración, si la animación donde se va a incorporar el audio dura 3 ms el audio debe durar lo mismo y ser insertados dentro de los fotogramas claves”. Importar el objeto de imagen “Vehículo” en formato png verificar en panel las propiedades visible y div. 12. Fotogramas automáticos - Seleccionar el objeto “vehículo” en la posición inicial y se pulsa en el icono “toggle pin o alternar pin“que está en la línea de tiempo y activar. - Desplazar el cabezal los ms que se estime que dura la acción del auto (correr en línea recta hasta la esquina), a su vez se arrastra manualmente el automóvil hasta la esquina de forma horizontal. - Indicar que el auto va a tener una rotación a través del icono rotaciòn en propiedades generar el giro (hacia abajo) y automáticamente se crea un fotograma de rotación
- 8. - Se visualiza la rotación desde el principio por lo cual es necesario minimizar el tiempo del fotograma de rotación. - Crear un fotograma clave en el eje y en el panel propiedades, desplazar el cabezal el tiempo que se estime que dura la acción (correr en línea recta hasta la esquina) luego se mueve el auto en posición vertical hacia abajo hasta la esquina, - Devolver un poco el cabezal y crear un fotograma de rotación, girar el auto (hacia la izquierda) - Crear un fotograma clave en el eje x y desplazar el cabezal el tiempo que se estime que dura la acción (correr en línea recta hasta la esquina) luego se mueve el auto en posición horizontal hacia la izquierda ………………………… Nota: Recrear la actividad de manera que permita visualizar repetidas veces la entrada del texto “Grand prix” mientras el automóvil da la vuelta a la portada hasta llegar a la meta como se ve en la figura a continuaciòn
- 9. Actividad Recomendada Nombre : Mi primera animación en Adobe Edge Fuente: Adobe Edge canalTIC Url:http://canaltic.com/blog/html/edge/adobeEdgeManualcanalTIC.pdf