Creați o carte de oaspeți dinamic cu XML și ActionScript 3.0

Cărțile de oaspeți reprezintă un lucru minunat pentru a îmbunătăți experiența online pe care spectatorii dvs. o primesc. Abilitatea spectatorului de a vorbi cu dvs. și cu alții, de a răspunde la întrebările pe care le-ați ridicat, de a comenta munca dvs. sau de a socializa înseamnă că o carte de oaspeți este o necesitate pentru majoritatea site-urilor web. Să vedem cum putem construi propria noastră carte de oaspeți cu ActionScript 3.0, XML și PHP.


Introducere

Există două moduri principale pe care mă pot gândi să le propovăduiesc o carte de oaspeți; cea mai frecvent utilizată bază de date bazată pe MYSQL sau tipul XML mai puțin obișnuit. Amândoi se bazează pe scripting-ul de la server pentru a funcționa, totuși avantajul pe care îl văd din utilizarea versiunii XML este simplul fapt că nu trebuie să vă faceți griji dacă gazda dvs. acceptă MYSQL și de asemenea nu trebuie să programați în 3 diferite limbi. Deci, ce veți câștiga din citirea acestui tutorial, vă aud întrebat?

  • Veți învăța cum să programați în ActionScript 3.0 (care mi-a luat mult timp să învăț ...)
  • Veți învăța cum să obțineți datele dintr-un fișier XML și să le convertiți în matrice pentru a lucra în Flash.
  • Veți învăța cum să utilizați aceste matrice pentru a popula câmpul de text.
  • Veți învăța cum să programați butoanele și o bară de defilare.
  • În sfârșit, veți învăța cum să convertiți textul în xml și să îl trimiteți într-un fișier php unde va fi scris în fișierul xml.

O gură plină! Să începem.

Pasul 1 - Noțiuni de bază

Ar trebui să știți deja cum să deschideți blițul sau cel puțin sper să faceți ... Puteți seta flash oricum alegeți, nu există cerințe specifice pentru Frame Rate sau Stage Dimensions, cu toate acestea, asigurați-vă că l-ați setat pe "Action Script 3.0" . Dacă vrei să mergi mai departe și să mă copiezi cuvânt cu cuvânt, îți voi arăta cum se instalează a mea (cât de frumos).

Pasul 2 - Stylize

Așa cum puteți spune din imaginea de mai jos, am aptitudini creative fantastice! Acesta este punctul în care proiectăm cartea de oaspeți sau se mută în epoca modernă, un computer de oaspeți sau un telefon de oaspeți. Sunt sigur ca veti face o treaba mai buna in a va face sa arate mai profesionist decat a mea, dar doar pentru cei care sunt noi sa flash, voi trece rapid prin modul in care am creat designul meu unic.

Selectați instrumentul "Rectangle", faceți clic pe "Proprietăți", setați "Stroke" pe "3" și "Radius colț" să fie "10". Apoi faceți clic și trageți pentru a crea dreptunghiul. Faceți altul mai mic pe culme diferită, aici vor fi afișate mesajele. Selectați noua formă și apăsați "F8" pentru al converti într-un clip video. Apoi mergeți la "Filter" și aplicați o "Shadow Drop". Apoi desenați încă un dreptunghi în lateral; acesta este locul în care vor intra câmpurile de intrare.

Pasul 3 - Încărcarea XML

Deci ne îndrăgim în necunoscut pentru prima dată! Începeți prin a crea un fișier nou cu extensia ".xml". Apoi scrieți în interior următoarele:

  

Salvați fișierul ca "messages.xml" în același director ca fișierul dvs. flash. Acum, înapoi în flash, creați un nou layer numit "Acțiuni" și apăsați "F9" pentru a afișa "Panoul de acțiuni". Va fi mult mai benefic pentru dvs. dacă introduceți codul pe care-l dau manual, mai degrabă decât copierea și lipirea acestuia, deci de tipul de mână:

 var urlRequest: URLRequest = adresa URL nouă ("messages.xml"); var urlLoader: URLLoader = noul URLLoader (); urlLoader.addEventListener (Event.COMPLETE, fileLoaded); urlLoader.load (urlRequest);

