Con este tutorial aprenderás a usar varias herramientas de Flash relacionadas con el manejo de rellenos para recrear un botón similar al logo de Cristalab. Además cuando quieras dibujar botones con apariencia cristalina ya no será necesario el uso de Photoshop u otro programa de diseño de imágenes.
Paso 1.- Creación del botón
Abrimos un nuevo documento Flash con las siguientes características:
Fondo: blanco, Dimensiones: 100 px (anchura) x 100 px (altura).
Del panel de herramientas seleccionamos la Herramienta Óvalo.
En el panel Mezclador de colores (shift+F9) elegimos que el estilo de relleno sea: "Radial", en el indicador de color de la izquierda ponemos el siguiente valor de color: #A0BAD4 y en el de la derecha #074B8F.
Del panel de Herramientas seleccionamos la Herramienta de Cubo de pintura y hacemos click en la parte inferior 45 grados a la derecha.
Con la Herramienta de selección selecciona el círculo y conviértelo en símbolo (F8) de tipo Botón con el nombre que desees.
Paso 2.- Texto del botón
Hacemos doble click en la circunferencia he ingresamos al botón. Por el momento trabajaremos en el estado de Reposo del mismo. Creamos 3 capas superiores con los nombres de: borde, brillo y letras.
En el primer fotograma de la capa "letras", seleccionamos la herramienta Texto, Escribimos "CL" en el centro del círculo y en la barra de propiedades buscamos un tipo de letra similar al del logo de CLab, mmmmm, bueno lo mejor sería bajar un Font similar de internet, pero por el momento opté por Lucida Console , color blanco, tamaño 60 y en negrita.
De la misma manera escribimos debajo "CRISTA" con texto Arial , tamaño 8, color blanco y sin negrita; "LAB" con texto Arial Black, tamaño 8, color blanco y con negrita para que resalte aún más. Achatamos un poco CL con la herramienta de Transformación libre.
Ahora prosigamos a darle sombra a las letras, y así tienen un toque 3D. Si te fijas sólo "CL" tiene sombra. Seleccionamos el texto "CL", lo copiamos y pegamos, con el color de relleno del panel de herramientas le cambiamos el color a #758DA5, lo situamos en la misma posición que su texto original y con CTRL + cursor abajo lo llevamos detrás del "CL" original.
Tip.- Para llevar un símbolo o texto adelante o detrás de otro en un mismo fotograma basta con seleccionarlo y presionar ctrl+cursor arriba o abajo el número de veces según las posiciones que quiera moverse.
Paso 3.- Brillo del botón
En el primer fotograma de la capa "brillo", seleccionamos la herramienta Óvalo.
En el panel Mezclador de colores (shift+F9) elegimos que el estilo de relleno sea: "Lineal", en el indicador de color de la izquierda elegimos blanco y en el de la derecha blanco con Alfa: 0%. Dibujamos un círculo un poco más pequeño que el logo como se vé en la imagen a continuación.
Seleccionamos el relleno con la herramienta de transformación de relleno (F) modificamos el relleno, aparecerá un contorno con 2 símbolos sobre una línea que demarca el área del relleno (ver imagen inferior) con el símbolo de un cuadrado, acortamos el área del relleno y con el símbolo de un círculo rotamos el relleno para que quede como un reflejo de una iluminación en diagonal. Genial no?.. ya toma un gran parecido.
Paso 4.- Borde del botón
Bueno, hay muchas formas de realizar esto, optaré por la más rápida.
Copia el círculo azul de la primera capa, lo pegamos en la misma posición (acuérdate del tip ctrl+shift+v) pero en la capa "borde", cambiamos su color de relleno a #B3B3B3 (plomo) y lo copiamos nuevamente para usarlo a futuro. Estando seleccionado el círculo vamos al Menú: Modificar>Forma>Expandir relleno y expandimos 20 pixeles.
A continuación con la Herramienta Línea (L) dibujamos 2 líneas a 45 grados atravezando al círculo como se muestra en la imagen inferior. Estas líneas acaban de cortar nuestro dibujo... por lo que borramos los 2 pedazos pequeños del círculo y las 2 líneas.
Te acuerdas que tenemos copiada en memoria el círculo, lo pegamos nuevamente manteniendo su posición, y expandimos el relleno en 20 pixeles ( imagen 1 ), volvemos a pegar el círculo en la misma posicion (recuerda con shift) y cambiamos su color a blanco, y le damos una expansión de 5 pixeles ( imagen 2 ), por último hacemos un click fuera del dibujo, de esta forma el círculo blanco lo cortará, lo seleccionamos para borrarlo y Taraaaaannn!!!!! el logo esta listo( imagen 3 ).
Paso 5.- Animación del botón ... lo más divertido
Bueno, sólo hemos trabajado el estado de reposo de nuestro botón, ahora necesitamos crear efectos en el estado de sobre y presionado. Esto queda al gusto de cada quién, pero divertámonos un rato. Seleccionamos todos los fotogramas vacíos de sobre, presionado y zona activa y presionamos F6 para llenarlos con sus respectivos fotogramas claves.
En el estado de sobre seleccionamos la capa "borde" y convertimos al borde en símbolo (F8) tipo Clip de Película = CP. Ingresamos al símbolo, y nuevamente lo convertimos en otro símbolo CP para su animación. Creamos un fotograma clave en el fotograma 30, seleccionamos un fotograma del medio y en la barra de propiedades elegimos Animar: Movimiento, Aceleración: 0, Girar: Horario 1: vez.
Tip.- Siempre que animes movimiento en flash debes cuidar 3 cosas: Primero: lo que vas a animar tiene que ser un Clip de Película, Segundo: una animación siempre toma lugar entre 2 fotogramas claves, uno indica el principio y el otro el final de la animación y Tercero: solo debe existir un CP en cada fotograma clave de una animación. De esta manera te saldrá una flecha con fondo lila con línea continua y no punteada, cuando sale punteada la línea es que uno de los anteriores 3 puntos ha fallado.
Es por esto que se convierte 2 veces en CP al borde gris del botón, la primera vez es el CP que contiene la animación y la segunda es para animarlo dentro de ese CP creado (porque recuerda que debe ser CP para moverse).
Retornamos al símbolo de nuestro botón, y en el estado de sobre seleccionamos la capa "Capa 1 ", convertimos en símbolo CP al círculo y en la barra de propiedades seleccionamos Color: Avanzado y presionamos el botón de Configuración. Nos aparece la ventana de Efectos avanzados donde podemos jugar con las propiedades RGBA del símbolo. Mantenemos todos los porcentajes en 100% y en los campos siguientes ingresamos los valores, Rojo: -255, Verde: 71 y Azul:209.. o la combinación que quieras.. puedes jugar con todo. Nuestro botón esta listo... :)
¿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?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate