Animaciones

BannerEstándar

BannerRich Media

BannerEstándar

El diseño para la animación estandar en HTML5 deberá ser realizado en Google Web Designer (GWD).

Otros aplicativos recomendados son:Adobe Animate (AN), Adobe Flash (FLA).

Adobe animate cc Adobe Flash cc

Google Web Designer

*Dar click en los logos

BannerEstándar

Google Web Designer

Volver al Menú Estándar Siguiente

GoogleWeb

Designer

Banner Estándar

ESPECIFICACIONES TÉCNICAS

SiguienteAnterior Volver al Menú Estándar

GoogleWeb

Designer

Banner Estándar

•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).

•Renombrar el componente área sensible como: ClickTag.

ESPECIFICACIONES TÉCNICAS

Ver demo aquí

Ver demo aquí

SiguienteAnterior Volver al Menú Estándar

GoogleWeb

Designer

Banner Estándar

•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).

ESPECIFICACIONES TÉCNICAS

Ver demo aquí

SiguienteAnterior Volver al Menú Estándar

GoogleWeb

Designer

Banner Estándar

PASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

SiguienteAnterior Volver al Menú Estándar

GoogleWeb

Designer

Banner Estándar

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:

PASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

SiguienteAnterior Volver al Menú Estándar

GoogleWeb

Designer

Banner 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:

SiguienteAnterior Volver al Menú Estándar

GoogleWeb

Designer

Banner Estándar

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.

PASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

Anterior Volver al Menú Estándar

BannerEstándar

Adobe Animate cc

Volver al Menú Estándar Siguiente

Banner EstándarAdobe

Animatecc

•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.

ESPECIFICACIONES TÉCNICAS

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobe

Animatecc

•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.

ESPECIFICACIONES TÉCNICAS

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobe

Animatecc

•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.

ESPECIFICACIONES TÉCNICAS

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobe

Animatecc

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

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobe

Animatecc

PASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobe

Animatecc

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>:

PASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobe

Animatecc

PASOS PARA IMPLEMENTAR EL CÓDIGO CLICKTAG

3. Insertar el código ClickTag:

Debe quedar de la siguiente manera:

<a onclick=”window.open(window.clickTag); return false” href=”#!”> </a>

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobe

Animatecc

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

BannerEstándar

Adobe Flash cc

Volver al Menú Estándar Siguiente

Banner EstándarAdobeFlash

cc

•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.

ESPECIFICACIONES TÉCNICAS

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobeFlash

cc

•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.

ESPECIFICACIONES TÉCNICAS

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobeFlash

cc

•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.

ESPECIFICACIONES TÉCNICAS

SiguienteAnterior Volver al Menú Estándar

Banner EstándarAdobeFlash

cc

•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).

ESPECIFICACIONES TÉCNICAS

Anterior Volver al Menú Estándar

BannerRich Media

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

Designer (GWD).

*Dar click en el logo

Google Web Designer

BannerRich Media

SiguienteVolver al Menú Rich Media

Google Web Designer

Banner Rich MediaGoogle

WebDesigner

•Peso máximo 2MB (con video hasta 10MB).

•Crear el proyecto de la siguiente manera:

1. Anuncio: Expandible.

2. Entorno: Anuncio que no es de Google.

3. Dimensiones: Personalizadas (960 x 35)

4. Diseño adaptable: Sin Check

ESPECIFICACIONES TÉCNICAS

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

6. Modo de expansión: Predeterminado.

7. Modo de animación: Avanzada.

Ver demo aquí

SiguienteVolver al Menú Rich MediaAnterior

Banner Rich MediaGoogle

WebDesigner

•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).

ESPECIFICACIONES TÉCNICAS

Ver demo aquí

SiguienteVolver al Menú Rich MediaAnterior

Banner Rich MediaGoogle

WebDesigner

•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).

ESPECIFICACIONES TÉCNICAS

Ver demo aquí

Ver demo aquí

Volver al Menú Rich MediaAnterior

MUCHAS GRACIAS