Acest cod de biți stabilește o variabilă numită "urlRequest" care menține calea către fișierul ".xml". Se creează apoi o altă variabilă numită "urlLoader", care va fi utilizată pentru a încărca fișierul nostru. "AddEventListener" spune blițului să aștepte până când fișierul "url" a fost încărcat înainte de a rula funcția "fileLoaded". Linia finală este doar de a spune "urlLoader" pentru a încărca "urlRequest", care este fișierul nostru ".xml".

 var myXML: XML = nou XML (); myXML.ignoreWhitespace = true; var xmlList: XMLList;

Aceste linii creează o nouă variabilă numită "myXML", care va stoca toate datele din fișierul ".xml". Apoi, spune variabila "ignoreWhitespace", care nu face prea mult, dar ajută la validare. Ultima linie creează o variabilă numită "xmlList", care va stoca mesajele și informațiile pe care le vom extrage în matrice.

Pasul 4 - Arrays

 var arrayName: Array = Array nou (); Var arrayTitle: Array = Array nou (); var arrayDată: Array = Array nou (); var arrayFull: Array = Array nou ();

Acest bit de cod este setarea matricelor care vor păstra toate datele. Pentru moment, ar fi mai bine să țineți a ta la fel ca și a mea, astfel încât să nu mai întâmpinați nici o eroare mai târziu. Trebuie să rețineți că "Complet" este ceea ce am folosit pentru a reprezenta mesajul lung pe care îl scrie utilizatorul.

 funcția fileLoaded (eveniment: Eveniment): void myXML = XML (event.target.data); xmlList = myXML.children ();

