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.
PANEL PROPIEDADES VETANA BIBLIOTECA
TIMELINE
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. 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
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
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.
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
- 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
Actividad Recomendada
Nombre : Mi primera animación en Adobe Edge
Fuente: Adobe Edge canalTIC
Url:http://canaltic.com/blog/html/edge/adobeEdgeManualcanalTIC.pdf