Bygg en dynamisk gjestebok med XML og ActionScript 3.0

Gjestebøker er en flott ting å forbedre onlineopplevelsen dine seere mottar. Evnen til seeren til å snakke med deg og andre, svare på spørsmål du har hevet, kommenterer arbeidet ditt eller bare for å sosialisere, betyr at en gjestebok er et must for de fleste nettsteder. La oss se hvordan vi kan bygge vår egen gjestebok med ActionScript 3.0, XML og PHP.


Introduksjon

Det er to hovedveier jeg kan tenke på for å drive en gjestebok; den mer brukte MYSQL-databasen drevet, eller den mindre vanlige XML-typen. Begge er avhengige av server-side scripting for å fungere, men den fordelen at jeg ser fra å bruke XML-versjon, er det enkle faktum at du ikke trenger å bekymre deg for om verten støtter MySQL og du trenger ikke å programmere i tre forskjellige språk. Så hva vil du få fra å lese denne opplæringen jeg hører deg spørre?

  • Du lærer å programmere i ActionScript 3.0 (som tok meg lang tid å lære ...)
  • Du lærer hvordan du får data fra en XML-fil og konverterer den til arrays for å fungere i Flash.
  • Du lærer hvordan du bruker disse arrays for å fylle ut tekstfeltet.
  • Du lærer hvordan du programmerer knapper og en rullefelt.
  • Endelig vil du også lære å konvertere tekst til xml og sende den til en php-fil der den vil bli skrevet til xml-filen.

Ganske full munn! La oss komme i gang.

Trinn 1 - Komme i gang

Du bør allerede vet hvordan du åpner flash, eller i det minste håper jeg du gjør ... Du kan sette opp flash men du velger, er det ingen spesifikke krav til bildefrekvens eller Stage Dimensions, men sørg for at du har satt den til "Action Script 3,0" . Hvis du vil fortsette og kopiere meg ord for ord, vil jeg vise deg hvordan min er satt opp (hvor fint).

Trinn 2 - Stylize

Som du kan fortelle fra bildet nedenfor, har jeg fantastiske kreative ferdigheter! Dette er punktet der vi designer gjesteboken, eller går inn i moderne tid, en gjestedatamaskin eller gjestetelefon. Jeg er sikker på at du vil gjøre en bedre jobb for å gjøre dine ser mer profesjonelle enn mine gjør, men bare for de som er nye for å blinke, vil jeg raskt løpe gjennom hvordan jeg opprettet min unike design.

Velg "Rektangelverktøy", klikk på "Egenskaper", sett "Stroke" for å være "3" og "Hjørne Radius" til "10". Klikk deretter og dra for å lage rektangelet. Lag en annen mindre på toppen av den i en annen farge, det er her meldingene vil bli vist. Velg den nye figuren og trykk "F8" for å konvertere den til en filmklipp. Deretter går du til "Filter" og bruker en "Drop Shadow". Deretter tegner du et annet rektangel ut til siden; Det er her inputfeltene vil gå.

Trinn 3 - Laster inn XML

Så vi går inn i det ukjente for første gang! Begynn med å opprette en ny fil med utvidelsen ".xml". Deretter skriver du inn følgende:

  

Lagre filen som "messages.xml" i samme mappe som din flashfil. Nå, tilbake i flash, opprett et nytt lag kalt "Actions" og trykk "F9" for å få opp "Actions Panel". Det vil være mye mer gunstig for deg hvis du skriver inn koden jeg gir deg for hånd i stedet for å kopiere og lime den, så for håndtype:

 var urlRequest: URLRequest = ny URLRequest ("messages.xml"); var urlLader: URLLoader = ny URLLoader (); urlLader.addEventListener (Event.COMPLETE, fileLoaded); urlLoader.load (urlRequest);

Denne delen av koden er å sette opp en variabel kalt "urlRequest" som holder banen til vår ".xml" -fil. Det oppretter deretter en annen variabel kalt "urlLoader" som vil bli brukt til å laste inn filen vår. "AddEventListener" forteller flash for å vente til "url" er lastet inn før du kjører "fileLoaded" -funksjonen. Den endelige linjen forteller bare "urlLoader" for å laste "urlRequest" som er vår ".xml" -fil.

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

