Menú Principal
Este sitio utiliza cookies propias y de terceros. Si contina navegando consideramos que acepta el uso de cookies. OK Ms Informacin.

{Photoshop} Cortar y Rotar Imágenes y {Flash} Inicio e Imagen Siguiendo al Ratón

Iniciado por lol, 24 de Julio de 2007, 20:42:38 PM

Tema anterior - Siguiente tema

lol

Por una petición que recibí, escribo un tutorial para hacer una firma similar a la que tengo ahora mismo. Incluye lo que podría llamarse un tutorial sobre cortar imágenes con Photoshop y la parte del flash (segundo post) puede considerarse a mi juicio como una introducción a éste programa, que al principio parece complejo pero si no lo usamos para cosas "profesionales" no tiene por qué darnos ningún problema.

Es el primer tutorial que escribo, así que no sé como saldrá, espero que se entienda bien. Opinad y si creéis que en algo puedo mejorar decidlo sin miedo :D. Tampoco os cortéis en preguntar dudas sobre el tutorial.

Si me animo seguramente escriba algún tutorial más sobre el flash, aunque sea de lo poco que sé de él.



Para este tutorial tomaré de ejemplo mi actual firma, haciéndola y explicando paso a paso como hacerlo.

Lo primero, es saber qué necesitamos:
1 – Photoshop.
2 – Macromedia Flash 8.
3 – Conocimientos mínimos de ActionScript (si alguien sabe programación aquí lleva mucho ganado). No obstante para mi ejemplo explicaré el poco código que use.

Para obtenerlos recomiendo buscar en mininova los programas y en Cristalab tenéis una muy buena colección de ejemplos y tutoriales de ActionScript.

Este primer post puedes saltártelo si ya sabes cortar y rotar imágenes o si quieres hacer la presentación de flash con un dibujo que hagas en él.


1 – Creación de las imágenes que compondrán nuestro Cactilio en movimiento

Puesto que no sé por qué al importar un gif al Flash se ven todos los fotogramas a la vez, tendremos que sacar todas las imágenes que compondrían el gif y crear una animación con ellas en Flash.

Partimos de la imagen de un cactilio que podemos encontrar en Google:





Ejecutamos el Photoshop, explico brevemente lo que vemos en pantalla.


1 - Herramientas. Poco que decir, las diferentes herramientas de las que disponemos para trabajar. Las opciones de las herramientas se muestran bajo la barra de menús.
2 - Selector de color. Nos permite cambiar el color.
3 - Cambia los modos de pantalla (Normal, pantalla completa con barra de menú y pantalla completa sin barra de menú).
4 - Cierra el trabajo y lo abre en ImageReady. Muy útil cuando estamos haciendo gifs.
5 - Navegador. Permite hacer zoom y movernos por el área de trabajo (9) moviendo el rectángulo rojo que nos indique que parte del trabajo estamos viendo.
6 - Historial de acciones. Las acciones recientes que hayamos hecho se muestran ahí. Útil si queremos volver a un estado anterior.
7 - Menú de capas. Las distintas capas que usemos se muestran aquí. Sólo se modifican las capas que estén seleccionadas.
8 - Área de trabajo. En esta zona se muestran las imágenes y es donde podemos usar las herramientas. Por defecto un fondo con cuadrados grises y blancos al estilo de un tablero de ajedrez nos indican fondo transparente.



Dicho esto, empezamos con nuestro trabajo para lo cual abrimos la imagen del cactilio, haciendo click File/Archivo y después en Open/Arbrir, o pulsamos al mismo tiempo (Control) y (O).


Si en la capa que hemos abierto nos aparece un candado en un lateral como se muestra aquí...




... hacemos doble click en la capa, nos aseguramos de que en color ponga Ninguno/None y aceptamos:




Nuestra capa debería quedar ahora así:


Con esto ya podremos tener un fondo transparente en la imagen.



Vamos a eliminar el fondo blanco sustituyéndolo por uno transparente:

1 - Pulsamos (W) para seleccionar la herramienta Varita Mágica/Magic Wand y ponemos una Tolerancia/Tolerance de 32.
2 - Clickeamos en el fondo blanco de la imagen.
3 – Pulsamos (Supr) para eliminar el fondo blanco de la imagen y dejar un fondo transparente.
Imagen del ejemplo:





