Share
Questo tutorial dimostrerà come creare un sistema di login Flash semplice ma professionale utilizzando tre diversi linguaggi di programmazione; AS3, PHP e MYSQL. Le sezioni avanzate come la logica applicativa, l'integrazione di PHP e MYSQL con Flash saranno i nostri principali argomenti di discussione. Restiamo bloccati!
Diamo un'occhiata al risultato finale, basta fare clic sul pulsante demo nella parte superiore di questo tutorial.
Prova ad accedere con il nome utente Admin e password parola d'ordine, o nome utente test1 e password password1. Vedrai una semplice porzione di testo corrispondente a quell'utente.
In questa parte avremo il login effettivo funzionante, quindi nella parte 2 consentiremo agli utenti di registrarsi tramite un file SWF.
Se non si dispone di un server Web che supporta i database mysql e php, quindi scaricare MAMP (per Mac), WAMP (per Windows) o un altro server locale.
MAMP è un server locale open source che consente di eseguire php e creare e archiviare dati in database mysql dal proprio disco rigido locale. MAMP crea automaticamente un server quando lo scarichi quindi ti consiglio di usarlo su altri server locali.
In alternativa puoi usare il tuo server web se supporta mysql e php.
Installa phpMyAdmin sul server, la useremo in seguito.
Ecco le cose che ti serviranno per creare il prodotto finale.
Ora abbiamo tutto ciò di cui abbiamo bisogno è tempo di impostare la nostra classe di documenti.
Creare un file .as nuovo di zecca e un file .fla AS3. Salvare il file .as come main.as in una nuova cartella chiamata Azioni.
Salva il file fla nella cartella principale della nostra applicazione. Ora nel nostro file .fla inserisci il nome della classe principale (e il classpath) nel pannello delle proprietà, come indicato di seguito:
Apri il tuo file main.as e aggiungi il seguente codice:
Accentsconagua
le azioni pacchetto / * estendono sempre una classe usando Movie Clip invece di Sprite quando si usa Flash. * / import flash.display.MovieClip; / * crea la nostra classe * / la principale della classe pubblica estende MovieClip public function main (): void trace ("success"); Questa sarà la tua classe di documenti. Premere ctrl + invio per eseguire il file SWF.
Se ricevi un messaggio nell'output, hai collegato correttamente entrambi i documenti e puoi procedere.
Per creare una connessione al nostro database abbiamo bisogno di usare php. Per prima cosa devi creare un database sul tuo server. Chiamalo admin. Puoi creare un database usando phpMyAdmin sul tuo server. L'immagine sotto è la prima pagina che vedi quando apri phpMyAdmin. Questa è l'unica volta in cui utilizzeremo phpMyAdmin; creeremo la tabella usando php.
Abbiamo bisogno di un file che si connetterà al nostro database. Crea una nuova cartella chiamata php. Crea un nuovo documento con l'estensione php e chiamalo connect.php
Segui i commenti del codice per vedere cosa sta succedendo.
/ * Tutti i codici all'interno di questi tag saranno riconosciuti come codice php. * /
Quindi è necessario caricare i file sul server di prova. Se si utilizza MAMP, copiare la cartella nella cartella htdocs nella cartella dell'applicazione mamp.
Se c'è una connessione di successo ci sarà un messaggio di successo come sotto e sarai connesso al tuo database.
Nota: È importante eliminare eco "successo"; dal tuo PHP in seguito.
Nota: La directory non sarà la stessa dell'immagine. Ignora il percorso "sorgente". Ad esempio http: // localhost: 8888 / loginsystem / php / connect.php
Prima crea due caselle di testo - Inserisci testo - per consentire all'utente di inserire il nome e la password.
Quindi posizionali verticalmente. Dare la casella di testo in alto il nome di istanza di "nome utente" e quello in basso "password". Etichetta i due come preferisci.
Quindi disegna un quadrato e inserisci un'altra casella di testo scrivendo in esso "invia". Converti questi in un clip filmato con un nome di istanza di "submit_button".
Distribuire tutti i diversi oggetti ai livelli (Modifica> Linea temporale> Distribuisci su livelli).
La tua interfaccia dovrebbe apparire in questo modo:
Successivamente creeremo il nostro gestore eventi pulsante di invio, checkLogin (), da eseguire quando l'utente fa clic su "invia".
Per prima cosa dobbiamo importare flash.events. *; nel nostro codice. In questo modo possiamo usare gli eventi Flash. Segui i commenti del codice.
le azioni pacchetto / * estendono sempre una classe usando Movie Clip invece di Sprite quando si usa Flash. * / import flash.display.MovieClip; import flash.events. *; / * crea la nostra classe * / la principale public class estende MovieClip public function main (): void / * buttonMode dà al pulsante submit un rollover * / submit_button.buttonMode = true; / * ciò che dice è che quando il nostro pulsante viene premuto, la funzione checkLogin eseguirà * / submit_button.addEventListener (MouseEvent.MOUSE_DOWN, checkLogin); / * imposta i valori iniziali del campo di testo * / username.text = ""; password.text = ""; / * la funzione per checkLogin * / public function checkLogin (e: MouseEvent): void trace ("submission success"); Se l'output visualizza "successo invio" quando si fa clic sul pulsante, il nostro evento pulsante è stato creato correttamente.
Ora controlleremo se i nostri campi hanno dati. Sostituisci la funzione checkLogin corrente con il codice sottostante. E 'commentato Thorronly per la vostra convenienza.
/ * la funzione per controllare login * / public function checkLogin (e: MouseEvent): void / * controlla i campi prima di inviare la richiesta a php * / if (username.text == "" || password.text == "") / * se i campi del nome utente o della password sono vuoti, impostano i messaggi di errore * / if (username.text == "") username.text = "Inserisci il tuo nome utente"; if (password.text == "") password.text = "Inserisci la tua password"; else / * init per elaborare login * / processLogin ();
I dati sono memorizzati in tabelle nei database. Quindi avremo bisogno di creare una tabella e useremo php per farlo. Crea un nuovo documento php nella cartella php e chiamalo come vuoi (non importa, questo è solo temporaneo per creare la tabella, non avremo bisogno di continuare a farlo). Quindi riempilo con il codice qui sotto.
Dopo questo, carica tutti i tuoi file sul tuo server. Quindi inserire il percorso del file nel browser, se la tabella è stata creata verrà visualizzato un messaggio di successo. In caso contrario, controllare la configurazione. Nota: Assicurati di eliminare questo file dal server dopo che è stato visualizzato il messaggio di successo.
Quindi vai su phpMyAdmin o in alternativa per controllare se la tua tabella è stata aggiunta. Se è stato aggiunto questo è ciò che vedrai qui sotto ...
Ora abbiamo creato la nostra tabella procediamo e aggiungiamo un utente.
Crea un nuovo documento php e chiamalo come preferisci, quindi inseriscilo nella cartella php.
Ora abbiamo aggiunto un utente, quindi la nostra tabella sarà simile a questa:
Dovremmo essere pronti a iniziare a creare la nostra logica applicativa, che alimenterà il backend del nostro SWF.
Esistono alcune variabili che dobbiamo elaborare per ottenere i dati del nostro database.
Ecco il completato processLogin () funzione, per andare nel nostro file main.as (verrà chiamato quando l'utente fa clic sul pulsante). Dobbiamo importare Flash netto classi qui. Quindi, aggiungi questo in alto: importa flash.net. *;
/ * per elaborare il nostro login * / public function processLogin (): void / * variabili che inviamo al file php * / var phpVars: URLVariables = new URLVariables (); / * creiamo una variabile URLRequest. Questo ottiene il percorso del file php. * / var phpFileRequest: URLRequest = new URLRequest ("php / controlpanel.php"); / * questo ci permette di usare la funzione post in php * / phpFileRequest.method = URLRequestMethod.POST; / * allega le variabili php all'URLRequest * / phpFileRequest.data = phpVars; / * crea un nuovo loader per caricare e inviare il nostro urlrequest * / var phpLoader: URLLoader = new URLLoader (); phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; phpLoader.addEventListener (Event.COMPLETE, showResult); / * ora consente di creare le variabili da inviare al file php * / phpVars.systemCall = "checkLogin"; phpVars.username = username.text; phpVars.password = password.text; / * questo avvierà la comunicazione tra flash e php * / phpLoader.load (phpFileRequest); La prima riga:
phpVars.systemCall = "checkLogin";
verrà spiegato più avanti quando creeremo il file di controllo php principale.
Le prossime due righe:
phpVars.username = username.text; phpVars.password = password.text;
recuperare ciò che l'utente ha immesso nei due campi di testo e convertirli in variabili php.
Creare una casella di testo dinamica e dargli un nome di istanza di "result_text".
Posizionalo sotto il modulo di accesso e invia il pulsante. Questo mostrerà le informazioni recuperate dal server.
Questo è il file che comunicherà con php e restituirà un valore a flash. Crea un nuovo file php chiamato "controlpanel.php" e mettilo nella cartella \ php \.
0) / * usiamo un ciclo while per ottenere la biografia dell'utente. mysql_fetch_array ottiene tutti i dati del campo per il particolare record. * / while ($ data = mysql_fetch_array ($ query)) / * ottiene il valore user_bio dal record selezionato * / $ userbio = $ data ["user_bio"]; / * usa la funzione di stampa per inviare i valori a flash * / print "systemResult = $ userbio"; else print "systemResult = I dettagli di accesso non corrispondono ai nostri record."; ?>
Torniamo alla nostra funzione di accesso al processo e aggiungiamo questo:
phpLoader.addEventListener (Event.COMPLETE, showResult);
Quando il modulo ha finito questo ascoltatore chiama il showResult () funzione. Lo vedremo ora.
Ecco la funzione. Visualizza il valore che abbiamo stampato nel file "controlpanel.php".
/ * funzione per mostrare il risultato del login * / funzione pubblica showResult (evento: Evento): void / * questo autosizes il campo di testo ***** Dovrai importare le classi di testo di Flash. Puoi farlo aggiungendo: import flash.text. *; ... al tuo elenco di istruzioni di importazione * / result_text.autoSize = TextFieldAutoSize.LEFT; / * ottiene l'output e lo visualizza nel campo di testo risultato * / result_text.text = "" + event.target.data.systemResult;
Il SWF sta ricevendo il testo che noi stampare nel php e visualizzandolo nel campo testo result_text.
Se hai creato un login di successo, questo è ciò che vedrai:
Ora stiamo per aggiungere un altro utente per verificare se il nostro sistema funziona per più utenti.
Apri il file "adduser.php" nella nostra cartella php che abbiamo creato in precedenza.
Basta cambiare i VALORI nella query mysql.
$ sql = "INSERISCI NEGLI utenti (username, password, user_bio) VALUES ('test1', 'password1', 'Questa è la biografia degli utenti aggiuntivi')";
Quindi esegui lo script sul server semplicemente inserendo il percorso del file in un browser web.
Successo! Abbiamo un sistema di accesso flash di successo che supporta più utenti. Ecco il risultato quando accediamo all'utente aggiuntivo.
le azioni pacchetto / * estendono sempre una classe usando Movie Clip invece di Sprite quando si usa Flash. * / import flash.display.MovieClip; import flash.events. *; importa flash.net. *; import flash.text. *; / * crea la nostra classe * / la principale public class estende MovieClip public function main (): void / * buttonMode dà al pulsante submit un rollover * / submit_button.buttonMode = true; / * ciò che dice è che quando il nostro pulsante viene premuto, la funzione checkLogin eseguirà * / submit_button.addEventListener (MouseEvent.MOUSE_DOWN, checkLogin); / * imposta i valori iniziali del campo di testo * / username.text = ""; password.text = ""; / * la funzione per controllare login * / public function checkLogin (e: MouseEvent): void / * controlla i campi prima di inviare la richiesta a php * / if (username.text == "" || password.text == "" ) / * se i campi del nome utente o della password sono vuoti, impostano i messaggi di errore * / if (username.text == "") username.text = "Inserisci il tuo nome utente"; if (password.text == "") password.text = "Inserisci la tua password"; else / * init per elaborare login * / processLogin (); / * per elaborare il nostro login * / public function processLogin (): void / * variabili che inviamo al file php * / var phpVars: URLVariables = new URLVariables (); / * creiamo una variabile URLRequest. Questo ottiene il percorso del file php. * / var phpFileRequest: URLRequest = new URLRequest ("php / controlpanel.php"); / * questo ci permette di usare la funzione post in php * / phpFileRequest.method = URLRequestMethod.POST; / * allega le variabili php all'URLRequest * / phpFileRequest.data = phpVars; / * crea un nuovo loader per caricare e inviare il nostro urlrequest * / var phpLoader: URLLoader = new URLLoader (); phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; phpLoader.addEventListener (Event.COMPLETE, showResult); / * ora consente di creare le variabili da inviare al file php * / phpVars.systemCall = "checkLogin"; phpVars.username = username.text; phpVars.password = password.text; / * questo avvierà la comunicazione tra flash e php * / phpLoader.load (phpFileRequest); / * function per mostrare il risultato del login * / public function showResult (event: Event): void / * questo autosizes il campo di testo ***** Dovrai importare le classi di testo di Flash. Puoi farlo: import flash.text. *; * / result_text.autoSize = TextFieldAutoSize.LEFT; / * ottiene l'output e lo visualizza nel campo di testo risultato * / result_text.text = "" + event.target.data.systemResult; Bene, questo conclude la parte 1 del nostro tutorial sul sistema di accesso Flash. Nella parte 2 creeremo un modulo di registro che aggiungerà utenti senza che l'utente lo inserisca nel back-end. Grazie per aver letto questo tutorial. Divertirsi :)
