TUTORIAL BANNERS EDGE

TUTORIAL BANNERS EDGE

Mucha gente tiene altas expectativas de los nuevos HTML5 y sus variaciones significativas respecto a las versiones anteriores. Por otra parte, someeven decir que la nueva tendencia en HTML pueden competir con las grandes herramientas de medios ricos, tales como Flash.

Si bien la capacidad de Flash son más potentes y más extensible que la versión actual de HTML5, no veo cómo podría competir con Flash. Creo que ambos tienen su propio nicho en el mercado, lo que voy a tratar de abarcar en un artículo adicional en los siguientes puestos.

Edge es una de las herramientas de Adobe nuevos y prometedores que hacen que sea possibleto crear animaciones HTML5 a través de una línea de tiempo y una interfaz similar a otras aplicaciones de Adobe, como After Effects. Por lo tanto, hace que la creación de animación HTML5 muy fácil para los diseñadores que no tienen ninguna experiencia con la codificación, y les permite crear animaciones HTML5 sin tener que escribir una sola línea de código.

En este tutorial, voy a tratar de mostrar cómo crear una animación aHTML5 bandera en el borde de Adobe con la animación de línea de tiempo.

Puede consultar la vista previa de final de la bandera de HTML5 animación haciendo clic en el enlace de abajo:

Vista previa de animación HTML5 bandera

Antes de comenzar el tutorial, tendrás que descargar el programa Adobe Edge desde Adobe Labs en el siguiente enlace:

http://labs.adobe.com/technologies/edge/

Además, tendrá que tener un conocimiento básico de cómo se utiliza la animación en cualquiera de las herramientas de Adobe, como Photoshop, After Effects o Flash.

Puede descargar el archivo de origen y el ejemplo de HTML5 a través del botón de descarga al final del tutorial.

Paso 1

Ahora, vamos a empezar con la instalación y la apertura de Adobe Edge. En el menú Archivo, seleccione Nuevo archivo. En el panel Propiedades de la izquierda, establezca la anchura del documento a 550 píxeles y la altura a 150 px.

Paso 2

Abra el selector de color de fondo y poner el fondo en gris claro. Además, el conjunto de desbordamiento en Oculto para ocultar los objetos que están fuera de la pantalla.

Paso 3

Seleccione Importar en el menú Archivo y abra la PS.JPG, un icono de Photoshop con 100px x 100px, y colocarlo en la bandera como se ve a continuación.

Paso 4

Utilice la herramienta Texto para escribir "Photoshop", como a continuación. Aumentar las dimensiones del área de texto arrastrando los bordes y cambiar el tamaño a 55px.

Paso 5

Ahora, vamos a animar el icono de Photoshop y el texto a través de la línea de tiempo. La línea de tiempo de Adobe Edge es similar a otras aplicaciones de Adobe, como After Effects. Cuando se crea un objeto en el escenario, usted encontrará que una capa separada se crea para él en la línea de tiempo.

Cada capa tiene sub-capas que incluyen las propiedades de cada capa. Con el fin de crear la animación, tendremos que crear fotogramas clave que representan el cambio en las propiedades de contenido de capa, como el tamaño y posición.

En este ejemplo, haremos clic en la flecha junto al icono de la imagen de Photoshop para extender las capas sub-. Observe que sólo hay dos sub-capas para controlar las posiciones X e Y para la imagen.

Paso 6

Con el indicador de tiempo situado en el comienzo de la línea de tiempo, mueva el icono de imagen de Photoshop a la parte superior del escenario como

...