Build en enkel nettside mal Bruke SWFAddress
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

SWFAddress er en Javascript /Actionscript-bibliotek som gir deg muligheten til å endre nettleserens URL, legge til oppføringer i sin historie listen og fyre av Action hendelser når URLen endringer. Den gjør det også søkemotorer for å finne konkrete innholdet på din side. Dette er all funksjonalitet som ifølge dens skapere, er mangler i dagens rike webteknologier.

La oss ta en titt ..

< h2> Bakgrunn

Før vi hoppe rett inn i koden, vil vi utforske hva SWFAddress er og hvordan vi må justere vår arbeidsflyt for å bruke den. I hovedsak er SWFAddress en javascript /Actionscript bibliotek som gir deg muligheten til endringen nettleserens URL, legge til oppføringer i sin historie listen og fyre av Action hendelser når nettleseren skifter URL. SWFAddress vil lytte etter bestemte leser hendelser (URL endringer) og signal sin Action motstykke til å utløse visse hendelser. Action klasse gir oss også en enkel å bruke API for å styre ulike nettleserhandlinger (ie. Endre URL, endre sidetittel).

SWFAddress områder skiller seg fra noen tradisjonelle områder fordi navigasjons logikken må være streng basert og det må ha en sentral veikryss. Det er vanlig for mange flash-baserte nettsteder å ha en unik funksjon knyttet til hver navigasjonselementet. For eksempel kan den første knappen utløse en funksjon showPage1 () og den andre kan utløse en funksjon showPage2 () etc. I en SWFAddress side hver navigasjon element vil utløse samme funksjon, nemlig den som instruerer SWFAddress å endre URL-en.

SWFAddress vil også samtidig utløse sin endringshendelse på hvilket punkt du trenger for å vurdere den nåværende URL og bestemme hva som skal skje. Når du blir komfortabel med denne forskjellen du vil finne at SWFAddress skaper lite motstand til din vanlige arbeidsflyten. Faktisk, mange utviklere allerede bruker en lignende navigasjon arkitektur på sine ikke-SWFAddress nettsider.

Denne opplæringen vil begynne med å bygge en enkel side med 4 navigasjon elementer. Vi vil deretter presentere SWFAddress inn i blandingen til å gi oss noen deeplinking støtte. Til slutt, for avanserte brukere, vil vi bytte ut vår statisk meny /tekst og bruke en ekstern XML-fil til å levere innholdet

Trinn 1:. Sette opp arbeidsområdet

Vår SWFAddress drevet Nettstedet vil bestå av noen viktige filer. Vi trenger vår hoved FLA, SWF det kompilerer, en HTML-side, den SWFAddress .as bibliotekene, JS den SWFAddress biblioteker og SWFObject bibliotek (javascript biblioteker er i swfaddress og SWFObject mapper).

Trinn 2: HTML File

Vår HTML-side er et grunnleggende SWFObject dynamisk embed med en linje for SWFAddress. Vi vil ikke gå for i dybden på det siden HTML og js er utenfor omfanget av denne opplæringen. Nok til å si, den eneste forskjellen mellom en typisk SWFObject HTML-mal, og dette er HTML på linje # 7 (se linjen uthevet i blått)

Trinn 3:. Basic FLA Setup

Nå at kildefilene er på plass vil vi begynne å lage vår FLA. Opprett en ny AS3 dokument, setter sine dimensjoner 600 x 400 piksler og deretter lagre den i prosjektkatalogen som "tutorial.fla". Vi vil også sette bakgrunnsfargen til # 999999 så det ser mindre kjedelig

Trinn 4:. Menyelementer Array

For denne opplæringen vi skal lage en matrise for å holde vår meny elementer. Dette vil gjøre det lettere å innlemme et XML-basert meny på et senere tidspunkt hvis du vil. Vi vil starte med å lage et nytt lag på tidslinjen som vi kaller "tiltak". Vi vil deretter trekke opp handlinger panel (med at laget valgt) og bruke følgende kode:
Var menuArray: Array = new Array ("Home", "Om oss", "Tjenester", "Kontakt oss");

