PDF de programación - Animaciones HTML5

Animaciones

Banner
Estándar

Banner

Rich Media

El diseño para la animación estandar en HTML5

deberá ser realizado en Google Web Designer (GWD).

Google Web Designer

Otros aplicativos recomendados son:

Adobe Animate (AN), Adobe Flash (FLA).

Adobe animate cc

Adobe Flash cc

*Dar click en los logos

BannerEstándarGoogle Web Designer

Volver al Menú Estándar

Siguiente

BannerEstándarESPECIFICACIONES

TÉCNICAS

Anterior

Volver al Menú Estándar

Siguiente

GoogleWebDesignerBanner EstándarESPECIFICACIONES TÉCNICAS

• Peso máximo 150kb.
• Agregar el componente área sensible y colocarla sobre todas

las capas cubriendo todo el tamaño del banner (No incluir el
evento o link de destino).

Ver demo aquí

• Renombrar el componente área sensible como: ClickTag.

Ver demo aquí

Anterior

Volver al Menú Estándar

Siguiente

GoogleWebDesignerBanner EstándarESPECIFICACIONES TÉCNICAS

• La animación debe contener el evento Loop.
• Enviar el archivo ZIP exportado.
• Si se solicita cambios o adaptación será necesario que envíen la

Ver demo aquí

carpeta del proyecto (comprimido).

Anterior

Volver al Menú Estándar

Siguiente

GoogleWebDesignerBanner EstándarPASOS PARA IMPLEMENTAR EL

CÓDIGO CLICKTAG

Anterior

Volver al Menú Estándar

Siguiente

GoogleWebDesignerBanner EstándarPASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

1. Descomprimir el archivo exportado (NombreDelArchivo.zip).
2. Abrir el archivo con nombre index.html en un editor de códigos

HTML (Sublime Text, Dreamweaver).

3. Ubicar la línea de código del área sensible llamado ClickTag:

Anterior

Volver al Menú Estándar

Siguiente

GoogleWebDesignerBanner EstándarPASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

4. Insertar el código ClickTag:



<a onclick=”window.open(window.clickTag); return false” href=”#!”>
</a>
Debe quedar de la siguiente manera:

Anterior

Volver al Menú Estándar

Siguiente

GoogleWebDesignerBanner EstándarPASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

5. Ahora debemos guardar el archivo (CTRL + S o CMD + S)
6. Finalmente seleccionamos todos los archivos (Imágenes + html) y

comprimirlos en un ZIP.

7. Enviar este nuevo ZIP.

Anterior

Volver al Menú Estándar

GoogleWebDesignerBanner EstándarAdobe Animate cc

Volver al Menú Estándar

Siguiente

BannerEstándarESPECIFICACIONES TÉCNICAS

• Peso máximo 150kb.
• Realizarlo en HTML5 Canvas.
• El nombre del documento no debe contener espacios ni caracteres

especiales. (Muy Importante)

• Velocidad de la animación a 24 FPS.

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeAnimateccESPECIFICACIONES TÉCNICAS

• Textos convertidos a curvas.
• Antes de realizar la animación, cada objeto (texto, imágenes,

formas, etc) debe estar dentro de un clip de película.

• Las capas no deben contener Máscaras.

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeAnimateccESPECIFICACIONES TÉCNICAS

• No realizar efectos de difuminado o Blur.
• La animación debe realizarse con Movimiento Clásico o Classic Tween.
• Colocar un botón que cubra todo el tamaño del banner.
• La capa del botón debe estar encima de todas las capas de la

animación.

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeAnimateccESPECIFICACIONES TÉCNICAS

• Los Materiales importados de Illustrator no deben contener máscaras.
• Enviar los siguientes archivos comprimido:

- index.fla
- index.html

- archivo.js
- Carpeta images

- Carpeta libs

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeAnimateccPASOS PARA IMPLEMENTAR EL

CÓDIGO CLICKTAG

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeAnimateccPASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

1. Abrir el archivo HTML (NombreDelArchivo.html) en un editor de

códigos HTML (Sublime Text).

2. Ubicar la línea de código <canvas…canvas>:

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeAnimateccPASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

3. Insertar el código ClickTag:

<a onclick=”window.open(window.clickTag); return false” href=”#!”>
</a>
Debe quedar de la siguiente manera:



Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeAnimateccPASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG


4. Guardar el archivo con nombre index.
5. Seleccionar todos los archivos (Imágenes + html) y lo

comprimimos en un ZIP.

6. Enviar el archivo ZIP.

Anterior

Volver al Menú Estándar

Banner EstándarAdobeAnimateccAdobe Flash cc

Volver al Menú Estándar

Siguiente

BannerEstándarESPECIFICACIONES TÉCNICAS

• Peso máximo 150kb.
• Realizarlo en el Script AS2.
• No debe contener animación basada en códigos de AS2.
• Velocidad de la animación a 24 FPS.

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeFlashccESPECIFICACIONES TÉCNICAS

• Textos convertidos a curvas.
• Antes de realizar la animación, cada objeto (texto, imágenes,

formas, etc) debe estar dentro de un clip de película.

• Las capas no deben contener Máscaras.
• Las animaciones sin efectos de difuminado o Blur.

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeFlashccESPECIFICACIONES TÉCNICAS

• La animación debe realizarse con Movimiento Clásico o

Classic Tween.

• Colocar un botón en estado HIT que cubra todo el tamaño

del banner.

• La capa del botón debe estar encima de todas las capas de

la animación.

Anterior

Volver al Menú Estándar

Siguiente

Banner EstándarAdobeFlashccESPECIFICACIONES TÉCNICAS

• Al botón se le debe colocar el siguiente código en la ventana de

Acciones (código ClickTag).

• Los materiales importados de Illustrator no deben contener

máscaras.

• Enviar el archivo (.FLA y .SWF).

Anterior

Volver al Menú Estándar

Banner EstándarAdobeFlashccEl diseño para la animación Rich Media en
HTML5 deberá ser realizado en Google Web

Designer (GWD).

Google Web Designer

*Dar click en el logo

BannerRich MediaGoogle Web Designer

Volver al Menú Rich Media

Siguiente

BannerRich MediaESPECIFICACIONES TÉCNICAS

• Peso máximo 2MB (con video hasta 10MB).
• Crear el proyecto de la siguiente manera:

1. Anuncio: Expandible.

5. Dimensiones (expandido): Personalizadas (960 x 400)

2. Entorno: Anuncio que no es de Google.

6. Modo de expansión: Predeterminado.

3. Dimensiones: Personalizadas (960 x 35)

7. Modo de animación: Avanzada.

4. Diseño adaptable: Sin Check

Ver demo aquí

Anterior

Volver al Menú Rich Media

Siguiente

Banner Rich MediaGoogleWebDesignerESPECIFICACIONES TÉCNICAS

• Pueden usar todos los componentes que brinda Google Web

Designer.

• Colocar el componente área sensible sobre todas las capas

cubriendo todo el tamaño del banner (No incluir el evento o link de
destino).

Ver demo aquí

Anterior

Volver al Menú Rich Media

Siguiente

Banner Rich MediaGoogleWebDesignerESPECIFICACIONES TÉCNICAS

• Renombrar el componente área sensible como: ClickTag.
• La animación debe contener el evento Loop.
• Enviar el archivo ZIP exportado.
• Si se solicita cambios o adaptación será necesario que

envíen la carpeta del proyecto (comprimido).

Ver demo aquí

Ver demo aquí

Anterior

Volver al Menú Rich Media

Banner Rich MediaGoogleWebDesignerMUCHAS GRACIAS