Come condividere le fonts tra più SWF con Flash CS3

[Flep]

Ciao a tutti,
Questo articolo vuole essere un approfondimento al precedente articolo che abbiamo visto: come inserire fonts in un swf
mi è arrivata una e-mail di un utente ( Loris ) che mi chiedeva se potevo introdurre come lavorare con Flash CS3 e le fonts.
Più specificatamente, mi viene chiesto come poter condivedere delle fonts che sono in un altro SWF.
Per fare ciò, Flash CS3 mette a disposizione 2 tecniche:
*** 1. Teniamo le fonts che ci occorrono in un SWF esterno, diciamo pure che quel dato SWF sarà esclusivamente un ' magazzino ' di fonts, e lo carichiamo nell' SWF principale.
*** 2. Come il punto 1 solo che utilizziamo la tecnica ' export for runtime sharing ' e qindi non carichiamo un SWF esterno contenente le nostre fonts. In questo caso però, bisogna condividere le librerie e quindi il peso della font andrebbe comunque a gravare sul FLA principale. Personalmente sono dell' idea che il primo metodo sia il più valido in quanto:
- posso caricare un SWF esterno che contiene solo delle fonts, questo permette al mio SWF principale di non aumentare di peso ( dato che appunto il peso delle fonts è nell' SWF che caricherò )
- caricando l' SWF esterno contenente le fonts posso implementare un preloader che avvisa l' utente dei tempi di caricamento con una bella scritta: ' Stiamo caricando le grafiche necessarie... '

Seguitemi...


Per prima cosa mi creo il FLA in cui inserirò tutte le fonts che voglio utilizzare per tutta l' applicazione.
Un FLA che salvo con nome ' fonts.fla ' .
Al suo interno devo creare in libreria le fonts che ho deciso di tuilizzare, in questo modo:
vado nel pannello libreria ed in alto a destra trovo un bottone:

Immagini 1 e 2

adesso si apre una finestra che ci permette di scegliere una font e assegnarli un nome ( chiaramente vi consiglio di tenere lo stesso nome dalla font scelta per comodità ):

Immagine 5

Supponiamo che voglio inserire 3 fonts: Monaco, American Typewriter e Bookman Old Style.
Ripeto il procedimento per ognuna delle fonts che voglio inserire nell' SWF, tenendo presente che se voglio utilizzare un bold font, dovrò spuntare l' opzione bold nella finestra come si vede nell' immagine 3.

Adesso, per poter esportare le fonts insieme all' SWF al momento della pubblicazione, devo assegnare un linkage ( identificatore ) ad ognuna di loro.
Quindi seleziono una font dalla libreria, click destro e attivo l' opzione ' export for Actionscript ', assegnando un nome alla classe che Flash andrà a creare per me:

Immagine 4

Adesso vado sulla timeline e selezionando il primo ed unico keyframe, apro il pannello azioni e scrivo:

import flash.text.Font;
Font.registerFont(Monaco);
Font.registerFont(AmericanTypewriter);
Font.registerFont(BookmanOldStyle);

In questo momento stiamo asegnando alla classe Font le nostre fonts utilizzando il metodo registerFont e come parametro gli passiamo il nome della classe che abbiamo assegnato alla font come da immagine 4.

Ora creo il FLA principale della mia applicazione che salvo con nome ' main.fla '.
Creo la Document Class, un file AS che salvo cone nome ' Main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.Font;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.net.URLRequest;
	import flash.events.Event;
	
	public class Main extends MovieClip
	{
		private var loader:Loader;
		
		private var fonts_array:Array;
		
		public function Main()
		{
			loadSWF();
		}
		
		private function loadSWF():void
		{
			var request:URLRequest=new URLRequest('fonts.swf');
			loader=new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completato);
			loader.load(request);
		}
		
		private function completato(evt:Event):void
		{
   			fonts_array=Font.enumerateFonts(false);
			fonts_array.sort();
			trace(fonts_array);
			
			createFields();
		}
		
		private function createFields():void
		{
			var monaco_txt:TextField=getTextField(2);
			addChild(monaco_txt);
			monaco_txt.text='questo testo ha la font Monaco';
			monaco_txt.width=monaco_txt.textWidth+10;
			
			var typewriter_txt:TextField=getTextField(0);
			addChild(typewriter_txt);
			typewriter_txt.text='questo testo ha la font American Typewriter';
			typewriter_txt.width=typewriter_txt.textWidth+10;
			typewriter_txt.y=monaco_txt.y+40;
			
			var bookman_txt:TextField=getTextField(1);
			addChild(bookman_txt);
			bookman_txt.text='questo testo ha la font Bookman Old Style';
			bookman_txt.width=bookman_txt.textWidth+10;
			bookman_txt.y=typewriter_txt.y+40;
		}
		
		private function getTextField(n:int):TextField
		{
			var field:TextField=new TextField();
			field.selectable=false;
			field.embedFonts=true;
			field.defaultTextFormat=getFormat(n);
			return field;
		}
		
		private function getFormat(n:int):TextFormat
		{
			var format:TextFormat=new TextFormat();
			var font:Font=fonts_array[n];
			format.font=font.fontName;
			format.color=0xFF6600;
			format.size=20;
			return format;
		}
	}
}

Risultato:

Analizziamo il codice

Proprietà
una istanza di Loader che mi servirà per caricare fonts.swf
private var loader:Loader;
un Array in vui inserirò tutte le fonts presenti in fonts.swf ( una volta caricato )
private var fonts_array:Array;