Det skal se omtrent slik ut:

Trinn 5: Tegning på Meny Holder

Nå skal vi begynne å lage menyen. Vi vil gjøre et nytt lag (kall det "menyen") og begynner med å tegne en enkel 400 x 50 piksler rektangel med en 2px hjørne radius på det nye laget. Fargen er ikke viktig fordi vi vil justere den senere

Trinn 6:. Konvertering til menyen slik at et filmklipp

Nå skal vi velge meny og trykk på F8 for å konvertere den til et filmklipp. Vi skal gi det et bibliotek identifikator av "menyen" og en forekomst navnet "menuHolder"

Trinn 7:. Gjør Menybakgrunn

Dobbeltklikk på den nyopprettede menyen filmklipp å gå inn i redigeringsmodus. Vi vil velge formen inne og igjen konvertere den til en MovieClip (F8). Denne gangen derimot, vil vi være å bruke en 9 skive skalering rutenett til det. Vi gjør dette slik at vi kan ha en bakgrunn for menyen som vi kan skalere rent uten å måtte skalere selve menyen. Vi skal gi det et bibliotek og instans navnet "menubg".

Jeg har også lagt til en subtil blå glød til menyen med en glød filter med blurx og Blury satt til 6, styrke satt til 50 % og fargen satt til # 32CCFF

Trinn 8:.. Tegning menyelementer

Nå skal vi gå tilbake til hoveddokumentet og begynne å lage selve menyelementene (dvs. " links "som vil befolker menyen). Selv om vi tegner disse på hoveddokumentet kan vi trekke dem hvor som helst så de vil være dynamisk lagt til scenen senere. Vi vil først opprette en tekstfeltet, og sett den til dynamisk og gi den en forekomst navnet "txt". Vi vil sette skriften Arial, størrelsen på 22pts og fargen til hvit #ffffff. Kontroller at tekstfeltet er ikke valgbar (den første knappen under anti-alias nedtrekksmenyen). Til slutt vil vi bygge inn skriften. Du kan bruke en hvilken som helst font du liker, men du må huske å justere skriftstørrelsen slik at den passer menyen høyde klok

Trinn 9:. Eksportere menyelementer for Action

vil nå konvertere menyelementene til filmklipp, men vi må ta et ekstra steg siden vi skal gjenbruke dette filmklippet i vår Actionscript. Velg tekstfeltet og trykk på F8 for å få opp MovieClip dialog, input "menyvalget" i navnefeltet og velg deretter "Export for Action" boksen. Når dette er gjort, klikk OK, og klikk deretter på OK igjen på følgende bekreftelsesdialogen (det vises kanskje ikke, avhengig av innstillingene)

Trinn 10:. Opprette menyelementer (Action)

Vi bruke følgende kode for å fylle meny med aktuelle menyelementene:
Var XVerd = 20; for (var i: int = 0; i < menuArray.length; i ++) {var klippet = new menuItemclip.txt.autoSize = 'left'clip.txt.text = menuArray [i] clip.x = xvalclip.y = ( menuHolder.height /2) - (clip.height /2) XVerd + = clip.width + 30menuHolder.addChild (klipp);} menuHolder.menubg.width = menuHolder.width + 20; menuHolder.x = (stage.stageWidth /2) - (menuHolder.width /2)