Guardamos el cactilio sin fondo como un.PSD por si hubiese que volver a empezar. Recomiendo ir guardando distintos archivos según avancemos.


Teniendo seleccionada la capa con el cactilio, pulsamos a la vez (Control), (Alt) y (Flecha Arriba) para duplicar la capa. Pulsamos (V) para seleccionar la herramienta de movimiento y pulsamos una vez (Flecha Abajo) para que nuestra nueva capa quede a la misma altura que la original y ocultamos la capa original haciendo click en el ojo que se ve en un recuadro al lado de la capa.
Imagen del ejemplo:





Ahora pulsamos (L) para elegir la herramienta lazo, hacemos click derecho sobre el símbolo que se ha quedado marcado y en el menú que aparece seleccionamos Herramienta de Lazo Poligonal/Polygonal Lasso Tool.

Imagen del ejemplo:





Ahora hacemos zoom en la imagen pulsando (Alt) y moviendo la rueda del ratón hacia delante o mediante el siguiente panel:





Usando el panel anterior o las barras de desplazamiento nos movemos hasta una pierna del cactilio y con el lazo la seleccionamos. Para mayor comodidad sólo tenemos cuidado en la zona dónde se une al cuerpo, podemos extender el lazo por todos los cuadrados del fondo que queramos ya que representan un fondo transparente. Cuando nos acerquemos a los límites de la ventana se nos moverá permitiendo llegar a otras zonas de la imagen. Una vez seleccionada toda la pierna alejamos el zoom con (Alt) y moviendo la rueda del ratón hacia abajo o cambiando los números que aparecen en el anterior menú a 100.

Imagen del ejemplo:





Dentro de la selección hacemos click derecho y seleccionamos Capa por Corte/Layer via Cut para cortar la selección y crear una capa nueva capa con ella.

Pulsamos ahora (Alt) y (T) a la vez para poder transformar libremente la capa, en nuestro caso giramos la capa haciendo click izquierdo fuera del recuadro que aparece y arrastrando el ratón sin soltar el botón izquierdo. Una vez tenemos el giro que queremos, movemos la pierna del mismo modo que la giramos pero haciendo el click dentro del recuadro. Para validar la transformación pulsamos (Intro).

Imagen del ejemplo:





Ahora hacemos click izquierdo en la capa de la pierna que estamos modificando y la arrastramos debajo de la del cuerpo del cactilio para que parte de la pierna que no nos interesa quede debajo del cuerpo. Otra opción, más laboriosa, es cortar lo que no nos interese, esto puede hacerse también si cuando hemos puesto la capa por debajo sigue habiendo partes sobrantes. Hacemos esto con la pierna que nos queda y los brazos intentando que parezca estar corriendo el cactilio.

Como caso especial, tenemos el brazo izquierdo, que nos podría quedar por debajo del cuerpo en una pose un tanto extraña. Fácil solución. Seleccionamos con el lazo parte del brazo que quede bajo el cuerpo, hacemos click derecho en la selección y escogemos Capa por Copia/Layer via Copy y ésta capa la ponemos sobre el cuerpo.

Al acabar, deberíamos tener siete capas, una oculta (la imagen original), una para el cuerpo del cactilio (siendo además la primera de ellas) y una por cada extremidad más el arreglo que hicimos con el brazo izquierdo.

Imagen del ejemplo:





Nos situamos en la capa de la imagen del arreglo del brazo izquierdo (que debería ser la primera o la de más arriba) y vamos pulsando (Control) + [E] hasta que nos queden las seis capas unidas en una sola.

Imagen del ejemplo:





Vamos a reducir la imagen. Pulsamos a la vez (Control), (Alt) e (I). En la ventana que aparece nos aseguramos de que esté marcada la opción Mantener Proporciones/Constrain Proportions para mantener la relación entre el ancho y el alto y ponemos en Width/Ancho , por ejemplo, 49.

Imagen del ejemplo:





Volteemos la imagen. Nos vamos al menú Imagen/Image, buscamos Girar Imagen/Rotate Canvas y seleccionamos Girar Imagen Horizontalmente/Flip Canvas Horizontal.

