Build en dynamisk gjestebok med XML og Actionscript 3.0
Del
Del
Del
Share
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
bøker Gjeste er en stor ting for å forbedre den elektroniske erfaring seerne får. Muligheten for betrakteren til å snakke med deg og andre, svare på spørsmål du har reist, kommentere arbeidet ditt eller bare for å sosialisere betyr en gjestebok er en må ha for de fleste nettsteder. La oss se hvordan vi kan bygge vår egen gjestebok med ActionsScript 3.0, XML og PHP.
Innledning
Det er to hovedmåter jeg kan tenke på å drive en gjestebok; den mest brukte MySQL database drevet, eller mindre vanlig XML type. 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 slipper å programmere i tre forskjellige språk. Så hva vil du tjene på å lese denne opplæringen jeg hører du spør?
< li> Du vil lære hvordan du kan få data fra en XML-fil og konvertere den til arrays å arbeide innenfor Flash.
Du vil lære å bruke disse arrays for å fylle ut tekstfeltet.
Du vil lære å programmere knapper og et rullefelt.
Til slutt, vil du også lære å konvertere tekst til xml og send den til en php-fil hvor det vil bli skrevet til xml fil.
Litt av en munn full! 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 at du gjør ... Du kan sette opp flash men du velger, er det er ingen spesielle krav til bildefrekvens eller Stage Dimensions, men sørg for at du har satt den til "Action Script 3.0". Hvis du ønsker å gå videre og kopiere meg ord for ord vil jeg vise deg hvordan gruven er satt opp (hvor fint)
Trinn 2 -. Stylize
Som du kan fortelle fra bildet nedenfor har jeg fantastiske kreative ferdigheter! Dette er det punktet hvor vi designe gjesteboken, eller flytte inn i den moderne tidsalder, en datamaskin eller gjeste telefon. Jeg er sikker på at du vil gjøre en bedre jobb med å gjøre din ser mer profesjonell enn min gjør, men bare for de som er ny på flash, vil jeg raskt gå gjennom hvordan jeg opprettet min unike design.
Velg "rektangelverktøyet", klikk på "Properties", sett "Stroke" å være "3" og "Hjørneradius" å være "10". Klikk og dra for å lage din rektangel. Gjør et mindre på toppen av det i en annen farge, dette er hvor meldingene skal vises. Velg den nye formen og trykk "F8" for å konvertere den til et filmklipp. Deretter går du til "Filter" og bruke en "Drop Shadow". Deretter trekke enda et rektangel ut til siden; dette er hvor input felt vil gå
Trinn 3 -. Legge i XML
Så vi våger seg inn i ukjent for første gang! Start med å lage en ny fil med filtypen ".xml". Så inne som skriver følgende:
< meldinger > < /meldinger >
Lagre filen som "messages.xml" i samme mappe som din flash-fil. Nå, tilbake i flash, opprette et nytt lag som heter "Handlinger" og trykk "F9" for å få opp "Handlinger Panel". Det vil være mye mer gunstig for deg hvis du skriver inn koden jeg gi deg for hånd i stedet for å kopiere og lime det, så for hånd Type:
Var urlRequest: URLRequest = new URLRequest ("messages.xml"); Var URLLoader: URLLoader = new URLLoader (); urlLoader.addEventListener (Event.COMPLETE, fileLoaded); urlLoader.load (urlRequest);
Denne bit av koden er å sette opp en variabel kalt "urlRequest" som holder banen til vår "XML" fil. Det skaper da en annen variabel kalt "URLLoader" som vil bli brukt til å laste vår fil. Den "addEventListener" forteller flash vente til "url" har blitt lastet før du kjører "fileLoaded" -funksjonen. Den siste linjen er bare å fortelle den "URLLoader" for å laste "urlRequest" som er vår "XML" fil
Var myXML: XML = new XML (); myXML.ignoreWhitespace = true; Var xmlList. XMLList;
Disse linjene lage en ny variabel kalt "myXML" som kommer til å lagre alle data fra vår "XML" fil. Den ber så variabelen til "ignoreWhitespace" som gjør ikke mye, men det hjelper med godkjenningen. Den siste linjen skaper en variabel som heter "xmlList" som vil lagre meldinger og informasjon som vi vil trekke inn 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 bit av koden er å sette opp arrays som vil holde alle data. For nå ville det være best å holde dem den samme som min, slik at du ikke får noen feil senere. Du bør være oppmerksom på at "Full" er det jeg har brukt til å representere lang melding som brukeren skriver
funksjon fileLoaded (hendelse: Hendelse): void {myXML = XML (event.target.data);. xmlList = myXML.children ();
Dette er funksjonen "fileLoaded" som kalles når "XML" filen er lastet. I funksjonen gir vi "myXML" variable data fra "XML" fil. Vi da gi "xmlList" dataene strippet fra «myXML" som er alt unntatt fra "meldinger" holder vi skrev tidligere. Tydeligvis er det ingenting annet bortsett fra at det "xmlList" vil være tom
for (var i: int = 0; i < xmlList.length (); i ++) {var xmlName. String = xmlList [i] .name; Var xmlTitle: String = xmlList [i] .title; Var xmlDate: String = xmlList [i] .date; Var xmlFull: String = xmlList [i] .full; arrayName.push (xmlName); arrayTitle.push (xmlTitle); arrayDate.push (xmlDate); arrayFull.push (xmlFull);
Dette er den viktigste delen av funksjonen. Det går gjennom dataene som er lagret i "xmlList" og plasserer det inn i ulike matriser. Koden starter med en "for" loop, som sier: ". XmlList.length () ', kjøre denne koden" mens den variable "i" er mindre enn xmlList.length () "vil være hvor mange mennesker har sendt meldinger , så hvis det er lik 5, vil denne koden kjøres 5 ganger.
Så, for hvert attributt (navn, tittel, dato og meldingen) vi lage en "String Variable" lik den tilsvarende attributt inne den "xmlList". Første gang koden kjøres, dersom det ikke er noen oppføringer, "i" vil være lik 1 og "xmlName" vil være lik som noensinne navn er først i "xmlList". Den andre gangen det går gjennom, "i" vil være lik 2 og «xmlName" vil være lik som noensinne navn er andre i "xmlList".
Hva som da skjer er at hver av variablene er lagt til arrays. The Verdien av "xmlName" vil bli lagt til i "arrayName" av ".push" -metoden. Dette betyr at koden er kjørt gjennom, alle navnene som er lagret i "xmlList" er lagt inn i matrisen. Det samme gjelder . for tittel, dato og full
hvis (i == xmlList.length () - 1) {updateText (); }}}
Dette er slutt del av funksjonen. Den sier at hvis "jeg" er alltid lik den totale mengden av oppføringer - 1, kjør funksjonen "updateText"
Trinn 5 -. Viser Meldinger
Nå, etter at utmattende stykke av koding, får vi til noe litt enklere, sier han ...
På et nytt lag som heter "tekstboksen" bruke "Text Tool" for å lage en "Input Text" feltet over lysere rektangel. Pass på at du velger "Render teksten som HTML" boksen under "Properties > Character" og gi den en "Name Forekomst" av "messageText"
Gå tilbake til handlinger åpnes og under hele. kodetypen følgende:
messageText.htmlText = "Bli den første til å skrive!"; Var maximumMessages: Number = 5; Var currentMessages: Antall = 0; funksjon updateText () {messageText.htmlText = "";
Den første linjen er incase ingen har skrevet noe. De variable "maximumMessages" er mengden av meldinger de vi vil skal vises på en gang. De "currentMessages" er den siste meldingen som har vært vist i tekstfeltet. Deretter starter vi funksjonen som kalles etter at arrays er ferdig blir opprettet. Det første dette gjør er å tømme tekstfeltet som vi ikke alltid ønsker at meldingen skal være på toppen
for (var i = currentMessages, jeg < maximumMessages; i ++). {MessageText.htmlText + = (" < b > < u > Navn: < /u > < /b > "+ arrayName [i]); messageText.htmlText + = ("< b > < u > Tittel: < /u > < /b >" + arrayTitle [i]); messageText.htmlText + = ("< b > < u > Dato: < /u > < /b >" + arrayDate [i]); messageText.htmlText + = ("< b > < u > Melding: < /u > < /b >" + arrayFull [i]); messageText.htmlText + = ("........................................... .......... "); } CurrentMessages = i;}
Dette er en annen "for" loop. Denne gangen vi bruker den til å befolke "messageText" -feltet. Her setter vi "i" å like "currentMessages" som i øyeblikket er lik 0. Så hvis "jeg" er mindre enn "maximumMessages" som er lik 5 vi kjøre denne koden. Det vil derfor kjøre 5 ganger
Den første gangen det går det vil legge til. "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 du avslutter med en linje med prikker for å skille meldingene. Den andre gangen det går gjennom, "i" vil være en større, så det vil legge til mer tekst med resultatene etter det første settet i arrays. På slutten satt vi "currentMessages" å like "i"
Trinn 6 -. Komponenter
På dette punktet er du sannsynligvis gjør det bra hvis du ikke har en head-verke. Så la oss gjøre noe lett. Gå til "Window > Components" og fra listen dra ut to "knapper" og en "UIScrollBar". Plasser dem slik:
Deretter går du til "Window > Component Inspector" og med venstre knapp valgt, klikk på "label" og endre navnet "Forrige". Med knappen til høyre, gi den nytt navn "Next". Deretter definerer "Forrige" -knappen er forekomsten navn som "prevBt", "Neste" -knappen tallet som "nextBt" og "UIScrollBar sin" forekomst navn som "scroller"
Nå, under "currentMessage = i.; " kodebit skriver følgende:
scroller.scrollTarget = messageText;
Dette forteller "UIScrollBar" til å fungere som en scroller for "messageText", incase det er for mange ord å passe på anvist plass. Vi trenger nå å sjekke om knappene blir trykket, så under hele koden write:
nextBt.addEventListener (MouseEvent.MOUSE_UP, nextFunc); prevBt.addEventListener (MouseEvent.MOUSE_UP, prevFunc);
Dette legger en lytter å se om musepekeren har blitt sluppet over knappene (hvis de har blitt presset), og hvis de har, kaller lytteren en funksjon som vi skal skrive i neste trinn
Trinn 7. - Coding knappene
Hvis du har trykket på "Neste" -knappen vi ønsker at "messageText" for å fjerne hva som er i den og laste de neste meldinger. Hvis "Forrige" -knappen er trykket vi ønsker at den skal laste inn tidligere meldinger. På bunnen av all koden write:
funksjon nextFunc (event: MouseEvent) {messageText.htmlText = ""; maximumMessages + = 5; updateText (); prevBt.enabled = true;}
Dette er "Neste" -funksjonen. Når den utløses, klarner det i tekstfeltet, legger 5 til "maximumMessages", kjører funksjonen "updateText" og gjør det mulig å "Forrige" -knappen. Ved å legge fem til "maximumMessages" og kjøre "updateText" -funksjonen, laster det de neste 5 meldinger inn i tekstboksen for nå, "maximumMessages" er lik 10 og "currentMessage" er fortsatt lik 5 fra forrige gang funksjonen løp. Derfor, denne gangen tekstfeltet vil vise de neste 5 meldinger i arrays
fungere prevFunc (event: MouseEvent). {MessageText.htmlText = ""; maximumMessages- = 5; currentMessages- = 10; nextBt.enabled = true; updateText (); if (currentMessages < = 5) {prevBt.enabled = false; }}
Dette er funksjonen for "Forrige" -knappen. Dette fjerner igjen tekstfeltet, er det også trekker "maximumMessages" med 5 og "currentMessages" av 10. Dette er slik at når "updateText" -funksjonen går, viser den forrige 5 oppføringer. Det gjør også den "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.
Bare under "funksjon updateText () {" write:
if (arrayName.length < = maximumMessages) {maximumMessages = arrayName.length; nextBt.enabled = false; } If (currentMessages < 0) {currentMessages = 0; maximumMessages = 5; nextBt.enabled = true; }
Den første "hvis" er å sjekke om det totale antall meldinger er mindre enn eller lik den maksimale. Hvis dette er tilfelle, er vi viser den siste oppføringen og ikke vil at brukeren skal kunne klikke på "Neste" -knappen, så vi deaktivere den. Det gjør også "maximumMessages" lik den totale mengden av meldinger, slik at vi ikke vise ekstra unødvendige opplysninger.
Den andre "hvis" er å sjekke om vi har gått inn i minus tall. Hvis vi har, det mislighold tilbake til start og viser de første 5 oppføringer. Også etter denne koden:
hvis (i == xmlList.length () - 1) {updateText ();}
legge til følgende:
if (i > 4) {nextBt.enabled = sant;}
Dette er å sjekke om det er mer enn 5 oppføringer. Hvis det er så gjør vi det mulig "Neste" -knappen. Husk at det er fire fordi "jeg" starter på 0 ikke 1. Endelig på toppen skriver du inn følgende:
nextBt.enabled = false; prevBt.enabled = false;
Dette er invalid begge knappene
.
Trinn 8 - First Test
Ok, åpne "XML" fil og skriv:
< melding > < navn > Chris < /navn > < title > Hei < /title > < date > 7th < /dato > < fulle > dette er svært komplisert = - (< /full > < /melding >
Skriv inn det mellom tag vi skrev tidligere, så hele "XML" -filen skal bare inneholde:
< meldinger > < melding > < navn > Chris < /navn > < title > Hei < /title > < date > 7th < /dato > < fulle > dette er svært komplisert = - (< /full > < /melding > < /meldinger >
Lagre "XML", deretter teste flash-fil og du skal se dette:
Trinn 9 - Send inn Bokser
Nå som vi har den første delen fungerer, uten pause, la oss damp i den andre delen.
Det er på tide å lage det området som brukeren fyller inn for å sende en melding. Bruk "Text Tool" og lage 4 "Static Tekst Fields "sier" Post en melding "," Name: "," Tittel: "og" Melding: "
Deretter oppretter tre." Input tekst felt "og sette en ved siden av hvert element som du vil være utfylt Sørg for å gjøre det "Melding:".. input boksen større enn de andre
Velg tekstfeltet der brukeren vil oppgi navnet sitt, og gi den en "Instance Name" av "inputName". Gjør dette for tittelen og meldingsbokser, gi sine Forekomst navn "inputTitle" og "inputFull". På alle mine tre boksene har jeg valgt "valgbar" og "Show ramme rundt tekst" bokser. Deretter åpner du "Components" panel igjen og dra ut en annen knapp. Denne gangen åpne "Component Inspector" panel og endre sin "label" til "Send" og dens "aktivert" for å falske. Gi det en forekomst navn "submitBt"
Trinn 10 - Sette opp variabler
inputName.text = "."; Var newname: String = ""; inputTitle.text = ""; Var newTitle: String = ""; inputFull.text = ""; Var newFull: String = "";
Legg denne koden etter all annen kode. Dette sier at hver av de "Input Fields" som vi opprettet i forrige trinn er blanke. Det er også å skape en variabel for hvert element og angi det som en "streng" med verdien av ingenting
funksjon onEnterFrame (ev: Hendelses): void {if (inputName.text = "" & & inputTitle.!. text = "!" & &! inputFull.text = "") {submitBt.enabled = true; }}
Plasser denne funksjonen etter all koden. Denne funksjonen er å sjekke at alle de "Input Fields" inneholde tekst. "! =" Betyr ikke lik og "& &" sier "og". Så funksjon er å si: hvis alle "Input Fields" er ikke blank (som betyr at brukeren har fylt dem i) aktivere "submitBt" -knappen. Nå må vi være i stand til å kalle denne funksjonen hele tiden, så vi trenger en annen lytteren
addEventListener (Event.ENTER_FRAME, onEnterFrame);.
Dette er å si at hver gang flash angir rammen (som for meg er 30 ganger i sekundet) kaller "onEnterFrame" -funksjonen
Trinn 11 -. Dato
Nå som send-knappen er aktiv vi må sjekke om det er blitt klikket, så vi trenger en annen lytteren.
submitBt.addEventListener (MouseEvent.MOUSE_UP, senddata);
Når slippes, vil denne lytteren kaller funksjonen "senddata", så nå trenger vi å skrive funksjonen
funksjon senddata (event: MouseEvent).: void {var dateToday: Date = new Date (); Var thismonth: uint = dateToday.getMonth (); Var måned: Array = new Array('January','February','March','April','May','June','July','August','September','October','November','December'); Var dateStr: String = (dateToday.getDate () + "" + måned [thismonth] + "" + dateToday.getFullYear ());
Den første linjen åpner funksjonen. Vi satt "dateToday" som en variabel, og hvis jeg da umiddelbart spore "dateToday" det ville vise "Fri 5 mai 10:07:32 GMT + 0100 2009".
Den neste linjen setter variabelen "thismonth "som antallet som er lik den aktuelle måneden lagret inne" dataToday "Som vi er nå i mai som er den femte måneden, hvis jeg sporet" thismonth "det ville svare 4, fordi den starter på 0, ikke 1. Vi deretter opprette en ny array, lagring av alle månedene i orden. Da "dateStr" kommer til å lagre den endelige dato som vil bli vist på gjesteboka.
"dateToday.getDate ()" trekker ut tall på den aktuelle dagen, så for den femte, vil det trekke 5. Da kan vi sette i verdien av "månedens" array som er lik "thismonth", slik at den bytter et tall for en streng av måneden. Da "getFullYear ()" trekker ut inneværende år i fire sifre. Så hvis vi nå spore "dateStr" vi får "5 mai 2009"
Trinn 12 -. Lage nye XML
Nå som brukeren har rammet sende inn, vi trenger for å forvandle detaljene i xml format slik at de kan skrives til "XML" fil
newname = inputName.text.; newTitle = inputTitle.text; newFull = inputFull.text;
Dette er å snu de variablene vi definerte tidligere til lik hva brukeren har inngått boksene
Var newItem: XML = XML ("< melding > < navn >" + newname. + "< /navn > < title >" + newTitle + "< /title > < date >" + dateStr + "< /dato > < fulle >" + newFull + "< /full > < /message > ");
Denne skremmende stykke kode er å skape en ny variabel kalt" newItem "som kommer til å lagre XML-data. Vi så sette den til lik en xml formatert streng. Vi starter strengen med "< melding >" som kommer til å holde alle detaljene for brukeren. Vi deretter sette i Navn, tittel, dato og Full variabler som vi opprettet før, lukke den med "< /melding >"
myXML.appendChild (newItem);.
Vi bruker nå "appendChild" til legge til en "newItem" til "myXML" som lagrer all informasjon for xml filen
Trinn 13 -.. Sende XML
Nå som "myXML" er oppdatert med den ny melding vi må sende det til php
Var forespørsel: URLRequest = new URLRequest ("messages.php."); request.data = myXML; request.contentType = "text /xml"; request.method = URLRequestMethod.POST;
Her skaper vi en ny variabel kalt "request" som holder plasseringen av våre php-fil. Vi har ikke skapt denne filen ennå, men jeg kan fortelle deg hva vi vil kalle det (heldig!). Vi vil lagre den i samme mappe som alle våre filer og kaller det "messages.php". Den neste linjen er å fortelle "request" at det sender ut informasjonen innsiden "myXML". Vi blir så forteller det at disse dataene er i "XML" format, og at vi bruker "post" for å sende data
Var loader: URLLoader = new URLLoader ();. loader.load (forespørsel); loader.addEventListener (Event.COMPLETE, loaderDone);}
Nå skaper vi en ny "loader" til å håndtere sending av data, akkurat som tidligere når vi mottar data. Vi legger en lytter å sjekke om dataene har blitt sendt, og hvis så, det utløser "loaderDone" -funksjonen
Trinn 14 -.. Refresh Flash
Før vi går inn i php er det ett siste vi må gjøre inne flash:
funksjon loaderDone (evt: Hendelses): 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 er clearing arrays, rydde Input tekstfelt og fjerne meldinger fra meldingsboksen. Det er også fortelle "URLLoader" for å laste xml fil. Dette vil da utløse gjesteboka for å gå tilbake til start, legger du i xml filen som har vår nye oppføringen, fylle ut arrays og vise de første 5 meldinger igjen
Trinn 15 -. Flytte til PHP
Nå som vi er ferdig i flash lagre den og publisere den nye versjonen. Åpne opp en ny php fil som heter "messages.php"
. ≪? Php if (Isset (Globals $ ["HTTP_RAW_POST_DATA"])) {$ xml = $ Globals ["HTTP_RAW_POST_DATA"]; $ fil = fopen ("messages.xml", "wb"); fwrite ($ fil, $ xml); fclose ($ fil);} >?
Denne koden oppretter variabelen "xml" og tildeler den verdien av data som er sendt fra flash. Det skaper deretter på "fil" variable som lagrer plasseringen av xml filen. "fopen" forteller php å åpne filen, "fwrite" bruker deretter "fil" for å skrive ut innholdet av variabelen "xml" inn i den. "fclose" lukker deretter xml fil med den nye meldingen trygt lagret i den, klar til å bli lest av flash gjesteboka igjen.
Konklusjon
Til slutt, laste opp filer til serveren din ! Husk disse vil ikke fungere på harddisken din med mindre du har php installert. Finn gjestebok og se om det fungerer, forhåpentligvis det vil! Takk for din tid, jeg håper du har lært noe nyttig! Anmeldelser