AS3 101: XML - Basix
to
Del
6
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter AS3 101.AS3 101:. Displayet List - BasixAS3 101: OOP Introduksjon - Basix
Vel, hei der, næringsrik Action Journeyman! Du har krysset mange et merkelig landskap så langt i løpet av de siste 6 månedene, men hvis alt gikk etter planen, kom deg sterkere og readier å møte neste utfordring. Her med den syvende utgaven, vil vi kulminere med temaet XML.
Innledning
Som vi har kommet gjennom AS3 101-serien, vi har tillatt oss å komme stadig mer fleksibel, skrive programmer som svarte på oppdateringer jevnere enn de forrige. Her er der det blir virkelig interessant: hvis vi kan holde data som driver programmet eksternt til SWF, deretter gjøre oppdateringer blir et spørsmål om å redigere en tekstfil (eller arbeider med en database), i stedet for å redigere Action og rekompileres SWF.
Dette er ikke noe nytt, men jeg vil anta at det er nytt for deg, og det er derfor du er her. Jeg vil anta at du er komfortabel med alt annet vi har dekket så langt i AS3 101-serien - Display List emner, Arrays, og Loops spesielt. Men jeg vil anta at du trenger en formell introduksjon til XML seg selv, sammen med hvordan du arbeider med det i Actionscript.
For å nå dette målet, vil vi ta dette i tre brede deler. Først vil vi se på hvordan XML er skrevet. Deretter vil vi se på de teknikkene som er tilgjengelig for oss i Actionscript 3 for å arbeide med XML. Til slutt vil vi sette det hele sammen for å bygge en XML-drevet produkt funksjon, en forhåndsvisning av som er synlig under
Trinn 1:. Hva er XML
Vi har? å starte her. XML forkortelsen står for "Extensible Markup Language", og antagelig "XML" hørtes kulere enn "EML." Et kodespråk er en språket Du er mest sannsynlig kjent med et markeringsspråk: HTML (som står for Hyper Text Markup Language). I dette tilfellet kodene (de biter som starter med < og slutter med >) er markeringen. Hvis du vet HTML, så har du ikke noe problem å plukke opp XML, som syntaksen er identisk. Faktisk, XML og HTML begge har en felles stamfar i SGML. Og XHTML er rett og slett HTML omskrevet slik at den er i samsvar med XML-standarder (HTML hadde vært mye mer loosey-goosey om visse ting, som XML ikke er). markup i XML vil være kjent, men denne "Extensible "ideen kan ta litt tid å bli vant til. Kjernen er at selv gjennom det er visse regler i hvordan XML skal skrives, er det ikke noen regler om hva Når det er sagt, er det flere XML-basert språk som gjøre For en mer teknisk lesing på XML språk, se w3 offisielle spec. Vi skal skrive et XML-dokument i første halvdel av denne opplæringen, som vi skal bruke i andre omgang for å laste inn Flash Åpne opp en ny tekstfil og lagre den på et sted som du velger som products.xml Det aller første vi vil legge til er XML-deklarasjonen. Flash faktisk vil fungere helt fint uten denne linjen til stede. Men er det god form for å sørge for at den er der. Dette er kjele plate; noen redaktør verdt sin salt vil ha en XML-mal som gir denne linjen for deg. Så vidt jeg vet, er det ingen annen verdi for den versjonen, og kodingen vil typisk være UTF-8. Men det er verdt å merke seg at hvis tekstfilen er ikke UTF-8-kodet - for eksempel ISO-8859-1 - du må kanskje justere den linjen (eller re-kode filen være UTF-8). Tekstkoding er et tema utover grensene for denne opplæringen. Det er et tema som bør revisited, men. En programmerer bor sammen med tekstfiler for en levende, og slik at det er til ens fordel å være kjent med tekstkoding. Mer informasjon enn du noensinne trodde kunne bli nevnt om tekstkoding finner du her Hva er et element? Hvis du vet at HTML lingo, er et element noe definert av et sett med koder, slik som < div >. Elementet omfatter alt fra åpningen tag til matchende lukking tag, så elementet inneholder både markup (tag) og innholdet av den koden. Det er to viktige typer elementer: åpen elementer, og lukket elementer En åpen elementet kommer med en matchende sett med koder, slik som < p > ... < /p >, der. ≪ p > er åpningen tag, og < /p > er den avsluttende koden. Så, er en "mindre enn" -tegn (heretter omtalt som en åpningsvinkel brace) det første tegnet i en kode. Navnet på elementet kommer neste (i vårt eksempel var det "p", men husk, siden XML er utvidbar Dette er viktig. I HTML kan du bli vant til å være lat om dine tag nedleggelser. XML er ikke like tilgivende. Hvert element som du åpner må stenges Hvis du vil lukke en node, oppretter du en annen kode med samme navn, bare mellom åpningsvinkel seler og nodenavnet, det er en skråstrek. ≪ /p > Elementet skal være lukket i den rekkefølge de er åpnet. Elements kan nestes, og å gjøre det du trenger å åpne ett element, og deretter en annen. Når du lukker dem, blir det andre elementet lukket først, deretter det første elementet. For eksempel: Legg merke til vi åpnet et element, deretter b element, og deretter c element. Når det gjelder tid til å pakke det hele opp, må vi lukke dem i omvendt rekkefølge: c, deretter b, og til slutt en Legg merke til at det er vanlig å rykke inn en nestet element, enten ved hjelp av et tabulatortegn eller. et visst antall plasser. Dette er for lesbarhet formål, mye som det er vanlig å rykke inn innholdet i en funksjon eller kroppen av en loop. Men som i Actionscript, dette mellomrom er ganske mye ignorert, og de ovennevnte kan være like legitimt skrives som: Som nevnt i begynnelsen av dette trinnet, er det noe slikt som en tom Hver XML-dokument skal ha en, og bare en, root element I denne opplæringen, vil vi lage en XML produktliste. Så, til noe generelt henvise til hele datasettet, vil vi skrive dette: Search < produkter > < /produkter > Det spiller egentlig ingen rolle akkurat nå, men legg merke til at den tomme andre linjen faktisk har en fane karakter på den, med henblikk på innrykk de nestede elementer Det viktigste er. å vite at vår hele datasettet vil passe i mellom start- og slutt tags på dette elementet, faner og alt. Som sådan, er det ikke en dårlig idé å gi noen trodde til navnet på elementet. Vi er bare nødt til å ha en liste over produkter, så "produkter" er fornuftig. Men hvis det var å ha en liste over produkter og en liste over kategorier, så kanskje kalle root element "produkter" gjør mindre sans, som vi vil nok bruke "produkter" for en nestet element for produktlisten. Når det er sagt, det er ingen regel som sier at du ikke kan bruke elementnavn. Det er vanligvis lettere å lese i det lange løp, men hvis du har godt gjennomtenkte elementnavn La oss nå begynne å legge noen data. Vi vil legge til et enkelt produkt element i dokumentet. Dette elementet vil bli nestet inne i produktene element. Elementet vi legger vil være dette: Igjen, vi forlater rommet for nestede elementer, slik at andre linje har et tabulatortegn. Da lagt til hele dokumentet, vil det se omtrent slik ut: Nå kan vi legge noen detaljer om et gitt produkt. Vi vil legge til et navn, en link til produktdetaljer og et bilde URL. Vi vil legge til en beskrivelse i noen få trinn Vi vil bare legge til elementer i produktet element, og gi hver en verdi. Så vi gir produktet noen detaljer. Fordi < navn >, < link >, og < bilde > Elementene er stablet i < produkt > element, de "tilhører" til < produkt >. I noen få flere trinn, vil vi legge til flere produktelementer. Hver vil ha sine egne navn, link, og bildeelementer. Datastrukturen av hekkende disse elementene vil holde hvert navn assosiert med riktig produkt Som det viser seg < link > node vil være problematisk, though. Hvis du har en XML-validator hendig, gå videre og kjøre den. Du får en feilmelding til effekten av "forventet semikolon." Jeg bruker Textmate for min kode redigering og kjører Tidy kommandoen fra XML bunt vil vise følgende feil: Ovennevnte er bare for demonstrasjonsformål. Vi vil være fint med bare en id-attributt. Når du bruker attributter og når du bruker elementer? Det er opp til deg. Min viktigste tommelfingerregel er at korte data kan gå i attributter, og lengre data kan gå i elementer. Men finner jeg tomme elementer praktisk, så jeg kan feile på siden av å bruke attributter hvis mulig. På den annen side, er syntaksen for å lese attributter i Actionscript 3 uten tvil (om aldri så litt) mer ordrik enn lesing elementer, så hvis jeg må bruke ett element for lengde grunner, vil jeg pleier å bruke elementer for resten av dataene, samt Nå som vi har et produkt bygget opp, kan vi lage en liste over dem ved å skrive ut (eller kopiere og lime) samme struktur, bare med forskjellige data. Et fugleperspektiv av strukturen vil se slik ut: Hver enkelt produkt element representerer et enkelt produkt, så vi har fire produkter totalt. Hver vil ha forskjellige data som finnes der, men hver vil også følge strukturen vi jobbet med det første produktet. Her er hele dokumentet:? For resten av opplæringen, vil vi være å bygge et enkelt produkt funksjon som vil bruke XML-dokument vi nettopp ferdig med å opprette. Den vil ha små knapper som representerer hvert av funksjoner, som kan klikkes på for å fylle hovedområdet med informasjon om dette produktet. I tillegg, som en liten bonus, funksjonene vil automatisk avansere gjennom listen. Som vanlig, vi skal hoppe over kunstverk prosessen, og jeg anbefaler deg å bruke starteren fil funnet i nedlastingsfiler. Hvis du vil, kan du bruke følgende beskrivelse av starteren filen enten som en gjennomgang av hva som allerede er der, eller som en guide over hva du trenger for å bygge på egen hånd, hvis du velger å skru ned startfilen. Først er det et bakgrunnslag med et rektangel på den. Ingen stor sak. Deretter er det en dynamisk Textfield heter caption_tf Så har vi en annen dynamisk Textfield, heter description_tf Begge textfields ha fonter satt for innebygging, som vi kommer til å oppdatere teksten dynamisk gjennom Actionscript. Til slutt, det er et symbol i biblioteket heter FeatureButton, og det er satt til å eksportere for Actionscript. Dens Actionklassenavn er også FeatureButton (dette navnet er den viktigste), og det er satt til å eksportere i den første rammen. Et eksempel på denne knappen er plassert på scenen i en guide lag som kalles "knyttet symboler" for praktisk redigering. Dette laget vil ikke bli inkludert i SWF, men siden det er en guide lag Før vi kommer til praktiske kode Jeg ønsker å få opp veien Action håndterer XML. For å være konkret, slik Actionscript 3 håndterer XML. I Action 2 (og 1), XML var absolutt mulig, og til og med ganske vanlig, men syntaksen er involvert i å få data ut av XML var tungvint. I korte trekk, det involvert mye bruk av "barn" eiendom og var ganske lett å gå seg vill når du gjør din vei gjennom et komplekst dokument. Actionscript 3 fremmer XML til en "første klasse statsborger," som er, en topp-nivå objekt. Sagt på en annen måte, er XML så viktig å AS3 at det er offisielt en innfødt datatype. Ingen importlinjer er pålagt å gjøre det arbeidet, og den gale ting er at du faktisk kan skrive XML rett inn i Actionscript-filer. Prøv dette: åpne opp en ny Flash Actionscript 3-fil, og legge følgende inn i Script panel: Du kan, hvis du vil, gjør det hele produktene XML-filen vi laget tidligere, men poenget jeg prøver å gjøre er at det fungerer Sist men ikke minst, fordi XML er et førsteklasses borger av Actionscript 3, har vi en syntaks for å få data ut av XML gjenstander gjennom noe som kalles E4X (ECMAScript for XML, Actionscript 3 er et ECMAScript-kompatibel språk, og derfor redskaper E4X). E4X en enkel dot-syntaks for traversering XML trestrukturen. Hvis du har brukt XPath å grave i XML, er det ligner på det systemet. Vi får inn i detaljene som vi bygger vårt produkt funksjonen stykke, men her er en smakebit av E4X, ved hjelp av in-Action XML fra to avsnitt siden: I Kort sagt, refererer dette hoved XML objekt ( produkter Du kan lese mer om E4X på Wikipedia, og om ECMAScript også. Hvis du er nysgjerrig, kan du enten fyre opp en AS2 Flash-fil, og sjekk ut XML håndtering, eller du kan faktisk bruke en AS3 porten på AS2 XML-klassen. Se i hjelpe docs under flash.xml.XMLDocument. Jeg vil råde deg til å gjøre dette bare for akademikere skyld og for å tilfredsstille din nysgjerrig appetitt, som jeg personlig ville aldri ønske AS2 XML syntaks på selv min verste fiende La oss komme i gang. Først, vi kommer til å trenge noen variabler som vil bli brukt senere. Vi vil bare lage dem nå, og deres formål vil bli forklart mer fullstendig som vi trenger å bruke dem. I din funksjon Flash-fil (vi er ferdige med den midlertidige vi opprettet i forrige trinn), vi trenger å plassere et skript på den første rammen av handlinger lag. I dette skriptet, vil som inneholder alle våre logikk for stykket, starte med å erklære og plassere verdiene inn i noen få variabler: xml Hotell og lenke Så, vi trenger å laste XML-filen. Vi bruker URLLoader objektet til å gjøre dette. Legg til følgende etter de eksisterende variabeldeklarasjoner: Først oppretter vi en URLLoader. En URLLoader laster bare innholdet i en gitt URL. Dette er forskjellig fra Loader (som vi møtte i AS3 101 tutorial på Visnings Objects), som er utviklet spesielt for lasting SWF og bitmap bildefiler, og vise. Den URLLoader vil laste inn noe. I vårt tilfelle ønsker vi å laste en tekstfil. I den andre linjen, skaper vi en URLRequest objekt som peker til nettadressen til XML-filen vi ønsker å laste. I dette tilfellet er det en relativ bane (og XML-filen ligger i samme katalog som SWF). Hvis du vil, kan du plassere XML andre steder, og justere strengen går inn i URLRequest. Det kan også være en absolutt sti hvis du vil. Vær imidlertid oppmerksom på at sikkerhetsbegrensninger oppstår når du legger i en XML-fil fra et annet domene som SWF ligger. Håndteringen av dette er utenfor omfanget av denne opplæringen, men det er en fordel å være klar over situasjonen, og å vite at du kan søke etter "crossdomain.xml" for hvordan man skal håndtere det. Den tredje linjen forteller URLLoader å starte lasting fra URLRequest. Vi legger til en hendelse lytteren på fjerde linje, slik at vi kan handle på de innlastede data når det har fullastet. Vi kan ikke gjøre noe med XML-filen før da. Også vi bør Som en avsluttende delen av dette trinnet, bør vi sørge for at vi skriver (eller i det minste start skriftlig) den onXmlLoad funksjon som vil kjøre en gang XML belastninger. På dette punktet, bør du være i stand til å kjøre filen og se et spor i utdatapanelet når XML filen lastes (det vil ikke ta lang tid). Eller hvis noe gikk galt, kan du se en feil i Utdata-panelet, sannsynligvis på grunn av en feilplassert XML fil Nå som vi har xml fil lastet, må vi snu teksten data i en xml objekt. Dette gjør du enkelt ved å legge til følgende linje i den onXmlLoad funksjon: Vi bruker den variabelen som vi skapte noen få skritt siden. Det eksisterer utenfor funksjonen slik at den ikke forsvinner i løpet av Flash-programmet. Nå får vi til å bruke den. URLLoader data eiendom er rett og slett innholdet av filen vi lastet. I dette tilfellet er det tekst data, som tilfeldigvis er XML-data, og passerer en XML-formatert String til XML konstruktøren ( ny XML () Hvis du tester nå, bør du se XML-dokument, mer eller mindre, få trykt til utdatapanelet Nå for noen E4X magi. Vi får massevis av erfaring med dette, men akkurat nå trenger vi å få alle fire (eller imidlertid mange) produktelementene ut av XML, slik at vi kan bygge de fire (eller hvor mange) knappene. Bruke E4X uttrykk vil være som "grådig" som de kan, som betyr at de vil ta så mange kamper som er gyldige. Dette fungerer til vår fordel, som vi kan skrive et svært enkelt uttrykk og har det ta alle produktelementer. På dette punktet, har den variable xml helheten i XML-objekt. Som eksempel, med henvisning til xml variable betyr at vi henviser til roten av XML-element, det vil si elementet. Derfra kan vi bruke dot-syntaks uttrykk for å bore ned i datastrukturen. Hvis vi gjør det igjen etter neste linje på slutten av onXmlLoad funksjon: Vi får alle elementer som er direkte barn av rot-elementet. Vi får se senere hvordan vi kan være mer selektiv. Akkurat nå er det viktig å merke seg at en E4X uttrykk faktisk returnerer en XMLList Faktisk kan vi utforske XMLList litt før du går videre. Prøv følgende: Og du bør se det tredje elementet i utdatapanelet (indeksene, som Array indekser og dybder for DisplayObjects, er 0-basert) Du kan også finne ut hvor mange elementer er i listen ved hjelp av lengde () metode: Det er viktig å innse at XMLLists er lignende Vi kan sette disse to biter av informasjon sammen og sløyfe over XMLList (slette de forrige spor): Vi er fortsatt bare å spore, men vi kan nå sløyfe over dataene, mye som vi gjorde tilbake i looping opplæringen. Først nå våre data er ekstern i forhold til ut Flash søknad. Hvor kult er det OK, vi looping. La oss gjøre noe med dataene. Som vi loop, vi vil lage en ny knapp fra biblioteket symbol, plasser den, og legge til visningslisten. Vi vil også gi den et navn (for enkelhets skyld) og tildele en CLICK hendelse lytteren Dette er ikke noe nytt fra det vi har dekket i tidligere AS3 101 tutorials. buttonMode Også kategorisert ut arrangementet håndtering funksjon: Hvis du tester det nå, bør du se fire knapper dukker opp, hver, når den klikkes, vil spore opp navnet sitt. Nå, for de virkelig kule delen. Redigere XML-dokument; enten slette et element (slik at du har tre) eller legge til en ekstra en (slik at du har fem). Når du teste din SWF igjen (bare publisere det i Flash), bør du at antall knapper samsvarer med antall elementer. Innrømme det, det er kult Nå må vi håndtere klikk mer elegant. Det vi skal gjøre er å knytte hvert element id attributt med en FeatureButton eksempel. Vi bruker ordbok ( featureIds Nå, i loop, vi trenger å få id fra XML-element, og deretter lagre den i Dictionary . sammen med FeatureButton Trinnene er brutt ned. I den første (ny) linjen, vi enkelt få en referanse til produktet element som vi nå looping med. Deretter bruker vi E4X å ta tak i id-attributtet ut av at elementet (husk, "@" -symbolet får oss inn i et element attributter). Nå, fordi XML data er alltid en streng, og våre IDer er faktisk heltall, trenger vi å konvertere fra en streng til en int, som er hva parseInt funksjonen gjør Dette siste punktet er viktig å huske.: bare fordi du Den siste linjen gjør forbindelsen mellom en knapp og id ved å bruke knappen som en nøkkel i Dictionary, og tildele id til være verdien Neste, vi trenger å få det id tilbake ut en gang et klikk oppstår.
der markup
av noe slag er spekket med vanlig tekst, og gir teksten struktur og /eller attributter. Dette har effekten av å skape kommentarer om teksten som er forskjellig fra selve teksten. Som vanlig, har Wikipedia en mer grundig og elegant beskrivelse av Markup Languages
selve markup er. Dette er i motsetning til HTML, hvor det er definert som < p > er et avsnitt tag, og < a > er et anker (eller lenke) tag. XML definerer noen forhånds tags. Du kommer til å skrive dine egne koder, og strukturere dem hvordan det passer deg. Dette lar deg lage et XML-dokument som passer din datastruktur må nøyaktig. Dette er hva som er utvidbar om XML.
har forhåndsdefinerte koder. En ble allerede nevnt: XHTML. XHTML er bare XML med ting som < p > og < a > tags definert. En annen XML-basert språk som Flash-utviklere kanskje bryr seg om er MXML, markup syntaks brukt for å bygge Flex applikasjoner. MXML er, igjen, bare XML, selv om den kommer med flere forhåndsdefinerte koder, og prøver å bruke en kode som ikke har en definisjon resulterer i feil. Men den gode tingen er at når du har taket på XML, tar det ikke mye å lære XML-basert språk.
Trinn 2:. En XML Document
< ? xml version = "1.0" encoding = "UTF-8" >
Trinn 3:. Alt om Elements
, kan navnet være ganske mye annet som består av bokstaver, tall, bindestrek og understrek). Koden er stengt med en "større enn" -tegn (avslutningsvinkelen brace). Brikken som helhet åpner
elementet. Det kan være fornøyd etter åpningen tag, men på et tidspunkt elementet må lukke
< a > < b > < c > < /c > < /b > < /a >
< a > < b > < c > < /c > < /b > < /a >
signal eller et selvlukkende
tag. Dette er en kode som inneholder noe innhold. I HTML-land, har vi bildet og bryte koder som eksempler:
< img src = "http://activetuts.s3.amazonaws.com/tuts/044_AS3101XML/Tutorial/some.jpg" /> < p> Syntaksen her er bare en enkelt kode, med en skråstrek som det siste før den avsluttende vinkel spenne. Koden åpner og lukker alt i ett trinn. Derfor kan ingen innhold nestes inne. Den "src =" http://activetuts.s3.amazonaws.com/tuts/044_AS3101XML/Tutorial/bit er egentlig innhold, det er en egenskap. Vi vil komme til dem i et øyeblikk
Trinn 4:.. The Root Element
Dette elementet vil kapsle alle data i dokumentet. Tenk på HTML: det er en enkelt element som brytes opp hele greia. Dette er roten element.
Trinn 5:. A Product Element
< produkt > < /produkt >
< produkter > < produkt > < /produkt > < /produkter >
Trinn 6: Produktdetaljer
≪ produkter > < produkt > < navn > Falling Snow Effect < /navn > <link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link> < bilde > fallende snø-effect.jpg < /bilde > < /produkt > < /produkter >
Trinn 7:. Entities
< produkt id = "42" for = "2" >
Trinn 10:. replikere Noen produkter
< produkter > < produkt > ... ≪ /produkt > < produkt > ... ≪ /produkt > < produkt > ... ≪ /produkt > < produkt > ... ≪ /produkt > < /produkter >
≪ xml version = "1.0" encoding = "UTF-8" > < produkter >? < produkt id = "42" > < navn > Falling Snow Effect < /navn > <link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link> < bilde > images /snow.jpg < /bilde > < beskrivelse > <! [CDATA [< p > < font size = "18" > AS3 /AS2 Fallende snø effekt < /font > < /p > < p > Dette er en redigerbar flash snø effekt. Du kan endre de fallende parametrene i Actionscript panel uten Action kunnskap. ≪ /p > < p > < a href = "event: link" > Se produktdetaljer < /a > < /p >]] > < /beskrivelse > < /produkt > < produkt id = "13" > < navn > Flash Banner Creator < /navn > <link>http://activeden.net/item/flash-banner-creator-and-rotator/49745?id=49745&ref=activetuts</link> < bilde > images /banners.jpg < /bilde > < beskrivelse > <! [CDATA [< p > < font size = "18" > Flash Banner Creator og Rotator < /font > < /p > < p > Dette er et svært avansert verktøy for å lage profesjonelle dynamiske flash bannere, lysbildeserier, annonser og introer. Du trenger ikke å vite Flash eller Actionscript for å bruke Flash Banner Creator og Rotator. Du kan lage en flash banner rett og slett ved å redigere en XML-fil og legge til dine egne eiendeler. Det er mer enn 10 forskjellige effekter som kan brukes til bilder, tekst og swf filer. ≪ /p > < p > < a href = "event: link" > Se produktdetaljer < /a > < /p >]] > < /beskrivelse > < /produkt > < produkt id = "75" > < navn > XML Nedtelling < /navn > <link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link> < bilde > images /countdown.jpg < /bilde > < beskrivelse > <! [CDATA [< p > < font size = "18" > XML Nedtelling < /font > < /p > < p > Et dynamisk, tilpasses nedtelling, med universell tid support: Everybody på internett vil nedtelling til samme øyeblikk. Det er flip-stil animerte: inspirert av klokker på store togstasjoner. Moderne stilig måte å telle ned til en dato opptil 999 dager i fremtiden. ≪ /p > < p > < a href = "event: link" > Se produktdetaljer < /a > < /p >]] > < /beskrivelse > < /produkt > < produkt id = "8423" > < navn > XML Show med Ken Burns Effect < /navn > <link>http://activeden.net/item/xml-slideshow-with-ken-burns-effect/32354?id=32354&ref=activetuts</link> < bilde > images /kenburns.jpg < /bilde > < beskrivelse > <! [CDATA [< p > < font size = "18" > XML Show med Ken Burns Effect < /font > < /p > < p > Hovedtrekk: < /p > < ul > < li > ubegrenset bilder < /li > < li > Meget tilpasses design via XML bare < /li > < li > Du kan tilpasse denne lysbildeserie i det minste aspekter:. overganger, hastigheter, farger, størrelser, etc, alt via en godt strukturert xml fil < /li > < li > Awesome Ken Burns-effekten < /li > < /ul > < p > Dette kan bli den ultimate header, banner, galleri for ditt nettsted. < /p > < p > < a href = "event: link" > Se produktdetaljer < /a > < /p >]] > < /beskrivelse > < /produkt > < /produkter >
Trinn 11: Slå til Flash
. Dette er stylet med en større skriftstørrelse, så det virker litt som en overskrift. Det er plassert slik at en rad med knapper vil være over den, og et bilde vil laste inn under det. Både knapper og bildet vil bli plassert auto.
. Dette er satt til en mindre skriftstørrelse mer egnet for kroppen kopi. Feltet er også satt til linjer og har et større område å imøtekomme litt mer tekst. Det er plassert slik at det vil sitte under bildet.
Trinn 12:. Actionscript 3, XML, og E4X
Var produkter: XML = < produkter > < produkt id = "42" /> < produkter >
. Jeg liker vanligvis ikke bruker dette trikset for mye, men det er spesielt nyttig når du arbeider med dummy data. Det er, når du er bare begynnelsen et prosjekt, og du har ikke den faktiske XML-filer klar, kan du fortsatt få ting som arbeider i Action raskt ved knuste i noen midlertidige XML-data som dette. I relaterte nyheter, når du trenger for å lage en liten test-fil, kopiere XML rett inn i Action kan spare deg fra å måtte gå gjennom prosessen med å laste inn XML-filen når det er ikke tingen testingen.
trace (. Products.product @ id);
), velger nestet produktelement ( Produktet bel
), og til slutt verdien av id egenskap av at element (. id
). Detaljene er litt mer komplisert enn det, men forhåpentligvis som illustrerer hvor jevnt Actionscript 3 kan arbeide med XML.
Trinn 13:. Lage noen variabler
Var xml: XML; Var featureIds: ordbok = new ordbok (); Var link: String; Var loader: Loader = new Loader (); addChild (loader); loader.x = 10; loader.y = 86;
variabler vil få verdier senere i programmet. featuresIds
trenger å være en tom ordbok for nå, som vil bli fylt i senere, så vel. loader
må opprettes og plasseres på scenen, men igjen, vi vil ikke laste inn noe før senere
Trinn 14:. Legge en XML-fil
< p> Vi kan være i stand til å skrive XML direkte i Actionscript, men det er mer fleksibelt å laste det under kjøring fra en ekstern XML-fil. På denne måten kan vi bygge en Flash brikke som er fleksibel nok til å svare på endringer i XML, og deretter utfører oppdateringer blir et spørsmål om å oppdatere XML-filen, og ikke den Flash-fil. Dette er måten det skal fungere; oppdatering XML er lett, oppdatere Flash-filer er mindre.
Var xmlLoader: URLLoader = new URLLoader (); Var url: URLRequest = new URLRequest ("products.xml"); xmlLoader.load (url); xmlLoader.addEventListener (Event. KOMPLETT, onXmlLoad);
sette opp ProgressEvent.PROGRESS og IOErrorEvent.IO_ERROR event handlers (omtalt mer fullstendig i AS3 101 tutorial på Visnings Objects), men for anvendelsen av denne opplæringen vil vi nevne dem, men ikke handle på dem
funksjon onXmlLoad (e: Hendelses ): void {trace ("xml loaded");}
Trinn 15:. Opprette XML
funksjon onXmlLoad (e: Hendelses): void {trace ("xml loaded"); < strong > xml = new XML (xmlLoader.data); < /strong >}
) vil analysere denne strengen til en XML objekt. Så nå har vi et skikkelig XML objekt i xml variabel. Du kan teste det ut med følgende linje på slutten av onXmlLoad funksjon:
spore (xml.toXMLString ())
Trinn 16:. Parsing XML
Var productElements: XMLList = xml.product;
objekt, ikke et XML-objekt. En XMLList objektet er en litt quirky objekt, og kan oppføre seg som en XML-objekt i flere situasjoner. Du kan tenke på det som en Array av XML-elementer. I vårt tilfelle, vil det ha enkelte oppføringene for hver av de fire elementene.
spore (productElements [2]);
.
spore (productElements.length ());
til arrays, men ikke faktisk Arrays. Noe som har en tendens til å reise meg opp ofte er at jeg glemmer at Arrays har en myArray.length
), og XMLLists har en myList.length ()
). Det er en nødvendig distinksjon fordi XMLLists er i stand til behandlingen E4X uttrykk, så skrive myList.length
ville faktisk se etter elementer som finnes i listen.
Var len: int = productElements.length (); for (var i: int = 0; i < len; i ++) {trace ("Element" + i); spor (productElements [i] .toXMLString ());}
Trinn 17: Bygge Knapper
Var len: int = productElements.length (); Var btn. FeatureButton; for (var i: int = 0; i < len; i ++) {btn = new FeatureButton (); btn.x = 10 + i * 50; btn.y = 10; addChild (BTN); btn.name = "btn" + i; btn.buttonMode = true; btn.addEventListener (MouseEvent.CLICK, onButtonClick);}
eiendom kanskje må forklares: som standard en Sprite eller MovieClip med button-lignende oppførsel ikke viser noen spesiell markøren. På nettet, men vi er vant til en finger markøren når rulle over noe klikkbare, så det er hyggelig å slå buttonMode
på, noe som gjør nettopp det: markøren blir til en finger markøren når Sprite er rullet over
funksjon onButtonClick (meg: MouseEvent): void. {trace ("-knappen klikket:" + me.target.name);}
Trinn 18:. Button Klikk
) vi satt opp tidligere.
for (var i: int = 0; i < len; i ++) {btn = new FeatureButton (); btn.x = 10 + i * 30; btn.y = 10; addChild (BTN); btn.name = "btn" + i; btn.addEventListener (MouseEvent.CLICK, onButtonClick); Var productElement: XML = productElements [i]; Var idString. String = productElement @ id; Var id: int = parseInt (idString); featureIds [btn] = id;}
vet det et tall (eller boolsk eller dato, eller hva), betyr ikke at Action gjenkjenner det som sådan. XML er egentlig bare tekstdata, slik at alt som kommer ut av det gjennom en E4X uttrykk vil være en String. Hvis du vil at det skal være noe annet, må du eksplisitt konvertere den.
Trinn 19:. Button klikk, del 2