Ahora pulsamos a la vez (Control), (Shift) y (S), elegimos el formato Compuserve GIF (*.GIF), ponemos nombre a la imagen y la guardamos (aceptamos las dos o tres ventanitas que nos saldrán).
Imagen del ejemplo:





Ocultamos la capa que acabamos de usar y mostramos la que está oculta desde casi el comienzo del tutorial usando de nuevo los ojos que se ven al lado de las capas en el correspondiente menú y guardamos la imagen del mismo modo que la anterior. Deberíamos tener dos gifs similares a estos:







EDITO: Añado una explicación breve de la ventana de photoshop y edición de la capa al abrir una imagen para poder quitarla en fondo.




Atentamente: lol

lol

2 – Creación de la animación en Flash 8.
Aclaraciones previas:
Como dije al principio, estoy haciendo la firma del Cactilio moviéndose según el  ratón, si estás haciéndolo con otra imagen o con cualquier cosa que hayas dibujado en el fotograma el proceso no varía (cambiando siempre la imagen del cactilio por la tuya).

Primeramente, ejecutamos Macromedia Flash 8 y nos aparecerá un menú como éste, dónde seleccionaremos Create New Flash Document:




Paso a explicar brevemente lo que nos encontramos en pantalla:


1 – Menú de capas. Aquí se nos muestran las distintas capas que creemos para la presentación. Se pueden agrupar en carpetas, copiar, pegar, borrar, ocultar y bloquear.
2 – Línea del Tiempo. Aquí se muestran los Frames (Fotogramas) que hayamos creado. Existen fotogramas  y fotogramas clave. Cuando se modifica un fotograma, si tenemos un objeto en varios fotogramas siguientes, se modifica en todos hasta llegar un fotograma clave. Los fotogramas clave son independientes unos de otros, modificar uno no implica modificar los siguientes.
3 – Herramientas. Supongo que poco hay que decir al respecto, diferentes herramientas para dibujo en los fotogramas.
4 – Vista. Herramientas para moverse por el fotograma y hacer zoom en él.
5 – Selector de Color. Herramientas dónde elegir los colores con los que crearemos los objetos en el fotograma (7).
6 – Opciones. Distintas opciones que tiene cada herramienta (3).
7 – Fotograma. Éste es el espacio dónde se verá nuestra presentación.
8 – Paleta de Colores. Versión avanzada del selector de color (5) y que además modifica "sobre la marcha" los objetos seleccionados en el fotograma (7). Tenemos distintas opciones de relleno (vacío, sólido, lineal, radial e imagen) y podemos además ajustar la transparencia (alpha).
9 – Biblioteca. Los objetos que  importemos y dibujos que convirtamos en objetos aparecen aquí.
10 – Paneles de Acciones (donde pondremos el código ActionScript de la presentación) y las Propiedades de la presentación y los objetos que seleccionemos.


Aclarar que los ejes X e Y en flash son:




Empecemos con la creación de nuestro objeto (en mi ejemplo un cactilio) que siga al ratón y además en este caso nos sirva de firma.
Primero debemos configurar un poco la escena (lo que se muestra en el fotograma):



1 – Tamaño (Size).  En Height/Alto ponemos el alto de nuestras imágenes (en mi caso 60) y en Width/Ancho un valor de por ejemplo 600.




2 – Cambiamos el color de fondo de la animación.  En el caso de Offtopicalia usamos #f2f2f2:



3 - Cambiar los fps de 12 a 30. No es estrictamente necesario, pero mejora mucho el resultado de la animación, por poner un ejemplo:

Animación a 12 FPS
http://i141.photobucket.com/albums/r60/lolsticiodeverano/Tutoriales/Ejemplo12fps.swf

Animación a 30 FPS
http://i141.photobucket.com/albums/r60/lolsticiodeverano/Tutoriales/Ejemplo30fps.swf



El siguiente paso es importar la imagen a la biblioteca, dónde se almacenan los recursos que usemos y creemos en nuestra presentación. Nos vamos a File, buscamos el menú Import y seleccionamos Import to Library...:




En la ventana que aparece buscamos nuestras imágenes, las seleccionamos todas y hacemos click en Abrir o pulsamos (Intro):




