La pantalla de bloqueo es parte de un sistema operativo, utilizado principalmente en dispositivos móviles, que evita la entrada accidental. Esta sugerencia rápida le mostrará cómo simular una pantalla de bloqueo de Android con ActionScript. Vámonos!
Echemos un vistazo al resultado final en el que trabajaremos:
Esta es una versión muy simple de la pantalla de bloqueo de patrón de Android. Arrastre el mouse a lo largo de los puntos en la ruta indicada por las líneas blancas semitransparentes para "desbloquear" el SWF. Naturalmente, las líneas blancas solo están ahí para propósitos de demostración.!
Haremos uso de los Eventos y Arrays del Ratón para almacenar y comparar la entrada del usuario y el patrón correcto. Se mostrará una nueva pantalla cuando se ingrese el patrón correcto.
Inicie Flash y cree un nuevo documento de Flash, establezca el tamaño del escenario en 320x480px y la velocidad de fotogramas en 24 fps.
Esta es la interfaz que usaremos, los puntos blancos en la imagen tienen MovieClips nombrados de izquierda a derecha uno dos tres… y así. Las líneas blancas semitransparentes se utilizan para indicar la contraseña correcta (es posible que desee eliminarla para uso real).
Cree una nueva clase de ActionScript (Cmd + N), guarde el archivo como Main.as y escriba las siguientes líneas, lea los comentarios en el código para comprender completamente el comportamiento de la clase..
Cambiar los valores en la pasar
matriz para cambiar el patrón de desbloqueo.
paquete import flash.display.Sprite; import flash.events.MouseEvent; importar fl.transitions.Tween; importación fl.transitions.easing.Strong; La clase pública Main extiende Sprite private var dots: Array = []; // Almacena el patrón de var privado de in motion movieclips: Array = []; // El patrón introducido por el usuario private var pass: Array = [1,2,3,6,9,8,5]; // El patrón correcto para proceder a la función pública Main (): void puntos = [uno, dos, tres, cuatro, cinco, seis, siete, ocho, nueve]; // agregar los clips en el escenario addListeners (); función privada addListeners (): void // agrega los oyentes a cada punto var dotsLength: int = dots.length; para (var i: int = 0; i < dotsLength; i++) dots[i].addEventListener(MouseEvent.MOUSE_DOWN, initiatePattern); dots[i].addEventListener(MouseEvent.MOUSE_UP, stopPattern); /* Adds a mouse over listener and uses it to add the number of the dot to the pattern */ private function initiatePattern(e:MouseEvent):void var dotsLength:int = dots.length; for (var i:int = 0; i < dotsLength; i++) dots[i].addEventListener(MouseEvent.MOUSE_OVER, addPattern); pattern.push(dots.indexOf(e.target) + 1); //adds the array index number of the clip plus one, because arrays are 0 based private function addPattern(e:MouseEvent):void pattern.push(dots.indexOf(e.target) + 1); //adds the pattern on mouse over private function stopPattern(e:MouseEvent):void //stops storing the pattern on mouse up var dotsLength:int = dots.length; for (var i:int = 0; i < dotsLength; i++) dots[i].removeEventListener(MouseEvent.MOUSE_OVER, addPattern); checkPattern(); private function checkPattern():void //compares the patterns var pLength:int = pass.length; var correct:int = 0; for (var i:int = 0; i < pLength; i++) //compares each number entered in the user array to the pass array if (pass[i] == pattern[i]) correct++; if (correct == pLength) //if the arrays match var sView:SecondView = new SecondView(); //add a new view addChild(sView); var tween:Tween = new Tween(sView,"x",Strong.easeOut,320,0,0.8,true); pattern = []; //clears the user array
Recuerde agregar el nombre de la clase a la Clase campo en el Publicar sección de la Propiedades panel.
Ha creado una pantalla de bloqueo útil para sus aplicaciones o incluso un sitio web. Puede adaptar el proyecto para satisfacer sus necesidades o usar esta técnica para construir su LockScreen personalizado. ¿Qué tal si usas el objeto gráfico de un Sprite para dibujar líneas que siguen la ruta de tu mouse??
Espero que te haya gustado este tutorial, gracias por leer.!
Nota del editor: ¿No puedes tener suficiente de Android? Echa un vistazo a las últimas Envato ™ sitio: Android.AppStorm.net!