especificaciones técnicas
Anuncio
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 Banner Estándar Otros aplicativos recomendados son: Adobe Animate (AN), Adobe Flash (FLA). Adobe animate cc Adobe Flash cc *Dar click en los logos Banner Estándar Google Web Designer 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: Anterior <a onclick="window.open(window.clickTag); return false" href="#!"> </a> Debe quedar de la siguiente manera: 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 Banner Estándar Adobe Animate cc 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: Anterior - index.fla - archivo.js - index.html - Carpeta images Volver al Menú Estándar - Carpeta libs 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> Anterior Debe quedar de la siguiente manera: 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 Banner Estándar Adobe Flash cc 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 Rich Media Google Web Designer *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: Anterior 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í 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. •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). Anterior Volver al Menú Rich Media Ver demo aquí Ver demo aquí MUCHAS GRACIAS