Deberíamos ver algo así en nuestra biblioteca:




Hacemos click en Cactilio1.gif dentro de la biblioteca, lo arrastramos al fotograma y pulsamos (F8) para convertirlo en un Clip de Película/Movie Clip, elementos que se pueden modificar con ActionScript. Marcamos Clip de Película/Movie Clip y ponemos un nombre, puede ser cualquiera pero que nos ayude a identificarlo, ejemplo mc_cactilio y aceptamos.




Abajo, en la pestaña Propiedades/Propierties ponemos un Nombre de Instancia/Instance Name, que será el que permita a ActionScript modificar las propiedades del Clip de Película o Movie Clip.




Vamos a crear la animación del cactilio, simulando que está corriendo. Hacemos doble click en la imagen que tenemos en el fotograma para editar los fotogramas del Movie Clip. Estos fotogramas sólo repercuten en el Clip de Película, independientemente de sí fuera de él (en la escena) hay más fotogramas.
Pulsamos (F6) para duplicar y crear un fotograma clave idéntico al que ya tenemos. Deberíamos tener una línea de tiempo similar a esta:




En el espacio inmediato al último fotograma hacemos click derecho y seleccionamos  Convertir en Fotograma Clave Vacío/Convert to Blank Keyframes, esto creará un nuevo fotograma clave en blanco. Arrastramos a él la segunda imagen de la animación y la situamos a la misma altura y distancia que la anterior, para hacerlo más fácil podemos copiar las posiciones X e Y que aparecen en la pestaña Propiedades:




Después volvemos a pulsar (F6) para duplicar nuestro Fotograma Clave. Deberíamos terminar con una línea del tiempo con cuatro fotogramas con una imagen en cada uno (iguales dos a dos), similar a esta imagen:





Hemos usado dos fotogramas por cada imagen para la animación para reducir un poco la velocidad de la misma. Se podría pensar en hacerlo reduciendo los FPS pero entonces la presentación se vería más lenta al aplicar el ActionScript. Hacemos doble click fuera de la imagen para volver a la escena.


Ya estamos acabando, nos queda sólo el meter el código y exportar.
Sin tener nada seleccionado en la escena, pulsamos (F9) y nos aparecerá una ventana tal como esta:




Esta versión de Flash no tiene opción de "código fácil", personalmente lo prefiero, me lío bastante más con el supuesto fácil (de ahí las comillas de antes).
Escribimos esto en la ventana:

onEnterFrame=function(){
if (_xmouse>mc_cact._x){
mc_cact._x+=5;
}
if (_xmouse<mc_cact._x){
mc_cact._x-=5;
}
}

Debería quedar así:




La explicación del código (dentro de lo poco que sé, si me lee algún programador que no se ría de mí por favor xD):

onEnterFrame=function(){
}

Crea una función que se ejecutará mientras se muestre el fotograma en pantalla. Todo lo que vaya entre las llaves pertenecerá a la función.



if (_xmouse>mc_cact._x){
mc_cact._x+=5;
}

Crea una condición (if), si la componente X (posición horizontal) del ratón (_xmouse) es mayor (>) que la componente X del Clip de Película con nombre de instancia mc_cact (mc_cact._x) se suman cinco píxeles a la componente X del Clip de Película (mc_cact._x+=5) de manera que se acerca al ratón.
Similar caso pero cambiando mayor por menor (<) en la condición y suma por resta de los cinco píxeles (mc_cact._x+=5) a el Clip de Película.
Si  además quieres que también lo siga en la componente Y sólo tendrías que añadir dos condiciones similares sustituyendo las X por Y (_ymouse, mc_cact._y).
De forma similar a como ocurría con EnterFrame todo lo que vaya entre las llaves pertenecerá a la condición y por tanto tendrá lugar cuando se cumpla la condición.

Hacemos click en Acciones – Fotograma/Actions - Frame de la parte superior de la ventana de ActionScript y procedemos a ver si funciona todo correctamente, para lo cual presionamos a la vez (Control) e (Intro).
Si queremos que se pegue más al ratón todo lo que debemos hacer es entrar en el Clip de Película y arrastrar la imagen de cada fotograma hacia la izquierda o derecha quedando en todos a la misma altura y distancia, vamos probando hasta que nos guste el resultado.

