Comunidad de diseño web y desarrollo en internet online

Iconos de Adobe CS3 estilo web 2.0 con Flash

Bueno, pues como h2 visto que todo mundo le interesan estos tips he decidido mostrar cómo crear estos botones 2.0 pero ahora en Flash, esto con el propósito de que no se queden algunos estancados en Photoshop o Fireworks. Bueno pues entremos en acción:

Creamos un documento en el que el ni la versión del AS ni la velocidad de los fotogramas por segundo importará, el tamaño y el el background irían a gusto de cada uno.

El cuadrado base


Tomamos la herramienta Rectángulo (R) y dibujamos un cuadrado color negro, sin borde y con esquinas redondeadas a un tamaño de 10px.



Ahora lo seleccionamos y nos dirigimos a la paleta de Color, seleccionamos el tipo de relleno como "Radial" y los colores de rojo brillante (#FF0000) a rojo oscuro (#990000).



Ahora tomamos la herramienta Gradient Transformation ó Transformación de degrado(F) y lo acomodamos...mmm...bueno en la imagen vemos cómo, así se entiende mejor:



En síntesis es acomodar el centro en el borde inferior del cuadrado y achicar un poco el radio del degrado.
Bueno, ya tenemos nuestro cuadrado de base y ahora procederemos a crear nuestras letras, que en este caso serán "Fl"; para tener organizada la imagen creamos una nueva capa que llamaremos: letras.

Las letras


Usando la tipografía Trebuchet MS de color negro y un tamaño al gusto, según nuestro cuadrado base escribimos las letras "Fl", correspondientes a Flash. Luego de hacer esto le damos click derecho y luego a Break apart.
Lo realizamos 2 veces puesto que poseemos 2 letras, hasta tener esto:



Una forma que ya no es texto, esto para realizar el degrado que haremos, seleccionamos las dos letras y vamos nuevamente a la paleta de color pero ahora seleccionamos el tipo de relleno Linear, y colocamos de color de un negro a un blanco. Tomamos la herramienta de transformación de degrado y acomodamos el degrado hasta tener algo así:



Ahora seleccionamos nuestro cuadrado base y lo convertimos en movieClip, y aplicamos un Glow o Resplandor, va a ser inner o interior, color rojo oscuro (#660000) y de esta forma lo configuramos:



El brillo


Procederemos a crear un efecto de brillo, copiamos elcuadrado base (Ctrl+C) y creamos un grupo de capas, lo llamamos "brillo" y dentro creamos una capa llamada "degrado", pegamos el cuadrado en el mismo lugar (Ctrl+Shift+V) y manteniendolo seleccionamos vamos a la paleta de color y creamos un degrado desde un blanco 100% alfa a uno 0% alfa. Lo aplicamos de esta forma, ya transformado con la herramienta transformacion de degrado (F).



Ahh! Por poco lo olvidava, el cuadrado base lo hicimos mc, asi que le damos click derecho y Break apart.
Ahora creamos una capa en el mismo grupo "brillo" y la llamamos "ovalo", va a ser arriba de "degrado" y como su nombre lo dice creamos un ovalo de cualquier color, este será el espacio donde aparecerá el degrado, mas o menos de este vuelo:



Damos click derecho a la capa "ovalo" y ahora a Mask o Máscara, si lo deseas puedes volver a modificar el "degrado" si es que tu brillo se ve muy "cortado".

Efectos extra


Podemos optar por convertir las letras en un mc y aplicarle una ligera sombra.
Ahora vamos a los filtros del cuadrado base y aplicamos otra ligera sombra.
Copiamos el cuadrado base y lo pegamos en una capa que llamaremos "reflejo" ésta irá debajo de todas, lo pegamos en el mismo lugar (Ctrl+Shift+V) y le damos Break apart y presionamos Q para transformarlo libremente, tomamos el punto central superior y lo arrastramos hasta tenerlo volteado:



Vamos a la paleta de Color y ponemos un degrado linear desdeun rojo medio (#CC0000) 100% alfa a uno 0% alfa,lo arreglamos con la herramienta de transformar degrados hasta tener nuestro resultado final:



Descargar archivo .fla

Se que faltó el Glow interior en las letras, pero eso a mi no me gustó, claro que si lo desean solo aplican el filtro y ya.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate