Hola amigos, tengo ya un tiempo sin postear tutoriales pues he estado trabajando y algo ocupado cun un curso de integracion de php en HTML que he estado escribiendo, pero hoy por la tarde, hablando con linkgl me motive y decidi hacer un tuto de flash muy bien explicado
Bueno, que es lo que vamos a hacer, vamos a hacer botones como los de la siguiente pagina web:
http://wwwsandropenalba.com
¿Que vamos a necesitar?
Flash 2008 o superior (si no lo tienen, en mi web lo pueden descargar)
2 imagenes jpg que no pesen mas de 30KB entre las 2
Ganas de Aprender
Bueno, comenzemos
Primero abriremos flash y crearemos un nuevo proyecto lo guardaremos y le vamos a poner el nombre de boton.flv (la extencion la pone flash)
[contenido no disponible]
Una vez que hemos abierto y guardado nuestro poryecto, vamos a definir las propiedades de la pagina, yo le dare un tamaño de 140 X 140
[contenido no disponible]
[contenido no disponible]
Ya que hemos reducido nuestro documento, vamos a crear un nuevo simbolo para eso haremos click en Insertar ---> Nuevo Simbolo
[contenido no disponible]
Clip de pelicula porque esta sera la animacion principal del boton, le vamos a llamar "Animacion" para identificarlo en la biblioteca
[contenido no disponible]
[contenido no disponible]
Luego de eso, vamos a hacer click en Archivo ----> Importar y vamos a importar las 2 imagenes que seleccionamos para nuestra animacion (procuremos sean del mismo tamaño) en otro tuto explicare como hacer si no lo son
[contenido no disponible]
Veremos en la biblioteca del proyecto que se importaron correctamente los archivos
[contenido no disponible]
Ahora, vamos a crear 2 capas en la pelicula y les asignaremos nombres para no confundirnos (an la imagen dice 3 pero luego lo cambio xq si no se haria muy largo el tutorial
[contenido no disponible]
Luego, seleccionaremos la capa 1 y arrastraremos nuestro dibujo 1 al centro de la misma, porcuremos que el dibujo quede centrado para mejores resultados
[contenido no disponible]
Una vez que tenemos ubicado nuestro dibujo, lo convertiremos en un simbolo para poder animarlo como mas nos guste, asi que le daremos click derecho y convertir en simbolo
[contenido no disponible]
vamos a seleccionar grafico y le pondremos un nombre para identificarlo correctamente a la hora que trabajamos
[contenido no disponible]
una vez que hayamos terminado, veran que el cuadrito gris que rodeaba al dibujo se ha vuelto azul, ya podemos trabajar con el
[contenido no disponible]
ahora, en el fotograma 10 vamos a insertar un nuevo fotograma clave vacio, eso significa un espacio donde no haya nada escrito (siempre en la capa 1)
[contenido no disponible]
luego repetiremos el proceso hasta dejarlo como se muestra en la figura:
[contenido no disponible]
Copiaremos el contenido del fotograma 1 de la capa 1
[contenido no disponible]
y en los fotogramas 10, 20, 30 y 40 vamos a pegar el contenido mediante la opcion, pegar en el lugar (Edicion ----> Paste in place) , eso nos servira para que no se nos muevan los contenidos
[contenido no disponible]
[contenido no disponible]
luego sobre la linea de tiempo, vamos a ubicarnos y a hacer click derecho, seleccionamos, crear interpolacion de movimiento o motion track
[contenido no disponible]
y repetiremos el mismo porceso para cada uno de los intervalos de la capa 1
[contenido no disponible]
luego, en el fotograma 10, vamos a seleccionar el contenido, y vamos a darle propiedades ----> Color ----> Alfa ----> 0%
[contenido no disponible]
la imagen parecera desaparecer, en realidad lo que hemos hecho es reducir su intensdad a 0
[contenido no disponible]
Ahora, vamos a repetir el proceso para el fotograma 20
[contenido no disponible]
Una vez que hayamos terminado con esto, si nos movemos a travez de la linea de tiempo, veremos un efecto que se disuelven la imagenes, o desaparecen suavemente, ahora lo que haremos es hacer aparecer otras imagenes mienstras estas desaparecen
vamos a ocultar la capa 1, para poder trabajar comodamente en la capa 2
[contenido no disponible]
Una vez hayamos hecho esto, vamos a meter en la capa, nuestra imagen numero 2 arrastrandola hacia el centro (muy importante) ahi nomas la converitremos en simbolo ---> Grafico
[contenido no disponible]
Luego, vamos aplicarle las mismas propiedades que en el anterior a la linea de tiempo, y al grafico le daremos alfa 0 unicamente en los fotogramas 1 y 30
[contenido no disponible]
Luego de hacer esto, si le damos en reproducir pelicula o le damos enter, veremos que se ha creado un bonito efecto de slideshow
Ahora vamos a crear el boton en si, para eso nos iremos a insertar ---> Nuevo simbolo ---> Boton
[contenido no disponible]
Veremos una linea de tiempo diferente, algo como esto mas o menos
[contenido no disponible]
Lo que haremos es que crearemos 3 fotogramas clave en cada uno de los espacios del boton
[contenido no disponible]
[contenido no disponible]
Luego, meteremos en el fotograma 1 y 3 el grafico que queremos para el boton, usualmente, se usa el grafico que se usa primero para la animacion
[contenido no disponible]
en el fotograma 2 vamos a arrastrar la animacion dentro del boton, esto significa que cuando alguien se ubique sobre el boton, la animacion empezara
[contenido no disponible]
una vez que terminamos con esto, vamos a regresar a la Escena 1
[contenido no disponible]
Vamos a arrastrar el boton dentro de la escena y lo ajustaremos para que calce adecuadamente
[contenido no disponible]
para probar que todo esta en orden, vamos a ir a Control ---> Probar pelicula o test movie
[contenido no disponible]
Se tengria que ver algo mas o menos asi, cando pasen el mouse por encima del boton
[contenido no disponible]
Ahora, le aplicaremos una ruta al boton (hay que hacerlo desde flash, no se puede desde HTML)
vamos a abrir la ventana "Acciones" o "Actions"
[contenido no disponible]
Se nos Abrira una ventana como esta:
[contenido no disponible]
Una vez que haymos abierto la ventana de acciones, nos iremos a la categoria Global ---> Browser/Network ----> y haremos doble click en getURL
[contenido no disponible]
y teclearemos las propiedades de la ruta URL
luego exportamos nuestra pelicula reduciendole la calidad JPG para no hacerla muy pesada para internet
[contenido no disponible]
[contenido no disponible]
Y listo, ya tenemos el .swf solo para ponerlo en nuestra pagina web 8) 8) 8)
Espero que les haya servido este humilde tutorial de MzStudios ;) ya saben si les ha servido un link a mi web en su pagina me serviria
http://www.mzstudios.net46.net/
Un saludo ;)
Bueno, que es lo que vamos a hacer, vamos a hacer botones como los de la siguiente pagina web:
http://wwwsandropenalba.com
¿Que vamos a necesitar?
Flash 2008 o superior (si no lo tienen, en mi web lo pueden descargar)
2 imagenes jpg que no pesen mas de 30KB entre las 2
Ganas de Aprender
Bueno, comenzemos
Primero abriremos flash y crearemos un nuevo proyecto lo guardaremos y le vamos a poner el nombre de boton.flv (la extencion la pone flash)
[contenido no disponible]
Una vez que hemos abierto y guardado nuestro poryecto, vamos a definir las propiedades de la pagina, yo le dare un tamaño de 140 X 140
[contenido no disponible]
[contenido no disponible]
Ya que hemos reducido nuestro documento, vamos a crear un nuevo simbolo para eso haremos click en Insertar ---> Nuevo Simbolo
[contenido no disponible]
Clip de pelicula porque esta sera la animacion principal del boton, le vamos a llamar "Animacion" para identificarlo en la biblioteca
[contenido no disponible]
[contenido no disponible]
Luego de eso, vamos a hacer click en Archivo ----> Importar y vamos a importar las 2 imagenes que seleccionamos para nuestra animacion (procuremos sean del mismo tamaño) en otro tuto explicare como hacer si no lo son
[contenido no disponible]
Veremos en la biblioteca del proyecto que se importaron correctamente los archivos
[contenido no disponible]
Ahora, vamos a crear 2 capas en la pelicula y les asignaremos nombres para no confundirnos (an la imagen dice 3 pero luego lo cambio xq si no se haria muy largo el tutorial
[contenido no disponible]
Luego, seleccionaremos la capa 1 y arrastraremos nuestro dibujo 1 al centro de la misma, porcuremos que el dibujo quede centrado para mejores resultados
[contenido no disponible]
Una vez que tenemos ubicado nuestro dibujo, lo convertiremos en un simbolo para poder animarlo como mas nos guste, asi que le daremos click derecho y convertir en simbolo
[contenido no disponible]
vamos a seleccionar grafico y le pondremos un nombre para identificarlo correctamente a la hora que trabajamos
[contenido no disponible]
una vez que hayamos terminado, veran que el cuadrito gris que rodeaba al dibujo se ha vuelto azul, ya podemos trabajar con el
[contenido no disponible]
ahora, en el fotograma 10 vamos a insertar un nuevo fotograma clave vacio, eso significa un espacio donde no haya nada escrito (siempre en la capa 1)
[contenido no disponible]
luego repetiremos el proceso hasta dejarlo como se muestra en la figura:
[contenido no disponible]
Copiaremos el contenido del fotograma 1 de la capa 1
[contenido no disponible]
y en los fotogramas 10, 20, 30 y 40 vamos a pegar el contenido mediante la opcion, pegar en el lugar (Edicion ----> Paste in place) , eso nos servira para que no se nos muevan los contenidos
[contenido no disponible]
[contenido no disponible]
luego sobre la linea de tiempo, vamos a ubicarnos y a hacer click derecho, seleccionamos, crear interpolacion de movimiento o motion track
[contenido no disponible]
y repetiremos el mismo porceso para cada uno de los intervalos de la capa 1
[contenido no disponible]
luego, en el fotograma 10, vamos a seleccionar el contenido, y vamos a darle propiedades ----> Color ----> Alfa ----> 0%
[contenido no disponible]
la imagen parecera desaparecer, en realidad lo que hemos hecho es reducir su intensdad a 0
[contenido no disponible]
Ahora, vamos a repetir el proceso para el fotograma 20
[contenido no disponible]
Una vez que hayamos terminado con esto, si nos movemos a travez de la linea de tiempo, veremos un efecto que se disuelven la imagenes, o desaparecen suavemente, ahora lo que haremos es hacer aparecer otras imagenes mienstras estas desaparecen
vamos a ocultar la capa 1, para poder trabajar comodamente en la capa 2
[contenido no disponible]
Una vez hayamos hecho esto, vamos a meter en la capa, nuestra imagen numero 2 arrastrandola hacia el centro (muy importante) ahi nomas la converitremos en simbolo ---> Grafico
[contenido no disponible]
Luego, vamos aplicarle las mismas propiedades que en el anterior a la linea de tiempo, y al grafico le daremos alfa 0 unicamente en los fotogramas 1 y 30
[contenido no disponible]
Luego de hacer esto, si le damos en reproducir pelicula o le damos enter, veremos que se ha creado un bonito efecto de slideshow
Ahora vamos a crear el boton en si, para eso nos iremos a insertar ---> Nuevo simbolo ---> Boton
[contenido no disponible]
Veremos una linea de tiempo diferente, algo como esto mas o menos
[contenido no disponible]
Lo que haremos es que crearemos 3 fotogramas clave en cada uno de los espacios del boton
[contenido no disponible]
[contenido no disponible]
Luego, meteremos en el fotograma 1 y 3 el grafico que queremos para el boton, usualmente, se usa el grafico que se usa primero para la animacion
[contenido no disponible]
en el fotograma 2 vamos a arrastrar la animacion dentro del boton, esto significa que cuando alguien se ubique sobre el boton, la animacion empezara
[contenido no disponible]
una vez que terminamos con esto, vamos a regresar a la Escena 1
[contenido no disponible]
Vamos a arrastrar el boton dentro de la escena y lo ajustaremos para que calce adecuadamente
[contenido no disponible]
para probar que todo esta en orden, vamos a ir a Control ---> Probar pelicula o test movie
[contenido no disponible]
Se tengria que ver algo mas o menos asi, cando pasen el mouse por encima del boton
[contenido no disponible]
Ahora, le aplicaremos una ruta al boton (hay que hacerlo desde flash, no se puede desde HTML)
vamos a abrir la ventana "Acciones" o "Actions"
[contenido no disponible]
Se nos Abrira una ventana como esta:
[contenido no disponible]
Una vez que haymos abierto la ventana de acciones, nos iremos a la categoria Global ---> Browser/Network ----> y haremos doble click en getURL
[contenido no disponible]
y teclearemos las propiedades de la ruta URL
luego exportamos nuestra pelicula reduciendole la calidad JPG para no hacerla muy pesada para internet
[contenido no disponible]
[contenido no disponible]
Y listo, ya tenemos el .swf solo para ponerlo en nuestra pagina web 8) 8) 8)
Espero que les haya servido este humilde tutorial de MzStudios ;) ya saben si les ha servido un link a mi web en su pagina me serviria
http://www.mzstudios.net46.net/
Un saludo ;)