Aceasta este funcția "fileLoaded", care se numește atunci când fișierul ".xml" a fost încărcat. În funcție vom da variabilei "myXML" datele din fișierul ".xml". Apoi dăm "xmlList" datele dezbrăcate din "myXML", ceea ce este totul, cu excepția titularului de "mesaje" pe care l-am scris mai devreme. Evident, nu există nimic altceva decât faptul că "xmlList" va fi gol.

 pentru (var i: int = 0; i 

Aceasta este partea principală a funcției. Aceasta trece prin datele stocate în "xmlList" și o plasează în diferite rețele. Codul începe cu o buclă "pentru", care spune: în timp ce variabila "i" este mai mică decât "xmlList.length ()", executați acest cod. "XmlList.length ()" va fi câți oameni au trimis mesaje , deci dacă este egal cu 5, acest cod va rula de 5 ori.

Apoi, pentru fiecare atribut (nume, titlu, dată și mesaj), creăm o "Variabila de șir" egală cu atributul corespunzător din interiorul "xmlList". Prima dată când codul este rulat, cu condiția să existe câteva intrări, "i" va fi egal cu 1 și "xmlName" va fi egal cu cel care vreodată este primul în "xmlList". A doua oară când trece, "i" va fi egal cu 2 și "xmlName" va fi egal cu numele vreodată al doilea în "xmlList".

Ce se întâmplă apoi este faptul că fiecare dintre variabile este adăugată la matrice. Valoarea "xmlName" va fi adăugată la "arrayName" prin metoda ".push". Aceasta înseamnă că, pe măsură ce codul este rulat, toate numele stocate în "xmlList" sunt adăugate în matrice. Același lucru este valabil și pentru titlu, data și plin.

 dacă (i == xmlList.length () - 1) updateText (); 

Aceasta este partea finală a funcției. Afirmă că dacă "i" este egal cu suma totală a intrărilor - 1, executați funcția "updateText".

Pasul 5 - Afișarea mesajelor

Acum, după acea bucățică de codificare, ajungem la ceva mai ușor, spune el ...

Pe un nou strat numit "textBox", utilizați "Instrumentul de text" pentru a crea un câmp "Introducere text" peste dreptunghiul mai ușor. Asigurați-vă că selectați caseta "Render text as HTML" din "Proprietăți> Caracter" și dați-i un "nume de instanță" de "messageText".

Du-te înapoi la fereastra de acțiuni și sub toate tipurile de cod următoarele:

 messageText.htmlText = "Fii primul la post!"; var maximMessages: Number = 5; var currentMessages: Number = 0; function updateText () messageText.htmlText = "";

Prima linie este incase nimeni nu a scris nimic. Variabila "maximumMessages" este cantitatea de mesaje pe care dorim să o afișăm la un moment dat. "CurrentMessages" este ultimul mesaj care a fost afișat în câmpul text. Apoi începem funcția care se numește după ce matricile s-au terminat fiind create. Primul lucru pe care îl face este să ștergeți câmpul de text, deoarece nu dorim mereu ca mesajul să fie în partea de sus.

 pentru (var i = actualMessages; iNume: "+ arrayName [i]); messageText.htmlText + = ("Titlu: "+ arrayTitle [i]); messageText.htmlText + = ("Data: "+ arrayDate [i]); messageText.htmlText + = ("Mesaj: "+ arrayFull [i]); messageText.htmlText + = (" ... "); currentMessages = i;

Aceasta este o altă buclă "pentru". De data aceasta îl folosim pentru a umple câmpul "messageText". Aici setăm "i" la egal cu "currentMessages" care în acest moment este egal cu 0. Apoi dacă "i" este mai mic decât "maximumMessages" care este egal cu 5 vom rula acest cod. Prin urmare, va rula de 5 ori.

Prima dată când rulează, se va adăuga "Nume:" la "messsageText" și apoi oricare ar fi numele în matricea arrayName la locul "i" care va fi egal cu 0. Se va face acest lucru pentru titlu, terminând cu o linie de puncte pentru a separa mesajele. A doua oară când rulează, "i" va fi una mai mare, așa că va adăuga mai mult text cu rezultate după primul set din matrice. La final am setat "currentMessages" la egal cu "i".

Pasul 6 - Componente

În acest moment probabil că reușiți bine dacă nu aveți dureri de cap. Deci, să facem ceva ușor. Mergeți la "Fereastră> Componente" și din listă trageți două "Butoane" și un "UIScrollBar". Poziționați-le astfel:

Apoi mergeți la "Window> Component Inspector" și cu butonul din stânga selectat, faceți clic pe "etichetă" și redenumiți-l "Anterior". Cu butonul din dreapta, redenumiți-l "Următorul". Apoi definiți numele instanței butonului "Previous" ca "prevBt", butonul "Next" este "nextBt" și numele instanței "UIScrollBar's" ca "scroller".

Acum, sub "currentMessage = i;" bucată de cod scrie următoarele:

 scroller.scrollTarget = messageText;

Acest lucru spune "UIScrollBar" pentru a acționa ca un scroller pentru "messageText", incase există prea multe cuvinte pentru a se potrivi în spațiul desemnat. Acum trebuie să verificăm dacă butoanele sunt apăsate, deci sub tot codul scrie:

 nextBt.addEventListener (MouseEvent.MOUSE_UP, nextFunc); prevBt.addEventListener (MouseEvent.MOUSE_UP, prevFunc);

Aceasta adaugă un ascultător pentru a vedea dacă cursorul mouse-ului a fost lansat peste butoanele (dacă au fost apăsate) și dacă au, ascultătorul apelează o funcție pe care o vom scrie în pasul următor.

Pasul 7 - Codarea butoanelor

Dacă butonul "Următorul" a fost apăsat, dorim ca mesajul "messageText" să înlăture conținutul și să încarce mesajele următoare. Dacă apăsați butonul "Anterior", dorim ca acesta să încarce mesajele anterioare. În partea de jos a întregului cod scrie:

 funcția nextFunc (eveniment: MouseEvent) messageText.htmlText = ""; maximumMessages + = 5; updateText (); prevBt.enabled = true; 

Aceasta este funcția "Următorul". Când se declanșează, se șterge câmpul de text, se adaugă 5 la "maximumMessages", se rulează funcția "updateText" și se activează butonul "Previous". Prin adăugarea a 5 la "maximumMessages" și rularea funcției "updateText", se încarcă următoarele 5 mesaje în caseta de text pentru că acum "maximumMessages" este egal cu 10 și "currentMessage" este încă egal cu 5 de la ultima dată când funcția a fugit. Prin urmare, de data aceasta câmpul de text va afișa următoarele 5 mesaje în matrice.

 funcția prevFunc (eveniment: MouseEvent) messageText.htmlText = ""; maximumMessages- = 5; currentMessages- = 10; nextBt.enabled = adevărat; updateText (); dacă (curentMessages<=5)  prevBt.enabled=false;  

Aceasta este funcția pentru butonul "Anterior". Acest lucru elimină din nou câmpul text, scade și "maximumMessages" cu 5 și "currentMessages" cu 10. Aceasta este astfel încât, atunci când rulează funcția "updateText", acesta afișează ultimele 5 intrări. Acesta permite, de asemenea, butonul "Următorul". Dacă "currentMessage" este mai mică sau egală cu 5, butonul "Anterior" este dezactivat, astfel încât utilizatorul să nu poată afișa informații false; nu există mesaje mai mici de 0.

Doar sub "funcția updateText () " write:

 dacă (arrayName.length <= maximumMessages)  maximumMessages = arrayName.length; nextBt.enabled = false;  if (currentMessages < 0)  currentMessages = 0; maximumMessages = 5; nextBt.enabled = true; 

Primul "if" verifică dacă numărul total de mesaje este mai mic sau egal cu cel maxim. În acest caz, afișăm ultima intrare și nu dorește ca utilizatorul să poată da clic pe butonul "Înainte", așa că îl dezactivează. De asemenea, "maximumMessages" este egal cu suma totală a mesajelor, astfel încât să nu afișăm informații suplimentare inutile.

Al doilea "dacă" verifică dacă am trecut în numerele minus. Dacă avem, se întoarce la început și se afișează primele 5 intrări. De asemenea, după acest cod:

 dacă (i == xmlList.length () - 1) updateText (); 

adăugați următoarele:

 dacă (i> 4) nextBt.enabled = adevărat; 

Se verifică dacă există mai mult de 5 intrări. Dacă există atunci vom activa butonul "Următorul". Amintiți-vă că este 4 deoarece "i" începe la 0 nu 1. În final, în partea de sus introduceți următoarele:

 nextBt.enabled = false; prevBt.enabled = false;

Aceasta este dezactivarea ambelor butoane.

Pasul 8 - Primul test

Bine, deschideți fișierul ".xml" și introduceți:

  Chris Salut a 7- acest lucru este foarte complicat = - ( 

Tastați-l între eticheta pe care am scris-o mai devreme, astfel încât întregul fișier ".xml" să conțină numai:

   Chris Salut a 7- acest lucru este foarte complicat = - (  

Salvați ".xml", apoi testați fișierul flash și ar trebui să vedeți acest lucru:

Pasul 9 - Trimiteți casetele

Acum, când avem prima parte de lucru, fără o pauză, hai să facem abur în secțiunea a doua.

Este timpul să creați zona pe care utilizatorul o completează pentru a trimite un mesaj. Utilizați "Instrumentul de text" și creați 4 câmpuri text statice, spunând "Postați un mesaj", "Nume:", "Titlu:" și "Mesaj:".

Apoi creați 3 câmpuri de text de intrare și puneți unul lângă fiecare element pe care doriți să îl completați. Asigurați-vă că faceți caseta de introducere "Mesaj:" mai mare decât celelalte.

Selectați câmpul text în care utilizatorul va introduce numele său și îi va da un "nume de instanță" de "inputName". Faceți acest lucru pentru casetele de titlu și mesaje, oferindu-le numele de instanță "inputTitle" și "inputFull". În toate cele trei cutii am selectat casetele "Selectable" și "Show border around text". Apoi, deschideți din nou panoul "Componente" și glisați un alt buton. De data aceasta deschideți panoul "Component Inspector" și schimbați "eticheta" în "Submit" și "activat" la "false". Dați-i un nume de instanță pentru "submitBt".

Pasul 10 - Setarea variabilelor

 inputName.text = ""; var newName: String = ""; inputTitle.text = ""; var newTitle: String = ""; inputFull.text = ""; var nouFull: String = "";

Plasați acest cod sub toate celelalte coduri. Acest lucru spune că fiecare dintre "câmpurile de introducere" pe care le-am creat în etapa anterioară sunt goale. De asemenea, creează o variabilă pentru fiecare element și specifică-o ca "String" cu valoarea de nimic.

 funcția onEnterFrame (ev: Eveniment): void if (inputName.text! = "&& inputTitle.text! =" && inputFull.text! = "") submitBt.enabled = true; 

Plasați această funcție după tot codul. Această funcție verifică dacă toate "câmpurile de introducere" conțin text. "! =" înseamnă că nu este egal și "&&" spune "și". Deci, funcția spune: dacă toate "Câmpurile de intrare" nu sunt goale (ceea ce înseamnă că utilizatorul le-a umplut), activați butonul "submitBt". Acum trebuie să putem numi această funcție tot timpul, așa că avem nevoie de un alt ascultător.

 addEventListener (Eveniment.ENTER_FRAME, onEnterFrame);

Acest lucru spune că de fiecare dată când blițul intră în cadru (care pentru mine este de 30 de ori pe secundă) apela funcția "onEnterFrame".

Pasul 11 ​​- Data

Acum, dacă butonul de trimitere este activ, trebuie să verificăm dacă a fost făcut clic, deci avem nevoie de un alt ascultător.

 submitBt.addEventListener (MouseEvent.MOUSE_UP, trimiteData);

Când este lansat, acest ascultător va apela funcția "sendData", deci acum trebuie să scriem funcția.

 funcția sendData (eveniment: MouseEvent): void var dateToday: Date = new Date (); var thismonth: uint = dateToday.getMonth (); var luna: Array = Array nou (ianuarie, februarie, martie, aprilie, mai, iunie, iulie, august, septembrie, octombrie, noiembrie ','Decembrie'); var dateStr: String = (dataToday.getDate () + "" + luna [acest luni] + "" + dateToday.getFullYear ());

Prima linie deschide funcția. Apoi am setat "dateToday" ca o variabilă și dacă apoi urmărim imediat "dateToday" ar arăta "Fri 5 Mai 10:07:32 GMT + 0100 2009".

Următoarea linie stabilește variabila "acest luni" ca număr egal cu luna curentă stocată în "dataToday". Așa cum suntem în luna mai, care este a 5-a lună, dacă am urmărit "acest lună", ar răspunde 4, pentru că începe la 0, nu 1. Se creează apoi o nouă matrice, în care se stochează toate lunile în ordine. Apoi "dateStr" va stoca data finală care va fi afișată în cartea de oaspeți.

"dateToday.getDate ()" extrage întregul zilei curente, deci pentru al 5-lea, vom extrage 5. Apoi am pus valoarea matricei "lună" care este egală cu "acest luni", așa că schimbă un număr pentru un șir de lună. Apoi, "getFullYear ()" extrage anul curent în format de 4 cifre. Deci, dacă urmărim acum "dateStr" obținem "5 mai 2009".

Pasul 12 - Crearea unui nou XML

Acum că utilizatorul a lovit trimite, trebuie să transformăm detaliile în format xml astfel încât să poată fi scrise în fișierul ".xml".

 newName = inputName.text; newTitle = inputTitle.text; newFull = inputFull.text;

Aceasta face ca variabilele pe care le-am definit mai devreme să fie egale cu ceea ce utilizatorul a introdus în cutii.

 var newItem: XML = XML (""+ newName +""+ newTitle +""+ dateStr +""+ newFull +"„);

Această piesă descurajantă de coduri creează o nouă variabilă numită "newItem" care va stoca date xml. Apoi am setat-o ​​la egal cu un șir formatat xml. Pornim șirul cu ""care va ține toate detaliile pentru utilizator. Apoi am introdus numele, titlul, data și variabilele complete pe care le-am creat înainte, închizându-l cu"".

 myXML.appendChild (newItem);

Acum folosim "appendChild" pentru a adăuga un "newItem" la "myXML" care stochează toate informațiile pentru fișierul xml.

Pasul 13 - Trimiterea XML.

Acum că "myXML" este actualizat cu noul mesaj, trebuie să-l trimitem în php.

 var request: URLRequest = URLRequest nou ("messages.php"); request.data = myXML; request.contentType = "text / xml"; request.method = URLRequestMethod.POST;

Aici creăm o nouă variabilă numită "cerere" care ține locația fișierului nostru php. Nu am creat încă acest fișier, dar vă pot spune ce o vom numi (norocos!). Îl vom salva în același director ca toate fișierele noastre și îl vom numi "messages.php". Următoarea linie spune "solicitarea" că trimite informațiile în interiorul "myXML". Îi spunem apoi că aceste date sunt în format "XML" și că folosim postarea pentru a trimite datele.

 var încărcător: URLLoader = nou URLLoader (); loader.load (cerere); loader.addEventListener (Event.COMPLETE, loaderDone); 

Acum creăm un nou "încărcător" care să se ocupe de expedierea datelor, la fel ca și mai devreme când primim datele. Adăugăm un ascultător pentru a verifica dacă datele au fost trimise și dacă da, declanșează funcția "loaderDone".

Pasul 14 - Actualizați Flash.

Înainte de a ne muta în php există un ultim lucru pe care trebuie să-l facem în interiorul flash-ului:

 funcția loaderDone (evt: Event): void arrayName = []; arrayTitle = []; arrayDate = []; arrayFull = []; inputName.text = ""; inputTitle.text = ""; inputFull.text = ""; submitBt.enabled = false; maximMessages = 5; curentMessages = 0; messageText.htmlText = ""; urlLoader.load (urlRequest); 

Această funcție elimină matricele, elimină câmpurile de text de intrare și șterge mesajele din caseta de mesaje. Este, de asemenea, spune "urlLoader" pentru a reîncărca fișierul xml. Aceasta va determina apoi deschiderea cărții de oaspeți pentru a reveni la început, reîncărcarea fișierului xml care are noua noastră intrare, popularea array-urilor și afișarea din nou a primelor 5 mesaje.

Pasul 15 - Trecerea la PHP

Acum că am terminat flash-ul salvează-l și publică noua versiune. Deschideți un nou fișier php numit "messages.php".

 

Acest cod creează variabila "xml" și îi atribuie valoarea datelor trimise de la bliț. Apoi creează variabila "fișier" care stochează locația fișierului xml. "fopen" spune php pentru a deschide fișierul, "fwrite" folosește apoi "file" pentru a scrie conținutul variabilei "xml" în el. "fclose" închide apoi fișierul xml cu noul mesaj stocat în siguranță în el, gata să fie citit din nou de către cartela clienților flash.

Concluzie

În cele din urmă, încărcați fișierele pe serverul dvs.! Amintiți-vă că acestea nu vor funcționa pe hard disk decât dacă aveți instalat php. Localizați cartea de oaspeți și vedeți dacă funcționează, sperăm că o va face! Mulțumesc pentru timpul acordat, sper că ați învățat ceva util!

Cod