Snabbtips Simulera en Android Lock-skärm med ActionScript

Låsskärmen är en del av ett operativsystem, som oftast används i mobila enheter, som förhindrar oavsiktlig inmatning. Den här snabba tipsen visar hur du simulerar en Android Lock-skärm med ActionScript. Nu går vi!


Slutresultatförhandsvisning

Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:

Det här är en väldigt enkel version av Android-skärmen. Dra musen längs prickarna i den väg som anges av de halvt transparenta vita linjerna för att "låsa upp" SWF: n. Naturligtvis finns de vita linjerna bara för demonstration!


Steg 1: Kortfattad översikt

Vi använder mushändelser och arrays för att lagra och jämföra användarinmatning och rätt mönster. En ny skärm visas när rätt mönster har angetts.


Steg 2: Ställ in din Flash-fil

Starta Flash och skapa ett nytt Flash-dokument, sätt scenstorleken till 320x480px och bildhastigheten till 24fps.


Steg 3: Gränssnitt

Detta är gränssnittet vi ska använda, de vita prickarna i bilden heter MovieClips från vänster till höger ett två tre… och så vidare. Semi-transparenta vita linjer används för att ange rätt lösenord (du kanske vill ta bort det här för verklig användning).


Steg 4: ActionScript

Skapa en ny ActionScript-klass (Cmd + N), spara filen som Main.as och skriv följande rader, läs kommentarerna i koden för att förstå klassens beteende.

Ändra värdena i passera array för att ändra upplåsningsmönstret.

 paket import flash.display.Sprite; importera flash.events.MouseEvent; import fl.transitions.Tween; importera fl.transitions.easing.Strong; public class Main utökar Sprite private var dots: Array = []; // Lagrar filmklipp privatfilm i scenfilm: Array = []; // Mönstret inmatat av användaren privat var passera: Array = [1,2,3,6,9,8,5]; // Det korrekta mönstret för att fortsätta den offentliga funktionen Main (): void dots = [en, två, tre, fyra, fem, sex, sju, åtta, nio]; // lägg till klippen i steg addListeners ();  privat funktion addListeners (): void // lägger till lyssnare till varje punkt 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   

Steg 5: Dokumentklass

Kom ihåg att lägga till klassnamnet till Klass fält i Publicera del av Egenskaper panel.


Slutsats

Du har skapat en användbar låsskärm för dina applikationer eller till och med en webbplats. Du kan anpassa projektet för att möta dina behov eller använda den här tekniken för att bygga din anpassade LockScreen. Vad sägs om att använda ett grafiskt objekt för en Sprite för att rita linjer som följer musens väg?

Jag hoppas att du gillade den här handledningen, tack för att du läste!

Redaktörens anmärkning: Kan inte få nog av Android? Kolla in det senaste Envato ™ webbplats: Android.AppStorm.net!