Tutorial Swish Mascara

Tostador

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

B

interesante... luego intentare hacer el tutorial ;)

Whose

Muy currado :P Lo unico que el paso2 da error 404, arreglalo cuando puedas.

Lo subo y lo añado a los tutoriales.

Tostador

Listo link 2 funcionando :), si os gusta este pondre efectos de texto muy wapos, si quereis el proximo hacemos este

http://home.btconnect.com/JCONLTD/ejemplo2.swf

Whose

Claro hombre, haz todos los que te apetezca, ya sabes que son bienvenidos :)

B

Ostia ese esta mas guapo xDDDDDDDD

Gandalf530

gracias, a la noxe le hecho un vistazo mas a fondo

erdanblo

Chulo, muy chulo... hacen falta creo yo más tutos de este tipo con swish.

B

bien esho el tutorial, aunq ya q os poneis a aprender flash, usar el macromedia flash mx, porq el swish a corto plazo se os quedará corto

por ejemplo, el gran fallo q tiene el swish (se ve claramente en las animaciones) es q no puedes subir los frames por segundo, q por defecto creo q va a 12, y eso... dá unos resultados muy alejados de algo "profesional"

y otra cosa q no tengo muy clara, acepta action script el swish ? (en el "max" me dicen q si), si no es así, ni os molesteis en bajarlo y aprender a usarlo, porq cuando querais llegar a más no podreis xD

pd. mi humilde opinión xD

Tostador

Para eso puedes usar swishmax, en swish puedes usar los fotogramas por segunda que quiereas y aceptan actionscript ambos swishmax mas completo que swish. No afirmes sin saber se puede hacer exactamente los mismo con swish max que con flash mx exactamente, quiza swish mas rapido y sencillo me arriesgaria a decir

Editado: comenzar con swish y dar el salto a swish max es muy sencillo, te puedo asegurar que yo solo le he encontrado ventajas, y el actionscript dime tan solo lo que quieras y en swish max tan solo es a;adirlo.

Pruebalo y me dices baja los dos y comienza con los dos a ver con cual terminas antes una pagina que quieras sacar con el mismo contenido (script incluido) :)

B

ahm pues me equivoqué, use el swish de no se q version (seguro q el max no, porq hace mucho) y los fps pos no los podia cambiar y action script creo q tampoco se podia meter

no dudo q sea mas rapido, pero el flash me da mas sensacion de robustez, no se, ya son cosas personales, nada objetivo xD

dre

swish, programa complicado dnd los haya ..

T

el de "Jcon Design" como se ponen esos efectos ?

Tostador

Dibujandolos con un degradado transparente mas o menos al 30% uno por uo con un poquito de paciencia y dandoles despues la orden de aparicion 1 por 1 en la escala de tiempo, dentro de un rato pongo el archivo de seish si quieres verlo y asi lo estudias con calma y haces pruebas con el a partir de ahi, enga un saludo :)

T

ok thx ;)

Tostador

Tomate mandame por mensajeria privada el mail y te envio el archivo que tengo ligeros problemas con el ftp, enga un saludo :)

T

e echo ya varias cosas tipo como en el ejemplo ese ke tu pusiste... ahora a ver si aprendo a retocar las letas con esos efectos y tal ;D

darkblade60

pon todo lo que te sepas :D

DAUS0N

wow xD, lo acabo de hacer y me acaba de salir con el ojo2 y ojo 4 sale rlz :D ahora voy a probar a hacer con un diseño ke hare ahora y aver ke tal :D y si sale rlz a galeria de trabajos ke va! ajajaj :P

7 meses después
Shakurita

llego tarde :( y los links no van, si alguien los puede poner bien, o si me lo quiere pasar :(:(:( ?? pls

un saludo.

SkavenXXI

Josh ... no xuta... OSTIA PUTA! ...

Si lo arreglais me dais un toke, ok? ... :\

1 año después
FatalEagle

dan error to2 los links! salu2

Usuarios habituales