
09-Feb-2009, 22:15
|
 |
I'm sexy & don't know it
|
|
Fecha de Ingreso: 25-November-2008
Ubicación: México
Mensajes: 4.084
Posts agradecidos: 314
Agradecido 1.130 veces en 633 posts
|
|
Guía del Idiota para animar en Fireworks
Consiguiendo la hoja de sprites y haciendo transparente el fondo.
- Ok, aquí es donde comenzamos. Lo que tienes que hacer antes de abrir Fireworks es conseguir una hoja de sprites. Una gran cantidad de hojas de sprites están en www.spritedatabase.net. La hoja que usaré en este tutorial será esta.
- Guarda la hoja que escojiste en su propia carpeta.
- Abre Fireworks. (Imágen)
- Elije Abrir y examina las carpetas hasta que encuentres la hoja que usarás en tu animación. Haz doble click al archivo o seleccionalo y da click en Abrir. (Imágen)
- La hoja debería cargarse completamente. En la barra de menús, ve a Ver -> Aumentar y reducir -> 100% o presiona Ctrl + 1 en el teclado. (Imágen)
- Lo que debes hacer es deshacerte del color de fondo. En la barra de menús, ve a Archivo -> Presentación preliminar de la imágen o presiona Ctrl+Shift+X en el teclado. (Imágen)
- Ahora deberás cambiar el formato a "GIF"
- Debes colocar el cursor en el color de fondo donde se muestra en la vista previa de la hoja en el lado derecho de la ventana. Haz click derecho y selecciona Transparente. (Imágen)
- Ya que se ha ido el color de fondo, haz click en Exportar... y examina la carpeta donde la hoja original estaba y selecciona Exportar. (Imágen)
- Cierra la hoja que tenías abierta (asegurándote de no guardar los cambios) y abrir la nueva versión GIF de la hoja. (Imágen)
Recortando sprites individuales.- Muy bien, ahora que el color de fondo es transparente, necesitamos tener cada sprite por separado. Lo primero que haremos sera seleccionar la herramienta Recortar del lado izquierdo de la pantalla (debería estar en el mismo subgrupo como la herramienta Seleccionar). (Imágen)
- Con la herramienta Recortar, vamos al sprite que deseamos recortar, haz click y arrastra de una esquina del sprite hasta la otra. Un cuadro de selección debería aparecer alrededor del sprite. (Imágen)
- Haz doble click dentro del recuadro. El sprite debería individualizarse del resto de la hoja. (Imágen)
- Ahora debemos guardar el sprite. En la barra de menús, ve a Archivo -> Guardar como... o presiona Ctrl+Shift+S.
- Examina la carpeta donde salvaste la hoja original. Crea una nueva carpeta y nombrala dependiendo del movimiento del sprite (la mayoría de los movimientos en las hojas ya tienen nombres). (Imágen)
- Ve a la carpeta y renombra el archivo como 1. Despúes cambia el tipo de archivo (podrás hacerlo debajo de la barra donde lo renombras) a PNG. (Imágen)
- Guarda el archivo. Ahora, en la barra de menús, ve a Editar -> Deshacer... o presiona Ctrl+Z en el teclado.
- Repite el proceso para cada sprite individual en el movimiento, asegúrate de cambiar el nombre del archivo a los diferentes números dependiendo el orden de los sprites. Así mismo, asegúrate de crear nuevas carpetas para los diferentes movimientos.
Animando los Sprites- Ahora comienza el verdadero proceso de animación. En la pantalla inicial de Fireworks, selecciona Documento de Fireworks debajo de Crear nuevo y cambia los valores (Anchura, Altura, y resolución) todos a 100. Puedes seleccionar el color de fondo si los deseas, pero en el ejemplo seguiré usandolo transparente. (Imágen)
- Ya que está abierto, lo primero que debemos hacer es cambiar los cuadros por segundo para que la animación no sea muy rápida. Del lado derecho, en la categoría Estados, debería haber un número 7 junto a las palabras Estado 1. 7 está bien, pero para mantener la animación a buena velocidad, cambiarlo a 10 sería la mejor opción, en mi opinión al menos. (Imágen)
- Despúes deberás colocar los sprites en la animación. Debes de tener todos o al menos los sprites necesarios para la animación ya cortados de la hoja y guardados en sus carpetas. En la barra de menús, ve a Archivo -> Imprtar... o presiona click Ctrl+R.
- Examina las carpetas hasta que encuentres la que tiene los sprites recortados. Ve a la carpeta que tiene los sprites para la animación. Haz doble click en el sprite llamado 1 para ese movimiento o selecciona 1 y haz click en Abrir. (Imágen)
- Haz click en el cuadro de 100X100 para la animación, y el sprite debería mostrarse. (Imágen)
- Necesitas hacer un nuevo estado para continuar la animación. Del lado derecho en la categoría Estados, haz click en el icono que parece una hoja doblada de la esquina con un + en su lado. (Imágen)
- Se ha creado un nuevo estado, peor colocar el siguiente estado será dificil porque no tienes idea de donde está situado el último sprite. Hay una manera de arreglar ese problema. En la misma barra donde está el icono de Estado nuevo/duplicado, debería de estar un trapezoide gris de cabeza. Un menú desplegable aparecerá, ahí selecciona Personalizado...
- Una ventana aparecerá. La primer opción entre Mostrar: y Antes del estado actual debería ser cambiada de 0 a 1. Manten la opacidad igual y no cambies los ajustes de Después del estado actual. Conserva Edición Multi-estados activada. (Imágen)
- Una manera más fácil de conseguir la piel de cebolla es haciendo click en la pequeña caja blanca a un lado de donde dice Estado 1 en la categoría Estados mientras tienes seleccionado el Estado 2.
- Ya que tenemos la transparencia del estado antes del estado en el que estás actualmente, será más fácil colocar los sprites. Importa el siguiente sprite en la animación y y colocalo de manera que se vea perfecto en el sprite anterior (en una animación sin movimiento, los pies generalmente están en la misma posición, así que mediante eso debes determinar donde colocarlos). (Imágen)
- Después de que cada sprite ha sido cuidadosamente colocado en sus propios estados, selecciona un zoom de 100% y haz click en el botón de play y observa el resultado de tu animación. (Imágen)

