Foros DeCeMuLaDoReS

Retroceder   Foros DeCeMuLaDoReS > Diseño Gráfico > Tutoriales

Tutoriales Acá todos los tutoriales del área del diseño, para aprender y compartir

Respuesta
 
LinkBack Herramientas
  #1 (permalink)  
Antiguo 09-Feb-2009, 22:15
Avatar de Hagane1
Hagane1 está en el buen camino
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
Predeterminado Guía del Idiota para animar en Fireworks

Consiguiendo la hoja de sprites y haciendo transparente el fondo.
  1. 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.
  2. Guarda la hoja que escojiste en su propia carpeta.
  3. Abre Fireworks. (Imágen)
  4. 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)
  5. 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)
  6. 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)
  7. Ahora deberás cambiar el formato a "GIF"
  8. 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)
  9. 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)
  10. 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.
  1. 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)
  2. 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)
  3. Haz doble click dentro del recuadro. El sprite debería individualizarse del resto de la hoja. (Imágen)
  4. Ahora debemos guardar el sprite. En la barra de menús, ve a Archivo -> Guardar como... o presiona Ctrl+Shift+S.
  5. 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)
  6. 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)
  7. Guarda el archivo. Ahora, en la barra de menús, ve a Editar -> Deshacer... o presiona Ctrl+Z en el teclado.
  8. 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
  1. 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)
  2. 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)
  3. 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.
  4. 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)
  5. Haz click en el cuadro de 100X100 para la animación, y el sprite debería mostrarse. (Imágen)
  6. 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)
  7. 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...
  8. 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.
  9. 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)
  10. 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
  1. 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)
  2. 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)
  3. 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)
  4. 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)
  5. 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
Responder Citando
Los siguientes 4 usuarios agradecieron a Hagane1 este mensaje:
Jaretx (17-May-2009), pelopunky (10-Feb-2009), Vox3D (09-Feb-2009), wenoncio (11-Feb-2009)
  #2 (permalink)  
Antiguo 09-Feb-2009, 23:07
Vox3D no se puede cailificar en este momento
DC User
 
Fecha de Ingreso: 16-December-2008
Ubicación: Estoy tratando de recordarlo...
Mensajes: 325
Posts agradecidos: 73
Agradecido 27 veces en 21 posts
Icon7 Re: Guía del Idiota para animar en Fireworks

"Guía del Idiota para animar en Fireworks"
Podrias ser mas comprensivo con los que recien aprenden ?
Como yo xDDD
Gracias LOL
__________________

Clan
Gracias linkz500 • Gracias Baffin • Gracias Baffin (Por la firma de arriba)
Spoiler para Pincha, me ayudas mucho:

Responder Citando
  #3 (permalink)  
Antiguo 09-Feb-2009, 23:09
Avatar de Hagane1
Hagane1 está en el buen camino
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
Predeterminado Re: Guía del Idiota para animar en Fireworks

la guia normal detalla menos los pasos y solo incluiria un pard eimágenes, al del idiota es pasito a pasito "si sabes leer, podrás hacer el tuto XD" ademas yo no le puse el titulo, solo lo traduje
__________________

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
Responder Citando
  #4 (permalink)  
Antiguo 10-Feb-2009, 13:32
Avatar de pelopunky
pelopunky tiene un aura espectacular a su alrededor pelopunky tiene un aura espectacular a su alrededor pelopunky tiene un aura espectacular a su alrededor
Porno fan
 
Fecha de Ingreso: 16-January-2007
Ubicación: En el pais de la felicidad, en la casa de gominola de la calle de la piruleta! - Homer J.Simpson
Mensajes: 706
Posts agradecidos: 122
Agradecido 137 veces en 82 posts
Enviar un mensaje por ICQ a pelopunky Enviar un mensaje por AIM a pelopunky Enviar un mensaje por MSN a pelopunky Enviar un mensaje por Yahoo  a pelopunky Enviar un mensaje por Skype™ a pelopunky
Predeterminado Re: Guía del Idiota para animar en Fireworks

Woow Gracias!
Es muy util! Luego me la leo detasdallanetme...demantal...bien.
Pues eso, Gracias (BYNB)

Saludetes!
__________________

Yippi kay-jay hijo de fruta
Se me han perdido las firmas, y no tengo el fotosho... dedicame argo por caridá!
Responder Citando
  #5 (permalink)  
Antiguo 11-Feb-2009, 14:30
Avatar de wenoncio
wenoncio no se puede cailificar en este momento
DC Junior
 
Fecha de Ingreso: 18-September-2008
Mensajes: 17
Posts agradecidos: 7
Agradecido 1 vez en 1 post
Icon14 Re: Guía del Idiota para animar en Fireworks

