Bueno lo primero un saludo a todos. Es mi primer tutorial de cualquier cosa, osea que no me machaqueis mucho si no se explicar bien las cosas, de todas maneras intentare hacerlo lo mas detallado posible, bueno vamos a ello.
En este turorial no entrare en la interface del programa solo dejare un enlace para que cada uno se lo empape por su cuenta, de todas maneras es muy sencillo e intuitivo con lo cual si estamos acostumbrados a herramientas de diseño solo necesitaremos un pequeño repaso.
Lo primero, que necesitamos evidentemente es el programa con el que vamos a trabajar, en este caso swish 2.01 en español que podemos descargar aquí en modo de 30 dias de prueba..
http://www.swishzone.com/index.php?lang=es&area=downloads&product=v2
Lo instalamos y lo abrimos.
He puesto algunos ejemplos y creo que el que mas ha gustado es el de la mascara sencilla. Asi que este sera el resultado que buscaremos.
http://home.btconnect.com/JCONLTD/mascara.swf
Para este ejemplo necesitaremos dos fotos iguales en contenido pero con diferentes colores, por ejemplo, usando photoshop sin necesidad de dominarlo mucho, se pueden conseguir dos fotos de este estilo mas o menos. Aquí os dejo 4 ejemplos por si no quereis hacer las imágenes por ahora, simplemente guardarlo todo en la misma carpeta para tenerlas a mano.
http://home.btconnect.com/JCONLTD/ojo1.jpg
http://home.btconnect.com/JCONLTD/ojo2.jpg
http://home.btconnect.com/JCONLTD/ojo3.jpg
http://home.btconnect.com/JCONLTD/ojo4.jpg
Bueno una vez abierto Swish, insertaremos las fotos con las que vamos a trabajar cualquiera que hayamos elegido. Vamos al panel esquema a la izquierda y presionamos insertar, desplegamos el panel y ponemos imagen. Importamos a swish la primera y la segunda foto una encima de la otra la mas oscura arriba que es la que nos servira de mascara, como en el ejemplo.
http://home.btconnect.com/JCONLTD/paso1.swf
Notar que el cuadrado que aparece en rojo intermitente es para ajustar a la rejilla asi tenemos la seguridad que colocamos en la misma posicion las dos fotos. Igualmente el cuadro transformar en verde nos da posicion tamaño etc... de las dos fotografias.
Lo siguiente es la mascara. La manera de entenderla es sencilla una vez que se hace, de todas formas si alguien necesita mas informacion, no dude en preguntar aquí en el foro que sera un placer aclarar las dudas. Bueno, creamos un circulo con la herramienta elipse, para este caso con color solido sin linea exterior circundando como en el ejemplo. La colocacion es fundamental ya que es desde donde partira el movimiento de la mascara.
http://home.btconnect.com/JCONLTD/paso2.swf
El siguiente paso sera desplazar la mascara hacia la derecha e izquierda dentro de la misma linea en la escala X. Como en los ejemplos.
http://home.btconnect.com/JCONLTD/paso3.swf
http://home.btconnect.com/JCONLTD/paso3a.swf
Bueno lo siguiente es crear la mascara, y esto es muy sencillo, simplemente agruparemos la primera de las fotografias (en este caso ojo2.jpg) con la elipse que hemos creado y al que hemos dado el efecto de movimiento. En swish cuando agrupamos objetos o lo que sea, cuando estos tienen algun tipo de efecto para seguir manteniendodichos efectos solo podremos agruparlos como Sprites (pelicula dentro de la pelicula principal). Ademas tendremos que darle el efecto de mascara, es muy sencillo.
Vamos y manteniendo shift o control seleccionamos los dos objetos en cuestion, ojo2.jpg y elipse. Seguidamente boton derecho sobre la selección y buscamos la opcion agrupar, y dentro de agrupar agrupar como sprite y la ejecutamos. El siguiente paso es seleccionar el sprite que hemos creado y en el panel de control del sprite a la derecha tenemos dos opciones bucle y mascara las seleccionaremos las dos y miraremos que dentro del sprite nuestras dos piezas esten como aparecen en las siguientes imágenes y voila, ya tenemos la mascara. Para probarla solo iremos a archivo, probar y probar en navegador.
http://home.btconnect.com/JCONLTD/paso4a.swf
http://home.btconnect.com/JCONLTD/paso4b.swf
http://home.btconnect.com/JCONLTD/paso5.swf
http://home.btconnect.com/JCONLTD/paso5a.swf
http://home.btconnect.com/JCONLTD/paso5b.swf
http://home.btconnect.com/JCONLTD/paso6.swf
Para aquellos que lo hagan hoy estare todo el dia pendiente para aclarar alguna que otra duda si surge ya se que no es un peadazo de tutorial pero el efecto es bueno es vuestra imaginacion el limite y vuestra capacidad con photoshop por ejemplo. Igualmente para cualquier cosa me podeis contactar con la mensajeria privada de MV. Gracias a todos y espero que os sirva de algo. Un saludo.
Editado: Por cierto de lo que estamos hablando es de ficheros swf los mismo que genera macromedia flash, pero por medio de swish mucho mas sencillo de trabajar, igualmente tenemos una opcion para generar tanto el .html como el fichero .swf