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