I utgangspunktet er vi looping gjennom elementene i vår rekke og for hvert element skape en ny forekomst av menyvalget. Vi deretter sette tekstfeltet inne menyvalget for å "autoSize = venstre" slik at den utvides til å passe teksten som er plassert inne i den. Den neste linje angir tekst inne i tekstfeltet i henhold til den gruppeelementutbyttende som korresponderer med den aktuelle iterasjon av sløyfen. XVerd er en variabel vi bruker som lagrer posisjonen til menyelementet, slik at vi kan plassere dem ved siden av hverandre. Da vi sentrere menypunktet i menyen og til slutt legge menypunktet bredde og padding verdien til XVerd. Neste vi legger menypunktet til menuHolder. De siste 2 linjer med kode gjør menuHolder bakgrunn strekning å fylle menyen holderen (vi legge 20px for padding) og sentrere menyen på scenen

Trinn 11:. Opprette innholdsområdet

Før vi går videre til å tilordne handlinger til menyelementer og sette opp SWFAddress, må vi skape noe innhold å vise. For enkelhets skyld vil vi bruke standard flash tweening motor. Lag et nytt lag som heter innhold. På dette laget skape et rektangel som måler 500 x 250 piksler og konvertere den til et filmklipp med en forekomst navnet "innhold"

Trinn 12:. Legge til tekstfeltet til innhold Område

Nå som vi ' har opprettet innholdsområdet vil vi dobbeltklikk på den for å gå til redigeringsmodus og plassere et dynamisk tekstfeltet på den. Dette tekstfeltet bør være nesten like stor som "innhold" filmklipp. Vi vil bruke de samme tekstinnstillinger som menyen (arial 22pt, hvit) med fonter embeded. Vi skal gi det en forekomst navn txt og endre atferd (under avsnittsinnstillinger) til multi linje

Trinn 13:. Opprette innholdet

Nå la oss lage litt innhold som vi kan fylle innholdsområdet med når menyelementer er valgt. For enkelhets skyld vil vi bare lage 4 forskjellige strengvariabler, men i en mer avansert område vil du sannsynligvis bli å erstatte dette med noen ekstern datakilde. Legg til følgende 4 variabler til vår Actionscript-kode:
Var text1: String = "Dette er teksten for hjemmesiden" var text2: String = "Her er teksten som du ville se på Om oss-siden" var text3 : String = "Denne siden vil funksjonen de ulike tjenestene vi tilbyr" var text4: String = ". Dette er de forskjellige metoder du kan komme i kontakt med oss ​​finner du også et kart her"

Du kan plassere disse i nærheten av toppen av koden

Trinn 14:. Making tekstfeltet er Change Function

Vi skal nå lage en enkel funksjon som endrer tekstfeltet innhold og levendegjør overgangen. Lim inn følgende kode så får vi utforske det linje for linje.
Import fl.transitions.Tween, import fl.transitions.easing *; Var cTween: Tween = new Tween (innhold, "x", Regular. easeOut, 50, 50, 0,1, true); Var mainText: String funksjon textChange () {cTween.continueTo (-800, 0,4), cTween.addEventListener ("motionFinish", setText)} funksjon setText (e: Hendelses) {content.txt.text = mainTextcTween.continueTo (50, 0,4)}

De første 2 linjene ganske enkelt importere tween klasse og lettelser funksjoner. Den neste linjen initialiserer tween så kan vi lettere manipulere den med Continue funksjon. Den fjerde linje skaper en variabel som holder den aktuelle strengen, vil denne variabelen settes av SWFAddress og innholdsområdet vil laste denne variabelen inn i sin tekstfeltet når det er tweening tilbake på plass. Den textChange funksjon tweens innholdsområdet ut til siden og setter en hendelse lytteren å utløse setText funksjon når den er ferdig. Den setText funksjon tweens innholdsområdet tilbake på scenen og setter sin tekstfeltet til hva mainText er satt til av SWFAddress

Trinn 15:. Initialiserer SWFAddress