(Los sprites son un poco diferentes porque ya tenía guardada está animación y no tenía ganas de volver a hacerla de nuevo)
Añadiendo un Fondo- Esta es una de las partes más simples de la animación. Lo primero que haremos será crear una nueva capa en la animación. En la categoría Capas, hay un icono que parece un montón de balas y lineas. Haz click y selecciona Nueva Capa. (Imágen)
- Una ventana emergente saldrá. Renombrala Fondo y haz click en Aceptar. Una nueva capa se formará, peor el problema es que la nueva capa estará enfrente de la capa que tiene el sprite, lo que significa que el fondo estará encima del sprite. Solo necesitas simplemente mover la capa Fondo debajo de Capa 1 y el problema está solucionado. (Imágen)
- Ahora necesitaremos poner fondo a la animación. Debes de hacer el mismo proceso para quitar el color de fondo al fondo en la hoja de sprites y guardar el fondo en su carpeta, igual que con los sprites. Solo carga el fondo en la animación. Muévelo hasta que esté donde tu quieras. (Imágen)
- Lo que necesitamos ahora es que el fondo esté en cada estado. Esto es realmente fácil. Solo tienes que hacer doble click en el nombre de la capa Fondo. En la ventana que aparecerá podrás renombrarlo. En su lugar, desmarca Compartir entre los documentos. Otra ventana te dirá que cualquier imágen en otros estados será borrada si continuas compartiendola. Como tu acabas de crear esa capa y no haz colocado nada aún, haz click en Aceptar. (Imágen)
- Cada capa tendrá el mismo fondo que la primera. Si quieres que el fondo cambie de estado a estado, será un proceso más largo, porque la única manera que conozco es copiando y pegando el fondo uno por uno en cada estado.
Agradezcan me tarde un chingo en traducir el documento
Información:
Tutorial de creación de Gifs con Fireworks 8 originalmente en inglés por pakis pride.
Traducido al español por Hagane en base a los nombres de las herramientas del Fireworks CS4. Puede haber discrepancia tanto en los nombres en negritas, como de los iconos y posiciones por la diferencia de versión.
__________________
Jugando: The King of Fighters XIII
 Need for Speed Hot Pursuit, Marvel Super Hero Squad, Modern Warfare 2, Iron Man 2, The godfather II, Mafia II, Lego Indiana Jones II
|