Sólo nos queda exportarlo. Nos vamos a Archivo/File, buscamos el menú Exportar/Export y seleccionamos Exportar Película/Export Movie.... Elegimos un nombre y aceptamos.
Dejamos todo como está salvo JPEG Quality, dónde cuanto más se acerque a 100 menos se comprimirá la imagen con lo que perderá menos calidad pero ocupará más. Como no son imágenes muy pesadas ni tenemos archivos de audio en la biblioteca, lo ponemos a 100. Para comprobar que todo funciona, abrimos la película con cualquier navegador de internet. Si tenemos problemas podemos bajar la versión de Flash en Version y de ActionScript en Versión de ActionScript/ ActionScript Version dentro del menú de antes.




Para poner en el foro la presentación  la subimos a photobucket y copiamos el url link.
El código para ponerlo es:
[flash=600,60]http://i141.photobucket.com/albums/r60/lolsticiodeverano/Tutoriales/EjemploFIN.swf[/flash]
El número a la izquierda de la coma es el ancho y el de la derecha el alto, así tendríamos un flash de 600x60 píxeles.


Nuestra animación, finalmente nos queda así:
http://i141.photobucket.com/albums/r60/lolsticiodeverano/Tutoriales/EjemploFIN.swf







Atentamente: lol

Jiang Wei

Muchas gracias por el tutorial, la verdad es que siempre quise saber hacer gif como firmas, y ¿para poner un gif en una firma se hace igual?

Se despide vuestro fiel servidor Jiang Wei.
Se hizo justicia:




lol

Cita de: Jiang Wei en 25 de Julio de 2007, 02:00:33 AM
Muchas gracias por el tutorial, la verdad es que siempre quise saber hacer gif como firmas, y ¿para poner un gif en una firma se hace igual?

Se despide vuestro fiel servidor Jiang Wei.
No, para gifs mejor usar (en mi opinión) ImageReady. Mañana escribo uno para hacer un gif con esas mismas imágenes aprovechando que aún no lo he borrado :P.


Atentamente: lol

PES Hero

Plas, plas, plas, sí señor, pedazo de tutorial, muchas gracias por responder a la petición que te hice, lo agrego ahora mismo al índice de tutoriales. :)
[refle width=420 height=220]http://i8.photobucket.com/albums/a11/PES_Hero/dpfkb0rkgsd.png[/refle]

Cita de: loversandbrotherseSTAS PARA QUE TE ENCIERREN, PERO NO POR ENFERMEDAD METAL SINO POR CUTREZ MALDITO HIJO DE PUTA. DEJA YA ESTA MIERDA DE POSTS Y ESCRIBE ALGO GRAXIOSO DE VERDAD, SOSOMAN SOSOMAN

[refle width=65 height=15]http://i8.photobucket.com/albums/a11/PES_Hero/_noevil__by_zacthetoad.gif[/refle]

"An admin. never ignore"

Jiang Wei

Cita de: lol en 25 de Julio de 2007, 02:19:06 AM
No, para gifs mejor usar (en mi opinión) ImageReady. Mañana escribo uno para hacer un gif con esas mismas imágenes aprovechando que aún no lo he borrado :P.

Atentamente: lol

Genial, entonces lo esperaré, demientras probaré a hacer lo del Cactilio y cuando más o menos lo sepa hacer, ya probaré a hacer con los del Dynasty. ;D

Ahora solo me queda bajarme el Macromedia y el ImageReady.

De nuevo gracias por tu excelente tutorial. ;)

Se despide vuestro fiel servidor Jiang Wei.
Se hizo justicia:




lol

Cita de: Jiang Wei en 27 de Julio de 2007, 16:26:01 PM
Genial, entonces lo esperaré, demientras probaré a hacer lo del Cactilio y cuando más o menos lo sepa hacer, ya probaré a hacer con los del Dynasty. ;D

Ahora solo me queda bajarme el Macromedia y el ImageReady.

De nuevo gracias por tu excelente tutorial. ;)

Se despide vuestro fiel servidor Jiang Wei.
Uuuuuupsssss, se me olvidó, me pongo ahora mismo xD. Si es que las horas no eran las más indicadas para postear xD.


Atentamente: lol