Share
En este tutorial convertirás tu texto para darle un efecto de cristal, usando filtros en Flash. Esta técnica también funciona en gráficos vectoriales. Lo lograremos con un método bastante simple de superponer varias capas con diferentes efectos..
Echemos un vistazo al resultado final en el que trabajaremos. Este es un archivo SWF y el texto a continuación es seleccionable, así que adelante, seleccione el texto de vidrio para ver un resaltado similar al vidrio:
Abra su versión de Flash y abra un nuevo archivo Flash. La versión de ActionScript no importa para este tutorial, ya que no hay código. En su archivo, ponga un campo de texto en el escenario. Para hacerlo, haga clic en el botón de texto (T) en el menú Herramientas y arrastre un rectángulo en el escenario como se muestra en la siguiente imagen:
Una vez dibujado, puede ingresar su elección de texto en el campo y establecer sus propiedades en consecuencia. El efecto de vidrio es más prominente en las fuentes más grandes y audaces, así que he elegido Elefante aquí, pero puedes elegir la fuente que te guste. Haga clic en el botón Seleccionable para que el texto se pueda seleccionar en el SWF final. El color de la fuente no importa aquí.
Opcionalmente, es posible que desee ver cómo funciona el efecto en los gráficos vectoriales. Así que solo dibujaré un pequeño gráfico usando la herramienta básica de dibujo de Flash. Tenga en cuenta que el efecto de vidrio no tendrá en cuenta los contornos o los colores, por lo que los gráficos antiguos en un solo color son suficientes por el momento. Una vez que haya terminado con los pasos 1 y 2, tendrá algo como esto en su escenario:
También puede importar gráficos vectoriales a la superficie Flash, pero tenga en cuenta que este efecto no detecta las diferencias de color..
Ahora vamos a crear nuestro primer símbolo. Seleccione su texto y todos los gráficos vectoriales (puede hacerlo arrastrando un rectángulo alrededor de todo). Con todos los elementos seleccionados, haga clic con el botón derecho y haga clic en "Convertir a símbolo" como se muestra a continuación:
Nombre su símbolo como lo desee y establezca su tipo en Clip de película; Lo he llamado como "gtext". Entonces, cuando hace clic en la ventana y abre la ventana de la biblioteca, puede ver un elemento llamado gtext ahí. De aquí en adelante, me referiré a este símbolo como "gtext". Este será un buen punto para salvar tu trabajo..
Una vez más, haga clic derecho en el símbolo gtext recién creado y conviértalo en símbolo, esta vez ingrese el nombre como "vidrio". Hacemos esto para crear otra película contenedora..
Ahora tendremos un símbolo de vidrio, dentro del cual tenemos un símbolo gtext. Ambos símbolos son visibles en la biblioteca..
Ahora haga doble clic en el símbolo de vidrio para verlo en modo de edición. Todos los pasos restantes se realizarán dentro de este símbolo de vidrio..
Haga doble clic en el icono cuadrado azul junto al símbolo de vidrio en el panel de la biblioteca (Ventana> Biblioteca). Esto abrirá el símbolo de vidrio en el modo de edición. Tenemos una capa llamada Capa 1 en esta ventana. Agregue una nueva capa haciendo clic en el botón Nueva capa en la esquina inferior izquierda de la ventana de la línea de tiempo. Haga clic y mantenga presionado el botón del mouse sobre la nueva capa para comenzar a arrastrarla y arrastre esta nueva capa hasta debajo de nuestra capa actual 1. Cambie el nombre de la nueva capa a "fondo" haciendo doble clic en el nombre de la capa.
Es posible que desee ocultar o bloquear la Capa 1 para poder editar la capa de fondo fácilmente. Haga clic en el punto debajo del icono de ojo / bloqueo en la línea de tiempo para hacerlo. Ahora seleccione la capa de fondo en la línea de tiempo y haga clic en la herramienta Rectángulo en el panel de herramientas; establezca el contorno en nulo y coloréelo en azul en el panel Propiedades como se muestra en la imagen a continuación. También he seleccionado el redondeo de las esquinas para hacer que mi rectángulo se vea mejor..
PROPINA: También puede usar una imagen para el fondo aquí, en lugar de un relleno plano.
Mientras edita el símbolo de vidrio, en el panel de línea de tiempo, haga clic tres veces en el botón Nueva capa para crear tres capas nuevas. Ahora tiene cinco capas: la capa de fondo, la Capa 1 y tres capas nuevas. Renombrar Capa 1 a bisel2 y las otras capas nuevas para sombra, contorno, bisel1, y bisel2 como se muestra a continuación (puede cambiar el nombre de las capas haciendo doble clic en sus nombres).
Desde el panel de Propiedades, note las coordenadas x e y de gtext ya colocado en el escenario que ahora está en bisel2 capa en x = 75 e y = 10 para mi dibujo.
A continuación, bloquee todas las capas excepto la que está trabajando (haciendo clic en el punto debajo del bloqueo en la ventana de la línea de tiempo) para asegurarse de no mover las cosas por accidente. También puede ocultar algunas capas haciendo clic en el punto debajo del ojo en la ventana de la línea de tiempo. Seleccionar bisel2 capa, abra el panel de la biblioteca, y arrastre gtext en el escenario.
Una vez colocado en el escenario, haga clic en el nuevo gtext símbolo para seleccionarlo y establecer su posición x e y en el panel Propiedades> pestaña de posición para que sea exactamente igual a la capa anterior, que estaba en x = 75 e y = 10 para mi película.
Una vez que haya terminado con el posicionamiento, bloquee la capa actual para que no se cambie accidentalmente.
Repita los dos pasos anteriores (Paso 6 y Paso 7) para las dos capas restantes, de modo que al final, cada una de las cuatro capas tendrá el mismo elemento colocado en las mismas coordenadas. La imagen de abajo muestra que al especificar las coordenadas exactamente en el cuadro de propiedades, no tenemos bordes superpuestos.
Bloquee y oculte todas las capas (haciendo clic en los puntos debajo del ojo y el bloqueo en la línea de tiempo) y desbloquee y muestre solo la sombra capa. Selecciona el gtext símbolo en esta capa y abra el panel de Propiedades. En las propiedades, expanda la pestaña "filtros" si está minimizado. En la esquina inferior izquierda, hay un botón Agregar filtro; haga clic en este y seleccione el filtro de bisel.
Ajuste las configuraciones de bisel a Desenfoque = 20px, Fuerza = 80%, Ángulo = 90 °, Distancia = 10px, y marque la casilla contra Knockout. Si desea aplicar el ajuste en una escala más pequeña, con texto más pequeño, puede cambiar las propiedades de Desenfoque y distancia en proporción, pero en general, el Desenfoque por debajo de 10px no será adecuado.
Bloquee y oculte todas las demás capas y desbloquee y muestre solo la capa de contorno. Selecciona el gtext símbolo de esta capa, abra la pestaña Filtros en el panel Propiedades y agregue un filtro Brillo. Establezca las propiedades del filtro incandescente en Desenfoque = 2px, Fuerza = 50%; establezca el color en blanco y verifique las opciones de Inner y Knockout. Esto se muestra en la imagen de abajo y también puede ver el contorno resultante.
Bloquee y oculte todas las demás capas y desbloquee y muestre solo la capa de contorno. Selecciona el gtext En este símbolo, abra la pestaña Filtros en el panel Propiedades y agregue otro filtro de bisel. Establezca las propiedades del filtro de bisel en Desenfoque = 2px, Ángulo en 69 °, Distancia en 1px y marque la opción Knockout. Esto se demuestra en la imagen de abajo..
Bloquee y oculte todas las demás capas y desbloquee y muestre solo las contorno capa. Selecciona el gtext En esta capa, abra la pestaña Filtros en el panel Propiedades y agregue un filtro biselado más. Configure las propiedades del filtro de bisel a Desenfoque = 6px, Fuerza = 45%, Ángulo a 45 °, Distancia a 2px y, una vez más, marque la opción Knockout. Esto se muestra en la imagen de abajo..
Selecciona el gtext instancia de símbolo en sombra capa, bloquear todas las otras capas para que no se perturben. En el panel Propiedades, seleccione la pestaña Filtros y agregue un filtro de sombra además del bisel existente. Establezca Desenfoque en 0px, Fuerza en 150%, Ángulo en cualquier valor, dependiendo de dónde desea que esté el sol y la distancia (pruebe entre 10px y 20px). La configuración y el resultado final son visibles en la imagen de abajo..
Revela todas las capas y prueba tu película en Flash, el resultado final será algo similar a la película que se muestra a continuación.
La película no parece muy impresionante con solo ese texto. Cambiemos un poco el texto; Vaya a Ventana> Biblioteca y haga doble clic en el icono junto a la gtext Símbolo para editarlo en el panel de vista. Ahora depende de usted modificar los elementos dentro de este símbolo. Por ejemplo, puede agregar nuevos campos de texto con diferentes tamaños de fuente, agregar más gráficos o animaciones. He jugado un poco con el gtext y agregó algunas cosas que incluyen diferentes fuentes, rectángulos, gráficos animados con formas cambiantes, una línea de puntos gruesos y algunos gráficos con valor alfa al 50%. Aquí está lo que tengo en el tablero de dibujo dentro de gtext símbolo.
El resultado final se puede ver exportando el SWF:
Podemos cambiar la cantidad de reflexión visible sobre el vidrio como deseemos. Desbloquear el sombra capa y bloquear todas las demás capas. Selecciona el gtext en esta capa y haga clic en la pestaña "Efecto de color" en el panel Propiedades. Seleccionar Brillo desde el menú desplegable y cambie la cantidad a alrededor de -30; Esto reducirá la cantidad de reflexión de la superficie del vidrio. La siguiente imagen muestra el efecto de antes y después de hacerlo:
Ah, pero la luz del sol es amarilla, no blanca. Podemos cambiar el color de la luz de reflexión editando los ajustes de filtro para el sombra capa. Deshaga el cambio de brillo del paso anterior cambiando el estilo en Efecto de color de nuevo a ninguna. Mantener el gtext en sombra capa seleccionada como en ese paso, luego seleccione la pestaña Filtro, modifique el color de Resaltar del filtro de bisel a amarillo y establezca el Alfa en 60%.
Para cambiar el color del vidrio, comience una vez más seleccionando el filtro de bisel en el sombra capa como en el paso anterior. Esta vez, en lugar de cambiar el resaltado, modifique la propiedad de la Sombra para seleccionar su color. Para obtener el mejor efecto de color, combine los colores de Resaltar y Sombra con una buena variación de tono: con un resaltado amarillo, puedo elegir entre cualquier tono de amarillo, naranja, verde o incluso rojo sin hacer que mi cristal se vea poco realista. Una vez más, establezca el valor Alfa como en el paso anterior en un valor cercano al 50% según su color. He elegido 50% rojo aquí.
PROPINA: También es posible que desee cambiar el color de la sombra y el fondo para que coincida con esta configuración.
Así que ahora tenemos dos símbolos en nuestra biblioteca. Uno es el vaso símbolo y otro es el gtext símbolo. El símbolo de vidrio se puede editar para modificar las propiedades del vidrio, mientras que el símbolo gtext se puede modificar para cambiar el contenido que se va a cristalizar. Puede arrastrar y soltar el símbolo de cristal en cualquier animación Flash de su propia elección para reutilizar este efecto y cambiar el contenido del gtext en consecuencia. En resumen, tiene a mano un agradable y útil componente de vidrio. Te recomendaría jugar con la configuración y desactivar capas o agregar nuevas capas para ver cómo puedes personalizar aún más este vidrio..
¿Por qué no probar a hacer un script JSFL que puede agregar automáticamente el efecto Glassify a cualquiera de sus símbolos vectoriales con un solo clic??
Accentsconagua