|
Inhoudsopgave
FontManager is bedoeld om de toegang tot shared library fonts te organiseren en biedt nieuwe mogelijkheden. Font Manager embed de fonts niet in de movie, maar maakt het mogelijk een font in te laden met gebruik van loadMovie()
om het vervolgens te kunnen gebruiken in zowel een movieclip als in een geladen movie.
Externe libraries bestaan uit een tweetal SWF-bestanden: een library bestand en een container bestand. De naam van het library bestand is afhankelijk van de naam van het container bestand en wordt als volgt samengesteld: [container_bestandsnaam]+[_lib]+[.swf]. Bijvoorbeeld: als de container bestandsnaam is, dan dient de bestandsnaam van de library te zijn.
Het library bestand moet een movieclip bevatten met de volgende linkageID instellingen: "export for runtime sharing " parameter is aangevinkt en het "URL" path moet ook worden aangegeven.
De movieclip moet een textfield bevatten, met een instancename en met embedfonts op true gezet.
Zie ook het deel over het maken van shared libraries en de voorbeelden voor meer informatie.
Hierna kunnen de externe libraries geladen worden en geregistreerd voor gebruik in een movieclip door de methodes van de FontManager te gebruiken.
Het gebruik van libraries die op deze manier zijn georganiseerd, is niet de enige manier. De FontManager is slechts een schakel tussen de shared library en andere movieclips van een project, inclusief geladen movieclips.
Toegang tot een font kan op de volgende manieren worden gerealiseerd:
- De hoofdmovie kan een extern SWF-bestand laden en de shared library daarvan gebruiken;
- Een geladen movieclip kan een shared font library van een andere geladen movieclip gebruiken;
- De hoofdmovie kan zelf een shared font library bevatten en deze fonts gebruiken in elke movieclip die extern wordt ingeladen.
Standaard wordt een object gecreëerd tijdens de intialisatie: fonts_mng. Dit is het global object en wordt verborgen door ASSetPropFlags te gebruiken.
Als je de inhoud van het fonts_mng object wilt zien, kan dat eenvoudig door er een verwijzing naar te maken:
_root.show_me = font_mng
gebruik dan vervolgens Test Movie en kies voor 'List variables' (CTRL-L).
De FontManager biedt de volgende nieuwe mogelijkheden:
- dezelfde library files zijn in de hele website te gebruiken zodat de hoeveelheid data die de gebruiker moet downloaden kleiner wordt.
Library files die eenmaal geladen zijn, zullen niet opnieuw hoeven te worden geladen,maar worden de volgende keer uit de browser cache gehaald..
- laden van het font op het moment dat het nodig is.
Tijdens het verwerken van de HTML code kan worden gedefinieerd welke fonts nodig zijn, om ze vervolgens te laden en gebruiken.
- eenvoudiger ondersteuning van verschillende talen (internationale lokalisering).
Als je verschillende taken wilt ondersteunen, ben je veel tijd kwijt met het wijzigen van textfield eigenschappen en met het embedden van nieuwe fonts. Door de FontManager te gebruiken, zet je één keer een library op en alle movieclips op de stage zullen het juiste font gebruiken.
Verdeel de data- en librarybestanden met de gelokaliseerde fonts over overeenkomstige directories en je kunt daarna gemakkelijk een movie runtime lokaliseren door te verwijzen naar de juiste directory.
- eenvoudiger redesign.
Het vervangen van het geëmbedde font door een ander font in de shared font library is voldoende om deze wijziging vervolgens in alle movies die deze library gebruiken toe te passen.
- scheiding van engine (kernel), data en libraries.
Volledige scheiding van data, engine en libraries is nu mogelijk. Je kunt nu een movieclip maken die je hele scene creëert vanuit een XML-bestand, waarbij alleen dat wat daadwerkelijk nodig is, wordt geladen.
It is possible to create a font library using
Font Library Creator Extension from
Carlos Rovira.
Opmerking: FontManager is ontwikkeld voor gebruik met Flash Player 6. Alle voorbeelden en tutorial bestanden worden bij voorkeur gepubliceerd voor Flash Player 6.
Het is echter mogelijk de FontManager te gebruiken met Flash Player 7.
Gebruik van de FontManager met Flash Player 7 movies
Stap 1: maken van de library movieclip en het includen van het font
- Maak een nieuw FLA bestand en geef het een naam die afhangt van de naam en eigenschappen van het font dat in dit bestand zal worden opgeslagen. De bestandensnaam bestaat uit de volgende delen:
Bijvoorbeeld: ,
Hierbij betekent dat het font algemeen gebruikt zal worden en de dat de fontstyle in de library italic is .
Als je een library wilt maken met hetzelfde font, maar dan plain (normaal) en niet italic, noem het dan body_p_lib.fla. Als een andere developer dan ooit eens body_b_lib.fla of body_bi_lib.fla maakt, dan kun je er vanuitgaan dat deze libaries hetzelfde font gebruiken, maar dan met een Bold en een BoldItalic stijl.
Gebruik liever niet fontnamen in de naam van een librarybestand. Als het font dan later wordt vervangen, is dat alleen maar lastig en verwarrend. Als de arial_lib.swf library feitelijk een Times New Roman bevat, dan is dat een onaangename verrassing voor de developer wanneer de movie geschikt moet worden voor gemaakt voor Ethiopië of Rusland. Hou je gewoon aan de voorgestelde wijze van naamgeving en je zult geen moeilijkheden hebben met het gebruik van deze libraries. Bovendien is de naamgeving dan ook voor anderen inzichtelijk en begrijpelijk.
- Maak een movieclip met een begrijpelijke naam. Het is aan te bevelen om de librarynaam te gebruiken, bijvoorbeeld: . Klik met de rechtermuisknop op deze clip, kies Linkage ... en vink
Export for runtime sharing aan. Andere Linkage instellingen zijn niet belangrijk.
Vul de URL (pad) naarhet SWF bestand in. De naam van het SWF bestand moet overeenkomen met de oorspronkelijke bestandsnaam van de FLA; dus bijvoorbeeld: (lees hieronder ook over het invoeren van een absolute URL)
- Maak een dynamisch tekstveld in deze movieclip;
- Typ de tekst in dit tekstveld. Het is handig om de naam van de library, de fontsijl en de taalversie hierin te zetten. Bijvoorbeeld: ;
- Ken het font van je keuze aan het tekstveld toe;
- Embed de fonts. Klik in het propertypanel op 'Characters ... ' en embed vervolgens alle outlines of die, die je nodig hebt.
- Geef het tekstveld een instancename, bijvoorbeeld:;
Het is mogelijk om meerdere tekstvelden in de movieclip te plaatsen, als je weet dat de fonts die je erin gebruikt, altijd samen worden gebruikt. Dit is echter niet aanbevolen. Het is het beste om slechts één tekstveld per movieclip te gebruiken, met slechts één font in één library. Je loopt anders onnodig het risico dat er toch teveel data geladen worden, en het lastig wordt om met de libraries te werken.
- Plaats het volgende script in ee laag boven de laag die het tekstveld bevat:
if (font_mng.registerTextFormat("body_i", this.body_i_txt)) {
this._parent.removeMovieClip();
}
- Bewaar de FLA met dezelfde naam en publiceer het SWF bestand.
Stap 2: maken van de container movieclip
- Maak een nieuw FLA bestand ;
- Bewaar dit bestand in dezelfde directory met dezelfde naam maar laat de _lib toevoeging weg . Bijvoorbeeld:
- In Flash MX: sluit het bestand en kies File > 'Open as a Library' en open het FLA bestand met het tekstveld;
- Sleep de movieclip met het tekstveld van de shared library naar de stage van de nieuwe movie;
- Publiceer het bestand.
De library bestanden zijn nu klaar voor gebruik..
Stap 3: laden en testen van de shared libraries
- Maak en nieuw FLA bestand en bewaar het in dezelfde directory als bijvoorbeeld ;
- Plaats het FontManager initialisatie script in een frame, bijvoorkeur aan het begin van de movie tijdlijn; it is advisable to place it at the start of movie;
Je kunt nu het font laden en toepassen op een willekeurig tekstveld
Gebruik voor testdoeleinden mijn eigen script. Plaats het in het eerste frame van _root na de FontManager initialisatie code:
_root.createEmptyMovieClip("temp_mc", 0).loadMovie("body_i.swf");
_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.wordWrap = this.embedFonts=true;
};
- Test de movie nu. De tekst zal in het tekstveld verschijnen.
Stap 4: Testen en op de site gebruiken
Plan de plaatsing van je libraries in de directory structuur van je site met zorg. Het beste is om paden te gebruiken die relatief zijn, of relatief t.o.v. de siteroot.
Opmerking: als je de demoversie van FontManager wilt testen, dan kun je dit alleen doen met de hulp van een WebSpeed Simulator.
Open de Setup dialoog and stel de Local Website parameter in op het pad naar de directory waar de testbestanden van je project zich bevinden. Klik vervolgens op 'Browse Web' vul http://localhost/ in in de adresbalk van de browser.
Maak dus eerst de directories waar de library bestanden zullen worden opgeslagen. In het voorbeeld is het pad .
Als je iets anders doet, hou daar dan rekening mee.
- Maak in de root directory een directory 'Libs', met daarin weer een directory 'SharedFonts';
- Open het bestand ;
- Open de library zet de URL parameter in de Linkage Properties dialoog op:
- Publiceer het bestand; je krijgt nu een foutmelding:
Error opening URL "file:///Libs/SharedFonts/body_i_lib.swf"
Gewoon negeren;
- Kopieer body_i_lib.swf en body_i.swf naar de directory 'SharedFonts' (wijzig niets meer in het bestand body_i_lib file; het blijft zoals we het hebben gemaakt);
- Open TestBodyItalic.fla en vervang
.loadMovie("body_i.swf")
door
.loadMovie("/Libs/SharedFonts/body_i.swf")
- Publiceer het bestand (Ctrl+F12) zodat er ook een HTML bestand wordt gecreëerd;
- Kopieer het bestand naar welke directory dan ook binnen de site structuur;
- Open de pagina. Na korte tijd - na het laden van de fonts - zie je dat de tekst in het tekstveld een nieuwe formattering/stijl heeft gekregen.
Stap 5:gebruiken met Flash Player 7
Doe het volgende om de FontManager met Flash Player 7 te kunnen gebruiken:
- maak een versie 6 SWF bestand dat het FontManager initialisatie script bevat;
- plaats dit bestand in de site en laad het wanneer nodig;
of- plaats het FontManager initialisatie script in de shared movieclip voeg deze clip in, in andere clips
Er is slechst een klein ongemak wanneer de FontManager met Flash Player 7 wordt gebruikt: je moet even wachten tot het bestand is geladen. Het gaat echter maar om 1Kb, dus het is slechts een klein ongemak. Bovendien wordt dit wachten ook voor Flash Player 6 aanbevolen. Verder zijn er geen functionele verschillen.
Tijdens de ontwikkeling van de FontManager heb ik veel getest. De eerste versie was een component. Tijdens het testen heb ik het aantal methodes van acht naar één teruggebarcht en het aantal events van vier naar één. Uiteindelijk kon ik het ook nog doen zonder twee properties die er in eerste instantie wel waren. In totaal heb ik met meer dan vijftig bestanden getest. Gebaseerd op deze ervaring kan ik wat aanbevelingen doen. Je zult zeker je eigen werkmethode met deze component ontwikkelen, maar maak voorlopig nog even gebruik van deze aanbevelingen:
Streef ernaar om het FontManager initialisatie script niet in het project op te nemen. De beste manier is het maken van een extern SWF bestand met dit script en deze te gebruiken als een module die geladen wordt. Nog beter is het om een shared movieclip met het initialisatiescript te maken en deze in te voegen waar je 'm maar nodig hebt. Op die manier kun je pijnloos de overgang naar een nieuw domein maken.
Gebruik niet de namen van de SWF library bestanden in je movies. Je systeem is veel flexibeler wanneer je een XML-bestand maakt met een beschrijving van je libraries. Bijvoorbeeld:
<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>
Let op dat de name-attribute overeenkomt met de id-attribute. Op deze manier is het gemakkelijk om de URL van het library container bestand te achterhalen. En in dit geval is lokalisering voor bijvoorbeeld Japan, makkelijk. Je hoeft slechts een directory '/fontLibrary/jp/' te maken; deze te vullen met library bestanden en de paden in het XML-bestand te wijzigen.
De overgang van een lokale naar een internetversie wordt zo ook gemakkelijker. Een ander voordeel is de eenvoudige mogelijkheid tot visuele controle op de overeenkomst tussen font en stijl.
De bovenstaande XML-beschrijving is maar een voorbeeld; doe het zoals het voor jou het handigst is.
Gebruik libraries die zichzelf registreren. Na registreren kun je libraries verwijderen.
Gebruik lokale paden naar libraries bij lokaal testen; gebruik absolute paden op het internet.
Creëer liever niet een nieuwe instance van de FontManager, al is dit mogelijk met de volgende code:
my_font_mng = new font_mng.constructor()
Ik neem aan dat dat het noodzakelijk is te weten dat dit kan, maar gebruik dit alleen als laatste redmiddel.
Actions
beschikbaarheid
gebruik
font_mng.registerTextFormat( instanceName, textField )
Parameters
instanceName - string, zet de naam van het TextFormat object
textField - verwijzing naar het tekstveld in de shared movieclip, waarvandaan het textFormat object moet worden gehaald.
Returns
Boolean. Geeft false terug
als het tekstveld geen embedded fonts heeft of als er geen instanceName voor het TextFormat object is. Geeft anders true terug..
beschrijving
Methode. Maakt een TextFormat object binnen de FontManager.
Shared movieclip met een voorbeeld tekstveld dat verwijderd kan worden wanneer je klaar bent.
Een TextFormat object binnen de FontManager kan worden gecreëeerd, gebaseerd op een voorbeeld tekstveld met geëmbedde fonts, dat zich bevindt in een shared movieclip.
Vlak voordat de initialisatie procedure eindigt, zendt de FontManager een onRegister event met de initialisatie parameter.
voorbeeld
- het geval van de geladen library, wanneer die wordt aangeroepen door de shared movieclip (die zichzelf regsitreert):
if (font_mng.registerTextFormat("body_i", this.body_i_txt)) {
this._parent.removeMovieClip();
}
font_mng.registerTextFormat("body_i", this.body_i_txt)
- het voorbeeld met de library in de scene geplaatst
font_mng.registerTextFormat("body_i", this.any_mc.shared_mc.body_i_txt)
beschikbaarheid
gebruik
listenerObject.onRegister = function (success, name, instance_mng, textField ) {
}
Parameters
success
- Boolean, geeftfalse terug als er geen TextFormat Object werd doorgegeven bij het aanroepen van registerTextFormat
of als er geen font is geëmbed in het voorbeeld tekstveld. Geeft anders true.
name - string, de naam van het TextFormat object binnen de FontManager.
instance_mng - verwijzing naar de FontManager instantie die de regsitratie aanroept.
textField - verwijzing naar het voorbeeld tekstveld.
Returns
Niets
Description
Event. Afgevuurd vlak voor het einde van de registratieprocedure van het TextFormat object in de FontManager. Omdat de FontManager een broadcaster is, heeft deze ook alle methodes en properties van een broadcaster.
voorbeeld
_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;
};
|