Metodi
loadSWF();
in questo metodo mi preparo a caricare l' SWF esterno ( fonts.swf )
faccio richiesta di url a Flash passandogli il nome di fonts.swf
var request:URLRequest=new URLRequest('fonts.swf');
istanzio il Loader
loader=new Loader();
aggiungo un listner in ascolto che quando l' intero SWF sarà caricato chiamerà il metodo completato()
loader.contentLoaderInfo.addEventListener(Event.CO MPLETE,completato);
carico l' SWF
loader.load(request);

completato();
assegno al mio Array il valore di tutte le fonts che Flash trova nell' SWF caricato. Per fare questo utilizo il metodo statico enumerateFonts della classe Font passandogli il valore false ( false perchè così Flash capisce che deve inserire solo le fonts che ha trovato nell' SWF caricato, altrimenti se gli passo true inserirebbe nell' Array tute le fonts di sistema ).
fonts_array=Font.enumerateFonts(false);
tramite il metodo sort della Classe Array, dico al mio array di ordinare il suo contenuto per ordine alfabetico ( capiremo meglio mi più avanti il perchè )
fonts_array.sort();
quì faccio un trace per esere certo che adesso in main.fla siano utilizzabili le fonts di fonts.swf
trace(fonts_array);
L'output del trace arà questo: [object AmericanTypewriter],[object BookmanOldStyle],[object Monaco] e come possiamo vedere abbiamo tre oggetti ( tre istanze della classe Font per la verità ). Ordinati alfabeticamente.

createFields();
questo metodo crea tre campi di testo a scopo puramente didattico. Ad ognuno di loro assegno una font che è presente nell' SWF caricato.
creo il campo di testo assegnandogli come valore, un campo di testo che mi restituisce la funzione getTextField ( che vedremo tra un attimo ), la quale penserà a crare un campo di testo , assegnarli le giuste proprietà ed un textFormat con appunto una delle fonts. Inoltre, attenzione quì, passo un valore numerico a getTextField che veràà utilizzato come indice dell' Array fonts_array per recuperare una font.
Siccome abbiamo detto al nostro Array di disporre il contenuto in ordine alfabetico, tra Monaco American Typewriter e Bookman Old Style, la M di Monaco mi dice che sarà l' ultima font nell' Array per cui gli passo l' ultimo indice dell' array ( dato che le fonts sono 3 , l' ultimo indice è 2 ).
var monaco_txt:TextField=getTextField(2);
lo aggiungo allo stage
addChild(monaco_txt);
gli assegno un testo
monaco_txt.text='questo testo ha la font Monaco';
gli assegno la larghezza pari alla lerghezza effettiva del testo che contiene
monaco_txt.width=monaco_txt.textWidth+10;
Ripeto la stessa cosa anche per creare altri due campi di testo ai quali passo al primo il valore 0 ( che recupererà la font American Typewriter, in questo caso la prima in fonts_array ) e al secondo passo il valore 1.
var typewriter_txt:TextField=getTextField(0);
addChild(typewriter_txt);
typewriter_txt.text='questo testo ha la font American Typewriter';
typewriter_txt.width=typewriter_txt.textWidth+10;
typewriter_txt.y=monaco_txt.y+40;

var bookman_txt:TextField=getTextField(1);
addChild(bookman_txt);
bookman_txt.text='questo testo ha la font Bookman Old Style';
bookman_txt.width=bookman_txt.textWidth+10;
bookman_txt.y=typewriter_txt.y+40;

getTextField(n:int):TextField
questo metodo restituisce un campo di testo quando chiamato.
Creo un campo di testo
var field:TextField=new TextField();
gli dico di non essere selezionabile
field.selectable=false;
gli imposto la proprietà embedFonts a true
field.embedFonts=true;
gli assegno un nuovo TextFormat, chiamando il metodo getFormat che appunto restituisce una nuova istanza della classe textFormat. Inoltre gli passo ' n ', il valore numerico che mi è stato precedentemente passato dal metodo createFields ( quello che recupererà il giusto indice del' array che contiene le fonts )
field.defaultTextFormat=getFormat(n);
restituisco il campo di testo
return field;

getFormat(n:int):TextFormat
questo metodo crea un nuovo TextFormat
var format:TextFormat=new TextFormat();
a cui assegna come font, la font nell' indice dell' array fonts_array con valore ' n ', che mi è stato passato dal metodo getTextField e ancora prima da createFields. Quindi creo una variabile di tipo Font a cui assegno quella font
var font:Font=fonts_array[n];
e tramite la sua proprietà name la assegno alla proprietà font del TextFormat
format.font=font.fontName;
assegno un colore al TextFormat
format.color=0xFF6600;
assegno una dimensione
format.size=20;
resituisco il TextFormat
return format;

NB: In questo modo, possiamo anche aggiungere un preloader, in quanto l' SWF con svariate fonts ( in questo caso fonts.swf ) potrebbe pesare parecchio e noi potremmo monitorare il caricamento per avvisare l' utente.
Inoltre, main.swf rimane leggero in quanto non si porta dietro le fonts.

Saty tuned ! :D

[tia]

Non riesco a ripetere l'esempio..

In Output mi restituisce questo..

[object Arial],[object TrebuchetMS]
TypeError: Error #1009: Impossibile accedere a una proprietà o a un metodo di un riferimento oggetto null.
	at Main/::getFormat()
	at Main/::getTextField()
	at Main/::createFields()
	at Main/::completato()

Non capisco perchè...