Å initial SWFAddress vi bare trenger å legge sin ENDRE arrangement og skape den hendelsen behandleren. Disse få linjer med kode vil gjøre det;
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) -funksjonen addressChange (e: Hendelses) {//ting å gjøre når adresseendringer}

"addressChange" -funksjonen vil kjøre hver gang nettleseren endrer URL (via tilbake /frem knapper, re-skriver i adressefeltet URL eller noen annen metode), eller du endrer nettadressen (via SWFAddress.setValue funksjon)

Step. 16: Legge Handlinger til menyelementer

Vårt neste skritt er å legge til noen atferd til menyknappene vi opprettet tidligere. Vi skal gjøre dette ved å gjennomgå menyen skapelsen sløyfe vi bygget tidligere
Var XVerd = 20 for (var i: int = 0; i < menuArray.length; i ++). {Var klippet = new menuItemclip.txt.autoSize = 'left'clip.txt.text = menuArray [i] clip.x = xvalclip.y = (menuHolder.height /2) - (clip.height /2) XVerd + = clip.width + 30menuHolder.addChild (klipp); clip.addEventListener ("klikk", menuClicked)}

Den siste linjen før den avsluttende spenne er den vi må legge til. Det skaper en hendelse på menyelementene som utløses når et menyelement klikkes. Vi skal nå må legge tilsvarende hendelsesbehandling
Var XVerd = 20.; for (var i: int = 0; i < menuArray.length; i ++) {var klippet = new menuItemclip.txt.autoSize = 'left'clip.txt.text = menuArray [i] clip.x = xvalclip.y = ( menuHolder.height /2) - (clip.height /2) XVerd + = clip.width + 30menuHolder.addChild (klipp), clip.addEventListener ("klikk", menuClicked)} funksjon menuClicked (e: Hendelses) {SWFAddress.setValue (e.currentTarget.txt.text)}

De siste tre linjer med kode vi lagt utføres hver gang et menyelement klikkes. Det instruerer SWFAddress å utføre sin SetValue funksjon som endrer side og fyrer sin ENDRE hendelsesbehandling. Parameteren vi kjører til SetValue funksjonen er teksten i menypunktet som brukeren har klikket på.

På dette punktet, hvis vi lastet opp filene til vår webserver og testet HTML-fil, ville vi har URL-adresse i endring som vi klikket på knappene men filen vil ikke gjøre noe som vi ikke har fortalt SWFAddress hva de skal gjøre når adresseendringer

Trinn 17:. SWFAddress Handlinger

Vi har nå menyen satt opp og menyknappene er skikkelig utløser 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) vi opprettet SWFAddress arrangementet lytteren og handler. Vi vil se at blokk med kode og legge til følgende:
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) -funksjonen addressChange (e: Hendelses) {if (SWFAddress.getValue () == "/Home") {mainText = text1textChange ()} if (SWFAddress.getValue () == "/Om oss") {mainText = text2textChange ()} if (SWFAddress.getValue () == "/tjenester") {mainText = text3textChange ()} if ( SWFAddress.getValue () == "/Kontakt oss") {mainText = text4textChange ()} SWFAddress.setTitle (SWFAddress.getValue ());}

Den største forskjellen er all koden inne i "addressChange" -funksjonen. Vi skapte flere betinget utsagn som sjekker hva den gjeldende siden er, setter du "mainText" til den aktuelle teksten og deretter starte "textChange" -funksjonen som er ansvarlig for å animere overgangen og sette teksten i innholdsområdet. Den siste linjen setter sidens HTML-tittelen til den aktuelle siden. Denne funksjonen kan bli ryddet opp med en bryter sak, men for enkelhets skyld vil vi la det som er

Trinn 18:. All Ferdig

Filene skal nå matche de i kildefilene. Publiser FLA, laste opp filer til serveren din, og du vil nå ha en fullt funksjonell side.

Konklusjon

Vi har nå avsluttet vår enkle SWFAddress drevet siden. Denne filen bør tjene som et egnet utgangspunkt for enhver SWFAddress stedet og kan enkelt utvides med dynamisk innhold med minimal ekstra kode. Jeg håper du likte å følge med! Anmeldelser