Disse linjene oppretter en ny variabel kalt "myXML" som skal lagre alle dataene fra vår ".xml" -fil. Det forteller da variabelen å "ignorereWhitespace" som ikke gjør mye, men det hjelper med validering. Den siste linjen oppretter en variabel som heter "xmlList", som lagrer meldingene og informasjonen som vi vil trekke ut i arrays.

Trinn 4 - Arrays

 var arrayName: Array = new Array (); var arrayTitle: Array = new Array (); var arrayDate: Array = new Array (); var arrayFull: Array = new Array ();

Denne delen av koden er å sette opp arrays som vil holde alle dataene. For nå vil det være best å beholde din samme som min, slik at du ikke får noen feil senere. Du bør merke at "Full" er det jeg har brukt til å representere den lange meldingen som brukeren skriver.

 funksjon fileLoaded (event: Event): void myXML = XML (event.target.data); xmlList = myXML.children ();

Dette er funksjonen "fileLoaded" som kalles når filen ".xml" er lastet. I funksjonen gir vi "myXML" -variabelen dataene fra ".xml" -filen. Vi gir så "xmlList" dataene fjernet fra "myXML", som er alt bortsett fra "meldings" -holderen vi skrev tidligere. Åpenbart er det ingenting annet enn det, så "xmlList" vil være tomt.

 for (var jeg: int = 0; i 

Dette er hoveddelen av funksjonen. Det går gjennom dataene som er lagret i "xmlList" og plasserer det i forskjellige arrays. Koden starter med en "for" loop, som sier: ". XmlList.length ()', kjøre denne koden 'mens variabelen "i" er mindre enn xmlList.length ()' vil være hvor mange som har sendt meldinger , så hvis den er lik 5, kjører denne koden 5 ganger.

Deretter oppretter vi for hver attributt (navn, tittel, dato og melding) en "Stringvariabel" som tilsvarer tilhørende attributt inne i "xmlList". Første gang koden kjøres, gir det noen oppføringer, vil "jeg" være lik 1 og "xmlName" vil være lik det som helst navnet er først i "xmlList". Andre gang det går gjennom, vil "jeg" være lik 2 og "xmlName" vil være lik som noe annet navn er i "xmlList".

Hva skjer da er at hver av variablene legges til arrays. Verdien av "xmlName" vil bli lagt til "arrayName" med ".push" -metoden. Dette betyr at når koden kjøres gjennom, legges alle navnene som er lagret i "xmlList" til i gruppen. Det samme gjelder for tittel, dato og full.

 hvis (i == xmlList.length () - 1) updateText (); 

Dette er den endelige delen av funksjonen. Det står at hvis "jeg" alltid er lik den totale mengden oppføringer - 1, kjør funksjonen "updateText".

Trinn 5 - Viser meldingene

Nå, etter det grusomme stykket koding, kommer vi til noe litt lettere, sier han ...

På et nytt lag kalt "textbox" bruk "Tekstverktøy" for å lage et "Input Text" -felt over lysere rektangel. Pass på at du velger boksen Render text as HTML under "Properties> Character" og gi den et "Instansnavn" til "messageText".

Gå tilbake til handlingsvinduet og under alle koden skriver du følgende:

 messageText.htmlText = "Vær den første til å poste!"; var maximumMessages: Number = 5; var currentMessages: Number = 0; funksjon updateText () messageText.htmlText = "";

Den første linjen er incase ingen har skrevet noe. Variabelen "maximumMessages" er mengden meldinger vi ønsker å bli vist på en gang. "CurrentMessages" er den siste meldingen som har blitt vist i tekstfeltet. Deretter starter vi funksjonen som kalles etter at arrays er ferdig opprettet. Det første du gjør er å fjerne tekstfeltet, da vi ikke alltid vil at meldingen skal være øverst.

 for (var i = currentMessages; iNavn: "+ arrayName [i]); messageText.htmlText + = ("Tittel: "+ arrayTitle [i]); messageText.htmlText + = ("Dato: "+ arrayDate [i]); messageText.htmlText + = ("Budskap: "+ arrayFull [i]); messageText.htmlText + = (" ... "); currentMessages = i;

Dette er en annen "for" loop. Denne gangen bruker vi den til å fylle ut "messageText" -feltet. Her setter vi "i" til lik "currentMessages", som i øyeblikket er lik 0. Så hvis "i" er mindre enn "maximumMessages" som er lik fem vi kjøre denne koden. Det vil derfor løpe 5 ganger.

Første gang det kjøres det vil legge "Navn:" til "messsageText" og deretter hvilken navn er i arrayName rekke på stedet for "jeg", som vil være lik 0. Det vil gjøre dette for tittel, dato og full før slutter med en linje med prikker for å skille meldingene. Andre gang det går gjennom, vil «jeg» bli en større, så det vil legge til mer tekst med resultater etter det første settet i arrays. På slutten setter vi "currentMessages" til lik "jeg".

Trinn 6 - Komponenter

På dette punktet har du sikkert det bra hvis du ikke har vondt. Så la oss gjøre noe enkelt. Gå til "Window> Components" og trekk ut to "Knapper" og en "UIScrollBar" fra listen. Plasser dem slik:

Deretter går du til "Vindu> Komponentinspektør" og med den venstre knappen valgt, klikker du på "label" og gir navnet på "Forrige". Med knappen til høyre, endre navn på "Next". Definer deretter "Forrige" -knappens forekomstnavn som "prevBt", "Next" -knappen som "nextBt" og "UIScrollBar's" instansnavn som "scroller".

Nå, under "currentMessage = i;" stykke kode skriver følgende:

 scroller.scrollTarget = messageText;

Dette forteller "UIScrollBar" å fungere som en scroller for "messageText", incase det er for mange ord å passe inn i det angitte rommet. Vi må nå sjekke om knappene trykkes, så under hele koden, skriv:

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

Dette legger til en lytter for å se om musemarkøren har blitt løslatt over knappene (hvis de har blitt trykket) og hvis de har, kaller lytteren en funksjon som vi skal skrive i neste trinn.

Trinn 7 - Koding av knappene

Hvis "Neste" -knappen er trykket, vil vi "messageText" for å fjerne hva som er i det og laste de neste meldingene. Hvis du trykker på "Forrige" -knappen, vil vi laste den forrige meldingen. På bunnen av hele koden skriv:

 funksjon nextFunc (event: MouseEvent) messageText.htmlText = ""; maximumMessages + = 5; updateText (); prevBt.enabled = true; 

Dette er "Neste" -funksjonen. Når den utløses, rydder den tekstfeltet, legger til 5 til "maximumMessages", kjører funksjonen "updateText" og aktiverer "Forrige" -knappen. Ved å legge til 5 til "maximumMessages" og kjører "updateText" -funksjonen, laster den de neste 5 meldingene inn i tekstboksen fordi nå er "maksimumMessages" lik 10 og "currentMessage" er fortsatt lik 5 fra siste gang funksjonen løp. Derfor, denne gangen vil tekstfeltet vise de neste 5 meldingene i arrays.

 funksjon prevFunc (event: MouseEvent) messageText.htmlText = ""; maximumMessages- = 5; currentMessages- = 10; nextBt.enabled = true; updateText (); hvis (currentMessages<=5)  prevBt.enabled=false;  

Dette er funksjonen for "Forrige" -knappen. Dette fjerner igjen tekstfeltet, det trekker også "maximumMessages" med 5 og "currentMessages" med 10. Dette er slik at når "updateText" -funksjonen kjører, viser den de forrige 5 oppføringene. Det aktiverer også "Neste" -knappen. Hvis "currentMessage" er mindre enn eller lik 5, er "Forrige" -knappen deaktivert slik at brukeren ikke kan vise falsk informasjon; Det er ingen meldinger lavere enn 0.

Litt under "function updateText () " write:

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

Den første "hvis" kontrollerer om totalt antall meldinger er mindre enn eller lik maksimalt. Hvis dette er tilfelle, viser vi den siste oppføringen og vil ikke at brukeren skal kunne klikke på "Neste" -knappen, så vi deaktiverer den. Det gjør også "maximumMessages" lik den totale mengden meldinger, slik at vi ikke viser ekstra unødvendig informasjon.

Den andre "hvis" sjekker om vi har gått inn i minus tall. Hvis vi har, er det standard tilbake til starten og viser de første 5 oppføringene. Også etter denne koden:

 hvis (i == xmlList.length () - 1) updateText (); 

legg til følgende:

 hvis (i> 4) nextBt.enabled = true; 

Dette kontrollerer om det er mer enn 5 oppføringer. Hvis det er så aktiverer vi "Neste" -knappen. Husk at det er 4 fordi "jeg" starter på 0 ikke 1. Til slutt, oppgi følgende:

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

Dette deaktiverer begge knappene.

Trinn 8 - Første test

Ok, åpne filen ".xml" og skriv inn:

  Chris Hallo syvende dette er svært komplisert = - ( 

Skriv det mellom koden vi skrev tidligere, så hele filen ".xml" skal bare inneholde:

   Chris Hallo syvende dette er svært komplisert = - (  

Lagre ".xml", og test deretter flashfilen, og du bør se dette:

Trinn 9 - Send inn bokser

Nå som vi har den første delen som arbeider, uten pause, la oss dampe inn i den andre delen.

Det er på tide å lage området som brukeren fyller ut for å sende inn en melding. Bruk "Tekstverktøy" og opprett 4 "Statiske tekstfelt" og si "Legg inn en melding", "Navn:", "Tittel:" og "Melding:".

Deretter oppretter du 3 "Input Text Fields" og legger en ved siden av hvert element du vil bli fylt ut. Sørg for å gjøre inntastingsboksen "Melding:" større enn de andre.

Velg tekstfeltet der brukeren vil skrive inn navnet sitt og gi det et "Instansnavn" til "inputName". Gjør dette for tittel og meldingsbokser, og gi deres instansnavn "inputTitle" og "inputFull". På alle mine tre bokser har jeg valgt boksene "Selectable" og "Show border around text". Deretter åpner du "Komponenter" -panelet igjen og drar ut en annen knapp. Denne gangen åpnes panelet "Komponentinspektør" og endrer "label" til "Submit" og "aktivert" til false. Gi det et eksempel på "submitBt".

Trinn 10 - Konfigurere variabler

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

Plasser denne koden under all annen kode. Dette sier at hver av de "Input Fields" som vi opprettet i forrige trinn er tomme. Det lager også en variabel for hvert element og angir det som en "streng" med verdien av ingenting.

 funksjon onEnterFrame (ev: Event): void if (inputName.text! = "" && inputTitle.text! = "" && inputFull.text! = "") submitBt.enabled = true; 

Plasser denne funksjonen etter all kode. Denne funksjonen kontrollerer at alle "Input Fields" inneholder tekst. "! =" betyr ikke lik og "&&" sier "og". Så funksjonen sier: Hvis alle "Input Fields" ikke er tomme (noe som betyr at brukeren har fylt dem inn) aktivere "SubmitBt" -knappen. Nå må vi kunne ringe denne funksjonen hele tiden, så vi trenger en annen lytter.

 addEventListener (Event.ENTER_FRAME, onEnterFrame);

Dette sier at hver gang blits går inn i rammen (som for meg er 30 ganger i sekundet), ring "onEnterFrame" -funksjonen.

Trinn 11 - Dato

Nå som send-knappen er aktiv må vi sjekke om den er blitt klikket, så vi trenger en annen lytter.

 submitBt.addEventListener (MouseEvent.MOUSE_UP, sendData);

Når den blir lansert, vil denne lytteren kalle funksjonen "sendData", så nå må vi skrive funksjonen.

 funksjon sendData (event: MouseEvent): void var dateToday: Date = new Date (); var thismonth: uint = dateToday.getMonth (); Var måned: Array = Ny, Array ('Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November ','Desember'); var dateStr: String = (dateToday.getDate () + "" + måned [thismonth] + "" + dateToday.getFullYear ());

Den første linjen åpner funksjonen. Vi stiller da "dateToday" som en variabel, og hvis jeg så umiddelbart sporer "dateToday", ville det vise "fre 5 mai 10:07:32 GMT + 0100 2009".

Neste linje angir variabelen "thismonth" som tallet som er lik den nåværende måneden som er lagret i "dataToday". Som vi for øyeblikket er i mai, som er den femte måneden, vil jeg svare på 4, fordi jeg spores "thismonth" fordi det starter ved 0, ikke 1. Vi lager deretter et nytt utvalg, lagrer alle månedene i rekkefølge. Da kommer "dateStr" til å lagre sluttdatoen som vil bli vist på gjesteboken.

"dateToday.getDate ()" trekker ut heltallet av dagens dag, så for den femte vil den trekke ut 5. Da setter vi inn verdien av "måneden" -arrayet som er lik "thismonth", så det bytter et tall for en streng av måneden. Da trekker "getFullYear ()" ut det nåværende året i 4-sifret format. Så hvis vi nå sporer "dateStr" får vi "5 mai 2009".

Trinn 12 - Opprette ny XML

Nå som brukeren har slått inn, må vi omforme detaljene i XML-format slik at de kan skrives til ".xml" -filen.

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

Dette gjør de variablene vi definerte tidligere til å være lik det brukeren har skrevet inn i boksene.

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

Dette skremmende stykke kode skaper en ny variabel kalt "newItem" som skal lagre XML-data. Vi setter den så lik en xml formatert streng. Vi starter strengen med ""som skal holde alle detaljer for brukeren. Vi legger da inn navn, tittel, dato og full variabler som vi opprettet før, lukker det med"".

 myXML.appendChild (newItem);

Vi bruker nå "appendChild" for å legge til en "newItem" til "myXML" som lagrer all informasjon for xml-filen.

Trinn 13 - Sende XML.

Nå som "myXML" er oppdatert med den nye meldingen, må vi sende den til php.

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

Her oppretter vi en ny variabel kalt "forespørsel" som holder plasseringen av vår php-fil. Vi har ikke laget denne filen enda, men jeg kan fortelle deg hva vi vil kalle det (heldig du!). Vi lagrer det i samme mappe som alle våre filer og kaller det "messages.php". Neste linje forteller "forespørselen" at den sender informasjonen i "myXML". Vi forteller da at disse dataene er i XML-format, og at vi bruker "post" for å sende dataene.

 var loader: URLLoader = ny URLLoader (); loader.load (request); loader.addEventListener (Event.COMPLETE, loaderDone); 

Nå lager vi en ny "loader" for å håndtere dataoverføringen, akkurat som tidligere da vi mottok dataene. Vi legger til en lytter for å sjekke om dataene har blitt sendt og i så fall utløser det "LoaderDone" -funksjonen.

Trinn 14 - Oppdater Flash.

Før vi går inn i php er det en siste ting vi må gjøre inne i flash:

 funksjon 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); 

Denne funksjonen rydder arrays, fjerner Input Text Fields og fjerner meldingene fra meldingsboksen. Det forteller også "urlLoader" for å laste xml-filen på nytt. Dette vil da utløse gjesteboken for å gå tilbake til starten, laste på xml-filen som har vår nye oppføring, fylle opp arrayene og vise de fem første meldingene igjen.

Trinn 15 - Flytter til PHP

Nå som vi er ferdige med flash, lagrer du det og publiserer den nye versjonen. Åpne en ny php-fil som heter "messages.php".

 

Denne koden oppretter variabelen "xml" og tildeler den verdien av dataene som er sendt fra flash. Det skaper da "fil" -variabelen som lagrer plasseringen av xml-filen. "fopen" forteller php å åpne filen, "fwrite" og bruker "fil" for å skrive innholdet i variabelen "xml" i den. "fclose" og lukker xml-filen med den nye meldingen som er trygt lagret i den, klar til å bli lest av flash-gjesteboken igjen.

Konklusjon

Last opp filene på serveren din! Husk at disse ikke fungerer på harddisken din, med mindre du har php installert. Finn gjesteboken og se om det fungerer, forhåpentligvis vil det! Takk for din tid, jeg håper du har lært noe nyttig!