Suggerimento rapido simula uno schermo di blocco Android con ActionScript

La schermata di blocco fa parte di un sistema operativo, principalmente utilizzato nei dispositivi mobili, che impedisce l'input accidentale. Questo suggerimento rapido ti mostrerà come simulare un blocco schermo Android con ActionScript. Muoviamoci!


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:

Questa è una versione molto semplice della schermata di blocco del modello Android. Trascina il mouse lungo i punti nel percorso indicato dalle linee bianche semitrasparenti per "sbloccare" il file SWF. Naturalmente, le linee bianche sono solo lì a scopo dimostrativo!


Passaggio 1: breve panoramica

Faremo uso di Mouse Events e Arrays per archiviare e confrontare l'input dell'utente e il pattern corretto. Verrà visualizzata una nuova schermata quando viene immesso il modello corretto.


Passaggio 2: impostare il file Flash

Avvia Flash e crea un nuovo documento Flash, imposta le dimensioni dello stage su 320x480px e la frequenza fotogrammi su 24 fps.


Passaggio 3: interfaccia

Questa è l'interfaccia che useremo, i punti bianchi nell'immagine sono MovieClip nominati da sinistra a destra uno due tre… e così via. Le linee bianche semitrasparenti sono utilizzate per indicare la password corretta (è possibile rimuoverla per un uso reale).


Passaggio 4: ActionScript

Creare una nuova classe ActionScript (Cmd + N), salvare il file come Main.as e scrivi le seguenti righe, leggi i commenti nel codice per comprendere appieno il comportamento della classe.

Cambia i valori nel passaggio matrice per cambiare il modello di sblocco.

 pacchetto import flash.display.Sprite; import flash.events.MouseEvent; importare fl.transitions.Tween; importare fl.transitions.easing.Strong; public class Main estende Sprite private var dots: Array = []; // Memorizza il pattern var privato in movieclips: Array = []; // Il modello immesso dall'utente var var privato: Array = [1,2,3,6,9,8,5]; // Il modello corretto per procedere alla funzione pubblica Main (): void dots = [uno, due, tre, quattro, cinque, sei, sette, otto, nove]; // aggiungi le clip nello stage addListeners ();  private function addListeners (): void // aggiunge gli ascoltatori a ogni punto var dotsLength: int = dots.length; per (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   

Passaggio 5: Classe di documenti

Ricorda di aggiungere il nome della classe al Classe campo nel Pubblicare sezione del Proprietà pannello.


Conclusione

Hai creato un utile blocco schermo per le tue applicazioni o anche per un sito web. Puoi adattare il progetto alle tue esigenze o utilizzare questa tecnica per costruire il tuo LockScreen personalizzato. Che ne dici di utilizzare l'oggetto grafico di uno Sprite per disegnare linee che seguono il percorso del tuo mouse?

Spero che questo tutorial ti sia piaciuto, grazie per la lettura!

Nota dell'editore: Non ne hai mai abbastanza di Android? Guarda le ultime Envato ™ sito: Android.AppStorm.net!