Share
L'écran de verrouillage fait partie d'un système d'exploitation, principalement utilisé dans les appareils mobiles, qui empêche toute saisie accidentelle. Cette astuce vous montrera comment simuler un écran de verrouillage Android avec ActionScript. Allons-y!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Ceci est une version très simple de l'écran de verrouillage de modèle Android. Faites glisser votre souris le long des points dans le chemin indiqué par les lignes blanches semi-transparentes afin de "déverrouiller" le SWF. Naturellement, les lignes blanches ne sont là que pour la démonstration!
Nous utiliserons les événements de souris et les tableaux pour stocker et comparer les entrées utilisateur et le modèle correct. Un nouvel écran sera affiché lorsque le modèle correct est entré.
Lancez Flash et créez un nouveau document Flash, réglez la taille de la scène sur 320x480px et la cadence sur 24 images par seconde.
C'est l'interface que nous allons utiliser, les points blancs dans l'image sont nommés MovieClips de gauche à droite. un deux trois… etc. Des lignes blanches semi-transparentes sont utilisées pour indiquer le mot de passe correct (vous pouvez vouloir le supprimer pour un usage réel).
Créez une nouvelle classe ActionScript (Cmd + N), enregistrez le fichier sous Main.as et écrivez les lignes suivantes, veuillez lire les commentaires dans le code pour bien comprendre le comportement de la classe.
Changer les valeurs dans le passer tableau afin de changer le modèle de déverrouillage.
package import flash.display.Sprite; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; classe publique Main étend Sprite private var dots: Array = []; // Enregistre le modèle var privé de la scène dans movieclips: Array = []; // Le modèle entré par l'utilisateur private var pass: Array = [1,2,3,6,9,8,5]; // Le modèle correct pour procéder à la fonction publique Main (): void points = [un, deux, trois, quatre, cinq, six, sept, huit, neuf]; // ajoute les clips dans la phase addListeners (); fonction privée addListeners (): void // ajoute les écouteurs à chaque point var dotsLength: int = dots.length; pour (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
N'oubliez pas d'ajouter le nom de la classe à la Classe champ dans le Publier section de la Propriétés panneau.
Vous avez créé un écran de verrouillage utile pour vos applications ou même pour un site Web. Vous pouvez adapter le projet à vos besoins ou utiliser cette technique pour créer votre LockScreen personnalisé. Pourquoi ne pas utiliser l'objet graphique d'un Sprite pour dessiner des lignes qui suivent le chemin de votre souris?
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Note de l'éditeur: Vous ne pouvez pas vous passer d'Android? Découvrez les dernières Envato ™ site: Android.AppStorm.net!
Accentsconagua