SWFAddress este o bibliotecă Javascript / ActionScript care vă oferă puterea de a schimba adresa URL a browserului, de a adăuga intrări în lista de istoric și de a declanșa evenimentele ActionScript atunci când adresa URL se modifică. De asemenea, permite motoarelor de căutare să găsească conținut specific pe site-ul dvs. Aceasta este o funcționalitate care, potrivit creatorilor săi, lipsește în tehnologiile web bogate de astăzi.
Hai să aruncăm o privire…
fundal
Înainte să mergem direct în cod, vom examina ce este SWFAdress și cum trebuie să ajustăm fluxul de lucru pentru ao folosi. În esență, SWFAddress este o bibliotecă javascript / ActionScript care vă oferă posibilitatea de a schimba adresa URL a browserului, a adăuga intrări în lista de istoric și de a declanșa evenimentele ActionScript când browserul își schimbă adresa URL. SWFAddress va asculta evenimente specifice pentru browser (schimbări de adrese URL) și va semna contul său de acțiune ActionScript pentru a declanșa anumite evenimente. Clasa ActionScript ne oferă, de asemenea, un ușor de utilizat API pentru controlul diferitelor acțiuni ale browserului (de ex. Modificarea adresei URL, modificarea titlului paginii).
Site-urile SWFAdirecte diferă de unele site-uri tradiționale, deoarece logica de navigare trebuie să fie bazată pe șir și trebuie să aibă o intersecție centrală. Este comun pentru multe site-uri bazate pe flash să aibă o funcție unică atașată la fiecare element de navigație. De exemplu, primul buton poate declansa o functie showPage1 () si a doua ar putea declansa o functie showPage2 () etc. Pe o pagina SWFAdress fiecare element de navigare va declansa aceeasi functie, si anume aceea care instruieste SWFAdress pentru a schimba adresa URL.
De asemenea, SWFAddress va declanșa evenimentul său de schimbare, moment în care va trebui să evaluați adresa URL curentă și să decideți ce acțiune să faceți. Odată ce vă simțiți confortabil cu această diferență, veți descoperi că SWFAdress nu creează o rezistență mică la fluxul de lucru obișnuit. De fapt, mulți dezvoltatori folosesc deja o arhitectură de navigare similară pe site-urile lor non-SWFAdress.
Acest tutorial va începe prin construirea unei pagini de bază cu 4 elemente de navigare. Vom introduce apoi SWFAdress în mix pentru a ne oferi un sprijin de deplinking. În cele din urmă, pentru utilizatorii avansați, vom schimba meniul / textul static și vom folosi un fișier XML extern pentru a furniza conținutul.
Pasul 1: Configurarea spațiului de lucru
Site-ul nostru SWFAddress powered va fi alcătuit din câteva fișiere cheie. Vom avea nevoie de FLA-ul nostru principal, de SWF-ul pe care îl compilează, de o pagină HTML, de bibliotecile SWFAdress, de bibliotecile SWFAdress și de bibliotecile SWFObject (bibliotecile javascript se află în directoarele swfaddress și swfobject).
Pasul 2: Fișierul HTML
Pagina noastră HTML este o încorporare dinamică SWFObject de bază cu o linie pentru SWFAdress. Nu vom trece prea mult în ea, deoarece HTML și js sunt dincolo de scopul acestui tutorial. Este suficient să spunem, singurele diferențe dintre un șablon tipic SWFObject HTML și acesta este codul HTML pe linia # 7 (vedeți linia evidențiată în albastru).
Pasul 3: Configurarea FLA de bază
Acum, că fișierele sursă sunt în loc, vom începe să facem FLA. Creați un nou document AS3, setați dimensiunile acestuia la 600 x 400px, apoi salvați-l în directorul de proiect ca "tutorial.fla". De asemenea, vom seta culoarea de fundal la # 999999, astfel încât să pară mai puțin plictisitoare.
Pasul 4: Array de elemente din meniu
Pentru acest tutorial vom face o matrice pentru a ne păstra elementele de meniu. Acest lucru va face mai ușor să încorporați un meniu bazat pe XML la o dată ulterioară, dacă doriți. Vom începe prin a face un nou strat pe linia de timp pe care o vom numi "acțiuni". Apoi vom scoate panoul de acțiuni (cu stratul selectat) și vom folosi următorul cod:
var menuArray: Array = Array nou ("Acasă", "Despre noi", "Servicii", "Contactați-ne");
Ar trebui să arate ceva de genul:
Pasul 5: Desenarea suportului de meniu
Acum vom începe să facem meniul. Vom face un strat nou (apelați-l "meniu") și începeți prin a desena un dreptunghi simplu de 400 x 50px cu o rază de colț de 2px pe noul strat. Culoarea nu este importantă pentru că o vom modifica mai târziu.
Pasul 6: Conversia meniului la un clip video
Acum vom selecta meniul și apăsați F8 pentru ao converti într-un clip video. Îi vom da un identificator de bibliotecă al "meniului" și un nume de instanță al "menuHolder".
Pasul 7: Realizarea fundalului meniului
Faceți dublu clic pe noul videoclip din meniu pentru a intra în modul de editare. Vom selecta forma în interiorul și din nou convertiți-o într-o movieclip (F8). Totuși, de această dată, vom aplica o grilă de scalare cu 9 feluri. Facem acest lucru astfel încât să putem avea un fundal pentru meniul pe care îl putem măsura cu ușurință fără a fi nevoie să scarăm meniul însuși. Îi vom da o bibliotecă și un nume de meniu "menubg".
Am adăugat, de asemenea, o strălucire albastră subtilă în meniu folosind un filtru strălucitor cu blurx și blur setat la 6, puterea setată la 50% și culoarea setată la # 32CCFF.
Pasul 8: Desenarea elementelor din meniu
Acum vom reveni la documentul principal și vom începe să creăm elementele de meniu reale (adică "link-urile" care vor popula meniul). Deși le desenăm pe documentul principal, le putem atrage oriunde, pe măsură ce vor fi adăugate dinamic pe scenă mai târziu. Mai întâi vom crea un câmp de text și îl vom seta în dinamică și vom da un nume de instanță "txt". Vom seta fontul la Arial, dimensiunea la 22pts și culoarea albă la #ffffff. Asigurați-vă că câmpul de text nu este selectabil (primul buton din meniul derulant anti-alias). În cele din urmă, vom încorpora fontul. Puteți utiliza orice font doriți, dar va trebui să vă amintiți să ajustați dimensiunea fontului astfel încât să se potrivească înălțimii meniului.
Pasul 9: Exportarea elementelor de meniu pentru ActionScript
Acum vom converti elementele de meniu în clipuri video, dar va trebui să facem un pas suplimentar de când vom re-folosi acest clip video în ActionScript. Selectați câmpul de text și apăsați F8 pentru a afișa dialogul movieclip, introduceți "menuItem" în câmpul de nume, apoi bifați caseta de selectare "Export pentru ActionScript". După ce faceți clic pe OK, faceți clic din nou pe OK în următoarea fereastră de confirmare (este posibil să nu apară în funcție de setările dvs.).
Pasul 10: Crearea elementelor de meniu (ActionScript)
Vom folosi următorul cod pentru a popula meniul cu elementele de meniu corespunzătoare:
var xval = 20; pentru (var i: int = 0; i
Practic, prin looping prin elementele matricei noastre și pentru fiecare element creând o nouă instanță a menuItem. Apoi setăm câmpul de text din elementul de meniu în "autoSize = left", astfel încât să se extindă pentru a se potrivi cu textul plasat în interiorul acestuia. Următoarea linie stabilește textul în interiorul câmpului de text în funcție de elementul matricei care corespunde cu iterația curentă a buclă. xval este o variabilă pe care o folosim, care stochează poziția elementului de meniu, astfel încât să putem plasa una lângă alta. Apoi centralizăm elementul de meniu din meniu și adăugăm în final lățimea elementului de meniu și valoarea de umplutură în xval. Apoi adăugăm elementul de meniu în meniulHolder. Ultimele 2 linii de cod fac extensia fundalului menuHolder pentru a umple suportul de meniu (adăugăm 20px pentru umplutură) și centralizăm meniul pe scenă.
Pasul 11: Crearea zonei de conținut
Înainte de a trece la atribuirea de acțiuni la elementele de meniu și la configurarea adresei SWFA, va trebui să creați un anumit conținut pentru afișare. Din motive de simplitate, vom folosi motorul implicit de modificare a blitului. Creați un nou strat denumit conținut. Pe acest strat creați un dreptunghi de 500 x 250 pixeli și îl convertiți într-un clip video cu un nume de instanță de "conținut".
Pasul 12: Adăugarea câmpului text în zona de conținut
Acum că am creat zona de conținut, vom face dublu clic pe ea pentru a intra în modul de editare și vom plasa un câmp de text dinamic. Acest câmp de text ar trebui să fie aproape la fel de mare ca clipul de film "conținut". Vom folosi aceleași setări de text ca și meniul (arial 22pt, alb) cu fonturi încorporate. Îi vom da un nume de instanță al txt-ului și vom schimba comportamentul (în cadrul setărilor paragrafelor) pe linia multiplă.
Pasul 13: Crearea conținutului
Acum, să creăm un anumit conținut pe care să-l putem umple cu zona de conținut când se selectează elementele de meniu. Din motive de simplitate, vom crea doar 4 variabile de șir diferite, dar într-un site mai avansat ar fi probabil să înlocuiți acest lucru cu o sursă externă de date. Adăugați următoarele 4 variabile la codul nostru ActionScript:
var text1: String = "Acesta este textul pentru pagina de pornire" var text2: String = "Aici este textul pe care l-ați vedea pe pagina Despre noi" var text3: String = "Această pagină va cuprinde diferitele servicii pe care le furnizăm "var text4: String =" Acestea sunt diferitele metode pe care le puteți lua în contact cu noi, veți găsi și aici o hartă "
Puteți să le amplasați în partea de sus a codului.
Pasul 14: Efectuarea funcției de schimbare a câmpului de text
Vom crea acum o funcție simplă care schimbă conținutul textului și animă tranziția. Inserați în următorul cod, apoi îl vom explora linia după linie:
import fl.transitions.Tween; import fl.transitions.easing. *; var cTween: Tween = nou Tween (conținut, "x", Regular.easeOut, 50, 50, .1, adevărat); var mainText: Funcția String textChange () cTween.continueTo (-800, .4); cTween.addEventListener ("motionFinish", setText) funcția setText (e: Event) content.txt.text = mainText cTween.continueTo (50, .4)
Primele 2 linii importa pur și simplu funcțiile de clasă tween și relaxare. Următoarea linie inițializează tween-ul, astfel încât să putem manipula mai ușor cu funcția continueTo. Cea de-a patra linie creează o variabilă care deține șirul curent, această variabilă va fi setată de SWFAddress iar zona de conținut va încărca această variabilă în câmpul său de text ori de câte ori se reîntoarce înapoi în poziție. Funcția textChange tweens zona de conținut în afara și stabilește un ascultător de evenimente pentru a declanșa funcția setText când este terminat. Funcția setText tweens zona de conținut înapoi pe scenă și își creează câmpul text la orice text mainText a fost setat de către SWFAddress.
Pasul 15: Inițializarea adresei SWFA
Pentru a inițializa SWFAddress trebuie pur și simplu să adăugăm evenimentul CHANGE și să creăm un handler al evenimentului. Aceste cateva linii de cod il vor face;
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) adresa funcțieiChange (e: Eveniment) // lucruri de făcut când se schimbă adresa
Funcția "addressChange" se va afișa de fiecare dată când browserul modifică URL-ul (prin butoanele din spate / înainte, redenumind adresa URL a barei de adrese sau orice altă metodă) sau modificați adresa URL (prin funcția SWFAdress.setValue).
Pasul 16: Adăugarea de acțiuni la elementele de meniu
Următorul pas este să adăugați un comportament la butoanele de meniu create mai devreme. Vom face acest lucru prin revizuirea buclei de creare a meniului pe care am construit-o mai devreme.
var xval = 20 pentru (var i: int = 0; i
Ultima linie înaintea brațului de închidere este cea pe care trebuie să o adăugăm. Creează un eveniment pe elementele de meniu care se declanșează atunci când se face clic pe un element de meniu. Acum va trebui să adăugăm un handler de evenimente corespunzător.
var xval = 20; pentru (var i: int = 0; i
Ultimele trei linii de cod pe care le-am adăugat sunt executate de fiecare dată când se face clic pe un element de meniu. Acesta instruiește SWFAddress să execute funcția setValue, care modifică pagina și declanșează modulul de procesare CHANGE. Parametrul pe care îl transmitem funcției setValue este textul elementului de meniu pe care a făcut clic utilizatorul.
În acest moment, dacă am încărcat fișierele pe serverul nostru web și am testat fișierul HTML, am fi modificat adresa URL a adresei când am făcut clic pe butoane, dar fișierul nu ar face nimic, deoarece nu am spus la SWFAdrept ce să facă atunci când adresa se schimbă.
Pasul 17: Acțiunile SWFAdress
Acum avem meniul setat și butoanele din meniu declanșează în mod corespunzător SWFAdress. Ultima parte a ecuației este aceea de a spune SWFAdress ce să facă atunci când este declanșată. Mai devreme în tutorial (pasul 15) am creat ascultătorul și manipulatorul evenimentului SWFAdress. Vom revizui acest bloc de cod și vom adăuga următoarele:
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) Adresa funcțieiChange (e: Eveniment) if (SWFAddress.getValue () == "/ Home") mainText = text1 textChange () if (SWFAddress.getValue / Despre noi ") mainText = text2 textChange () dacă (SWFAddress.getValue () ==" / Servicii ") mainText = text3 textChange () dacă (SWFAddress.getValue () ==" / Contactați-ne ") mainText = text4 textChange () SWFAddress.setTitle (SWFAddress.getValue ());
Diferența cheie este tot codul din interiorul funcției "addressChange". Am creat câteva afirmații condiționale care verifică ce este pagina curentă, setați "mainText" la textul corespunzător, apoi lansați funcția "textChange" care este responsabilă pentru animarea tranziției și setarea textului zonei de conținut. Ultima linie stabilește titlul HTML al paginii în pagina curentă. Această funcție ar putea fi curățată cu o carcasă de comutare, dar din simplitate o vom lăsa ca atare.
Pasul 18: Totul a fost terminat
Fișierele dvs. ar trebui să se potrivească acum cu cele din fișierele sursă. Publicați FLA, încărcați fișierele pe serverul dvs. și veți avea acum o pagină complet funcțională.
Concluzie
Am finalizat acum pagina noastră simplă SWFAdress. Acest fișier ar trebui să servească drept bază adecvată pentru orice site SWFAdress și poate fi ușor extins cu conținut dinamic cu un minim de cod suplimentar. Sper că ți-a plăcut să urmezi!
Share
Accentsconagua
