I libri degli ospiti sono una grande cosa per migliorare l'esperienza online che i tuoi spettatori ricevono. La capacità dello spettatore di parlare con te e gli altri, rispondere alle domande che hai sollevato, commentare il tuo lavoro o semplicemente socializzare significa che un libro degli ospiti è un must per la maggior parte dei siti web. Vediamo come possiamo costruire il nostro libro degli ospiti con ActionsScript 3.0, XML e PHP.
Ci sono due modi principali che posso pensare per alimentare un libro degli ospiti; il database MYSQL più comunemente utilizzato, o il tipo XML meno comune. Entrambi si affidano allo scripting lato server per funzionare, tuttavia il vantaggio che vedo dall'utilizzo della versione XML è il semplice fatto che non è necessario preoccuparsi se l'host supporta MySQL e non è necessario programmare in 3 diversi le lingue. Quindi cosa guadagnerai leggendo questo tutorial che ti sento chiedere?
Piuttosto una bocca piena! Iniziamo.
Dovresti già sapere come aprire il flash, o almeno spero che tu lo faccia ... Puoi impostare il flash come preferisci, non ci sono requisiti specifici per Frame Rate o Stage Dimensions, tuttavia, assicurati di averlo impostato su "Action Script" 3.0" . Se vuoi andare avanti e copiarmi parola per parola ti mostrerò come il mio è impostato (che bello).
Come puoi vedere dall'immagine qui sotto, ho fantastiche abilità creative! Questo è il punto in cui progettiamo il libro degli ospiti, o ci spostiamo nell'era moderna, un computer ospite o un telefono ospite. Sono sicuro che farai un lavoro migliore nel far sembrare il tuo più professionale di quanto non sia il mio, ma solo per quelli che sono nuovi a fare il flash, affronto rapidamente come ho creato il mio design unico.
Selezionare lo "Strumento rettangolo", fare clic su "Proprietà", impostare "Tratto" su "3" e "Raggio d'angolo" su "10". Quindi fai clic e trascina per creare il tuo rettangolo. Creane un'altra più piccola sopra quella con un colore diverso, qui è dove verranno visualizzati i messaggi. Seleziona la nuova forma e premi "F8" per convertirla in un filmato. Quindi vai su "Filtro" e applica una "Ombra esterna". Quindi disegna ancora un altro rettangolo di lato; questo è dove i campi di input andranno.
Quindi ci avventuriamo verso l'ignoto per la prima volta! Inizia creando un nuovo file con l'estensione ".xml". Quindi all'interno di ciò scrivi quanto segue:
Salva il file come "messages.xml" nella stessa cartella del tuo file flash. Ora, tornando in flash, crea un nuovo livello chiamato "Azioni" e premi "F9" per visualizzare il "Pannello Azioni". Sarà molto più vantaggioso per te se digiti il codice che ti do a mano invece di copiarlo e incollarlo, quindi a mano:
var urlRequest: URLRequest = new URLRequest ("messages.xml"); var urlLoader: URLLoader = new URLLoader (); urlLoader.addEventListener (Event.COMPLETE, fileLoaded); urlLoader.load (urlRequest);
Questo bit di codice sta impostando una variabile chiamata "urlRequest" che contiene il percorso del nostro file ".xml". Quindi crea un'altra variabile chiamata "urlLoader" che verrà utilizzata per caricare il nostro file. "AddEventListener" sta dicendo a flash di aspettare che l'url sia stato caricato prima di eseguire la funzione "fileLoaded". La linea finale sta solo dicendo "urlLoader" per caricare "urlRequest" che è il nostro file ".xml".
var myXML: XML = new XML (); myXML.ignoreWhitespace = true; var xmlList: XMLList;
Queste linee creano una nuova variabile chiamata "myXML" che memorizzerà tutti i dati dal nostro file ".xml". Quindi dice la variabile a "ignoreWhitespace" che non fa molto, ma aiuta con la convalida. L'ultima riga crea una variabile chiamata "xmlList" che memorizzerà i messaggi e le informazioni che estrarremo negli array.
var arrayName: Array = new Array (); var arrayTitle: Array = new Array (); var arrayDate: Array = new Array (); var arrayFull: Array = new Array ();
Questo bit di codice sta configurando gli array che manterranno tutti i dati. Per ora sarebbe meglio mantenere il tuo uguale al mio in modo da non avere errori in seguito. Si noti che "Completo" è ciò che ho usato per rappresentare il messaggio lungo che l'utente scrive.
function fileLoaded (event: Event): void myXML = XML (event.target.data); xmlList = myXML.children ();
Questa è la funzione "fileLoaded" che viene chiamata quando il file ".xml" è stato caricato. Nella funzione diamo la variabile "myXML" i dati dal file ".xml". Diamo quindi a "xmlList" i dati estratti da "myXML" che è tutto tranne che dal titolare "messaggi" che abbiamo scritto in precedenza. Ovviamente non c'è nient'altro a parte che così "xmlList" sarà vuoto.
per (var i: int = 0; iQuesta è la parte principale della funzione. Passa attraverso i dati memorizzati in "xmlList" e li colloca in diversi array. Il codice inizia con un ciclo "for", che dice: mentre la variabile "i" è minore di "xmlList.length ()", esegui questo codice. "XmlList.length ()" sarà il numero di persone che hanno inviato messaggi , quindi se è uguale a 5, questo codice verrà eseguito 5 volte.
Quindi, per ogni attributo (nome, titolo, data e messaggio) creiamo una "variabile stringa" uguale all'attributo corrispondente all'interno di "xmlList". La prima volta che viene eseguito il codice, a condizione che vi siano alcune voci, "i" sarà uguale a 1 e "xmlName" sarà uguale a quale mai il nome è il primo in "xmlList". La seconda volta che passa, "i" sarà uguale a 2 e "xmlName" sarà uguale a cui mai il nome è il secondo in "xmlList".
Quello che succede poi è che ciascuna delle variabili viene aggiunta agli array. Il valore di "xmlName" sarà aggiunto a "arrayName" dal metodo ".push". Ciò significa che mentre il codice viene eseguito, tutti i nomi memorizzati in "xmlList" vengono aggiunti all'array. Lo stesso vale per titolo, data e pieno.
if (i == xmlList.length () - 1) updateText ();Questa è la parte finale della funzione. Indica che se "i" è sempre uguale alla quantità totale di voci - 1, esegui la funzione "updateText".
Passaggio 5: visualizzazione dei messaggi
Ora, dopo quel estenuante codice di programmazione, arriviamo a qualcosa di un po 'più facile, dice ...
Su un nuovo livello chiamato "textBox" usa lo "Strumento testo" per creare un campo "Testo di input" sopra il rettangolo più chiaro. Assicurati di selezionare la casella "Render text as HTML" in "Properties> Character" e assegnagli un "Nome istanza" di "messageText".
Torna alla finestra delle azioni e al di sotto di tutto il codice digita quanto segue:
messageText.htmlText = "Sii il primo a pubblicare!"; var maximumMessages: Number = 5; var currentMessages: Number = 0; function updateText () messageText.htmlText = "";La prima riga è incase, nessuno ha scritto nulla. La variabile "maximumMessages" è la quantità di messaggi che vogliamo siano visualizzati contemporaneamente. "CurrentMessages" è l'ultimo messaggio che è stato visualizzato nel campo di testo. Quindi iniziamo la funzione che viene chiamata dopo che gli array hanno finito di essere creati. La prima cosa che fa è cancellare il campo di testo in quanto non sempre vogliamo che il messaggio sia in cima.
per (var i = currentMessages; iNome: "+ arrayName [i]); messageText.htmlText + = ("Titolo: "+ arrayTitle [i]); messageText.htmlText + = ("Data: "+ arrayDate [i]); messageText.htmlText + = ("Messaggio: "+ arrayFull [i]); messageText.htmlText + = (" ... "); currentMessages = i; Questo è un altro ciclo "per". Questa volta lo stiamo usando per compilare il campo "messageText". Qui impostiamo "i" per uguagliare "currentMessages" che al momento è uguale a 0. Quindi se "i" è minore di "maximumMessages" che è uguale a 5 eseguiamo questo codice. Verrà quindi eseguito 5 volte.
La prima volta che viene eseguito, aggiunge "Nome:" a "messsageText" e quindi qualsiasi nome si trovi nell'array arrayName nel punto di "i" che sarà uguale a 0. Lo farà per titolo, data e completo prima termina con una linea di punti per separare i messaggi. La seconda volta che viene eseguito, "i" sarà uno più grande, quindi aggiungerà più testo con i risultati dopo il primo set negli array. Alla fine impostiamo "currentMessages" su "i" uguale.
Passaggio 6 - Componenti
A questo punto probabilmente stai andando bene se non hai mal di testa. Quindi facciamo qualcosa di facile. Vai su "Finestra> Componenti" e dall'elenco trascina due "Pulsanti" e uno "UIScrollBar". Posizionali in questo modo:
Quindi andare su "Finestra> Component Inspector" e con il pulsante sinistro selezionato, fare clic su "etichetta" e rinominarlo "Precedente". Con il pulsante a destra, rinominalo "Avanti". Quindi definire il nome dell'istanza del pulsante "Precedente" come "prevBt", il pulsante "Avanti" come "nextBt" e il nome dell'istanza "UIScrollBar" come "scroller".
Ora, sotto "currentMessage = i;" pezzo di codice scrivere quanto segue:
scroller.scrollTarget = messageText;Questo dice al "UIScrollBar" di fungere da scroller per "messageText", nel caso ci siano troppe parole per adattarsi allo spazio designato. Ora dobbiamo controllare se i pulsanti sono stati premuti, quindi sotto tutto il codice scrivi:
nextBt.addEventListener (MouseEvent.MOUSE_UP, nextFunc); prevBt.addEventListener (MouseEvent.MOUSE_UP, prevFunc);Questo aggiunge un listener per vedere se il cursore del mouse è stato rilasciato sui pulsanti (se sono stati premuti) e se lo sono, il listener chiama una funzione che scriveremo nel passaggio successivo.
Passaggio 7: codifica dei pulsanti
Se è stato premuto il pulsante "Avanti", vogliamo "messageText" per rimuovere ciò che è contenuto e caricare i messaggi successivi. Se viene premuto il pulsante "Precedente", vogliamo che carichi i messaggi precedenti. Alla fine di tutto il codice scrivi:
function nextFunc (event: MouseEvent) messageText.htmlText = ""; maximumMessages + = 5; updateText (); prevBt.enabled = true;Questa è la funzione "Avanti". Quando viene attivato, cancella il campo di testo, aggiunge 5 a "maximumMessages", esegue la funzione "updateText" e attiva il pulsante "Precedente". Aggiungendo 5 a "maximumMessages" ed eseguendo la funzione "updateText", carica i successivi 5 messaggi nella casella di testo perché ora "maximumMessages" è uguale a 10 e "currentMessage" è ancora uguale a 5 dall'ultima volta che la funzione corse. Pertanto, questa volta il campo di testo visualizzerà i prossimi 5 messaggi negli array.
function prevFunc (event: MouseEvent) messageText.htmlText = ""; maximumMessages- = 5; currentMessages- = 10; nextBt.enabled = true; updateText (); if (currentMessages<=5) prevBt.enabled=false;Questa è la funzione per il pulsante "Precedente". Questo cancella nuovamente il campo di testo, sottrae anche "maximumMessages" di 5 e "currentMessages" di 10. Ciò è così che quando la funzione "updateText" viene eseguita, visualizza le 5 voci precedenti. Abilita anche il pulsante "Avanti". Se "currentMessage" è minore o uguale a 5, il pulsante "Precedente" è disabilitato in modo che l'utente non possa visualizzare informazioni false; non ci sono messaggi inferiori a 0.
Appena sotto "function updateText () " scrivi:
if (arrayName.length <= maximumMessages) maximumMessages = arrayName.length; nextBt.enabled = false; if (currentMessages < 0) currentMessages = 0; maximumMessages = 5; nextBt.enabled = true;Il primo "se" sta controllando se il numero totale di messaggi è inferiore o uguale al massimo. Se questo è il caso, stiamo visualizzando l'ultima voce e non vogliamo che l'utente sia in grado di fare clic sul pulsante "Avanti", quindi lo disabilitiamo. Rende anche "maximumMessages" uguale alla quantità totale di messaggi in modo da non visualizzare informazioni inutili extra.
Il secondo "se" sta controllando se siamo entrati in numeri negativi. Se lo abbiamo, torna automaticamente all'inizio e visualizza le prime 5 voci. Anche dopo questo codice:
if (i == xmlList.length () - 1) updateText ();aggiungere il seguente:
if (i> 4) nextBt.enabled = true;Questo sta controllando se ci sono più di 5 voci. Se ci sono allora abilitiamo il pulsante "Avanti". Ricorda che è 4 perché "i" inizia da 0 non 1. Infine, in alto inserisci quanto segue:
nextBt.enabled = false; prevBt.enabled = false;Questo disabilita entrambi i pulsanti.
Step 8 - Primo test
Ok, apri il file ".xml" e digita:
Chris Ciao 7 ° questo è molto complicato = - ( Digitalo tra il tag che abbiamo scritto in precedenza, quindi l'intero file ".xml" dovrebbe contenere solo:
Chris Ciao 7 ° questo è molto complicato = - ( Salva il ".xml", quindi prova il file flash e dovresti vedere questo:
Passaggio 9 - Invia caselle
Ora che abbiamo la prima parte in funzione, senza interruzioni, passiamo alla seconda sezione.
È ora di creare l'area che l'utente riempie per inviare un messaggio. Usa lo "Strumento testo" e crea 4 "Campi di testo statico" dicendo "Posta un messaggio", "Nome:", "Titolo:" e "Messaggio:".
Quindi crea 3 "campi di testo di input" e mettine uno accanto a ciascun elemento che vuoi compilare. Assicurati di fare in modo che la casella di inserimento "Messaggio:" sia più grande degli altri.
Seleziona il campo di testo in cui l'utente inserirà il suo nome e assegnagli un "Nome istanza" di "inputName". Fai questo per il titolo e le finestre dei messaggi, dando i loro nomi di istanza "inputTitle" e "inputFull". In tutte e tre le mie caselle ho selezionato le caselle "Selezionabile" e "Mostra bordo attorno al testo". Quindi, apri nuovamente il pannello "Componenti" e trascina un altro pulsante. Questa volta apri il pannello "Component Inspector" e cambia "label" in "Submit" e il suo "enabled" su false. Dagli un nome istanza di "submitBt".
Passaggio 10: impostazione delle variabili
inputName.text = ""; var newName: String = ""; inputTitle.text = ""; var newTitle: String = ""; inputFull.text = ""; var newFull: String = "";Inserisci questo codice sotto tutto il tuo altro codice. Questo sta dicendo che ognuno dei "campi di input" che abbiamo creato nel passaggio precedente è vuoto. Sta inoltre creando una variabile per ogni elemento e specificandola come una "stringa" con il valore di nulla.
function onEnterFrame (ev: Event): void if (inputName.text! = "" && inputTitle.text! = "" && inputFull.text! = "") submitBt.enabled = true;Metti questa funzione dopo tutto il codice. Questa funzione sta verificando che tutti i "campi di input" contengano testo. "! =" significa non uguale e "&&" sta dicendo "e". Quindi la funzione sta dicendo: se tutti i "campi di input" non sono vuoti (il che significa che l'utente li ha riempiti) abilita il pulsante "submitBt". Ora dobbiamo essere in grado di chiamare questa funzione tutto il tempo, quindi abbiamo bisogno di un altro ascoltatore.
addEventListener (Event.ENTER_FRAME, onEnterFrame);Questo significa che ogni volta che il flash entra nel frame (che per me è 30 volte al secondo) chiama la funzione "onEnterFrame".
Passaggio 11: data
Ora che il pulsante di invio è attivo, dobbiamo controllare se è stato cliccato, quindi abbiamo bisogno di un altro listener.
submitBt.addEventListener (MouseEvent.MOUSE_UP, sendData);Una volta rilasciato, questo listener chiamerà la funzione "sendData", quindi ora dobbiamo scrivere la funzione.
function sendData (event: MouseEvent): void var dateToday: Date = new Date (); var thismonth: uint = dateToday.getMonth (); var mese: Array = new Array ('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November ','Dicembre'); var dateStr: String = (dateToday.getDate () + "" + month [thismonth] + "" + dateToday.getFullYear ());La prima riga sta aprendo la funzione. Quindi impostiamo "dateToday" come variabile e se quindi tracciamo immediatamente "dateToday" mostrerà "Fri May 5 10:07:32 GMT + 0100 2009".
La riga successiva imposta la variabile "thismonth" come il numero che è uguale al mese corrente memorizzato all'interno di "dataToday" Dato che siamo attualmente a maggio che è il 5 ° mese, se ho tracciato "thismonth" risponderebbe 4, perché inizia da 0, non 1. Quindi creiamo un nuovo array, memorizzando tutti i mesi in ordine. Quindi "dateStr" memorizzerà la data finale che verrà visualizzata sul libro degli ospiti.
"dateToday.getDate ()" estrae il numero intero del giorno corrente, quindi per il quinto estrarrà 5. Quindi inseriamo il valore dell'array "month" che è uguale a "thismonth", quindi scambia un numero per una stringa del mese. Quindi "getFullYear ()" estrae l'anno corrente in formato a 4 cifre. Quindi se tracciamo "dateStr" otteniamo "5 maggio 2009".
Passaggio 12: creazione di nuovo XML
Ora che l'utente ha premuto invio, dobbiamo trasformare i dettagli in formato xml in modo che possano essere scritti nel file ".xml".
newName = inputName.text; newTitle = inputTitle.text; newFull = inputFull.text;Questo sta trasformando le variabili che abbiamo definito in precedenza per eguagliare ciò che l'utente ha inserito nelle scatole.
var newItem: XML = XML (""); "+ newName +" "+ newTitle +" "+ dateStr +" "+ newFull +" Questo scoraggiante pezzo di codice sta creando una nuova variabile chiamata "newItem" che sta per memorizzare dati xml. Quindi lo impostiamo su una stringa formattata in xml. Iniziamo la stringa con "
"che conserverà tutti i dettagli per l'utente, quindi inseriamo le variabili Name, Title, Date e Full che abbiamo creato prima, chiudendola con" ".myXML.appendChild (newItem);Ora stiamo usando "appendChild" per aggiungere un "newItem" al "myXML" che sta memorizzando tutte le informazioni per il file xml.
Passaggio 13: invio dell'XML.
Ora che "myXML" viene aggiornato con il nuovo messaggio, è necessario inviarlo a php.
var request: URLRequest = new URLRequest ("messages.php"); request.data = myXML; request.contentType = "text / xml"; request.method = URLRequestMethod.POST;Qui stiamo creando una nuova variabile chiamata "request" che contiene la posizione del nostro file php. Non abbiamo ancora creato questo file, ma posso dirti come lo chiameremo (fortunato!). Lo salveremo nella stessa cartella di tutti i nostri file e lo chiameremo "messages.php". La riga successiva dice alla "richiesta" che sta inviando le informazioni all'interno di "myXML". Quindi stiamo dicendo che questi dati sono in formato "XML" e che stiamo usando "post" per inviare i dati.
var loader: URLLoader = new URLLoader (); loader.load (richiesta); loader.addEventListener (Event.COMPLETE, loaderDone);Ora stiamo creando un nuovo "loader" per gestire l'invio dei dati, proprio come prima quando stavamo ricevendo i dati. Aggiungiamo un listener per verificare se i dati sono stati inviati e, in tal caso, attiva la funzione "loaderDone".
Passaggio 14: aggiorna Flash.
Prima di passare a PHP, c'è un'ultima cosa da fare all'interno del flash:
function loaderDone (evt: Event): void arrayName = []; arrayTitle = []; arrayDate = []; arrayFull = []; inputName.text = ""; inputTitle.text = ""; inputFull.text = ""; submitBt.enabled = false; maximumMessages = 5; currentMessages = 0; messageText.htmlText = ""; urlLoader.load (urlRequest);Questa funzione sta cancellando gli array, cancellando i campi di testo di input e cancellando i messaggi dalla casella del messaggio. Sta anche dicendo "urlLoader" per ricaricare il file xml. Questo attiverà quindi il libro degli ospiti per tornare all'inizio, ricaricare il file xml che ha la nostra nuova voce, compilare gli array e visualizzare nuovamente i primi 5 messaggi.
Passaggio 15: passaggio a PHP
Ora che abbiamo finito con il flash, salvalo e pubblica la nuova versione. Apri un nuovo file php chiamato "messages.php".
Questo codice crea la variabile "xml" e assegna il valore dei dati inviati dal flash. Quindi crea la variabile "file" che memorizza la posizione del file xml. "fopen" dice a php di aprire il file, "fwrite" quindi usa "file" per scrivere il contenuto della variabile "xml". "fclose" chiude il file xml con il nuovo messaggio salvato in modo sicuro, pronto per essere letto dal libro degli ospiti flash ancora una volta.
Conclusione
Finalmente, carica i file sul tuo server! Ricorda che questi non funzioneranno sul tuo disco rigido a meno che tu non abbia installato php. Individua il libro degli ospiti e verifica se funziona, si spera che lo farà! Grazie per il tuo tempo, spero che tu abbia imparato qualcosa di utile!