SWFAddress er et Javascript / ActionScript-bibliotek som gir deg muligheten til å endre nettleserens URL, legge til oppføringer i sin historikkliste og brann av ActionScript-hendelser når nettadressen endres. Det tillater også søkemotorer å finne spesifikt innhold på nettstedet ditt. Dette er all funksjonalitet som ifølge sine skapere mangler i dagens rike webteknologi.
La oss ta en titt…
Bakgrunn
Før vi hopper rett inn i koden, undersøker vi hva SWFAddress er, og hvordan vi trenger å justere arbeidsflyten vår for å bruke den. I hovedsak er SWFAddress et javascript / ActionScript-bibliotek som gir deg muligheten til å endre nettleserens URL, legge til oppføringer i sin historieliste og brann av ActionScript-hendelser når nettleseren endrer nettadressen. SWFAddress vil lytte etter bestemte nettleserhendelser (URL-endringer) og signere sin ActionScript-motpart for å utløse bestemte hendelser. ActionScript-klassen gir oss også en brukervennlig API for å kontrollere ulike nettleserhandlinger (dvs. endring av nettadressen, endring av sidetittelen).
SWFAddress-områder er forskjellige fra noen tradisjonelle nettsteder, fordi navigasjonslogikken må være strengbasert, og den må ha et sentralt veikryss. Det er vanlig at mange flashbaserte nettsteder har en unik funksjon knyttet til hvert navigasjonselement. For eksempel kan den første knappen utløse en funksjonsvisningPage1 () og den andre kan utløse en funksjonsvisningPage2 () etc. På en SWFAddress-side vil hvert navigasjonselement utløse samme funksjon, nemlig den som instruerer SWFAddress for å endre nettadressen.
SWFAddress vil også utløse sin endringshendelse samtidig som du må evaluere den nåværende nettadressen og bestemme hvilken tiltak du skal ta. Når du er komfortabel med denne forskjellen, finner du at SWFAddress skaper liten motstand mot den vanlige arbeidsflyten. Faktisk bruker mange utviklere allerede en lignende navigasjonsarkitektur på deres nettsteder som ikke er SWFAddress.
Denne opplæringen begynner med å bygge en grunnleggende side med 4 navigasjonselementer. Vi vil da introdusere SWFAddress i blandingen for å gi oss litt dypkoblingstøtte. Til slutt for de avanserte brukerne bytter vi ut vår statiske meny / tekst og bruker en ekstern XML-fil for å levere innholdet.
Trinn 1: Sette opp arbeidsområdet
Vår SWFAddress-drevne nettside vil bestå av noen få viktige filer. Vi trenger vår viktigste FLA, SWF den kompilerer, en HTML-side, SWFAddress .as-biblioteker, SWFAddress .js-biblioteker og SWFObject-bibliotekene (javascript-bibliotekene er i swfaddress- og swfobject-mappene).
Trinn 2: HTML-filen
Vår HTML-side er en grunnleggende SWFObject-dynamikk med en linje for SWFAddress. Vi vil ikke gå for mye inn i det siden HTML og js er utenfor omfanget av denne opplæringen. Tilstrekkelig å si, de eneste forskjellene mellom en typisk SWFObject HTML-mal og dette er HTML på linje # 7 (se linjen uthevet i blått).
Trinn 3: Grunnleggende FLA-oppsett
Nå som kildefilene er på plass, begynner vi å lage vår FLA. Opprett et nytt AS3-dokument, sett dets dimensjoner til 600 x 400px, og lag det til prosjektkatalogen som "tutorial.fla". Vi stiller også bakgrunnsfargen til # 999999 slik at den ser mindre kjedelig ut.
Trinn 4: Menyelementer Array
For denne opplæringen skal vi lage en matrise for å holde menyelementene våre. Dette vil gjøre det enklere å inkorporere en XML-basert meny på et senere tidspunkt hvis du vil. Vi starter med å lage et nytt lag på tidslinjen som vi kaller "handlinger". Vi trekker deretter opp handlingspanelet (med det laget valgt) og bruker følgende kode:
var menuArray: Array = new Array ("Hjem", "Om oss", "Tjenester", "Kontakt oss");
Det skal se slik ut:
Trinn 5: Tegne menyholderen
Nå skal vi begynne å lage menyen. Vi lager et nytt lag (kall det "menyen") og begynner med å tegne et enkelt 400 x 50px rektangel med en 2px hjørne radius på det nye laget. Fargen er ikke viktig fordi vi tweak det senere.
Trinn 6: Konvertere menyen til en filmklipp
Nå velger vi menyen og trykker på F8 for å konvertere den til et filmklipp. Vi gir den et biblioteksidentifikator for "meny" og et forekomstnavn på "menuholder".
Trinn 7: Å lage menybakgrunnen
Dobbeltklikk på det nyopprettede menyfilmklippet for å legge inn redigeringsmodus. Vi velger formen på innsiden og konverterer den igjen til en filmklipp (F8). Denne gangen vil vi imidlertid bruke et 9-skjæringsnål til det. Vi gjør dette slik at vi kan ha en bakgrunn for menyen som vi kan skalere rent uten å måle menyen selv. Vi gir det et bibliotek og eksempelnavn på "menubg".
Jeg har også lagt til en subtil blå glød på menyen med et lysfilter med blurx og blury satt til 6, styrke satt til 50% og fargen satt til # 32CCFF.
Trinn 8: Tegne menyelementene
Nå går vi tilbake til hoveddokumentet og begynner å lage de aktuelle menypunktene (dvs. "linkene" som vil fylle ut menyen). Selv om vi tegner disse på hoveddokumentet, kan vi tegne dem hvor som helst, da de blir dynamisk lagt til scenen senere. Vi lager først en tekstfelt og setter den til dynamisk og gir den et forekomstnavn på "txt". Vi stiller skrifttypen til Arial, størrelsen på 22pts og fargen til hvit #ffffff. Kontroller at tekstfeltet ikke kan velges (den første knappen under anti-alias-rullegardinmenyen). Endelig legger vi inn skrifttypen. Du kan bruke hvilken som helst skrift du vil, men du må huske å justere skriftstørrelsen slik at den passer til menyen høydevis.
Trinn 9: Eksportere menyelementer for ActionScript
Vi konverterer nå menyelementene til filmklipp, men vi må ta et ekstra skritt siden vi skal bruke dette filmklippet i ActionScript på nytt. Velg tekstfeltet og trykk F8 for å hente filmklippsdialogen, skriv inn "menuItem" i feltet navn og velg deretter "Export for ActionScript". Når du er ferdig, klikker du OK, og klikker OK igjen på følgende bekreftelsesdialogbok (det kan ikke vises avhengig av innstillingene dine).
Trinn 10: Opprette menyelementene (ActionScript)
Vi bruker følgende kode for å fylle ut menyen med de aktuelle menyelementene:
var xval = 20; for (var jeg: int = 0; i
I utgangspunktet går vi gjennom elementene i vårt utvalg og for hvert element oppretter en ny forekomst av menuItem. Deretter setter vi inn tekstfeltet i menyelementet til "autoSize = left" slik at det ekspanderer for å passe til teksten som er plassert i den. Den neste linjen setter teksten inne i tekstfeltet i henhold til arrayelementet som tilsvarer den nåværende iterasjonen av løkken. xval er en variabel vi bruker som lagrer menypunktet, slik at vi kan plassere dem ved siden av hverandre. Deretter senterer vi menyelementet i menyen og til slutt legger du til menyelementets bredde og polstringsverdien til xval. Deretter legger vi menyelementet til menyholderen. De siste 2 kodelinjene gjør menuholderens bakgrunnsstrekning til å fylle menyholderen (vi legger til 20px for polstring) og senterer menyen på scenen.
Trinn 11: Opprette innholdsområdet
Før vi fortsetter å tilordne handlinger til menyelementene og sette opp SWFAddress, må vi opprette noe innhold som skal vises. For enkelhets skyld bruker vi standard flash-tweening-motoren. Lag et nytt lag som heter innhold. På dette laget lag et rektangel som måler 500 x 250 px og konvertere det til et filmklipp med et forekomstnavn på "innhold".
Trinn 12: Legge til tekstfelt i innholdsområde
Nå som vi har opprettet innholdsområdet, vil vi dobbeltklikke på det for å gå inn i redigeringsmodus og plassere et dynamisk tekstfelt på den. Denne tekstfeltet skal være nesten like stort som «innhold» filmklippet. Vi bruker de samme tekstinnstillingene som menyen (arial 22pt, hvit) med fonter innebygd. Vi gir det et forekomstnavn på txt og endrer oppførselen (under avsnittinnstillinger) til multilinje.
Trinn 13: Opprette innholdet
La oss nå lage noe innhold som vi kan fylle innholdsområdet med når menyelementer er valgt. For enkelhets skyld skal vi bare opprette 4 forskjellige strengvariabler, men på et mer avansert nettsted vil du sannsynligvis erstatte dette med en ekstern datakilde. Legg til følgende 4 variabler i vår ActionScript-kode:
var text1: String = "Dette er teksten til hjemmesiden" var text2: String = "Her er teksten du vil se på Om oss-siden" var text3: String = "Denne siden vil inneholde de ulike tjenestene vi tilbyr "var text4: String =" Dette er de ulike metodene du kan komme i kontakt med oss. Du finner også et kart her "
Du kan plassere disse nær toppen av koden.
Trinn 14: Gjør tekstfeltets endringsfunksjon
Vi lager nå en enkel funksjon som endrer tekstfeltets innhold og animerer overgangen. Lim inn i den følgende koden så vi vil utforske den linje for linje:
De første 2 linjene importerer enkelt mellomklassen og lette funksjonene. Neste linje initierer tweenen, slik at vi lettere kan manipulere den med ContinueTo-funksjonen. Den fjerde linjen oppretter en variabel som inneholder den nåværende strengen, denne variabelen vil bli satt av SWFAddress, og innholdsområdet vil laste denne variabelen inn i tekstfeltet når det er tweening tilbake på plass. TextChange-funksjonen tweens innholdsområdet av til siden og setter en hendelseslytter til å utløse setText-funksjonen når den er ferdig. SetText-funksjonen tweens innholdsområdet tilbake på scenen og setter sin tekstfelt til hva hovedteksten er satt til av SWFAddress.
Trinn 15: Initialisering av SWFAddress
For å initialisere SWFAddress trenger vi ganske enkelt å legge til CHANGE-hendelsen og opprette hendelseshåndtereren. Disse få kodelinjene vil gjøre det;
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) funksjonsadresseVeksle (e: Event) // ting å gjøre når adresse endres
"AddressChange" -funksjonen vil løpe hver gang nettleseren endrer nettadressen (via back / forward-knappene, skriver adressen til adresselinjen eller en annen metode) eller endrer URL-adressen (via funksjonen SWFAddress.setValue).
Trinn 16: Legge til handlinger i menypunktene
Vårt neste skritt er å legge til noen oppførsel på menyknappene vi opprettet tidligere. Vi gjør dette ved å revidere menyskapelsesløkken vi bygde tidligere.
var xval = 20 for (var i: int = 0; i
Den siste linjen før avsluttende brace er den vi må legge til. Det skaper en hendelse på menyelementene som brenner når et menyelement klikkes. Vi må nå legge til tilsvarende hendelseshåndterer.
var xval = 20; for (var jeg: int = 0; i
De tre siste kodelinjene vi la til, utføres hver gang et menyelement klikkes. Den instruerer SWFAddress å utføre sin setValue-funksjon som endrer siden og brenner sin CHANGE-hendelseshåndterer. Parameteren vi overfører til setValue-funksjonen er teksten til menyelementet som brukeren har klikket på.
På dette tidspunktet, hvis vi lastet opp filene til vår webserver og testet HTML-filen, ville vi ha adresseadressen endret når vi klikket på knappene, men filen ville ikke gjøre noe som vi ikke har fortalt SWFAddress hva du skal gjøre når adressen endres.
Trinn 17: SWFAddress-handlinger
Vi har nå menyen opprettet og menyknappene utløser riktig SWFAddress. Den siste delen av ligningen er å fortelle SWFAddress hva du skal gjøre når den utløses. Tidligere i opplæringen (Trinn 15) opprettet vi SWFAddress hendelseslytter og handler. Vi vil se denne koden og legge til følgende:
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) funksjonsadresseVis (e: Event) if (SWFAddress.getValue () == "/ Home") mainText = text1 textChange () hvis (SWFAddress.getValue () == " / Om oss ") mainText = text2 textChange () hvis (SWFAddress.getValue () ==" / Services ") mainText = text3 textChange () hvis (SWFAddress.getValue () ==" / Kontakt oss ") mainText = text4 textChange () SWFAddress.setTitle (SWFAddress.getValue ());
Hovedforskjellen er all koden inne i "addressChange" -funksjonen. Vi opprettet flere betingede utsagn som kontrollerer hva den nåværende siden er, sett "mainText" til riktig tekst og start deretter "textChange" -funksjonen som er ansvarlig for å animere overgangen og sette inn teksten i innholdsområdet. Den siste linjen angir sidens HTML-tittel til gjeldende side. Denne funksjonen kan ryddes opp med et svitsj, men for enkelhets skyld skal vi forlate det som det er.
Trinn 18: Alt gjort
Dine filer skal nå matche dem i kildefilene. Publiser FLA, last opp filene til serveren din, og du vil nå ha en fullt funksjonell side.
Konklusjon
Vi har nå fullført vår enkle SWFAddress-drevne side. Denne filen skal fungere som en egnet base for et hvilket som helst SWFAddress-nettsted og kan enkelt utvides med dynamisk innhold med minimal ekstra kode. Jeg håper du likte å følge med!
Share
Accentsconagua
