Como Hacer Un Banner En Flash Cs5 503r23

Después de haber visto las diferentes formas de animar que hay en Adobe Flash CS5, que mejor forma de recordarlas que con un banner animado, el cual podemos utilizar para nuestra propia web, la de un amigo o incluso la de un cliente. En próximos tutoriales veremos como hacer banners que requieran de la intervención del y de esta forma crear una nueva modalidad de banners de publicidad. Antes de meternos en materia, debemos tener claro el resultado final del banner, así como las medidas del mismo. En mi caso suelo utilizar Photoshop para montar el banner de forma estática y separar las partes que voy a animar. Esta será nuestra plantilla:

Una vez tenemos la composición, tenemos que identificar que elementos vamos a animar y de que forma. En nuestro ejemplo vamos hacer que las cartas caigan aparezcan de arriba a abajo y en primer lugar las de la parte de atrás y después las de delante. Acto seguido aparecerá el texto de la izquierda y finalmente el texto de la derecha. La forma de animar el banner depende mucho de los elementos que aparezcan en el mismo y en función de cada uno, utilizará una forma de animar u otra.

Ahora si que abrimos el Adobe Flash CS5 y creamos un nuevo archivo de ActionScript 3. Una vez tenemos el archivo creado, vamos a la pestaña “Propiedades” o en el menú superior, vamos a Modificar -> Documento y establecemos el tamaño del banner. En nuestro caso será de 989 píxeles de ancho por 300 píxeles de alto y lo vamos a crear a 24 fotogramas por segundo (lo que viene por defecto)

Una vez tenemos nuestro archivo configurado, vamos a importar la composición final, ya que nos servirá como guía para ir creando las animaciones. Para ello, pulsamos en el menú Archivo -> Importar -> Importar a escenario o pulsamos Control + R (en Mac Comando + R) y seleccionamos el archivo.

Una vez tenemos la guía en el escenario, para que se nos centre de forma correcta en el mismo, pulsamos Control + K (en Mac Comando + K) y nos aparece el menú de alinear, desde el cual podemos establecer la alineación del elemento o elementos que tengamos seleccionados en este momento. En nuestro caso, seleccionamos la imagen y en el menú alinear, marcamos la casilla de “Alinear en escenario” y así lo podemos centrar tanto vertical como horizontálmente en el mismo. Para ello pulsamos los botones

y

Ahora que ya tenemos alineada la imagen guía, vamos a cambiarle el nombre a la capa donde tenemos la imagen guía y el tipo. Como nombre le podemos poner “Imagen guía” y como tipo “Guía”. Para poner una capa como guía, pulsamos el botón derecho sobre la capa y seleccionamos la opción Guía. las capas guía no aparecen en el resultado final cuando publicamos el archivo. Una vez hecho esto, vamos a importar el resto de imágenes, pero esta vez las vamos a importar a la Biblioteca ya que si seleccionamos Importar al escenario, aparecerían en la capa guía y si creamos una capa nueva y pulsamos importar al escenario, nos aparecerían todas las imágenes en la misma capa y nosotros queremos animar cada imagen de una forma, por lo que vamos a crear una capa por elemento animado. Así que en el menú, pulsamos Archivo -> Importar -> Importar a la biblioteca, seleccionamos todos los archivos y pulsamos Abrir. Para ver la Biblioteca pulsamos Control + L (en Mac comando + L) y veremos los elementos que tenemos en la misma.

Ya con los elementos en la Biblioteca, creamos una capa por elemento, y arrastramos cada elemento a su capa correspondiente y lo convertimos en un clip de película. En función del número de elementos tendremos más o menos capas, por lo que no vendría mal que fuéramos nombrando las capas para poder identificarlas mejor. Una vez tengamos los clips de película en el escenario

podemos ordenar las capas para hacer que un elemento esté por detrás de otro o por delante y así que cuando los animemos, no se tapen los elementos que no se tienen que tapar.

Vamos a crear el resto de elementos, como los textos y los fondos de los textos. El fondo del banner lo dejaremos para el final, ya que si lo creamos ahora, perderemos la vista de la capa guía. En nuestro caso tenemos 8 grupos de texto y cuatro formas que actúan como fondo de texto. Un consejo, aquellas formas que lleven sombra o cualquier otro efecto, convertirlas a clip de película pero si no llevan ningún efecto, dejarlas como forma. Lo mismo para los textos. Una vez tengamos creados el resto de elementos, si ocultamos la capa guía (pulsando sobre el icono correspondiente de la columna de visibilidad) veremos todos los elementos creados a falta del fondo.