primero felicitarte por el trabajo que has hecho, y segundo, me podrias decir una web donde descargarme el fireworks sin periodo de prueba porfavor?
__________________

La razón lleva a la duda: la duda lleva a la herejía.
Responder Citando
  #6 (permalink)  
Antiguo 11-Feb-2009, 16:59
Vox3D no se puede cailificar en este momento
DC User
 
Fecha de Ingreso: 16-December-2008
Ubicación: Estoy tratando de recordarlo...
Mensajes: 325
Posts agradecidos: 73
Agradecido 27 veces en 21 posts
Icon6 Re: Guía del Idiota para animar en Fireworks

Si no es periodo de prueba hay que pagar xDDD es Shareware (Licencia: 30 dias creo o 15) No hay gratis tienes que pagar para tenerlo siempre

PD:Y si hay gratis soy un idiota por que yo page
__________________

Clan
Gracias linkz500 • Gracias Baffin • Gracias Baffin (Por la firma de arriba)
Spoiler para Pincha, me ayudas mucho:

Responder Citando
  #7 (permalink)  
Antiguo 11-Feb-2009, 18:26
Avatar de Hagane1
Hagane1 está en el buen camino
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
Predeterminado Re: Guía del Idiota para animar en Fireworks

No, efectivamente tounderbalck, es absurdo hasta la pregunta un software de pago para su activación es obvia que no exista versión sin perdioso de prueba, que haya seriales y cracks para tener gratis de manera ilicita e sotra cosa. bajatelo de adobe el trial y después buscas el serial o crack en google y asunto arreglado (si pagara por mi software de adobe deberia 25 000 pesos ¬¬)
__________________

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
Responder Citando
  #8 (permalink)  
Antiguo 12-Feb-2009, 14:23
Avatar de wenoncio
wenoncio no se puede cailificar en este momento
DC Junior
 
Fecha de Ingreso: 18-September-2008
Mensajes: 17
Posts agradecidos: 7
Agradecido 1 vez en 1 post
Predeterminado Re: Guía del Idiota para animar en Fireworks

a ok muxas grcias a los 2, disculapdme, esk no soi mui entendido de esto de los sharewares, firewares...
__________________

La razón lleva a la duda: la duda lleva a la herejía.
Responder Citando
  #9 (permalink)  
Antiguo 12-Feb-2009, 14:41
Avatar de emmaz
emmaz no se puede cailificar en este momento
DC Junior
 
Fecha de Ingreso: 10-November-2008
Ubicación: debajo de un puente
Mensajes: 19
Posts agradecidos: 9
Agradecido 0 veces en 0 posts
Enviar un mensaje por MSN a emmaz
Predeterminado Re: Guía del Idiota para animar en Fireworks

Entonces si tu lo traduciste no es tuyo el trabajo , y no pusiste de donde era la fuente de informacion
Responder Citando
  #10 (permalink)  
Antiguo 12-Feb-2009, 16:16
Vox3D no se puede cailificar en este momento
DC User
 
Fecha de Ingreso: 16-December-2008
Ubicación: Estoy tratando de recordarlo...
Mensajes: 325
Posts agradecidos: 73
Agradecido 27 veces en 21 posts
Icon7 Re: Guía del Idiota para animar en Fireworks

Pero se tardo MUCHO tiempo en traducir ademas dijo quien lo hico
Ademas las animaciones son sullas ademas el original no tiene imagenes (CREO) por que Hagane dijo que la ANIMACION ERA SUYA Y NO QUIZO HACERLA DE NUEVO Entendiste?
__________________

Clan
Gracias linkz500 • Gracias Baffin • Gracias Baffin (Por la firma de arriba)
Spoiler para Pincha, me ayudas mucho:


Última edición por Vox3D; 25-Feb-2009 a las 22:44
Responder Citando
Respuesta


(0 miembros y 1 visitantes)
 
Herramientas

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado
Trackbacks are Activado
Pingbacks are Activado
Refbacks are Activado

Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
[OT] Foro Pokemon (soluciones a los problemas más frecuentes) es3ado GBA, GBC Y GB 393 22-Feb-2011 15:06
Angel Tears-Historia ~Clausk Biblioteca 199 18-Jan-2010 22:35
OneNote 2003: con actualizaciones y guia de uso eliluminado Software/Aplicaciones 0 26-Jan-2009 03:40
Manual para ser un buen forero r-daddy Documentación 20 24-Jan-2008 06:17


Torneo DC 2012
Torneo DC 2012

La franja horaria es GMT +1. Ahora son las 20:07.


Desarrollado por: vBulletin® Versión 3.8.2
Derechos de Autor ©2000 - 2012, Jelsoft Enterprises Ltd.
Traducido por mcloud de vBhispano.com
 

Content Relevant URLs by vBSEO 3.2.0