|
indice
Il component FontManager è stato pensato per organizzare e gestire l'accesso alle lelibrerie condivise contenenti font in maniera ssolutamente innovativa.
Attraverso l'utilizzo di questo component diventa possibile non includere più set di caratteri all'interno dei filmati, ma caricare font diverse utilizzando il comando loadMovie per poi utilizzarlie agevolmente nel filmato in cui sono state caricate e in tutti i clip che lo compongono.
Le librerie esterne che vengono utilizzate si presentano come coppie di file .swf composte da una libreria ed un contenitore. I nomi da utilizzare per questi files sono strettamente legati, infatti il nome del file libreria è basato sul nome del contenitore (fileContenitore_lib.swf), ad esempio se il nome del contenitore è , allora la libreria si chiamerà.
Nel file libreria deve essere presente un clip filmato abilitato per la condivisione in run time (export for runtime sharing ), al quale deve essere assegnato un preciso URL e al cui interno deve essere inserito un campo di testo dinamico con un nome istanza e un set di caratteri embed.
Per maggiori informazioni potete consultare il paragrafo Come crerare le librerie.
Una volta impostate in questo modo le librerie possono essere caricate e registrate per essere utilizzate attraverso i metodi esposti dal component Font Manager.
E' opportuno tenere presente che l'utilizzo di librerie così organizzate non è l'unica strada possibile, ma in questo il component agisce come "connector" tra la libreria condivisa e tutti i files da cui è composto il progetto files esterni inclusi.
L'accesso alle fonts esterne può essere realizzato in diversi modi:
- Il filmato prinipale può usare la lbereria condivisa da un file caricato esternamente
- Filmati caricati esternamente possono usare i font contenuti nelle librerie condivise in altri files esterni
- Il filmato principale può contenere le librerie condivise e può utilizzare i set di caratteri in esse contenute in tutti i file caricati esternamente
Come impostazione di default durante l'inizializzazione viene creato un oggetto fonts_mng che viene nascosto attraverso l' ASSetPropFlags. Nel caso in cui vogliate esplorare i contenuti dell'oggetto è sufficiente creare un riferimento ad esso memorizzando il contenuto in una variabile:
_root.show_me = font_mng
e visulaizzare tutte le variabili quando si testa il file swf.
L'utilizzo del component Font Manager offre queste nuove possibilità:
- utilizzare la stessa liberia per l'intero progetto riducendo al minimo la quantità di dati caricati dall'esterno.
Una volta caricati i files che compongono la libreria vengono richiamati dalla cache senza che venga eseguito un nuovo download dal server .
- caricare i font solo quando realmente serve .
Durante il parsing dell'HTML è possibile specificare quali siano i caratteri necessari e caricarli .
- facilitare la localizzazione di un'applicazione.
Senza questo component è necessario cambiare manualmente le proprietà dei campi di testo impostando i nuovi fonts da incorporare nel filmato, utilizzando invece Font Manager si possono creare invece le librerie necessarie e utilizzare il carattere appropriato che verrà visualizzato in tutti i clip filmato che appaiono sullo stage.
L'architettura necessaria per la localizzazione viene quindi semplificata notevolmente ed è sufficiente creare cartelle differenti che contengano i dati e i font necessari per ogni lingua del sito localizzando "on the fly" il progetto semplicemente puntando alla directory appropriata.
- semplifcare la sostituzione del carattere .
E' sufficiente cambiare il font nella libreria affinchè vengano modificati tutti i contenuti del sito .
- separare il motore(kernel), i dati e le librerie .
La separazione dei contenuti dalle impostazioni di formattazione è possibile anche all'interno di progetti sviluppati interamente in Flash .
E' possibile creare una libreria di caratteri utilizzando l'estenzione Font Library Creator Extension sviluppata da Carlos Rovira.
Nota: il component Font Manager è stato creato ed ottimizzato per il Flash Player 6, per questo motivo è preferibile che esempi e tutorial siano pubblicati mantenendo questa impostazione.
E' comunque possibile utilizzare questo component con il Flash Player 7(Utilizzo del component con il Player 7).
Step 1: Creazione della libreria ed inclusione dei font
- Create un nuovo fla e salvatelo con un nome che vi permetta facilmente di ricondurlo ad una determinata area all'interno di un progetto e che vi dia informazioni relative al font che contiene e alle sue caratteristiche:
ad esempio: ,
dove con indichiamo che questo font viene utilizzato per testi generici mentre con che lo stile del font contenuto nella libreria è corsivo. E' opportuno lavorare in questa maniera perchè può capitare di voler creare e gestire lo stesso font, anche se con caratteristiche differenti, all'interno di un progetto differenziando ad esempio la libreria contenente la versione "plain" dello stesso font utilizzando come nome del file body_p_lib.fla.
Suggeriamo di utilizzare questa naming convention perchè l'uso del nome del font come nome del file potrebbe generare confusione fra gli sviluppatori coinvolti in un eventuale processo di localizzazione o costringervi a rinominare i files qualora decidiate di cambiare tipo di carattere per mantenere il progetto ordinato e ben organizzato.
- Ora create un nuovo clip filmato ed assegnategli un nome fortemente identificativo (è consigliato basarsi sul nome della libreria come ad esempio ) e, utilizzando il tasto destro sul nuovo elemento presente nella library del fla, accedete alle opzioni di linkage attivando l'esportazione per la condivisione in run time e impostando come URL il percorso del file swf che verrà generato al momento della pubblicazione del .fla.
- All'interno del clip filmato create un campo di testo dinamico;
- Insertie del testo all'interno del campo dinamico che permetta di evincere facilmente l'area per cui verrà utilizzato il carattere, gli attributi del font, ecc. (ad esempio;
- Impostate come font del campo di testo dinamico il carattere che desiderate esportare ed includetelo utilizzando il tasto Character che appare sul pannello proprietà una volta selezionato il campo di testo;
- Name the text filed instance (necessary), for example: ;
It is possible but is not recommended to place other text fields in this movieclip even though at this moment you sure that these two fonts will be used always together. It is recommended to place only one movieclip with only one textfield inside it containing only one embed font in one library file. Otherwise you'll receive an unneeded risk of loading extra data and using the libraries with troubles;
- Inside the movieclip create new layer above the layer containing the text field and place the script there:
if (font_mng.registerTextFormat("body_i", this.body_i_txt)) {
this._parent.removeMovieClip();
}
- Save the FLA file with the same name as and compile it.
Step 2: Definire il clip filmato contenitore
- Create un nuovo .fla;
- Salvatelo nella stessa cartella in cui è contenuto il file precedente e assegnategli lo stesso nome escludendo il suffisso _lib, ad esempio:
- Se utilizzate Flash MX chiudete utilizzate l'opzione "Open as a Library" il .fla conentente il campo di testo;
- Trascinate il clip filmato creato nel file libreria sullo stage e salvate il .fla;
- Pubblicate.
I files necessari per utilizzare il component Font Manager sono pronti.
Step 3: Caricamento e test delle librerie condivise
- Create new FLA file and save it in the same folder, for example, with name;
- Create un nuovo .fla e salvatelo nella stessa cartella in cui state lavorando con il nome che preferite;
- Inserite il codice necessario per inizializzazione del component Font Manager nel rpimo fotogramma del nuovo filmato;
Ora potete caricare il carattere che desiderate e questo verrà applicato a tutti i campi di testo presenti sullo stage.
Usate ad esempio questo script
this.createEmptyMovieClip("temp_mc", 0).loadMovie("body_i.swf");
this.createTextField("test_txt", 1, 0, 0, 200, 200);
this.test_txt.text = new Array(30).join("Buogiorno a tutti! ");
font_mng.addListener(_root.test_txt);
this.test_txt.onRegister = function(success, name, mng) {
if (!success) {
return trace("registerError : "+name);
}
trace("nome:\n\t"+name+"\font:\n\t"+mng[name].font);
this.setTextFormat(mng[name]);
this.wordWrap = this.embedFonts=true;
};
- Provate il filamto ed esaminate il risultato ottenuto.
Step 4: Test e utilizzo all'interno di un sito web
Definite in maniera accurata dove posizionare le vostre librerie condivise. Quando utilizzate il component Font Manager in produzione la scelta migliore è quella di utilizzare percorsi assoluti o relativi rispetto alla root del sito.
Nota: se volete testare la versione demo di questo component potete farlo utilizzazno un WebSpeed Simulator nel quale impostate come sito da testare la cartella in cui è contenuto tutto il progetto.
All'interno delle cartelle di pubblicazione create una cartella Libs in cui definirete la directory SharedFonts che conterrà poi le librerie utilizzate ().
- Aprite il file body_i.fla
- Aprite la libreria e impostate il nuovo percorso (URL) nelle Linkage Properties in questo modo:
- Compilate il file; riceverete il sguente messaggio di errore:
Error opening URL "file:///Libs/SharedFonts/body_i_lib.swf"
ignoratelo e andate avanti ;
- Copiate i files body_i_lib.swf e body_i.swf nella cartella SharedFonts senza modificare il file libreria (_lib) precedentemente creato;
- Aprite ora il .fla di esempio che avete creato precedentemente e sostituite il comando
.loadMovie("body_i.swf")
con quello contenente il nuovo percorso
.loadMovie("/Libs/SharedFonts/body_i.swf")
- Pubblicate il file (Ctrl+F12) per ottenere una pagina HTML.
- Copiate i files in qualsiasi punto del sito .
- Accedete via web alla pagina e controllate che, una volta caricato il carattere, come i testi presenti vengano aggiornati.
Step 5: Utilizzo del component con il Flash Player 7
Per utilizzare il component Font Manager con il Flash Plyer 7 operate in questa maniera:
- Create il file per la versione 6 del Player contenente il codice necessario per l'inizializzazione del component;
- posizionate il file all'internod del sito e caricatelo quando è necessario oppure inserite il codice di inizializzazione direttamente all'interno del clip filmato condiviso
L'unico inconveniente derivante dall'utilizzo del Flash Player 7 è che il file deve essere caricato esternamente ed è quindi necessario attendere i tempi di caricamento necessari ma, viste le dimensioni ridotte (circa 1 kb), i tempi di attesa risultano quasi impercettibili per l'utente finale.
Durante lo sviluppo di questo component ho fatto parecchie prove e vari esperimenti fino ad arrivare alla release definitiva. Nel periodo di sviluppo i metodi del component sono scesi da otto ad uno, così come gli eventi che da quattro ipotizzati inizialmente ne è rimasto uno solo e le prprietà che sono state totalmente eliminate. Le release intermedie del compontn sono state più di cinquanta e quindi è per questo che, dopo tanti tentativi e tanti esperimenti, sono riuscito a stilare un elenco di raccomandazioni da seguire attentamente per l'utilizzo pratico di questo componente.
E' buona norma non includere il codice di inizializzazione del component Font Manager all'interno del progetto ma creare un file separato da caricare all'interno del progetto stesso.
Ancora meglio è creare un clip filmato condiviso con il codice di inizializzazione del component e inserirlo all'interno dei vostri progetti quando necessario in modo tale da dover cambiare poche righe di codice quando definite un progetto per un dominio diverso senza avere problemi di cache.
Non utilizzate mai all'interno delle vostre librerie nomi uguali a quello delle librerie condivise che contengono il component Font Manager o, se volete implementare una soluzione ancora più avanzata, create un file xml con la completa descrizione della vostra libreria. Ad esempio:
<fontlibrary version="1.0" author="Ivan Dembicki" >
<style name="body" font="Artemius TT" lang="rus" >
<plain id="body_p" url="/fontLibrary/rus/body_p.swf" />
<bold id="body_b" url="/fontLibrary/rus/body_b.swf" />
<italic id="body_i" url="/fontLibrary/rus/body_i.swf" />
<italicbold id="body_bi" url="/fontLibrary/rus/body_bi.swf" />
</style>
<style name="header" font="ArtemiusBlack TT" lang="rus" >
<plain id="header_p" url="/fontLibrary/rus/header_p.swf" />
<bold id="header_b" url="/fontLibrary/rus/header_b.swf" />
<italic id="header_i" url="/fontLibrary/rus/header_i.swf" />
<italicbold id="header_bi" url="/fontLibrary/rus/header_bi.swf" />
</style>
</fontlibrary>
Prestate molta attenzione alle corrispondenze che ci sono fra gli ID e gli stili. Utilizzando l'attributo ID in questo modo è molto più semplice recuperare l'URL dal quale caricare la libreria contenente il clip contenitore, suddividere accuratamente le librerie per le versioni in lingue differenti dei vostri progetti (localizzazione) e trasferire i vostri progetti sul web.
Ovviamente il file xml potete scriverlo come volete, questo è solo un esempio.
Utilizzate sempre percorsi relativi quando lavorate in locale e percorsi assoluti prima della pubblicazione in rete.
Non create mai voi istanze del component anche se è possibile farlo con questa semplice riga di codice:
my_font_mng = new font_mng.constructor()
ritengo sia necessario essere a conoscienza di questa possibilità, ma utilizzatela solamente come ultimo spoaggia o per eseguire delle operazioni di debug.
azioni
disponibilità
utilizzo
font_mng.registerTextFormat( nomeIstanza, campoDiTesto )
parametri
nomeIstanza - stringa, imposta il nome dell'oggetto TextFormat
campoDiTesto - puntatore al campo di testo contenuto nel clip filmato condiviso.
valori restituiti
Booleano. Restituisce false, se il campo di testo non contiene caratteri incorporati (embed) o se non viene rilevato il nome istanza dell'oggetto TextField specificato, in tutti gli altri casi restituisce true.
descrizione
Metodo. Crea un oggetto TextFormat all'interno del component Font Manager. E' possibile rimuovere i clip filmato condivisi alla fine del processo.
L'oggetto TextFormat all'interno del component Font Manager può essere creato basandosi sull'esempio di qualsiasi campo di testo contenuto in un clip filmato condiviso.
Immediatamente prima della fine della procedura di inizializzazione l'istanza del component scatena l'evento onRegister con il parametro di inizializzazione.
esempio
if (font_mng.registerTextFormat("body_i", this.body_i_txt)) {
this._parent.removeMovieClip();
}
font_mng.registerTextFormat("body_i", this.body_i_txt)
font_mng.registerTextFormat("body_i", this.any_mc.shared_mc.body_i_txt)
disponibilità
utilizzo
listenerObject.onRegister = function (success, name, instance_mng, textField ) {
}
parametri
success - Booleano, returns false, it there's no TextFormat object name was passed when calling registerTextFormat or if there's no embeded font within sample text field. Otherwise returns true.
name - string, the name of the created within FontManager TextFormat object.
instance_mng - pointer to FontManager instance which called the resistration;
textField - pointer to the format sample textfield.
valori restituiti
Nessuno
descrizione
Event. Fired directly before exiting from the procedure of registration the TextFormat object in the FontManager.
Since FontManager is a broadcaster, he also has all methods and properties of the broadcaster.
esempio
_root.createTextField("test_txt", 1, 0, 0, 200, 200);
_root.test_txt.text = new Array(30).join("Hello world! ");
font_mng.addListener(_root.test_txt);
_root.test_txt.onRegister = function(success, name, mng) {
if (!success) {
return trace("registerError : "+name);
}
trace("name:\n\t"+name+"\nfont:\n\t"+mng[name].font);
this.setTextFormat(mng[name], this);
this.wordWrap = this.embedFonts=true;
};
|