Nuestro escenario debe estar tal que así

Y ya con los elementos listos, solo nos queda animar. Para ello y después de los anteriores tutoriales, dejo a vuestra elección el tipo de animación que queráis utilizar. Nosotros vamos a usar tanto animaciones de movimiento, como interpolaciones en las propiedades de los clips de película (vamos a cambiar la propiedad alfa). Una cosa a tener en cuenta, es que cada vez que creéis una interpolación, la probéis, ya que en muchos casos y más cuando tenemos muchos elementos, algunos de estos aparecen o desaparecen donde no lo deben hacer. Una vez hemos creado las animaciones, solo nos quedaría crear el fondo en una capa que este por encima de la capa guía y por debajo del resto, ya que sino el fondo tapará los elementos y las animaciones.

Como podéis ver en la imagen superior, después de cada interpolación continúan los fotogramas, ya que sino, tras cada una de las interpolaciones, los elementos irían desapareciendo y lo que queremos conseguir es que una vez aparezcan en el escenario, se mantengan visibles. Por ejemplo, una vez hemos creado la primera interpolación y estamos creando la segunda, y esta última termina después de la primera y queremos que el resultado de la primera interpolación continúe siendo visible, lo que hacemos es, en el fotograma de la capa de la primera interpolación donde termina la segunda, pulsamos F5 o el botón derecho del ratón y seleccionamos “Insertar fotograma”. En la siguiente imagen, lo veréis más claro:

De esta forma, podemos hacer que cadavez que un elemento aparezca en el escenario, se mantenga o se ocultes simplemente incorporando fotogramas o eliminándolos. También es importante que una vez termine la animación de todos los elementos del banner, todo se pare y se quede como en el diseño que establecimos al principio del tutorial y que no se repitan las animaciones una y otra vez. Para ello, haremos uso de una de las acciones más veteranas de

Adobe Flash, el “stop”. Adobe Flash incorpora una serie de acciones sencillas para controlar el flujo de nuestra animación sin tener que utilizar programación avanzada como “play”, “stop”, “gotoAndPlay”, “gotoAndStop”, etc. En nuestro caso necesitamos el “stop” en el último fotograma de la animación para que una vez termine todo, se mantenga con el resultado final. Para ello, vamos hasta el último fotograma y hacemos clic con el botón izquierdo del ratón para seleccionarlo y mostramos el de acciones o bien pulsando F9 o bien a través del menú Ventana -> Acciones.

Una vez abierto el de acciones escribimos lo siguiente: stop(); (el ; también) que es como se llama a la acción parar de ActionsScript, el lenguaje de programación de Adobe Flash. Con esto conseguimos que nuestra película, pare en el último fotograma. Si queréis hacer pruebas, probad a seleccionar cualquier otro fotograma y ponerle un stop(); y veréis como vuestra película se para en dicho fotograma. En futuros tutoriales nos introduciremos más de lleno en la programación con ActionScript 3.0 pero por ahora con esto es suficiente.

Y con esto, ya tendríamos nuestro banner terminado, solo faltaría publicarlo, pero antes de

publicarlo debemos siempre previsualizarlo o como lo habíamos llamado en los anteriores tutoriales, probarlo. Para ello o bien pulsamos Control + Intro (en Mac Comando + Intro) o en el menú seleccionamos Control -> Probar película -> Probar. Se nos abrirá una ventana y nos mostrará el resultado final y si estamos conformes la publicamos.

Una vez hemos probado la película, y estamos conformes con el resultado, vamos a publicarla. El proceso de publicación lo que hará será crear nuestra película dentro de un archivo sfw, el cual podremos subir a nuestra web o entregárselo a un cliente o amigo. Además del archivo swf, Adobe Flash nos permite generar un archivo html asociado el cual contiene todo lo necesario para mostrar la película y no tener nosotros que preocuparnos de insertar el swf en nuestro código html. Para ello, vamos en el menú Archivo -> Configuración de publicación y se nos abrirá una ventana con las opciones de publicación.

En la primera pestaña, le indicamos que queremos tanto el swf como el html y los nombres y rutas donde los queremos. El resto de pestañas las dejamos igual y pulsamos sobre el botón “Publicar” y Adobe Flash nos generará los archivos correspondientes donde le hemos indicado. Si queréis investigar por vuestra cuenta las opciones de las otras dos pestañas, os invito hacerlo y si tenéis cualquier duda, preguntarla. Otra cosa, por cada formato que seleccionéis en la primera pestaña, os aparecerá una pestaña asociada a dicho formato.