Facebook Twitter YouTube
Busca cursos con vídeo:


En este vídeotutorial se explican algunas de las funcionalidades más importantes de Adobe Edge, una nueva apuesta de Adobe diseñada para la creación de animaciones web y otros contenidos interactivos.

Esta aplicación, permite crear contenidos para la web, utilizando lenguajes de programación como HTML5, CSS y JavaScript, sin la necesidad de utilizar Flash.

Para utilizar el Adobe Edge debemos tenerlo instalado en nuestra PC, una vez hecho esto abrimos el programa. En el centro encontramos el pre visualización del proyecto que vamos a realizar. Luego, al lado izquierdo encontramos las propiedades del elemento seleccionado; del lado derecho encontramos los elementos que vamos dibujando; y en la parte inferior, tenemos la línea de tiempo, en la cual vamos a ir creando nuestras animaciones. En la parte superior izquierda de la pantalla encontramos herramientas muy simples de dibujo.

Iniciamos utilizando la herramienta del rectángulo, luego con la herramienta de texto seleccionada comenzamos a escribir el contenido que deseemos. Un dato importante: tenemos la opción de no grabar en la línea de tiempo, la puedes utilizar si deseas que aún no se vaya grabando lo que estas realizando.

Mientras vamos creando nuestro texto, podemos ver que éstos se van quedando por separado en la paleta de elemento, así cada elemento que vayamos agregando lo podremos animar individualmente.

 Una vez tenemos listo nuestro proyecto, colocamos cada elemento que hemos realizado de manera dispersa en la pantalla. Podemos cambiar la opacidad de las letras si deseamos, o también aclarar los tonos que le hemos puesto. Luego empezamos ya con la animación de cada elemento.

En la línea del tiempo encontramos la opción de “keyframes”, damos un clic y podemos ver como aparecen cada uno de los elementos que hemos realizado, nuevamente damos clic en uno de los elementos, por ejemplo el rectángulo que realizamos, y en la ventana de propiedades, encontramos la opción de “location”, le insertamos el keyframes que hemos elegido, y automáticamente en la línea del tiempo vemos como aparece un fotograma clave, desplazamos la línea de tiempo al lado derecho, y después vamos a la parte central de la pantalla, nuevamente arrastramos el rectángulo al centro de la pantalla y como tenemos activado el auto keyframe, automáticamente se anima el rectángulo.

Así, de esta forma, hemos realizado una animación sencilla. Siguiendo estos pasos, podemos terminar la animación del resto de los elementos; también podemos hacer algunos cambios en los elementos, como jugar con los niveles de opacidad, cambiar la tipografía, etc.


Sobre el curso

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratará tus datos para realizar acciones promocionales (vía email y/o teléfono).
En la política de privacidad conocerás tu derechos y gestionarás la baja.

¿Quieres ser el primero en opinar sobre el curso Animaciones en HTML5, CSS3 y JavaScript. Adobe Edge?


Otros cursos con vídeo
Curso vídeo Flash. Como subir animaciones a youtube

Flash. Como subir animaciones a youtube

Categoría: Informática
638 alumnos
12/04/11
Curso vídeo Hacer diapositivas. Efectos y animaciones

Hacer diapositivas. Efectos y animaciones

Categoría: Informática
570 alumnos
15/09/11
Curso vídeo Tutorial Flash (animaciones). Efecto humo

Tutorial Flash (animaciones). Efecto humo

Categoría: Informática
2.640 alumnos
04/05/10
¿Qué es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail