SWFAddress è una libreria Javascript / ActionScript che ti dà la possibilità di modificare l'URL del browser, aggiungere voci al suo elenco cronologia e attivare gli eventi di ActionScript quando l'URL cambia. Consente inoltre ai motori di ricerca di trovare contenuti specifici nel tuo sito. Questa è tutta la funzionalità che, secondo i suoi creatori, manca nelle odierne tecnologie web di oggi.
Diamo un'occhiata…
sfondo
Prima di passare direttamente al codice, esploreremo cos'è SWFAddress e come dobbiamo adattare il nostro flusso di lavoro per usarlo. Essenzialmente, SWFAddress è una libreria javascript / ActionScript che ti dà la possibilità di cambiare l'URL del browser, aggiungere voci al suo elenco cronologico e attivare gli eventi di ActionScript quando il browser cambia il suo URL. SWFAddress ascolterà per specifici eventi del browser (modifiche dell'URL) e segnalerà la controparte di ActionScript per attivare determinati eventi. La classe ActionScript ci fornisce anche un'API facile da usare per il controllo di varie azioni del browser (ad esempio, modifica dell'URL, modifica del titolo della pagina).
I siti SWFAddress differiscono da alcuni siti tradizionali perché la logica di navigazione deve essere basata su stringhe e deve avere una giunzione centrale. È comune per molti siti basati su flash avere una funzione unica associata a ogni elemento di navigazione. Ad esempio, il primo pulsante può attivare una funzione showPage1 () e il secondo può attivare una funzione showPage2 (), ecc. In una pagina SWFAddress ogni elemento di navigazione attiva la stessa funzione, ovvero quella che ordina a SWFAddress di cambiare l'URL.
Inoltre, SWFAddress attiverà simultaneamente il suo evento change, a quel punto sarà necessario valutare l'URL corrente e decidere quale azione intraprendere. Una volta che ti senti a tuo agio con questa differenza, scoprirai che SWFAddress crea poca resistenza al normale flusso di lavoro. In effetti, molti sviluppatori usano già un'architettura di navigazione simile sui loro siti non SWFAddress.
Questo tutorial inizierà con la costruzione di una pagina di base con 4 elementi di navigazione. Quindi introdurremo SWFAddress nel mix per darci un supporto per il deeplinking. Infine, per gli utenti avanzati, sostituiremo il nostro menu / testo statico e useremo un file XML esterno per fornire il contenuto.
Passaggio 1: impostazione dell'area di lavoro
Il nostro sito web alimentato da SWFAddress sarà composto da alcuni file chiave. Avremo bisogno del nostro FLA principale, del file SWF che compila, una pagina HTML, le librerie di SWFAddress, le librerie .js SWFAddress e le librerie SWFObject (le librerie javascript sono nelle cartelle swfaddress e swfobject).
Passaggio 2: il file HTML
La nostra pagina HTML è una dinamica di base di SWFObject incorporata con una riga per SWFAddress. Non approfondiremo l'argomento perché HTML e js non rientrano nell'ambito di questo tutorial. Basti dire, le uniche differenze tra un tipico template HTML SWFObject e questo è l'HTML on line # 7 (vedi la linea evidenziata in blu).
Passaggio 3: Impostazione FLA di base
Ora che i file sorgente sono pronti, inizieremo a creare il nostro FLA. Crea un nuovo documento AS3, imposta le sue dimensioni a 600 x 400 px, quindi salvalo nella directory del progetto come "tutorial.fla". Imposteremo anche il colore di sfondo su # 999999, quindi sembra meno noioso.
Passaggio 4: Array di elementi del menu
Per questo tutorial creeremo un array per contenere le nostre voci di menu. Ciò renderà più semplice incorporare un menu basato su XML in un secondo momento, se lo si desidera. Inizieremo creando un nuovo livello sulla timeline che chiameremo "azioni". Quindi apriremo il pannello delle azioni (con quel livello selezionato) e useremo il seguente codice:
var menuArray: Array = new Array ("Home", "Chi siamo", "Servizi", "Contattaci");
Dovrebbe assomigliare a qualcosa di simile a questo:
Passaggio 5: Disegna il supporto del menu
Ora inizieremo a creare il menu. Creeremo un nuovo livello (chiamiamolo "menu") e inizieremo disegnando un semplice rettangolo di 400 x 50 px con un raggio d'angolo di 2px sul nuovo livello. Il colore non è importante perché lo modificheremo più tardi.
Passaggio 6: conversione del menu in un filmato
Ora selezioneremo il menu e premiamo F8 per convertirlo in un filmato. Gli forniremo un identificatore di libreria di "menu" e un nome di istanza di "menuHolder".
Passaggio 7: creazione dello sfondo del menu
Fare doppio clic sul clip filmato del menu appena creato per accedere alla modalità di modifica. Selezioneremo la forma all'interno e di nuovo la convertiremo in un Movie Clip (F8). Questa volta, tuttavia, applicheremo una griglia di ridimensionamento a 9 sezioni. Lo facciamo in modo da avere uno sfondo per il menu che possiamo ridimensionare in modo pulito senza dover ridimensionare il menu stesso. Daremo una libreria e il nome di istanza di "menubg".
Ho anche aggiunto un leggero bagliore blu al menu usando un filtro glow con blurx e blury impostati su 6, forza impostata su 50% e il colore impostato su # 32CCFF.
Passaggio 8: Disegnare le voci di menu
Ora torneremo al documento principale e inizieremo a creare le voci di menu attuali (ad esempio i "link" che popoleranno il menu). Sebbene li stiamo disegnando sul documento principale, potremmo disegnarli ovunque poiché verranno aggiunti dinamicamente allo stage in un secondo momento. Per prima cosa creeremo un campo di testo e lo imposteremo su dinamico e gli daremo un nome di istanza di "txt". Imposteremo il carattere su Arial, la dimensione a 22 punti e il colore su bianco #ffffff. Assicurati che il campo di testo non sia selezionabile (il primo pulsante sotto il menu a discesa anti-alias). Infine, inseriremo il carattere. Puoi usare qualsiasi font che ti piace, ma dovrai ricordarti di regolare le dimensioni del font in modo che si adatti al livello di altezza del menu.
Passaggio 9: esportazione di voci di menu per ActionScript
Ora convertiremo le voci di menu in clip filmato, ma avremo bisogno di fare un ulteriore passo da quando riutilizzeremo questo clip filmato nel nostro ActionScript. Seleziona il campo di testo e premi F8 per visualizzare la finestra di dialogo Movie Clip, inserisci "menuItem" nel campo del nome, quindi seleziona la casella di controllo "Esporta per ActionScript". Una volta fatto, fai clic su OK, quindi fai di nuovo clic su OK nella finestra di conferma seguente (potrebbe non apparire a seconda delle impostazioni).
Passaggio 10: creazione degli elementi del menu (ActionScript)
Useremo il seguente codice per popolare il menu con le voci di menu appropriate:
var xval = 20; per (var i: int = 0; i
Fondamentalmente stiamo collegando gli elementi del nostro array e per ogni elemento che crea una nuova istanza di menuItem. Quindi impostiamo il campo di testo all'interno della voce di menu su "autoSize = left" in modo che si espanda per adattarsi al testo inserito al suo interno. La riga successiva imposta il testo all'interno del campo di testo in base all'elemento di matrice che corrisponde all'iterazione corrente del ciclo. xval è una variabile che usiamo che memorizza la posizione della voce del menu in modo che possiamo metterli uno di fianco all'altro. Quindi centriamo la voce di menu all'interno del menu e infine aggiungiamo la larghezza del menu Item e il valore di padding a xval. Quindi aggiungiamo la voce di menu al menuHolder. Le ultime 2 righe di codice fanno sì che lo sfondo del menuHolder si estenda per riempire il titolare del menu (aggiungiamo 20px per il riempimento) e centra il menu sul palco.
Passaggio 11: creazione dell'area di contenuto
Prima di passare all'assegnazione di azioni alle voci di menu e all'impostazione di SWFAddress, è necessario creare alcuni contenuti da visualizzare. Per semplicità utilizzeremo il motore tweening flash predefinito. Crea un nuovo livello chiamato contenuto. Su questo livello crea un rettangolo che misura 500 x 250 px e convertilo in un clip filmato con un nome di istanza di "contenuto".
Passaggio 12: aggiunta del campo di testo all'area del contenuto
Ora che abbiamo creato l'area del contenuto, faremo doppio clic per entrare nella modalità di modifica e posizionare un campo di testo dinamico su di esso. Questo campo di testo dovrebbe essere grande quasi quanto il filmato "contenuto". Useremo le stesse impostazioni di testo del menu (arial 22pt, bianco) con i caratteri incorporati. Daremo un nome istanza di txt e cambierà il comportamento (sotto le impostazioni del paragrafo) in multi linea.
Passaggio 13: creazione del contenuto
Ora creiamo dei contenuti in cui possiamo popolare l'area del contenuto quando sono selezionate le voci di menu. Per semplicità creeremo solo 4 variabili stringa diverse, ma in un sito più avanzato probabilmente lo sostituirai con una fonte di dati esterna. Aggiungi le seguenti 4 variabili al nostro codice ActionScript:
var text1: String = "Questo è il testo della pagina iniziale" var text2: String = "Ecco il testo che vedresti nella pagina Chi siamo" var text3: String = "Questa pagina presenterà i vari servizi che forniamo "var text4: String =" Questi sono i vari metodi con cui puoi entrare in contatto con noi. Troverete anche una mappa qui "
È possibile posizionarli vicino alla parte superiore del codice.
Passaggio 14: creazione della funzione di modifica del campo di testo
Creeremo ora una semplice funzione che modifica il contenuto del campo di testo e anima la transizione. Incolla il seguente codice, quindi lo esamineremo riga per riga:
importare fl.transitions.Tween; importare fl.transitions.easing. *; var cTween: Tween = new Tween (content, "x", Regular.easeOut, 50, 50, .1, true); var mainText: String function textChange () cTween.continueTo (-800, .4); cTween.addEventListener ("motionFinish", setText) function setText (e: Event) content.txt.text = mainText cTween.continueTo (50, .4)
Le prime 2 righe importano semplicemente la classe tween e le funzioni di andamento. La riga successiva inizializza l'interpolazione in modo da poterla manipolare più facilmente con la funzione continueTo. La quarta riga crea una variabile che contiene la stringa corrente, questa variabile verrà impostata da SWFAddress e l'area del contenuto caricherà questa variabile nel suo campo di testo ogni volta che il tweening torna in posizione. La funzione textChange riattacca l'area del contenuto lateralmente e imposta un listener di eventi per attivare la funzione setText al termine. La funzione setText riattacca l'area del contenuto sul palco e imposta il suo campo di testo su qualunque mainText è stato impostato da SWFAddress.
Passaggio 15: inizializzazione di SWFAddress
Per inizializzare SWFAddress è sufficiente aggiungere il suo evento CHANGE e creare il gestore di quell'evento. Queste poche righe di codice lo faranno;
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) function addressChange (e: Event) // roba da fare quando cambia indirizzo
La funzione "addressChange" verrà eseguita ogni volta che il browser cambia l'URL (tramite i pulsanti Indietro / Avanti, riscrivendo l'URL della barra degli indirizzi o qualsiasi altro metodo) o modificando l'URL (tramite la funzione SWFAddress.setValue).
Passaggio 16: aggiunta di azioni alle voci di menu
Il nostro prossimo passo è aggiungere un po 'di comportamento ai pulsanti del menu che abbiamo creato in precedenza. Lo faremo rivisitando il ciclo di creazione del menu che abbiamo creato in precedenza.
var xval = 20 for (var i: int = 0; i
L'ultima riga prima della parentesi di chiusura è quella che dobbiamo aggiungere. Crea un evento sugli elementi del menu che si attiva quando si fa clic su una voce di menu. Ora dovremo aggiungere il gestore di eventi corrispondente.
var xval = 20; per (var i: int = 0; i
Le ultime tre righe di codice che abbiamo aggiunto vengono eseguite ogni volta che si fa clic su una voce di menu. Indica a SWFAddress di eseguire la sua funzione setValue che cambia la pagina e attiva il suo gestore di eventi CHANGE. Il parametro che stiamo passando alla funzione setValue è il testo della voce di menu su cui l'utente ha fatto clic.
A questo punto, se caricassimo i file sul nostro server web e testassimo il file HTML, avremmo cambiato l'URL dell'indirizzo quando avremmo fatto clic sui pulsanti, ma il file non avrebbe fatto nulla perché non abbiamo detto a SWFAddress cosa fare quando l'indirizzo cambia.
Passaggio 17: Azioni SWFAddress
Ora abbiamo il menu impostato e i pulsanti del menu stanno attivando correttamente SWFAddress. L'ultima parte dell'equazione è dire a SWFAddress cosa fare quando viene attivato. In precedenza nel tutorial (Step 15) abbiamo creato il listener e il gestore di eventi SWFAddress. Rivedremo quel blocco di codice e aggiungeremo quanto segue:
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) function addressChange (e: Event) if (SWFAddress.getValue () == "/ Home") mainText = text1 textChange () if (SWFAddress.getValue () == " / About Us ") mainText = text2 textChange () if (SWFAddress.getValue () ==" / Services ") mainText = text3 textChange () if (SWFAddress.getValue () ==" / Contattaci ") mainText = text4 textChange () SWFAddress.setTitle (SWFAddress.getValue ());
La differenza chiave è tutto il codice all'interno della funzione "addressChange". Abbiamo creato diverse istruzioni condizionali per verificare quale sia la pagina corrente, impostare "mainText" sul testo appropriato quindi avviare la funzione "textChange" che è responsabile dell'animazione della transizione e dell'impostazione del testo dell'area del contenuto. L'ultima riga imposta il titolo HTML della pagina sulla pagina corrente. Questa funzione può essere ripulita con un interruttore, ma per ragioni di semplicità lo lasceremo così com'è.
Step 18: Tutto fatto
I tuoi file dovrebbero ora corrispondere a quelli nei file di origine. Pubblica il FLA, carica i file sul tuo server e ora avrai una pagina completamente funzionante.
Conclusione
Abbiamo completato la nostra semplice pagina di alimentazione SWFAddress. Questo file dovrebbe servire come base adatta per qualsiasi sito SWFAddress e può essere facilmente esteso con contenuti dinamici con codice aggiuntivo minimo. Spero ti sia piaciuto seguirlo!
Share
Accentsconagua
