Cómo Crear un Botón Brillante en Flash

En este video tutorial te voy a enseñar, paso a paso, cómo crear un botón brillante o con efecto cristal utilizando Flash.

Crea la Capa Base

Para crear este tipo de botones, el primer paso es crear una capa base. Esta capa define la forma del botón y contendrá su color de fondo y el efecto rayado.

• Empieza añadiendo una capa llamada base.
• Haz clic en la herramienta rectángulo (R).
• En el panel propiedades, da un valor de 5 al radio de las esquinas del rectángulo.
• Utilizando el ratón, dibuja un rectángulo de las medidas y la forma que necesites.
• Cambia a la herramienta selección (V)
• Selecciona el rectángulo y cambia el color de su relleno de blanco a verde.
• Borra el borde seleccionándolo y pulsando la tecla suprimir.
• Selecciona el rectángulo y conviértelo en un Clip de Película.
• Nombra el Clip de Película “color base”.
• Edita las propiedades y asigna un efecto iluminado interno al rectángulo
• Ajusta el ‘desenfoque’ y la ‘intensidad’ para darle una sutil sombra interior oscura.
• Juega con los valores hasta que tenga un aspecto que te guste

Crea la Sombra Interior

La sombra interior da al botón profundidad y viveza. El tamaño de la sombra dependerá de tus preferencias. Te recomiendo que crees una sombra lo más parecida posible a la del ejemplo y luego juegues con ella hasta que obtengas la apariencia que más te guste.

• Haz doble clic en el rectángulo para editarlo. Selecciona y copia la forma original ¡No copies el Clip de Película! ¡Copia sólo la forma dentro del clip!
• Crea una nueva capa y llámala “sombra interior”.
• Pega la forma que has copiado en la nueva capa.
• Alinéala de manera que cubra la original.
• Accede a las propiedades de color
• Cambia el tipo de color de “sólido” a “linear”
• Asegúrate de que el color en el selector de la derecha es el negro y que el valor de alfa es del 100%. Para el selector de color de la izquierda, el color debe ser negro y el valor de alfa 0%.
• Selecciona la herramienta de transformación de relleno (F)
• Si la herramienta de transformación de relleno no está visible en la barra de herramientas, puedes utilizar la tecla de acceso rápido F o presionar y mantener presionado el botón izquierdo del ratón sobre la herramienta de transformación libre.
• Usa el control redondo exterior para ajustar la orientación del degradado de horizontal a vertical. Quieres que la sombra empiece en la parte inferior y se desvanezca hacia la parte superior.
• Utiliza el control cuadrado para reducir la altura del degradado.
• Utiliza los controles centrales para desplazar el degradado hacia abajo
• Ajusta la posición exacta y la altura del degradado según tus preferencias. Lo que buscas es una sombra sutil sin bordes demasiado marcados.

Creando la Capa del Efecto de Resaltado

Aquí es donde la magia tiene lugar. Un simple botón se convierte en algo fantástico delante de tus ojos. Es fácil de hacer y los resultados son increíbles.

• Copia el gráfico en una nueva capa llamada “brillo superior”
• Asegúrate de que tienes el gráfico seleccionado y accede a las propiedades de color.
• Cambia el valor de los colores de la derecha y de la izquierda de negro a blanco.
• Selecciona la herramienta de transformación de relleno (F)
• Usando el control redondo exterior rota el degradado 180 grados.
• Ajusta la altura y posición del degradado de manera que tengas un intenso degradado blanco en la parte superior del rectángulo.
• Selecciona la herramienta línea.
• Utilizando la herramienta línea, dibuja una línea horizontal a aproximadamente 1/3 de distancia de la parte superior del rectángulo.
• Utilizando la herramienta selección, curva la línea hacia arriba.
• Borra la parte inferior del rectángulo
• Borra la línea seleccionándola y presionando la tecla “suprimir”
• Ajusta el degradado de resaltado a tu gusto.
• Selecciona la herramienta subselección
• Selecciona el resaltado para revelar los controles.
• Usa los controles para curvar la forma arqueada hacia arriba

Creando las Rayas

He añadido unas rayas a este botón porque ayudan a llamar la atención (algo importante en un botón de “compra ahora”). Una vez te sientas cómodo con las rayas, puedes intentar crear otros efectos o añadir otros patrones al fondo.

• Bloquea la capa “brillo superior” y desbloquea la capa base.
• Asegúrate de que estás utilizando la herramienta selección.
• Haz doble clic en la capa base para editar en el sitio.
• Crea una nueva capa llamada rayas.
• Copia la capa inferior.
• Pégala en la capa superior.
• Bloquea la capa inferior.
• Selecciona la herramienta línea.
• Dibuja una línea diagonal cerca de la parte inferior del rectángulo.
• Copia y pega la línea.
• Repite…
• Selecciona todas las líneas diagonales.
• Usa la herramienta alinear para asegurarte de que el espacio entre todas las líneas es igual.
• Asegúrate de que no tienes seleccionado “en el escenario”
• Arrastra las líneas a la parte superior del rectángulo
• Anula la selección de las líneas.
• Selecciona y borra las rayas alternas empezando por la segunda.
• Borra todas las líneas
• Haz clic en la capa superior y selecciona todas las rayas.
• Asegúrate de que todas las rayas están seleccionadas y cambia su color y transparencia.

Creando el Texto del Botón

Utilizo un texto de gran tamaño por la misma razón que utilizo rayas – para llamar la atención.

• Crea una capa nueva y llámala “texto”
• Selecciona la herramienta de texto
• Crea el texto utilizando el tamaño y color que quieras
• Ajusta las dimensiones, color y transparencia según tus necesidades
• Realiza los ajustes finales que sean necesarios.
• ¡Y ya está!

Utilizando estas mismas técnicas, intenta crear botones como los que aparecen aquí abajo.

¡buena suerte!