Quick Tips: Simuler en Android Lås skjerm med ActionScript

Quick Tips: Simuler en Android Lås skjerm med Action
en
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Lås skjerm er en del av et operativsystem, for det meste brukes i mobile enheter, som hindrer utilsiktet innspill. Denne Quick Tips vil vise deg hvordan å simulere en Android Lås skjerm med Actionscript. La oss komme i gang




Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot:


Dette er en veldig enkel versjon av Android mønsterlåseskjermen. Dra musen langs prikkene i banen indikert av de halvgjennomsiktige hvite linjer for å "låse opp" SWF. Naturligvis, de hvite linjene er bare der for demonstrasjonsformål



Trinn 1: Kort oversikt

Vi vil gjøre bruk av mus hendelser og Arrays å lagre og sammenligne brukerundersøkelser og riktig mønster. En ny skjerm vises når riktig mønsteret er angitt



Trinn 2:. Sett opp din Flash File

Launch Flash og opprette en ny Flash dokument, sette scenen størrelse til 320x480px og bildefrekvensen til 24fps



Trinn 3:. Interface

Dette er grensesnittet vi skal bruke, de hvite prikkene i bildet movieclips heter fra venstre til høyre en, to, tre
... og så videre. Halvtransparente hvite linjer brukes for å angi riktig passord (det kan være lurt å fjerne dette for real bruk)



Trinn 4:. Action

Opprett en ny Action Class (Cmd + N), lagre filen som Main.as Hotell og skrive følgende linjer, kan du lese kommentarene i koden for å fullt ut forstå klassen oppførsel.

Endre verdiene i pass matrise for å endre opplåsing mønster
pakke {import flash.display.Sprite.; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; public class Hoved strekker Sprite {private Var prikker: Array = []; //Lagrer i scenen movieclips privat Var mønster: Array = []; //Mønsteret angitt av brukeren private Var pass: Array = [1,2,3,6,9,8,5]; //Den riktige oppskriften for å fortsette offentlig funksjon main (): void {prikker = [en, to, tre, fire, fem, seks, sju, åtte, ni]; //legger klippene i scene addListeners (); } Private funksjon addListeners (): void //legger lytterne til hver dot {var dotsLength: int = dots.length; for (var i: int = 0; i < dotsLength; i ++) {prikker [i] .addEventListener (MouseEvent.MOUSE_DOWN, initiatePattern); prikker [i] .addEventListener (MouseEvent.MOUSE_UP, stopPattern); }} /* Legger til en mus over lytteren og bruker den til å legge inn nummeret på prikk til mønsteret * /private funksjon initiatePattern (e: MouseEvent): void {var dotsLength: int = dots.length; for (var i: int = 0; i < dotsLength; i ++) {prikker [i] .addEventListener (MouseEvent.MOUSE_OVER, addPattern); } Pattern.push (dots.indexOf (e.target) + 1); //legger rekken indeksnummeret av klippet pluss én, fordi arrays er 0 basert} privat funksjon addPattern (e: MouseEvent): void {pattern.push (dots.indexOf (e.target) + 1); //legger mønsteret på musen over} privat funksjon stopPattern (e: MouseEvent): void //stopper lagre mønsteret på musen opp {var dotsLength: int = dots.length; for (var i: int = 0; i < dotsLength; i ++) {prikker [i] .removeEventListener (MouseEvent.MOUSE_OVER, addPattern); } CheckPattern (); } Private funksjon checkPattern (): void //sammen mønstrene {var pLength: int = pass.length; Var riktig: int = 0; for (var i: int = 0; i < pLength; i ++) //sammen hvert nummer angitt i bruker matrisen til pass matrisen {if (pass [i] == mønster [i]) {korrekt ++; }} If (riktig == pLength) //hvis arrays kampen {var sView: SecondView = new SecondView (); //legger til en ny visning addChild (sView); Var tween: Tween = new Tween (sView, "x", Strong.easeOut, 320,0,0.8, true); } Mønster = []; //sletter brukeren matrise}}}



Trinn 5: Dokument Class

Husk å legge klassenavnet til Class
feltet i Publiser
-delen av Egenskaper
panel.



Konklusjon

Du har opprettet en nyttig Lås skjerm for dine applikasjoner eller et nettsted. Du kan tilpasse prosjektet for å møte dine behov, eller bruke denne teknikken til å bygge egendefinerte Lockscreen. Hva med å bruke den grafiske gjenstand for en Sprite å trekke linjer som følger musen vei

Jeg håper du likte denne opplæringen, takk for at du leser
Red.anm:?! Kan ikke få nok av Android? Sjekk ut den nyeste Envato ™ site: Android.AppStorm.net!



Previous: