Share
Un CheckBox es un elemento de interfaz gráfica de usuario que le permite al usuario hacer una o varias selecciones de una serie de opciones..
En este tutorial, crearemos una casilla de verificación Cambiar inspirada en la interfaz gráfica de usuario del iPhone. Sigue leyendo para descubrir cómo!
Usando las herramientas de dibujo de Flash, crearemos un interruptor vectorial que será controlado por clases. Una clase se hará cargo de todo el comportamiento del Switch y otra clase simplemente verificará el valor del Switch. Vamonos!
Abra Flash y cree un nuevo archivo Flash (ActionScript 3).
Establezca el tamaño del escenario en 600x300 y el color en # EFEFF0.
Ahora vamos a crear los gráficos Switch.
Seleccione la Herramienta de rectángulo primitivo (R) y cree un rectángulo de px 280x80, llenándolo con este degradado lineal: # 505052, # ACADB1.
Use la herramienta Transformación de degradado para rotar el degradado horizontalmente y cambie el radio de la esquina (Panel de propiedades) a 10.
Dibujaremos dos fondos para el Switch, el fondo OFF y el fondo ON..
Duplique la forma anterior y cambie su tamaño a 276x76 px. Cambie el coeficiente lineal a # 9A9A9A, # F4F3F6 y mueva el último selector de color (Panel de color) a la mitad de la barra.
Seleccione la herramienta de texto (T) y cree un campo de texto estático. Escriba "OFF" y colóquelo en el lado derecho del fondo.
Usé Helvetica Neue Bold, 48 pt, # 8C8C8C.
Ahora agregaremos un botón que se puede arrastrar para modificar el valor del interruptor.
Use la herramienta Rectángulo para crear un rectángulo de px de 120x80 y rellénelo con # A19FA0, establezca el radio de la esquina en 10.
Duplique la forma y cambie su tamaño a 116x76 px, rellénela con #FCFCFE.
Para darle el toque final al botón, repita el proceso y rellene la forma con un gradiente lineal # D7D7D7, #FCFCFE. Utilice la herramienta de transformación de degradado para rotar el relleno.
Duplique el borde y el fondo DESACTIVADO, elimine el texto y cambie el degradado del borde a # 0D4372, # 6193D2.
A continuación, cambie el degradado de fondo a # 0C68B5, # 479FF9, # 6DB0F6.
Coloca la forma del borde del botón en el lado derecho..
Separar (Cmd + B) las formas para cortarlas.
Utilice el mismo formato de texto para agregar el texto "ON" al fondo.
Convierta el botón que se puede arrastrar a MovieClip y asígnele el nombre de "área". Como puede imaginar, esta será el área que se arrastrará para cambiar el valor del interruptor.
Asegúrese de que el punto de registro esté posicionado como el de las imágenes..
Seleccione todas las formas, incluido el clip de película y conviértalas de nuevo, nombre el resultado "control deslizante".
Utilice cualquiera de las formas de borde para crear otro MovieClip, esta será la máscara que ocultará parte de los gráficos. Nómbrelo "msk".
Convierte todo a MovieClip una vez más y haz doble clic en él..
Cree una nueva capa, luego corte y pegue el clip de máscara en ella. Haga clic derecho en la capa de máscara y seleccione la opción "Máscara".
Esto terminará todos los gráficos. Ahora su interruptor debería tener este aspecto (observe el punto de registro):
Abra la biblioteca y haga clic con el botón derecho en el símbolo de cambio. Seleccione Propiedades, marque la casilla "Exportar para ActionScript" y escriba "Cambiar" como nombre de clase.
Cree un nuevo documento ActionScript y guárdelo como "Switch.as".
Importar las clases requeridas. Si necesita ayuda específica para alguno de estos, consulte la Ayuda de Flash (F1).
paquete import fl.transitions.Tween; importación fl.transitions.easing.Strong; importar flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle;
Estas son las variables que usaremos, explicadas en el comentario del código..
La clase pública Switch extiende Sprite private var tween: Tween; // Un objeto Tween para animación public var stat: Boolean = false; // Esta es una variable pública, se usa para conocer el valor de Switch fuera de esta clase
La función Constructor. Esta función agrega a los oyentes..
Función pública Switch (): void slider.area.addEventListener (MouseEvent.MOUSE_DOWN, switchDrag); slider.area.addEventListener (MouseEvent.MOUSE_UP, checkPosition);
Esta función maneja el botón de arrastre, en función de su posición.
función privada switchDrag (e: MouseEvent): void if (! stat) // Si Switch está apagado, podemos arrastrar hacia la derecha e.target.parent.startDrag (true, new Rectangle (0, 0, e.target .parent.parent.msk.width / 1.75, 0)); else e.target.parent.startDrag (verdadero, nuevo Rectangle (e.target.parent.parent.msk.width / 1.75, 0, -e.target.parent.parent.msk.width / 1.75, 0)) ;
Este código verifica la posición del botón que se puede arrastrar. Dependiendo de su valor, vuelve a la posición original o permanece en la nueva..
Función privada checkPosition (e: MouseEvent): void e.target.parent.stopDrag (); if (e.target.parent.x> = 140) e.target.parent.x = 160; stat = true; else if (! stat && e.target.parent.x < 140) tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,0,1,true); stat = false; // OFF to ON if (e.target.parent.x <= 20) e.target.parent.x = 0; stat = false; else if (stat && e.target.parent.x > 20) tween = new Tween (e.target.parent, "x", Strong.easeOut, e.target.parent.x, 160,1, true); stat = true;
Este es un ejemplo de cómo usar su nuevo Switch..
Cree un nuevo documento ActionScript y guárdelo como "Main.as".
Accentsconagua
package import Switch; // Importar la clase import flash.display.Sprite; import flash.events.MouseEvent; public class Main extiende Sprite public function Main (): void iSwitch.addEventListener (MouseEvent.MOUSE_UP, checkState); // iSwitch es una instancia en la etapa de la clase Switch función privada checkState (e: MouseEvent): void if (iSwitch.stat) trace ("Switch is ON!"); else trace ("¡El interruptor está apagado!"); Vuelva al archivo .Fla y en el Panel de propiedades agregue "Principal" en el campo Clase para hacer que esta sea la Clase de documento.
¡Ha creado un Switch completamente personalizable para usar en sus aplicaciones! Recuerde que puede crear sus propias máscaras y agregar muchas más funcionalidades a los estados ON y OFF.
Gracias por leer!
