Animaciones Banner Banner Estándar Rich Media El diseño para la animación estandar en HTML5 deberá ser realizado en Google Web Designer (GWD). Google Web Designer Banner Otros aplicativos recomendados son: Adobe Animate (AN), Adobe Flash (FLA). Estándar Adobe animate cc Adobe Flash cc *Dar click en los logos Banner Google Web Designer Estándar Volver al Menú Estándar Siguiente Banner Estándar Google Web Designer ESPECIFICACIONES TÉCNICAS Anterior Volver al Menú Estándar Siguiente Banner Estándar 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í Anterior Volver al Menú Estándar Siguiente Banner Estándar 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). Anterior Volver al Menú Estándar Siguiente Banner Estándar Google Web Designer PASOS para ImplementaR EL CÓdigo CLICKTag Anterior Volver al Menú Estándar Siguiente Banner Estándar 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: Anterior Volver al Menú Estándar Siguiente Banner Estándar 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: Anterior Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Adobe Animate cc Banner Estándar Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Siguiente Banner Estándar Adobe Animate cc ESPECIFICACIONES TÉCNICAS • Los Materiales importados de Illustrator no deben contener máscaras. • Enviar los siguientes archivos comprimido: - index.fla - archivo.js - Carpeta libs - index.html - Carpeta images Anterior Volver al Menú Estándar Siguiente Banner Estándar Adobe Animate cc PASOS para ImplementaR EL CÓdigo CLICKTag Anterior Volver al Menú Estándar Siguiente Banner Estándar 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>: Anterior Volver al Menú Estándar Siguiente Banner Estándar 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: Anterior Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Adobe Flash cc Banner Estándar Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Siguiente Banner Estándar 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. Anterior Volver al Menú Estándar Siguiente Banner Estándar 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). Anterior Volver al Menú Estándar El diseño para la animación Rich Media en HTML5 deberá ser realizado en Google Web Designer (GWD). Banner Google Web Designer Rich Media *Dar click en el logo Google Web Designer Banner Rich Media Volver al Menú Rich Media Siguiente 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. 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 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í Anterior Volver al Menú Rich Media Siguiente Banner Rich Media Google Web Designer ESPECIFICACIONES TÉCNICAS • Renombrar el componente área sensible como: ClickTag. Ver demo aquí • 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). Anterior Volver al Menú Rich Media MUCHAS GRACIAS.