Share
El desarrollo de banners flash a menudo está plagado de múltiples archivos, código fragmentado y líneas de tiempo desordenadas. Este tutorial le mostrará cómo puede crear una plantilla de proyecto que le sirva como una base sólida que le ayudará a desarrollar rápidamente banners robustos, lo que le permitirá centrarse en hacer realidad la idea creativa.
Al crear múltiples banners flash, una buena gestión de archivos es esencial para mantener su flujo de trabajo eficiente. Comience su plantilla de proyecto de banner creando la estructura de carpetas que se muestra a continuación:
Ahora vamos a crear un conjunto de plantillas de Photoshop para usar cuando empiece a diseñar una campaña de banner flash. (Si no tiene Photoshop, no se preocupe, puede pasar al Paso 5). El Interactive Advertising Bureau mantiene pautas de bloques de anuncios que enumeran las dimensiones comunes de los bloques de anuncios (banners). Para los propósitos de este tutorial, vamos a crear los tres más comunes:
Empecemos creando la plantilla para The Wide Skyscraper. Abra Photoshop y seleccione Archivo> Nuevo. Configure las propiedades para su nuevo documento de Photoshop como se muestra a continuación:
Para mantener las capas en su archivo de Photoshop tan estructuradas como las carpetas de su proyecto cuando sea el momento de producir un diseño de banner, vamos a agregar grupos de capas en el archivo de plantilla para contener los elementos de diseño principales.
Al utilizar Grupo nuevo en el menú en la esquina superior derecha del panel Capas, cree la estructura de Grupo de capas que se muestra a continuación:
El grupo de capas 'Fondo' contendrá elementos de diseño que se encuentran en el fondo de tu banner en todo momento, por ejemplo, un color o una textura..
El grupo de capas 'En primer plano' contendrá elementos de diseño que están en el primer plano de su banner en todo momento, como el logotipo de una empresa.
Los grupos de capas 'Marco' contendrán elementos de diseño de los momentos clave en su secuencia o interacción de banner flash. Esto podría incluir mensajes clave, puntos críticos de una animación o interfaces de usuario.
Ahora su plantilla está lista para guardar. Vaya a Archivo> Guardar como y navegue a la carpeta 'diseño' en la estructura de carpetas de su proyecto. Nombre el archivo de acuerdo con sus dimensiones, en este caso '160x600' y asegúrese de que esté en formato Photoshop, con Capas verificadas.
¡Es tu primera fantástica plantilla de banner flash creada! Repita estos pasos para el rectángulo mediano (300px de ancho x 250px de alto) y The Leaderboard (728px x 90px de alto). Con estas plantillas de Photoshop completadas, estamos listos para pasar a Flash.
Comencemos creando un proyecto Flash para que pueda navegar por la estructura de sus archivos en el IDE de Flash. Abra Flash CS4 (el proceso es muy similar en Flash CS3 aunque la interfaz de Flash será diferente) y vaya a Ventana> Otros paneles> Proyecto. En el panel Proyecto, haga clic en el menú desplegable Proyectos y seleccione Nuevo proyecto. Especifique el nombre del proyecto como 'BannerTemplate'.
Para la carpeta raíz, navegue a la carpeta / banner_template / development / que creó en el Paso 1 usando el icono de carpeta. Asegúrese de que la versión de ActionScript esté establecida en ActionScript 3.0 y haga clic en Crear proyecto.
Ahora vamos a configurar las propiedades del Proyecto Flash para ayudar a Flash a hacer el trabajo de apagar nuestras clases por nosotros. Haga clic en el menú desplegable con el icono de engranaje en la esquina superior derecha del panel Proyecto y seleccione Propiedades del proyecto. Para el campo 'Guardar clases en', navegue a la carpeta / as / que creó en el Paso 1 y haga clic en Aceptar.
Si realizó el último paso correctamente, debería ver pequeños corchetes de código ahora en el icono de su carpeta / as /. Ahora vamos a crear una carpeta para todas las clases específicas de nuestras plantillas de banner. Seleccione la carpeta / as / y haga clic en el nuevo icono de carpeta en la parte inferior del panel. En el cuadro de diálogo que aparece, llame a su carpeta 'banner' y haga clic en Aceptar.
Ahora (¡por fin!) Está listo para crear su clase de documento base de banner. Si no está familiarizado con el uso de clases de documentos (o clases en general), es una buena idea leer este consejo rápido primero.
Con la carpeta / as / banner / seleccionada, haga clic en el icono Crear clase en la parte inferior del panel. En el campo Clase, agregue el nombre de la clase 'Banner' después del nombre del paquete 'banner'. y haga clic en Crear clase.
Ahora necesitamos tomar este apéndice de clase y modificarlo a una clase de documento base funcional. Agregue al código ActionScript para reflejar el código que se muestra a continuación:
Accentsconagua
paquete banner import flash.display.MovieClip; public class Banner se extiende MovieClip // Constantes: // Propiedades públicas: // Propiedades privadas: private var config: Object; // Inicialización: función pública Banner (config: Object = null): void // Métodos públicos: public function init (): void trace ("Banner class initialized"); // Métodos protegidos: Vamos a cubrir rápidamente los cambios que hemos realizado en la clase Banner:
En este momento, esto no está haciendo mucho, pero lo importante aquí es construir una estructura de clase que nos permita centralizar la lógica del banner, reduciendo la repetición de código. Desde aquí, ahora podemos extender la clase Banner para crear nuestras clases de documentos de banner individuales..
Comencemos con el archivo de clase para The Wide Skyscraper. Cree una clase "WideSkyscraper" en su proyecto / as / banner / carpeta de Flash tal como lo hizo para la clase "Banner". Tome el código de código auxiliar de clase generado y añádalo para que se vea así:
paquete banner clase pública WideSkyscraper extiende Banner // Constantes: // Propiedades públicas: // Propiedades privadas: privado var config: Objeto; // Inicialización: función pública WideSkyscraper () super (); // Métodos públicos: función pública de reemplazo init (): void trace ("WideSkyscraper class initialized"); super.init (); // Métodos protegidos: Repasemos los cambios que hemos realizado en la clase WideSkyscraper:
Ahora repita este paso para crear las clases de documento de banner para MediumRectangle y Leaderboard. Una vez hecho esto, nuestra estructura de clases de documentos está ahora en su lugar.
Ahora podemos comenzar a crear los archivos .FLA que necesitamos. Nuevamente, comencemos creando la plantilla para The Wide Skyscraper (160x600).
Abra Flash CS4 y seleccione Archivo> Nuevo. Seleccione "Archivo Flash (ActionScript 3.0)" como el Tipo y haga clic en Aceptar. En el panel Propiedades, edite la configuración de Publicación y Propiedades como se muestra a continuación:
Ahora guarde su archivo como "160x600.fla" en la carpeta / desarrollo / de su proyecto.
Ahora vamos a establecer una ruta de origen relativa y una ruta de publicación relativa. Esto se vuelve importante cuando quiere hacer una copia de su proyecto de plantilla de banner, cambiarle el nombre y comenzar a trabajar, o cuando quiere darle la plantilla a otra persona. Las rutas absolutas pueden ser una verdadera molestia para actualizar (¡especialmente en múltiples archivos!) Cada vez que desee iniciar un proyecto.
Para configurar la ruta de origen, vaya a Archivo> Configuración de publicación y haga clic en la pestaña Flash. Ahora haga clic en el botón Configuración al lado del menú desplegable Script para abrir la ventana Configuración avanzada de ActionScript 3.0. Asegúrese de que Source Path sea la pestaña activa y haga clic en '+' para agregar la ruta './as'. Ahora puede agregar el texto 'banner.WideSkyscraper' en el campo Clase de documento. Tu ventana debería verse así:
Haga clic en Aceptar y su documento está ahora vinculado a la clase WideSkyscraper que creó en el Paso 9.
Para establecer la ruta de publicación, vaya a Archivo> Configuración de publicación y haga clic en la pestaña Formatos. No necesitamos el archivo HTML, así que desmarque esta casilla. En la ruta de publicación para el SWF, diríjase a la carpeta / www / en su carpeta de proyecto como se muestra a continuación. Si todo parece correcto, haga clic en Aceptar. Su archivo swf compilado ahora se colocará en la carpeta / www / cuando haga una vista previa o lo publique.
Hay un poco más de información sobre esto en este video de consejos rápidos.
Por alguna razón, algunos sistemas de publicación de anuncios requieren que el primer fotograma de su película esté en blanco (Eyeblaster es un ejemplo de esto), o para importar sus clases / incluir su ActionScript en el primer fotograma. A menudo, las extensiones Flash que puede instalar para estos sistemas de publicación de anuncios se negarán a empaquetar su archivo si no cumple con esta estipulación.
Aquí es donde entra la función init () que creó en su clase de documento. Para garantizar que nuestra plantilla se pueda usar en esta situación, vamos a crear una línea de tiempo de dos cuadros con el primer cuadro en blanco, el segundo con una parada Acción y una llamada a la función init () como se muestra a continuación:
Si compila este archivo ahora, debería obtener lo siguiente en su panel de salida, que confirma que la clase de documento WideSkyscraper y la clase de documento base de Banner funcionan:
Se inicializó la clase WideSkyscraper. Se inicializó la clase Banner.
Ahora vamos a crear un símbolo de biblioteca para contener la creatividad de banner, ya sea una animación o una interfaz. Vaya a Insertar> Nuevo símbolo y asígnele el nombre "creatividad", marque Exportar para ActionScript y asígnele la clase "Creatividad". Asegúrese de que el tipo sea Clip de película y haga clic en Aceptar.
Ahora agregue un texto de marcador de posición en el escenario como se muestra a continuación para que pueda ver algo cuando lo agregue a su escenario en el código más adelante:
Y eso es todo lo que necesitamos del archivo .FLA! Continúe y cree los otros .FLA para The Medium Rectangle (300 de ancho x 250 de alto) y The Leaderboard (728 de ancho x 90 de alto). Con esto en su lugar, podemos volver a visitar nuestra clase de documentos de Banner y comenzar a agregar la funcionalidad principal en todos estos banners.
Casi todas las pautas de banner le recomiendan colocar un color de fondo sólido en su archivo Flash, ya que el color de fondo del escenario se puede sobrescribir cuando el objeto Flash está incrustado en una página HTML. En lugar de ir a cada .FLA y dibujar una figura en el escenario, podemos centralizar esta tarea en código. Abra su clase Banner y actualice el archivo para reflejar el código que se muestra a continuación:
paquete banner import flash.display.MovieClip; importar flash.display.Sprite; importar flash.display.Graphics; clase pública Banner extiende MovieClip // Constantes: const. privada BG_COLOR: Número = 0x0E0E0E; // Propiedades públicas: // Propiedades privadas: private var config: Object; // Inicialización: función pública Banner (config: Object = null): void // Métodos públicos: public function init (): void trace ("Banner class initialized"); // Crear fondo var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Métodos protegidos: Vamos a resumir las modificaciones que hemos hecho a la clase Banner:
Ahora todo lo que necesita hacer es cambiar el valor de BG_COLOR para obtener el fondo de color correcto en todos sus banners.
Ahora debemos agregar el símbolo de creatividad que creamos en el Paso 14 a la lista de visualización, ya que este será el contenedor para la ejecución de la creatividad. Esto es realmente fácil de hacer, simplemente actualice la función init () a esto:
// Métodos públicos: public function init (): void trace ("Banner class initialized"); // Crear fondo var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Añadir creatividad var creative: Creative = new Creative (); addChild (creatividad); Otro requisito común es que el área en la que se puede hacer clic en el banner abra una nueva ventana basada en una variable "clicktag" que se pasa desde la página HTML cuando el objeto Flash está incrustado. Vamos a crear una clase de utilidad para manejar esto por nosotros. En el panel Proyecto Flash, navegue a su carpeta / as / banner / y cree una nueva subcarpeta llamada / util /. Cree una nueva clase aquí llamada 'ClickArea' y codifique esto como se muestra a continuación:
paquete banner.util import flash.display.Sprite; importar flash.display.Graphics; importar flash.display.Stage; import flash.events.MouseEvent; importar flash.net.URLRequest; importar flash.net.navigateToURL; la clase pública ClickArea extiende Sprite // Propiedades privadas: private var clickthroughURL: String; // Inicialización: función pública ClickArea (loaderInfo: Object, stage: Stage) // Crear un área en la que se puede hacer clic this.graphics.beginFill (0x00FF00,0); this.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); this.graphics.endFill (); // Determine el URL de clic (verificando las convenciones de nomenclatura conocidas) si (loaderInfo.parameters.clicktag! = Null) clickthroughURL = loaderInfo.parameters.clicktag; else if (loaderInfo.parameters.clickTag! = null) clickthroughURL = loaderInfo.parameters.clickTag; else if (loaderInfo.parameters.clickTAG! = null) clickthroughURL = loaderInfo.parameters.clickTAG; // Agregar el comportamiento del botón this.buttonMode = true; this.addEventListener (MouseEvent.CLICK, mouseClickHandler, false, 0, true); // Métodos públicos: // Métodos protegidos: función privada mouseClickHandler (e: MouseEvent): void if (clickthroughURL! = Null) navigationToURL (new URLRequest (clickthroughURL), "_ blank"); else trace ("Clickthrough"); Vamos a resumir rápidamente lo que está haciendo la clase ClickArea:
Ahora abre tu clase Banner nuevamente y agrega importar banner.util.ClickArea bajo su lista de importaciones de clase Flash y actualice la función init () para crear una instancia de ClickArea y agregarla a la lista de visualización como se muestra a continuación:
// Métodos públicos: public function init (): void trace ("Banner class initialized"); // Crear fondo var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Añadir creatividad var creative: Creative = new Creative (); addChild (creatividad); // Crear área seleccionable var clickArea: ClickArea = new ClickArea (loaderInfo, stage); addChild (clickArea); Estamos agregando los fundamentos básicos del desarrollo de banners en esta clase, pero el valor real aquí es que estamos agregando estos a todos nuestros banners en una clase centralizada. Aquí se pueden agregar todas las tareas comunes que realiza en repetidas ocasiones en los banners para liberar su tiempo y crear la animación o interacción única que tiene la creatividad del banner..
Con todo nuestro código bien organizado, abrir los .FLA individuales y publicarlos está empezando a parecer una molestia. La buena noticia es que también podemos automatizar esto. Vaya al panel Proyecto y marque la casilla junto a cada banner. Formato FLA (si no puede verlos en esta lista, haga clic en el menú desplegable con el ícono de engranaje y seleccione Actualizar) como se muestra a continuación:
Ahora puede publicar todos sus banners en la carpeta / www / que configuró en el Paso 12 haciendo clic en el menú desplegable con el ícono del engranaje y seleccionando Publicar proyecto.
El último elemento que debemos completar para finalizar nuestra plantilla de proyecto de banner es crear una página HTML para presentarlas para que se puedan mostrar a un cliente fácilmente. Descargue SWFObject y coloque swfobject.js en la carpeta / www /, luego cree un archivo HTML en el editor de su elección y escriba el código que se muestra a continuación:
Plantilla de firma de banner
Puede leer más sobre cómo usar SWFObject en la documentación en línea, pero vamos a cubrir rápidamente las cosas clave que estamos haciendo aquí:
Ahora guarde este archivo como index.html en la carpeta / www /. Ahora puede obtener una vista previa de sus banners en un navegador web o cargar esta carpeta en algún lugar para que su cliente vea:
Terminemos revisando nuestra estructura de carpetas rellenadas y asegurándonos de que todos los archivos estén en el lugar apropiado:
Ahora tienes una plantilla de proyecto con:
Este tutorial es realmente solo el comienzo. Identifique tareas recurrentes en sus proyectos de banner y personalice su plantilla de proyecto para abordarlas y acelerar el flujo de trabajo tanto como sea posible. Extiéndelo al incluir sus marcos livianos favoritos (TweenNano es ideal para animaciones con guión) y bibliotecas para que sus herramientas favoritas estén al alcance de su mano cuando comience su próximo proyecto..
Si usa Subversion o algún otro tipo de control de origen, este sería un gran proyecto para incluir en su repositorio para que pueda mejorarlo con el tiempo y consultar la última revisión de cada proyecto de banner que inicie..
¿Tiene ideas sobre cómo podría mejorarse esto o comentarios sobre problemas que dificultan el desarrollo de su banner? Únete a la discusión a continuación!
