Animaciones. Banner Estándar. Banner Rich Media

Transcripción

1 Animaciones Banner Estándar Banner Rich Media

2 El diseño para la animación estandar en HTML5 deberá ser realizado en Google Web Designer (GWD). Google Web Designer Banner Estándar Otros aplicativos recomendados son: Adobe Animate (AN), Adobe Flash (FLA). Adobe animate cc Adobe Flash cc *Dar click en los logos

3 Banner Estándar Google Web Designer

4 Google Web Designer ESPECIFICACIONES TÉCNICAS

5 Google Web Designer 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í

6 Google Web Designer ESPECIFICACIONES TÉCNICAS La animación debe contener el evento Loop. Ver demo aquí Enviar el archivo ZIP exportado. Si se solicita cambios o adaptación será necesario que envíen la carpeta del proyecto (comprimido).

7 Google Web Designer Pasos para ImplementaR el Código ClickTag

8 Google Web Designer 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:

9 Google Web Designer 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:

10 Google Web Designer 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.

11 Banner Estándar Adobe Animate cc

12 Adobe Animate cc 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.

13 Adobe Animate cc 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.

14 Adobe Animate cc 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.

15 Adobe Animate cc 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

16 Adobe Animate cc Pasos para ImplementaR el Código ClickTag

17 Adobe Animate cc 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>:

18 Adobe Animate cc 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:

19 Adobe Animate cc 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.

20 Banner Estándar Adobe Flash cc

21 Adobe Flash cc 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.

22 Adobe Flash cc 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.

23 Adobe Flash cc 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.

24 Adobe Flash cc 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).

25 El diseño para la animación Rich Media en HTML5 deberá ser realizado en Google Web Designer (GWD). Banner Rich Media Google Web Designer *Dar click en el logo

26 Banner Rich Media Google Web Designer Volver al Menú Rich Media

27 Banner Rich Media Google Web Designer ESPECIFICACIONES TÉCNICAS 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 5. Dimensiones (expandido): Personalizadas (960 x 400) 6. Modo de expansión: Predeterminado. 7. Modo de animación: Avanzada. Ver demo aquí Volver al Menú Rich Media

28 Banner Rich Media Google Web Designer 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í Volver al Menú Rich Media

29 Banner Rich Media Google Web Designer ESPECIFICACIONES TÉCNICAS Renombrar el componente área sensible como: ClickTag. La animación debe contener el evento Loop. Ver demo aquí Ver demo aquí Enviar el archivo ZIP exportado. Si se solicita cambios o adaptación será necesario que envíen la carpeta del proyecto (comprimido). Volver al Menú Rich Media

30 MUCHAS GRACIAS