Share
Der Sperrbildschirm ist ein Teil eines Betriebssystems, das meistens in mobilen Geräten verwendet wird und das versehentliche Eingaben verhindert. Dieser Quick Tip zeigt Ihnen, wie Sie einen Android-Sperrbildschirm mit ActionScript simulieren. Lasst uns anfangen!
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Dies ist eine sehr einfache Version des Android-Bildschirms zum Sperren von Mustern. Ziehen Sie Ihre Maus entlang der Punkte auf dem Pfad, der durch die halbtransparenten weißen Linien angezeigt wird, um die SWF-Datei zu "entsperren". Natürlich sind die weißen Linien nur zu Demonstrationszwecken vorhanden!
Wir verwenden Mausereignisse und -arrays, um die Benutzereingaben und das richtige Muster zu speichern und zu vergleichen. Ein neuer Bildschirm wird angezeigt, wenn das richtige Muster eingegeben wird.
Starten Sie Flash und erstellen Sie ein neues Flash-Dokument. Stellen Sie die Bühnengröße auf 320x480px und die Bildrate auf 24 Bilder / s ein.
Dies ist die Schnittstelle, die wir verwenden werden. Die weißen Punkte im Bild sind MovieClips, die von links nach rechts benannt werden eins zwei drei… und so weiter. Halbtransparente weiße Linien werden verwendet, um das richtige Kennwort anzugeben (möglicherweise möchten Sie es für den tatsächlichen Gebrauch entfernen).
Erstellen Sie eine neue ActionScript-Klasse (Cmd + N) und speichern Sie die Datei als Main.as und schreiben Sie die folgenden Zeilen. Lesen Sie die Kommentare im Code, um das Klassenverhalten vollständig zu verstehen.
Ändern Sie die Werte in der bestehen Array, um das Entsperrungsmuster zu ändern.
package import flash.display.Sprite; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; public class Main erweitert Sprite private Var-Punkte: Array = []; // Speichert das private var-Muster in stage movieclips: Array = []; // Das vom Benutzer angegebene private var pass: Array = [1,2,3,6,9,8,5]; // Das richtige Muster, um fortzufahren public function Main (): void dots = [eins, zwei, drei, vier, fünf, sechs, sieben, acht, neun]; // füge die Clips in der Bühne hinzu addListeners (); private Funktion addListeners (): void // fügt jedem Punkt die Listener hinzu var dotsLength: int = dots.length; für (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
Vergessen Sie nicht, den Klassennamen dem hinzuzufügen Klasse Feld in der Veröffentlichen Abschnitt der Eigenschaften Panel.
Sie haben einen nützlichen Sperrbildschirm für Ihre Anwendungen oder sogar eine Website erstellt. Sie können das Projekt an Ihre Anforderungen anpassen oder diese Technik verwenden, um ein benutzerdefiniertes LockScreen-Objekt zu erstellen. Verwenden Sie das Grafikobjekt eines Sprites, um Linien zu zeichnen, die dem Pfad der Maus folgen?
Ich hoffe, Ihnen hat dieses Tutorial gefallen, vielen Dank für das Lesen!
Anmerkung des Herausgebers: Kann Android nicht genug bekommen? Schauen Sie sich das Neueste an Envato ™ Seite: Android.AppStorm.net!
Accentsconagua