I PixelFont
Introduzione
Uno dei principali handicap di Macromedia Flash, a livello grafico, è sicuramente il pessimo risultato a schermo dei fonts, i testi risultano sempre sgranati, non a fuoco e poco leggibili; in questa sede non ci interessa il perchè, ma solo cercare di capire come risolvere il problema. Mentre dinamicamente possiamo facilmente aggirarlo con i fonts usati dal sistema: verdana, arial, courier etc o con i font inglobati nel Flash player, quelli con il suffisso _ (underscore), nel caso di campi di testo statici l'unica scappatoia sono i pixelfont.
I siti dove scaricare pixelfonts sono numerosi, ed è anche possibile crearli ex-novo con programmi specifici o usare dei convertitori (TTF -> Pixelfont), ma il lavoro è lungo e non sempre i risultati sono soddisfacenti.
Tutti i fonts FFF devono essere settati a 8 pixels
Questa è una regola che, in genere, vale anche per altri pixelfonts, di solito gli stessi sono accompagnati da un file di testo con le relative spiegazioni. Qualsiasi altra misura causa un effetto blur, sfocato; un'eccezione alla regola, o un trucco se volete, può essere quello di raddoppiare la misura (16, 24 etc...) ma in questo caso, anche se la visualizzazione è corretta si ottiene un effetto pixellato, gradevole a vedersi ma comunque non raccomandato. E' inoltre sconsigliato l'utilizzo del Bold o dell'Italic, anche in questi casi si ottiene un effetto blur.
I fonts devono essere allineati a sinistra o a destra, mai al centro
In Flash 5 cliccare sul tab (linguetta) Paragraph nel pannello dei campi di testo, in Flash MX aprire il pannello Text Properties per allineare il testo.
I fonts devono essere posizionati sugli assi X e Y con numeri interi
In Flash 5 aprire il pannello Info e arrotondare i valori numerici per assicurarsi che i fonts siano settati correttamente sul pixel. Correggere manualmente i valori e cancellare eventuali numeri decimali. Per esempio se il campo di testo si trova sul valore 99.4 dell'asse Y, bisogna correggerlo a 99. Stessa cosa per l'asse X.
In Flash Mx usare il pannello Text Property, assicurarsi inoltre che sia attivo Snap Pixel nel menù View; quando si utilizzano campi di testo in movimento è anche opportuno arrotondare la posizione finale con Math.round:
myText._x = Math.round(newPos);
Testo in Ebraico o altri testi allineati a destra
Il valore decimale della X deve essere il valore richiesto per arrotondare il decimale della W a 10. Il valore della Y deve essere invece arrotondato a 0.
Valori originali:
W = 104.3 X = 85.4
H = 234.8 Y = 98.1
Valori corretti:
W = 104.3 X = 85.7
(0.7 è richiesto per arrotondare 104.3 a 10)
H = 234.8 Y = 98.0
(arrotondare sempre a 0)
Rotazione dei Campi di Testo
I pixelfont possono essere ruotati ortogonalamente a step di 90 gradi, occorre considerare l'origine del campo di testo secondo la rotazione, in caso di misure di ingombro con decimali compensare l'origine, come indicato nel paragrafo precedente, per i testi allineati a destra.
La crocetta arancio indica l'origine delle coordinate come flash le considera, si osserva che queste cambiano in relazione alla rotazione.
Campi testo annidati in mc ruotati
questo accorgimento non si applica in campi testo inclusi in movieclip che poi subiscono rotazioni. L'origine del campo testo in questi casi rimane immutata.
Testo Statico, Dinamico o Input - I
Per un risultato migliore è raccomandato l'utilizzo del Testo Statico (Static Text). I testi Dinamici o Input possono a volte apparire con l'effetto blur causato da un bug in Flash 5. In questi casi conviene pubblicare il movie in Qualità Bassa, (Low Quality), in questo modo viene disabilitato l'antialias e il testo viene visualizzato correttamente.
Ricordarsi sempre di incorporare (Embed) il font quando vengono utilizzati testi dinamici o input, quando viene utilizzato un campo di testo Statico il font viene incorporato automaticamente.
Testo Statico, Dinamico o Input - II
In caso di testo Dinamico o Input, si consiglia di non usare il Device Fonts nel pannello Publish Settings -> HTML, Flash inoltre non utilizza l'antialias se il font NON è incluso nel movie (cfr. sezione successiva), ciò può indurre a pensare di aver pubblicato correttamente il pixfont. E' quindi sempre necessario includere il font.
Se si pianifica di usare un limitato set di caratteri, o anche tutto il set, esclusi eventuali caratteri estesi (usati per l'Unicode), è possibile indicare una stringa di questo tipo nel requester di inclusione caratteri (è possibile copiarla da qui):
!"#$%&'()*+,./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_ `abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ
eventualmente togliere i caratteri che non si desidera usare, in molti casi si ottiene un
Testo Statico, Dinamico o Input - III/a
lascio la penna a Jaco... :)
...i font in genere, se sono di sistema si possono tranquillamente NON includere, ovviamente occorre capire cosa s'intende per "font di sistema" , e come si comporta Flash.
Se usi Verdana, che è un "font di sistema" (almeno tutti quelli che hanno IE l'avranno), e si crea un testo dinamico a 10 px SENZA includere il font, Flash lo pubblica senza antialias.
Se si pubblica a 17 e + Flash fa l'antialias comunque.
Perche? Non lo so, è strano, ma credo che in MM abbiano semplicemente deciso così.
Attenzione, allora tutti i font al di sotto di un certo corpo non hanno antialias? No, se pubblichi a 6, hai l'antialias. Sono impazziti? Penso di no, semplicemente hanno creato un "notch" (un filtro passa-basso passa-alto combinato), che chiede al sistema ospite l'antialias secondo un range (che potremmo ricavare sperimentalmente, il fatto è che la cosa ha scarso interesse).
Cosa occorre fare con i Font in genere? Se li includi avrai SEMPRE l'antialias (perchè Flash incorpora lo shape dei caratteri e li pubblica come fossero dei movieclip), se non li includi avrai l'antialias secondo le misure che usi (nei campi dinamici). Scelta dello sviluppatore, se lo sa ha un controllo più fine. Questo indipendentemente dalla presenza o meno di quel font in generale. Se il font non c'è ovviamente verrà operata una sostituzione.
Testo Statico, Dinamico o Input - III/b
Perché è necessario includere i pixelfont?
almeno per due ragioni:
- non sono affatto diffusi (li conoscono bene solo chi sviluppa in flash)
- si evitano le false percezioni (che si ottengono con "Device Fonts" e i testi dinamici senza inclusione), per i campi dinamici il corpo 8 (che è quello che si usa più frequentemente per pubblicare i pixelfont) verrebbe reso senza antialias, così come per ogni altro font, perchè rientra nel range che ho esposto prima.
Dimensione dei box testo
evitare di "aggiustare" le dimensioni dei campi testo con la palette properties, i testi risulterebbero distorti e vanificherebbero gli scopi del pixelfont. Potete controllare nella palette "tranform" se il campo testo è in regola, la scala in larghezza e altezza dev'essere 100.
Ultime considerazioni
I pixelfont sono progettati per funzionare in flash, i cui caratteri ad un dato corpo, fanno corrispondere i nodi delle forme tra un pixel e l'altro, più in generale sono normali font vettoriali, scalabili e stampabili con qualunque altro programma.
Jaco - www.pixeldump.org
Inglobare i campi di testo nei Movieclip
Flash 5: il testo usato in un movieclip deve essere posizionato usando gli stessi accorgimenti spiegati in precedenza. Piazzando un movieclip sullo stage principale i valori X e Y del movieclip stesso devono essere arrotondati seguendo lo stesso procedimento. Se ci sono numerosi movieclip nidificati, seguire sempre le stesse regole.
Flash MX: non è necessario arrotondare i valori di X e Y del Campo di Testo, ma deve essere fatto per quanto riguarda il movieclip.
Nota: se il Campo di Testo è in un Movieclip che contiene altri elementi, anche i valori X e Y di quest'ultimi devono essere arrotondati a numeri interi.
Inglobare i campi di testo nei Movieclip - Esempio
Immaginiamo di avere 3 movieclip nidificati in questa maniera:
Mc_1 - Contiene Mc_2 e Mc_3
Mc_2 - Contiene Mc_3
Mc_3 - Non contiene alcun movieclip
Posizionare prima Mc_3 su valori X e Y interi, e poi a ritroso, aggiustare i valori di Mc_2 e Mc_1. Fare attenzione a non cambiare le misure (resize) dei movieclip.
Pubblicare in pixel
E' anche opportuno pubblicare il movie in Pixels o Match Movie soltanto, l'opzione Percent può causare l'effetto blur. In FlashMx le proprietà dello stage possono essere applicate direttamente dalla timeline:
Stage.scaleMode="noScale";
Considerazioni finali
Spero, alla fine di questa breve mini-guida, di aver chiarito un po' le idee, di sicuro c'è il fatto che per utilizzare bene i pixelfont bisogna applicare le regole finora illustrate, spesso noto, girando in rete, che non tutti conoscono queste regole o non le applicano in maniera rigida, e i risultati sono decisamente sgradevoli...
non mi resta che augurarvi buon lavoro e ringraziare nuovamente, Noa, Jaco e "last but not least" Walter Apai,
Futre