Italiano:Come Iniziare
From Gaia Framework Wiki
Come cominciare
Contents |
Download ed Installazione
Come prima cosa scaricate l'ultimo MXP di Gaia Framework ed installatelo. Una volta che Gaia è stato installato, avviate Flash e nel menu superiore selezionate Windows > Altri Pannelli > Gaia Framework. Ricordatevi anche di cancellare i file ASO.
Terminato? Allora Cominciamo!
Creare un Progetto con Gaia
Il primo passo per creare un nuovo progetto con Gaia è scegliere quale versione di Actionscript verrà utilizzata. Selezionate Create AS3 oppure Create AS2. Questo vi porterà poi al pannello di progetto.
Pannello di progetto
La prima cosa che dovrete fare è dare un nome al vostro progetto. Potrete modificarlo in qualsiasi momento dunque potete lasciare la selezione di default per ora.
Cartella di progetto
Successivamente, selezionate una cartella nella quale creare il vostro progetto. Potete utilizzare una cartella creata precedentemente oppure utilizzare la finestra di dialogo che si aprirà al click.
Proprietà
Scelto il nome e selezionata la cartella è tempo di settare le proprietà di base. Potete impostare dimensioni, allinemanento, framerate e colore dello stage. Queste possono essere variate anche successivamente. Gaia applicherà le modifiche a tutti file flash del progetto.
Percorsi cartelle
L'ultimo passo è opzionale ed è quello di modifcare i percorsi per le cartelle. Di default Gaia utilizza lo standard industriale:
* lib - Per i file .fla * bin - Per i file .swf , .html, etc. * src - Per i file .as (classi)
Un altro set-up diffuso è:
* src - Per i file .fla * src/classes - Per i file .as * deploy - Per i file .swf, .html, etc.
Potreste preferire altri valori, come "flash" per i vostri file Flash, oppure mettere nella stessa cartella anche le classi "flash/classes". Alcuni preferiscono "www" come percorso di pubblicazione. Gaia è abbastanza flessibile per permettervi di utilizzare il vostro sistema preferito per i nomi dei file.
Potete anche personalizzare la posizione del file site.xml. Per ora lasciamo questo campo non compilato.
Selezionate Crea un Nuovo Progetto e Gaia creerà il vostro progetto in pochi secondi e vi porterà automaticamente nella sezione di Generazione. Ci ritorneremo fra poco. Per ora diamo un'occhiata ai file generati da Gaia.
File del progetto
Come potete vedere Gaia ha creato tutte le cartelle settate nei percorsi sul pannello.
- La cartella lib contiene main.fla, preload.fla.
- La cartella bin è dove troveremo tutti i file pubblicati
- La cartella src coniene tutte le classi del nostro framework
- La cartella templates contiene i file fla di template e le classi
- Il file project.gaia è un file xml di configurazione che contiene tutte le informazioni sul vostro progetto.
Aprite la cartella bin.
Al momento contiene un file index.html, un file preload.swf, un file site.xml, una cartella chiamata js che contiene SWFObject e SWFAddress.
Se aprite il file index.html trovere che l'swf è già incorporato utilizzando SWFObject, e che tutte le dimensioni e gli allineamenti sono inclusi.
Diamo un'occhiata al file site.xml
Site XML
Gaia utilizza un file XML denominato site.xml per definire la struttura del sito
Aprite il file site.xml con il vostro editor xml preferito. Il file site.xml standard dovrebbe apparire così:
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
Rami
Gaia utilizza i rami (come in un albero) come metafora di com'è strutturato il sito. I rami funzionano come cartelle ed indirizzi web con slash che separano ogni id di pagina.
L'xml precedente è per un sito con un solo ramo: "index/nav/home".
Un ramo può consistere in nodi di pagine, ciascuno dei quali può avere un qualsiasi numero di nodo pagina dipendente. Ogni nodo pagina rappresenta un swf che verrà caricato come parte del ramo.
Gaia carica gli interi rami dallpa pagina indice fino alla pagina finale di ogni singolo ramo (la pagina terminale). Nell'esempio precedente, non potrete caricare il ramo "index/nav" poichè la pagina "nav" ha almeno un figlio, in questo caso una pagina con l'id "home". Se cercherete di caricare "index/nav" Gaia automaticamente caricherà "index/nav/home" puoi riscrivere questa modalità utilizzando l'attributo landing nel nodo pagina.
Informazioni dettagliate sui nodi di site.xml e sui loro attributi possono essere trovate nella XML del Sito sezione della documentazione.
XML Struttura ad albero
Prima di personalizzare il site.xml, diamo un'occhiata alla sua struttura e alla relazione con il metodo in cui Gaia carica i contenuti. Gaia carica i file in ordine partendo dal ramo superiore fino al fondo, impilandoli uno sull'altro (i discentendi sono al di sopra del filmato padre). Potete modificare questo comportamento utilizzando l'attributo depth come descritto di seguito.
Nodo del sito
Il nodo del sito nel site.xml è chiamato <site>. Il nodo <site> non ha alcun attributo richiesto, ed ha come attributo opzionale gli attributi menu e title.
Pagina Indice
Il primo discendente del nodo <site> è un nodo <page> con id="index". Una delle poche convenzioni stabilite in Gaia è proprio quella di chiamare "index" la pagina iniziale.
La pagina "index" è speciale per due motivi: può essere impostata affinchè si carichi da se ed effettui una transizione prima che altre pagine siano caricate, ed inoltre carica tutte le latre pagine (come impostazione predefinita).
Pagine
Nel template site.xml, il primo discendente della pagina "index" è un nodo pagina con id "nav". La pagina "nav" è stata settata affinchè possa essere utilizzata come navigazione globale: sarà disponibile in tutte le altre pagine settando l'attributo "depth" su "top" e, più importante, in questa configurazione sarà sempre presente in quanto unico discendente della pagina "index" (ed è antecendente a tutti gli altri rami dell albero).
La successiva pagina figlio è l'ultima pagina in questo albero d'esempio e, in questo caso, è stata chiamata "home". Questa pagina ha l'attributo title impostato su "Home". Questo apparirà come titolo sulla barra degli indirizzi del browser all'interno del blocco %PAGE% indicato. Questa è anche conosciuta come "pagina terminale" essendo l'ultima pagina figlio dell'albero.
Solo le pagine terminali di un albero (oppure le pagine con attributo site landing="true") avranno il loro titolo indicato sulla barra indirizzi, dovrete così indicare solo i titoli delle pagine terminali per affinchè sostituiscano il blocco %PAGE%.
Il preloader mostrerà i titoli di ogni pagina durante la fase di caricamento, dunque se voleste utilizzare i titoli per questo scopo è possibile. Questo argomento è illustrato nella sezione Italiano:Precaricamento della documentazione.
Aggiungere pagine all'albero XML del sito
Un sito con un'unico ramo non è proprio molto, allora aggiungiamo qualche pagina in più!
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="people" src="people.swf">
<page id="friends" title="Friends" src="friends.swf" menu="true"/>
<page id="family" title="Family" src="family.swf" menu="true">
<page id="tree" title="The Family Tree" src="familytree.swf"/>
</page>
</page>
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
Ora abiamo un albero con più rami! Che sono: Now we've got a whopping three branches! They are
- "index/nav/people/friends"
- "index/nav/people/family/tree"
- "index/nav/home"
Notate che solo l'ultima pagina figlio in ogni ramo ha il titolo e che c'è un attributo "menu" sul nodo <site> ed in alcune pagine.
Se volete utilizzare il menu contestuale attivato dal tasto destro del mouse per navigare attraverso alle sezioni del sito, aggiungete l'attributo "menu" al nodo <site> e settatelo a "true".
Se volete che una particolare pagina venga mostrata nel menu contestuale settate l'attributo menu="true" sul nodo pagina e date a quel nodo un titolo.
Nota: Le pagine senza titolo non verranno mostrate nel menu contestuale.
Inoltre, come potete vedere, il nodo pagina con id "family" ha l'attributo relativo al menu contestuale attivo ma non è la pagina finale di quel ramo. Gaia mostrerà dunque "Family" nel menu contestuale, ma vi farà navigare al ramo "index/nav/people/family/tree".
Perfetto! Abbiamo una struttura sufficiente per generare il nostro sito di test dunque facciamolo. Copincollate il xml sopra indicato all'interno del file site.xml e salvatelo.
Generazione
Ok, ora è il momento per la parte divertente. La generazione!
Class Package
Torniamo a Flash nel pannello di Gaia Flash Framework. La linguetta di navigazione per la generazione è già selezionata, e sulla parte superiore c'è il campo Pacchetto con il termine "pages" già indicato.
Se non siete familiari con i Pacchetti non preoccupatevi, è facile. La regola base da seguire è quella di prendere il nome di dominio del cliente e di capovolgerlo aggiungendo poi il nome del progetto.
Per esempio, se il nome di dominio del vostro cliente è company.com ed il progetto è chiamato website, i vostri Pacchetti saranno:
com.company.webiste
Per i Progetti creati con Gaia vi raccomandiamo di aggiugnere "pages" alla fine dei vostri Pacchetti. Così saranno:
com.company.website.pages
Per ora lasciamo i Pacchetti con la selezione di default "pages".
Generazione del progetto
Ora tutto ciò che dovete fare è fare click sul pulsante di Scaffold e Gaia si prenderà cura del resto!
Gaia genererà tutti i file flash per il sito basandosi sui nomi dei file .swf indicati sul site.xml. Setterà gli indirizzi per le cartelle di pubblicazione (bin), aggiungerà ciascuna delle pagine al Pannello di Pubblicazione, creerà una classe per ogni pagina settandola come classe di pagina. Nella versione AS2 creera i file exclude.xml per ridurre drasticamente le dimensioni degli swf pubblicati.
Quando sarà ultimata la fase di generazione la linguetta di Pubblicazione diventerà disponibile e Gaia pubblicherà l'intero sito lanciando il file main.fla.
Utilizzando il menu contestuale attivato con il tasto destro del mouse potrete navigare attraverso alle sezione del sito e verificare se le transizioni tra una sezione e l'altra stiano funzionando come progettato.
Potete ora aprire le cartelle lib e bin e notare tutte i file Flash e gli swf generati, oppure guardare all'interno delle cartelle src dove troverete le classi generate e nominate come da id di pagina.
Congratulazioni, avete appena creato in pochi minuti il vostro primo sito con Gaia Flash Framework!
