Share
Het vergrendelscherm maakt deel uit van een besturingssysteem dat meestal wordt gebruikt op mobiele apparaten en voorkomt onbedoelde invoer. Deze snelle tip laat zien hoe je een Android-vergrendelingsscherm met ActionScript simuleert. Laten we gaan!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Dit is een zeer eenvoudige versie van het Android-patroonslotscherm. Sleep met uw muis over de punten in het pad aangegeven door de semi-transparante witte lijnen om de SWF te "ontgrendelen". Uiteraard zijn de witte lijnen alleen aanwezig voor demonstratiedoeleinden!
We zullen gebruik maken van muisgebeurtenissen en arrays om de gebruikersinvoer en het juiste patroon op te slaan en te vergelijken. Een nieuw scherm wordt getoond wanneer het juiste patroon wordt ingevoerd.
Start Flash en maak een nieuw Flash-document, stel de stage-grootte in op 320x480 px en de framesnelheid op 24 fps.
Dit is de interface die we zullen gebruiken, de witte stippen in de afbeelding zijn MovieClips met de naam van links naar rechts een twee drie… enzovoorts. Semi-transparante witte lijnen worden gebruikt om het juiste wachtwoord aan te geven (mogelijk wilt u dit voor echt gebruik verwijderen).
Maak een nieuwe ActionScript-klasse (Cmd + N), sla het bestand op als Main.as en schrijf de volgende regels, lees de opmerkingen in de code om het gedrag van de klas volledig te begrijpen.
Wijzig de waarden in de voorbij lopen array om het ontgrendelpatroon te wijzigen.
pakket import flash.display.Sprite; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; public class Main breidt Sprite uit private var dots: Array = []; // Slaat het persoonlijke var-patroon in filmclips op in de werkstand: Array = []; // Het patroon ingevoerd door de gebruiker private var pass: Array = [1,2,3,6,9,8,5]; // Het juiste patroon om de openbare functie voort te zetten Main (): void dots = [één, twee, drie, vier, vijf, zes, zeven, acht, negen]; // voeg de clips toe in fase addListeners (); private function addListeners (): void // voegt de luisteraars toe aan elke punt var dotsLength: int = dots.length; for (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
Vergeet niet om de klassenaam toe te voegen aan de Klasse veld in de Publiceren deel van de eigenschappen paneel.
U hebt een handig vergrendelingsscherm gemaakt voor uw applicaties of zelfs een website. U kunt het project aanpassen aan uw behoeften of deze techniek gebruiken om uw eigen LockScreen te bouwen. Hoe zit het met het gebruik van het grafische object van een Sprite om lijnen te tekenen die het pad van uw muis volgen?
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Opmerking van de uitgever: Krijg je geen genoeg van Android? Bekijk het laatste nieuws Envato ™ site: Android.AppStorm.net!
Accentsconagua