Share
In questo tutorial, ti mostrerò come usare Flash, PHP e MySQL insieme. Creeremo un semplice modulo di commento che prende le voci e le memorizza in un database. Useremo PHP per recuperare le voci e formattare i commenti in un modulo XML. Muoviamoci!
Avvia Flash e crea un nuovo file Flash (ActionScript 3.0). Crea una nuova cartella e salva il file nella cartella come "commentForm.fla". Quindi creare un nuovo file ActionScript. Salva il file nella stessa cartella di "commentForm.as".
Aprire il documento Flash appena creato, quindi nel pannello delle proprietà, modificare le dimensioni dello stage su 960x400 pixel. Inoltre, nella casella di testo della classe Documento, digitare "commentForm". Questo collegherà il file ActionScript esterno con il nostro documento Flash.
Seleziona lo strumento Rettangolo e disegna un retangolo con un tratto di qualsiasi dimensione. Seleziona l'intero rettangolo e apri il pannello Allinea andando su Finestra> Allinea. Nel pannello Allinea, in "Dimensione corrispondenza", fai clic sul pulsante "Abbina larghezza e altezza". Questo ridimensiona il rettangolo alle dimensioni dello stage. Sempre nel pannello Allinea, sotto "Allinea", fai clic sui pulsanti "Allinea il bordo sinistro" e "Allinea il bordo superiore". Questo sposta il rettangolo in alto a sinistra dello stage.
Quindi, seleziona la porzione di riempimento del rettangolo. Nel pannello Colore, selezionare il gradiente lineare come colore di riempimento. Con il rettangolo ancora selezionato, seleziona lo strumento Trasformazione sfumatura e ruota il gradiente di 90 gradi (assicurati che il lato nero sia rivolto verso il basso). Sotto le opzioni del colore sfumato, assegna alla parte bianca un colore di # F2F2F2. Quindi, dai al lato nero un colore di # D9D9D9. Infine, seleziona il tratto, dai un colore di # 999999 e nel pannello delle proprietà, dai una dimensione di 2.
Infine, seleziona l'intero rettangolo e convertilo in un Movie Clip. Vai nella finestra Filtri, fai clic sull'icona più e dona al Movie Clip un bagliore. Il bagliore dovrebbe avere un 10 per Sfocatura X e Sfocatura Y, Forza del 33%, Qualità dell'altezza, Colore del nero e assicurarsi di controllare la casella Bagliore interno. Il Movie Clip rettangolo dovrebbe ora avere un leggero bagliore interno.
Seleziona lo strumento Testo. Nel pannello delle proprietà, seleziona Testo dinamico, assicurati che il colore sia nero, il carattere di "Arial" e la dimensione del carattere di 10. Su un nuovo livello, disegna una casella di testo larga 41,9 px e un'altezza di 15,2px. Dare alla casella di testo una posizione X di 18 e una posizione Y di 6,3. Infine, dai alla casella di testo il nome di un'istanza di "nameText".
Crea un'altra casella di testo sul palco. Questa casella di testo avrà una larghezza di 246,9, un'altezza di 17,4, una posizione X di 18, una posizione Y di 22,9 e un nome di istanza di "nameField".
Ora crea un altro casella di testo con una larghezza di 41,9, altezza di 15,2, X di 18, Y di 42,4 e nome di istanza di "emailText".
Crea un'altra casella di testo (quasi lì) con una larghezza di 246,9, altezza di 17,4, X di 18, Y di 58,9 e nome di istanza di "emailField".
Ancora una volta, crea una casella di testo con una larghezza di 55.5, altezza di 15.2, X di 18, Y di 80.1 e nome di istanza di "commentText".
Finalmente, crea un'altra casella di testo. Dagli una larghezza di 466,9, altezza di 260,9, X di 18, Y di 96,3 un nome di istanza di "commentField" e imposta il campo Numero massimo di caratteri a 1000. Nella casella di testo con il nome "nameText", dagli un valore di "Nome". Quindi, seleziona "emailText" e assegnagli un valore di "Email". Infine, seleziona la casella di testo "commentText" e assegnagli il valore "Commento". Cambierà il colore del testo di queste caselle di testo in modo dinamico.
Crea un'altra casella di testo dinamica. Dagli una larghezza di 421,1, un'altezza di 211,4, X di 521,3, Y di 144,6 e il nome di istanza di "area". Seleziona tutte e quattro le caselle di testo dinamiche vuote e, nel pannello delle proprietà, modifica le dimensioni del carattere in 12. Solo i campi di testo dell'etichetta devono avere una dimensione del carattere di 10. Seleziona di nuovo lo strumento di testo. Nel pannello Proprietà, cambia il tipo in Statico, il colore è nero, il carattere è "Arial" e la dimensione del carattere è 10. Crea una casella di testo statica. Dagli una larghezza di 5.2, l'altezza dovrebbe essere predefinita a 15.2, X di 520.5, Y di 11.1 e dargli un valore di "Commenti".
Successivamente, vai al pannello Componenti. Trascina un'istanza del componente Elenco sullo stage. Assegna al componente Elenco una larghezza di 422.9, altezza di 100, X di 520, Y di 27.8 e un nome di istanza di "elenco".
Trascina una copia del componente Checkbox sullo stage. Dagli una larghezza di 100, altezza di 22, X di 280.3, Y di 57.4, nome di istanza di "newsletter" e, nel pannello Parametri, assegnagli un'etichetta di "Newsletter". Infine, crea un altro campo di testo dinamico. Assicurati che abbia un colore nero, il carattere sia "Arial" e la dimensione del font sia 10. Assegna una larghezza di 128, altezza di 15,2, X di 356,9, Y di 367,6 e nome di istanza di "dyTex".
Il prossimo passo è creare la grafica sotto le caselle di testo. Crea un nuovo livello e spostalo sotto il livello con i campi di testo. Seleziona lo strumento Rettangolo. Nel pannello delle proprietà, dargli un tocco di 2. Assicurati che il colore del tratto sia #CCCCCC. Dare al rettangolo un tocco di bianco. Nella casella degli angoli arrotondati, assegnagli un valore di 10.
Disegna un rettangolo con una larghezza di 466,9, un'altezza di 260,9. Seleziona l'intero rettangolo e convertilo in un Movie Clip. Con il Movie Clip selezionato, vai alla scheda Filtri. Dare al rettangolo un nuovo filtro Dropshadow. Il nuovo filtro avrà un 6 per Sfocatura X e Sfocatura Y, una Resistenza del 66%, una Qualità di alta, un Angolo di 90, una Distanza di 1, un Colore di nero e spunta la casella accanto all'ombra Interna. Infine, dai al rettangolo in movieclip una posizione X di 18 e una posizione Y di 96.3.
Quindi disegna un altro rettangolo con gli stessi stili applicati. Questa volta, dai al rettangolo una larghezza di 422.6, altezza di 214. Convertilo in un Movie Clip. Dare quindi al Movie Clip una X di 520,5 e una Y di 143,3. Applica lo stesso filtro del rettangolo precedente.
Ora stiamo andando a creare un altro rettangolo. Questa volta diamo agli angoli arrotondati un valore di 5; lascia tutti gli altri parametri uguali. Disegna un rettangolo con una larghezza di 246,9 e un'altezza di 17,4. Trasformalo in un Movie Clip e dagli un valore X di 18 e un Y di 22.8. Successivamente, vai alla scheda Filtri e applica un filtro Dropshadow. Assegna al filtro un valore Sfocatura X e Sfocatura Y di 4, Forza del 66%, Qualità dell'altezza, Colore del nero, Angolo di 90, Distanza di 1 e seleziona la casella accanto all'ombra interna. Seleziona il Movie Clip e duplicalo. Assegna al prossimo Movie Clip una X di 18 e Y di 58.9.
Prendi lo strumento Rettangolo ancora una volta. Assicurati che ci sia ancora un valore di 5 per gli angoli arrotondati e disegna un rettangolo largo 99 e ha un'altezza di 20.6. Converti questa forma in un pulsante. Entra nella modalità di modifica del pulsante e aggiungi un nuovo livello. Afferra lo strumento Testo e crea una casella di testo statico con il valore "Invia". Dare al nuovo pulsante una X di 18.3, Y di 367.6 e un nome di istanza di "pulsante".
Infine, seleziona lo strumento Linea. Dagli un tratto di 1 e un colore di # 999999. Disegna una linea sul palco. Seleziona la linea e assegnagli un'altezza di 327, X di 502,4 e Y di 28,2. Duplica la linea e spostala su un pixel a destra e assegnagli un colore bianco. L'applicazione è completamente progettata ora.
Passare al file ActionScript che è stato creato all'inizio di questo tutorial. Incolla questo codice in esso.
pacchetto import flash.display.Sprite; public class commentForm estende Sprite public function commentForm ()
Ecco le dichiarazioni di importazione che utilizzeremo. Incollarli sotto la dichiarazione del pacchetto e sopra la dichiarazione della classe. Inoltre, elenchiamo le variabili che useremo.
package import flash.display.Loader; import flash.display.MovieClip; import flash.display.SimpleButton; import flash.display.Sprite; import flash.events.Event; import flash.events.FocusEvent; import flash.events.IOErrorEvent; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import flash.external.ExternalInterface; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.TextField; public class commentForm estende Sprite private var tf: TextField; private static const URL: String = "YOUR_SERVER"; public function commentForm ()
Qui, impostiamo gli ascoltatori di eventi e il word wrapping per i grandi campi di testo. Chiamiamo anche le funzioni onComplete e onInput. La funzione onComplete caricherà l'XML dal database. In questo modo il componente dell'elenco viene popolato all'avvio dell'applicazione. Con la funzione onInput, impostiamo il campo di testo dyText con il valore corretto.
public function commentForm () init (); funzione privata init (): void commentField.addEventListener (FocusEvent.FOCUS_IN, onFocus); emailField.addEventListener (FocusEvent.FOCUS_IN, onFocus); nameField.addEventListener (FocusEvent.FOCUS_IN, onFocus); commentField.addEventListener (KeyboardEvent.KEY_DOWN, onInput); commentField.addEventListener (KeyboardEvent.KEY_UP, onInput); button.addEventListener (MouseEvent.CLICK, onClick); onComplete (null); oninput (null); commentField.wordWrap = true; area.wordWrap = true;
La funzione onInput aggiornerà il campo di testo nella parte inferiore della nostra applicazione. Prende semplicemente la quantità di caratteri inseriti nel modulo di commento e sottrae l'importo totale consentito. Usiamo entrambi gli eventi "KEY_UP" e "KEY_DOWN" perché vogliamo che il campo si aggiorni anche quando qualcuno sta tenendo premuto un certo tasto. Verifichiamo anche se il campo di testo del commento è pieno. Se lo è, giriamo il testo in rosso.
funzione privata onInput (event: KeyboardEvent): void dyText.text = String (commentField.maxChars - commentField.length) + "caratteri rimanenti"; if (dyText.text == "0 caratteri left") dyText.textColor = 0xff0000; else dyText.textColor = 0x000000;
Questa è la funzione che gestirà l'evento "CLICK". Qui è dove passiamo le variabili a PHP, e ascoltiamo l'evento "COMPLETO". Tuttavia, prima di inviare qualcosa a PHP, dobbiamo verificare che i campi di testo non siano vuoti. Se lo sono, allora cambiamo il loro campo di testo dell'etichetta in rosso.
funzione privata onClick (event: MouseEvent): void button.focusRect = false; stage.focus = pulsante; var name: String = nameField.text; var email: String = emailField.text.toLowerCase (); var comment: String = commentField.text; if (validateString (name)) if (validateEmail (email)) if (validateString (comment)) var url: URLLoader = new URLLoader (); var req: URLRequest = new URLRequest (URL + "/ leave.php"); var vars: URLVariables = new URLVariables (); req.method = URLRequestMethod.POST; vars.submit = true; vars.name = nome; vars.email = email; vars.comment = commento; if (newsletter.selected) vars.newsletter = true; else vars.newsletter = false; req.data = vars; url.addEventListener (Event.COMPLETE, onComplete); url.addEventListener (IOErrorEvent.IO_ERROR, onError); url.load (req); else commentText.textColor = 0xff0000; tf = commentText; else emailText.textColor = 0xff0000; tf = emailText; else nameText.textColor = 0xff0000; tf = nameText;
Ecco le due funzioni utilizzate per convalidare i nostri campi di testo. La funzione validateEmail prende il campo di testo ed esegue un'espressione regolare su di esso per verificare l'e-mail. La funzione validateString eliminerà tutti i tag HTML che potrebbero essere inseriti e si assicurerà che ci sia almeno del testo in quel campo.
private function validateEmail (string: String): Boolean var pattern: RegExp = / [a-z0-9! # $% & "* + \ / =? ^ _ '| ~ -] + (?: \. [a-z0-9 # $% & "* + \ / = ^ _ '| ~ -!?] +) * @ (:?? [a-z0-9] ([a-z0-9 ?.?? -] * [a-z0-9]) \) + [a-z0-9] ([a-z0-9 -] * [a-z0-9]) / g; if (pattern.exec (string)! = null) return true; else return false; private function validateString (string: String): Boolean var bool: Boolean; modello var: RegExp = /<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|".*?"|[^"\">\ S] +))) + \ s * | \ s *) \ /> / gi??; string = string.replace (modello, ""); var pattern2: RegExp = / [a-zA-Z0-9] / g; if (string.search (pattern2) == -1) bool = false; else bool = true; return bool;
Ecco il codice SQL per creare la tabella sul tuo database.
Accentsconagua
CREATE TABLE 'YOUR_DATABASE'. 'Comments' ('id' INT NON NULL AUTO_INCREMENT PRIMARY KEY, 'name' VARCHAR (40) NOT NULL, 'email' VARCHAR (40) NOT NULL, 'commenta' VARCHAR (1200) NOT NULL) MOTORE = MYISAM La prima parte del nostro PHP è creare la nostra connessione al database. Copia questo codice in un nuovo file php. Salva il file come "require.php".
Con il file di database salvato, possiamo quindi accedervi nel nostro modulo di feedback. La riga "require_once" caricherà il file di connessione del database. Abbiamo un po 'di sicurezza aggiunto in questo modo. Controlliamo quindi se la variabile "submit" è vuota. Abbiamo inviato il "submit" da Flash quando abbiamo fatto clic sul pulsante per inviare. Se la variabile non è vuota, compiliamo le nostre variabili sul lato PHP. Dopo aver pulito i valori, li inseriamo nel database. Salva questo file come "leave.php" nella stessa directory del tuo file "require.php".
Qui è dove puliamo i valori da inserire nel nostro database. Evitiamo qualsiasi input pericoloso, quindi estrapiamo tutti i tag html dal valore. Quindi, nel caso in cui qualcosa lo abbia superato, noi sanitizziamo il valore.
function validateString ($ string) $ string = mysql_real_escape_string ($ string); $ string = strip_tags ($ string); $ string = filter_var ($ string, FILTER_SANITIZE_STRING); return $ string;
Questa è la funzione che usiamo per inviare l'email. Per questo esempio, sto usando "PHPMailer". Puoi scaricare l'origine qui.Questa è una classe molto semplice con cui lavorare.Qui abbiamo bisogno della classe come abbiamo fatto con la nostra connessione al database. Dite a PHPMailer che stiamo inviando una e-mail HTML, e passala a e da valori come pure la stringa HTML. Noterai nel metodo "AddAddress", passeremo l'e-mail e i valori dei nomi.La funzione finale è il contenuto HTML.Può essere adattato a dì quello che vuoi, questa funzione viene chiamata solo se si fa clic sulla casella di controllo "newsletter".
function handleEmail ($ name, $ email) require ("phpMailer / class.phpmailer.php"); $ mail = new PHPMailer (); $ mail-> Da = "YOUR_FROM_ADDRESS ([email protected])"; $ mail-> FromName = "YOUR_FROM NAME (webmaster)"; $ mail-> AddReplyTo ("YOUR_REPLY_TO_NAME ([email protected]"); $ mail-> Aggiungi indirizzo ($ email, $ nome); $ mail-> isHTML (true); $ mail-> Subject = "YOUR_SUBJECT" ; $ mail-> Body = emailContent ($ name); if (! $ mail-> Send ()) return false; else return true; function emailContent ($ name) $ emailString = "\ n "; $ emailString. ="\ n "; $ emailString. ="\ n "; $ emailString. ="Prova e-mail \ n "; $ emailString. ="\ n "; $ emailString. ="\ n "; $ emailString. ="| NEWSLETTER HEADER | \ n "; $ emailString. ="
| Caro $ name CONGRATULAZIONI! Sei appena stato aggiunto alla nostra comunità di email ... ma non proprio. | \ n "; $ emailString. ="
| PIEDE DI NEWSLETTER | \ n "; $ emailString. ="
Apri un altro file PHP vuoto. Salva questo come "comments.php". Qui usiamo di nuovo il nostro file "require.php", quindi eseguiamo una semplice query MySQL. Seleziona tutti i valori dal database. Prendiamo tutti i valori restituiti e riecheggiamo l'XML. In primo luogo, invieremo l'intestazione, quindi echo le parti iniziali dell'XML. Dopodiché, entriamo in un ciclo while. Questo farà parte di tutti i nostri commenti, indirizzi e-mail e nomi. Quando il ciclo while termina, chiudiamo l'XML. Questo è ciò che verrà caricato in Flash.
