Hola a todos! Vengo a compartir con ustedes un tutorial que a mi fue muy útil. Bueno el tutorial no lo cree yo exactamente, sino que me base en uno con el que yo empecé a meterme en esto del Flash. El tutorial original esta en Inglés. Yo modifique muchas cosas para que sea mas entendible y obviamente, lo traducí al Español. Tambien tuve que tomar imágenes mias porque es obvio que el tutorial que estaba en Ingles no era para hacer un Banner de TARINGA!. Asi que bueno, en este tutorial les explico como hace un simple banner animado con Flash. Es algo muy simple, pero les aseguro, yo empece con esto y despues se te ocurren muchas ideas. Se que a muchos no les va a interesar este tema, pero para aquellos que les gusta el diseño y recien estan comenzando, les va a venir bien. Espero que les guste!
P.D.: El programa Adobe Flash CS3 lo baje de T! busquenlo que hay muchos post que lo tienen.
> Este tutorial te ayudara a crear un banner animado trabajando con Adobe Flash CS3.
- Lo primero que debes hacer es ejecutar el programa desde la carpeta en donde esta instalado, o tal vez tengas algun acceso directo. Bien, la ventana deberia verse similar a la imagen:
No te preocupes si te sientes un poco mareado por todos las ventanas y paneles que aparecen. Nosotros nos enfocaremos solo en las cosas que vamos a necesitar para hacer este banner. Si despues quieren aprender mas acerca de flash pueden ingresar en la seccion de "Ayuda" (o Help si es que lo tienen en ingles) que se encuentra en el menu superior.
Continuemos con el tutorial.
Para crear una nueva pelicula de Flash has click en el documento "Archivo de Flash ActionScrip: 3.0" Si no te aparece en la ventana principal anda a Archivo ---> Nuevo... ---> Archivo de Flash (ActionScript 3.0)
Ahora Flash esta listo para crear tu nuevo documento.
La ventana deberia verse similar a esta:
Tomate un minuto para familiarizarte con esto:
-El [Sin Titulo-1] Es el nombre del documento (No te preocupes si tienes otro numero que -1)
-Fijate que hay varios de paneles y menues. Trabajaremos con algunos de ellos.
-Ve en la parte superior del centro de la ventana. Se encuentra la Linea de Tiempo, que lo usaremos para configurar las animaciones y los efectos de animacion
-El area blanca es el espacio de trabajo (Stage). Las dimensiones que tenga el mismo, seran luego las dimensiones de su animacion Flash.
En este tutorial vas a crear un banner con las dimensiones 468x60 px. Para ajustar las dimensiones del Stage ir a Modificar--->Documento... En la ventana pueden poner algunas propiedades del documento. La ventana tendria que verse algo asi:
Configure el Titulo, la Descripcion y las Dimensiones. Note que el fondo lo dejamos en blanco. La velocidad de fotogramas y las Unidades de Regla dejenlos como estan en la imagen. Click en Aceptar.
La ventana de Flash deberia verse algo asi:
Es buena idea ir guardando el documento a menudo cuando usamos Flash. Ir a Archivo ---> Guardar. Si quieren crean una carpeta para ser mas ordenados y ponganle un nombre al archivo. En mi caso le puse BannerTaringa!. Ahora el titulo se vera como [BannerTaringa!]. El archivo se guarda con la extencion .fla (BannerTaringa!.fla)
Observa la barra de herramientas. La herramienta que esta seleccionada aqui es "Herramienta Seleccion", el icono
estandar del cursor.
Coloque su puntero sobre otros iconos de herramientas para una breve descripción de cada uno.
Nosotros veremos la "Herramienta de texto" en este tutorial. Esta herramienta esta indicada con la letra T en el panel
de herramientas.
Tambien vamos a usar el "Color de trazo" y el "Color de relleno". Esto se utiliza para cambiar el color
de los mismos en tu trabajo.
Observa la linea del tiempo ubicada encima del Stage y debajo de la barra de menu.
Como puedes ver hay muchas caracteristicas en la linea del tiempo. Algunas de las mas importantes son:
El lado izquierdo de la Linea del tiempo (Capa 1) es donde usted coloca sus capas. Normalmente cada capa contiene
un objeto en la pelicula de Flash. Nosotros vamos a usar varias capas para crear el banner. Algo muy util es
aplicarle un nombre a cada capa para que sea mas facil de diferenciar.
El icono (Insertar Capa) en la esquina inferior izquierda se utiliza para crear nuevas capas.
El icono del "Ojo" es utilizado para hacer a las capaz visibles o invisibles. Esto sirve mucho cuando se trabaja con animaciones.
El icono del "Candado" es utilizado para bloquear temporalmente las capaz haciendo que no puedas modificarlo accidentalmente cuando trabajas con otra capa.
En esta parte se muestran los fotogramas de la animacion. Esta area es utilizada para configurar los
fotogramas claves que indican los cambios de animacion. La Linea del tiempo es usada tambien para crear
automaticamente Animacion (hablare mas adelante de esto). El rectangulo rojo transparente indica el fotograma actual en el que se encuentra la animacion.
Es practico saber borrar una accion cuando usamos Flash, en el caso que cometamos un error. Presiona Ctrl+Z para volver a la accion anterior. Tambien se puede hacer desde el menu: Edicion ---> Deshacer.
El banner animado que vamos a crear en este tutorial es muy simple. El banner se activara cuando se carga la pagina. Si quieres volver a verlo tienes que recargar la pagina o apretar F5 para recargar la pagina.
Este banner tendra 3 Capas: Fondo, Forma y Texto. La capa de Fondo controla el cambio de color del fondo de la pelicula. La capa de Forma configura la animacion de la forma en la pelicula. La capa de Texto controla el texto que aparecera en la pelicula.
Recuerden lo que les dije antes, siempre es recomendable poner nombre a las capas. Para esto hacer doble click encima de la Capa 1 y nos aparecera para cambiar el nombre. A esta capa le ponremos el nombre "Fondo". Una vez que hicimos esto, precionamos el icono de Nueva Capa. Ahora hacemos de nuevo lo mismo que antes, doble click y le cambiamos el nombre. A esta capa le pondremos de nombre "Forma". Bien ahora hagamos lo mismo una vez mas, pero esta vez la capa se llamara "Texto".
Guarda tu documento.
La capa de fondo contiene un rectangulo con las mismas dimensiones que el Stage.
Necesitas informarle a Flash con que capa estas trabajando. Haz click en el fotograma 1 de la Linea del Tiempo en el mismo renglon de la capa de Fondo. Asi seleccionaras la capa fondo y el fotograma 1.
Usa el panel de color para elegir un color para el Trazo y para el relleno. Haz click en el icono de cada uno y selecciona un color. En mi caso usare el color #3399FF para los dos.
Luego, has click en la herramienta de Rectangulo mostrada en la figura de abajo para dibujar un rectangulo en el Stage. Tu puntero cambiara a "+". Comienza dibujando el rectangulo desde la esquina superior izquierda cubriendo
toda el area de trabajo. No te preocupes si no te queda perfecto. Podras usar el panel de propiedades para ajustarlo a las dimensiones.
Click en la "Herramienta Seleccion" y has doble click sobre el rectangulo que acabaste de crear. Este doble click seleccionara toda la figura (trazo y relleno)
Tu Stage y panel de propiedades deberia verse como la imagen de abajo (Si tu panel de propiedades no se abre automaticamente
ve al menu Ventana ---> Propiedades ---> Propiedades.)
Si tu "W", "H", "X" e "Y" estan diferentes al de la imagen, escribe cada dato para que te quede igual.
W: 468.0
H: 60.0
X: 0.0
Y: 0.0
Ahora vamos a agregar un fotograma clave a la Capa de Fondo en el area de la Linea del Tiempo. Para eso, hacemos click en el fotograma 50 en la misma linea que la capa de fondo. Una vez seleccionado este fotograma presionamos F6. Esto indicara a Flash que en el fotograma 50 ocurre un cambio. Esto deberia verse asi:
Con el fotograma 50 seleccionado, vamos a cambiar el color del rectangulo. Usando la "Herramienta Seleccion" damos doble click sobre el rectangulo para seleccionar su trazo y relleno. Luego cambiamos los colores del trazo y el relleno. El color que vamos a usar ahora es #004a95. El rectangulo deberia haber cambiado a un color azul.
Ahora, vamos a usar Flash para que cambie automaticamente el color del fondo de turquesa a azul usando Animar Forma. Para esto hay que seleccionar un fotograma entre el Fotograma 1 y el Fotograma 50. En nuestro caso vamos a seleccionar el fotograma 22. Cuando lo seleccionemos, en el panel de propiedades vamos a ir donde dice Animar y seleccionamos Forma.
Ahora, la Linea del Tiempo mostrara una flecha entre el Fotograma 1 y 50. Tu linea del tiempo debe verser como la de la figura de abajo. Si en tu linea de tiempo ves una linea punteada es porque algo esta mal. Vuelve atras tu trabajo y revisa cual fue el error.
Puedes ver la animacion que tiene tu fondo con la Linea del tiempo. Selecciona el fotograma 1 y presiona ENTER para reproducir. Veras como el fondo cambia de color automaticamente!
Tambien puedes reproducir tu pelicula en una ventana aparte precionando las teclas CTRL+ENTER.
Guarda Tu Documento.
Antes de comenzar a trabajar con la Forma, haz click en el Candado en la Capa Fondo para bloquearla y prevenir modificaciones accidentales.
Ahora estamos listos para empezar con la Capa Forma. Primero debes informarle a Flash con que capa y fotograma trabajaras, asi que has click en el Fotograma 1 en la misma linea que la Capa Forma. Observa la imagen:
La Capa Forma contendra un ovalo que cambiara de tamaño y color. Use el panel de herramientas para cambiar el color del trazo y el color del relleno. En nuestro caso usaremos el color #CC9966.
Luego, has click en la Herramienta que antes habiamos usado para crear el rectangulo.Manten apretada la herramienta por unos segundos y se te abrira un menu para elegir otros tipos de formas. Nosotros elegiremos el Ovalo. Tu cursor cambiara a "+". Ahora comienza a dibujar el ovalo desde la esquina superior izquieda. Dibujalo en la parte izquierda del Stage. No te preocupes si no te queda perfecto, con el panel de propiedades podras darles das dimensines perfectas. Dale doble click con la "herramienta seleccion"
Tu Stage y Panel de propiedades deben verse como este:
Si tu "W", "H", "X" e "Y" estan diferentes, copia y escribe las de la imagen.
http://www.taringa.net/agregar/
W: 15.0
H: 10.0
X: 28.0
Y: 25.0
Ahora vamos a agregar un fotograma clave a la Capa Forma en la Linea del Tiempo. Para eso, hacemos click en el fotograma 25 en la misma linea que la capa de forma. Una vez seleccionado este fotograma presionamos F6. Esto indicara a Flash que en el fotograma 25 ocurre un cambio. Esto deberia verse asi:
Tu Linea del Tiempo deberia verse similir a esa. Si cometiste un error, presionaste otro fotograma u otra capa, recuerda presionar CTRL+Z para borrar la accion.
Con el Fotograma seleccionado, vamos a cambiar el color y el tamaño del Ovalo. Con la "Herramienta Seleccion" dale doble click al ovalo y cambia su "H" a 100, su "W" a 200, su "X" a 53 y su "Y" a -10. Cambia el color del trazo y el color del relleno a #FF9933. Tu Stage y Panel de propiedades deberia verse asi:
La Capa Fondo tiene 50 fotogramas, mientras que la Capa Forma tiene 25 fotogramas. Por lo tanto hay q completar la Linea del tiempo de la Capa Forma. Vamos hasta el fotograma 50 en la misma linea que la Capa Forma y presionamos F5.
Tu linea del tiempo deberia verse asi:
Ahora vamos a usar Flash para que automaticamente cambie el color y el tamaño del ovalo en la Capa Forma usando "Animar Forma". Has click en un fotograma entre el fotograma 1 y el fotograma 25. En mi caso seleccione el 18. Ahora en el Panel de propiedades vamos a donde dice Animar y seleccionamos Forma.
Ahora la linea del tiempo mostrara una flecha entre el Fotograma 1 y 25. Tu Linea del tiempo deberia verse como la imagen de abajo. Si no se ve igual, y en vez de una flecha no tienes nada o tienes una linea puenteada es porque algo hiciste mal. Vuelve atras tu trabajo para volver a hacer esta parte bien.
Tu puedes ver la animacion que tiene tu fondo y la forma con la Linea del tiempo. Selecciona el fotograma 1 y presiona ENTER para reproducir. Veras como el fondo cambia de color, y la forma cambia de color y tamaño automaticamente!
Tambien puedes reproducir tu pelicula en una ventana aparte precionando las teclas CTRL+ENTER.
Guarda tu documento.
Antes de comenzar a trabajar con el texto, haz click en el Candado en la Capa Forma para bloquearla y prevenir modificaciones accidentales.
Ahora estamos listos para empezar con la Capa Texto. Primero debes informarle a Flash con que capa y fotograma trabajaras, asi que has click en el Fotograma 1 en la misma linea que la Capa Texto. Observa la imagen:
La Capa Texto contiene el nombre de TARINGA! y vendra desde la derecha. Selecciona la herramienta de texto en el Panel de Herramientas. Esta indicada por la letra T. Cuando la selecciones tu cursor cambiara a un "+" con un T chiquita al lado.
Usar el panel de propiedades para cambiar la Fuente, el Tamaño y el Color del texto. En este ejemplo, la fuente que voy a usar es (T!). Es una parecida a la fuente de TARINGA! que baje de ahi mismo. Vos puedes usar la fuente que quieras. Y el color que use es #FFFFFF (Blanco). Con la herramiente texto seleccionada escribe TARINGA!
Tu Stage y panel de propiedades deberia verse similar a este:
Tal vez alguas cosas te queden distintas, puede cambiar dependiendo de la fuente o el tamaño que usemos.
Bueno, ahora cambiaremos el valor de "X" y le pondremos 450. Ahora tu Stage deberia verse algo asi:
Ahora vamos a agregar un fotograma clave a la Capa Texto en la Linea del Tiempo. Para eso, hacemos click en el fotograma 40 en la misma linea que la capa de forma. Una vez seleccionado este fotograma presionamos F6. Esto indicara a Flash que en el fotograma 40 ocurre un cambio. Esto deberia verse asi:
Tu linea del tiempo deberia verse similar a esa. Si cometiste algun error recuerda que puedes volver atras con CTRL+Z.
Con ese fotograma seleccionado, vas a mover la ubicacion del texto. Para esto usar la "Herramienta Seleccion" y darle click al texto. En el panel de propiedades cambiar el valor de "X" a 60. Tu Stage y panel de propiedades deberia verse similar a este:
Las otras dos capas tienen 50 fotogramas y esta capa solo tiene 40, entonces hay que completarla. Para esto vamos al fotograma 50 en la misma linea que la capa de texto y presionamos F5. Se deberia ver asi:
Ahora vamos a usar Flash para que automaticamente el texto venga de izquierda a derecha en la Capa Texto usando "Animar Movimiento". Has click en un fotograma entre el fotograma 1 y el fotograma 40. En mi caso seleccione el 25. Ahora en el Panel de propiedades vamos a donde dice Animar y seleccionamos Movimiento.
Ahora la linea del tiempo mostrara una flecha entre el Fotograma 1 y 40. Tu Linea del tiempo deberia verse como la imagen de abajo. Si no se ve igual, y en vez de una flecha no tienes nada o tienes una linea puenteada es porque algo hiciste mal. Vuelve atras tu trabajo para volver a hacer esta parte bien.
Puedes ver la animacion que tiene tu fondo, la forma y el texto con la Linea del tiempo. Selecciona el fotograma 1 y presiona ENTER para reproducir. Veras como el fondo cambia de color, la forma cambia de color y tamaño, y el texto se mueve de derecha a izquierda automaticamente!
Tambien puedes reproducir tu pelicula en una ventana aparte precionando las teclas CTRL+ENTER.
Guarda tu documento.
Con la funcion de Publicar, flash guarda tu archivo en los distintos formatos para publicarlo.
Ir a Archivos ---> Configuracion de publicacion. Se abrira una ventana en la que podremos modificar los Formatos, el Flash y el HTML.
- En la pestaña de Formatos, verifique que el formato Flash y HTML esten activados.
- En la pestaña Flash, deja todo como lo trae el predeterminado,
excepto por estas cosas:
1) Cambia la version de flash a "Flash Player 5" (Proporciona maxima compatibilidad)
2) Click en "Proteger frente a importacion"
3) Click en "Omitir acciones de trace ()"
- En la pestaña HTML, verifique que la opcion "Reproducir Indefinidamente" no este clickeada. Esto es para que la animacion no se reproduzca indefinidamente. Tal vez hay casos en que quieran que eso suceda, entonces deben dejar esta opcion clickeada.
Click en Publicar y luego Aceptar.
Flash ha publicado la animacion como Pelicula de Flash llamada BannerTaringa!.swf, tambien ha creado un archivo de pagina web llamado BannerTaringa!.html, y creo tambien un JavaScript AC_RunActiveContent.js
Para ver su animacion como web entrar en su Explorador y abrir el archivo BannerTaringa!.html (o como ustedes lo llamo) y se vera similar a esto:
FELICITACIONES!!
HAS CREADO TU PRIMER BANNER ANIMADO USANDO FLASH!
HAS CREADO TU PRIMER BANNER ANIMADO USANDO FLASH!
BUENO ESTA FUE TODA LA GUIA, ES ALGO BASICO FACIL DE HACER. TAL VEZ CUESTE UN POCO AL PRINCIPIO, PERO DE AQUI TIENEN QUE SALIR TODAS SUS IDEAS PARA PODER HACER COSAS MAS COMPLEJAS. ME TOMO BASTANTE TRABAJO HACERLO, ESPERO QUE A ALGUIEN LE SIRVA.
SALUDOS A TODOS!
SALUDOS A TODOS!