How to share fonts in between more SWF with flash CS3

[Flep]

This article wants to look closer to the precedent article that we have seen: how to embed fonts in a SWF .
I received* an e-mail of a user (Loris) that asked me if I could explain how to work with Flash CS3 and the fonts.

I was asked more specifically how to share the fonts included* in another SWF.

To do this, Flash CS3 has 2 techniques available:

*** 1. We hold the fonts needed in an external SWF, we can also say that SWF will exclusively store the fonts, and we load it in the main SWF.
*** 2. As the point 1 only that we use the option "export for runtime sharing" and so we do not load an external SWF containing our fonts. In this case however, we need to share the libraries and therefore the font will weight to our main FLA

Personally I think that the first method* is the most valid one:
-* I can load an external SWF that contains only some fonts, this allows my main SWF not to gain weight (since the weight of the fonts is in the SWF that I will load)
*- loading the external SWF containing the fonts I can implement a preloader that tells the users the loading time with a cute text: We are loading the necessary graphics... '*
-***
Follow me... First, I create the FLA in which I will insert all the fonts that I want to use for the whole application and save it as "fonts.fla".
Into which I need to create in library the fonts that I decide to use, the following way:

In the Library Panel, at the top right I found a button.

Images 1 and 2



now it opens a window that allows us to choose a font and to assign them a name (I clearly recommend you to keep the same name as the selected font for convenience ):

Image 5



We suppose that I want to insert 3 fonts: Monaco, American Typewriter and Bookman Old Style.

I repeat the procedure for each of the fonts that I want to insert in the SWF, keeping in mind that if I want to use a bold font, I must choose the option bold as seen on image 3.
To be able to export the fonts together to the SWF during the publication, I must assign a linkage (id) to each of them.
I select a font from the library, right click and I activate the option "export for Actionscript ', assigning a name to the class that Flash will go to create for me:

Image 4



Now I go on the timeline and selecting the first and only keyframe, I open the Actions Panel and I write:

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

In this moment we are assigning to the Font class our fonts using the method "registerFont" and as parameter we give it the name of the class that we have assigned to the font as seen in image 4.

I now create the main FLA of my application and I save it as "main.fla '.
I create the Document Class, an AS file saved as "Main.as ', implemented the following way:

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;
		}
	}
}

The result:

Let analyse the code

Properties
An instance of Loader needed to load "fonts.swf"
private var loader:Loader;
an Array needed to contain all the fonts present in "fonts.swf" (once completely loaded)
private var fonts_array:Array;

Methods
loadSWF();
I am ready to load the external SWF "fonts.swf".
I do an url request to Flash, using de name "fonts.swf" as parameter
var request:URLRequest=new URLRequest('fonts.swf');
I create an instance of Loader
loader=new Loader();
I add a listener to the event COMPLETE. Once the external SWF is completely loaded, it will call the method "completato"
loader.contentLoaderInfo.addEventListener(Event.CO MPLETE,completato);
I load the SWF
loader.load(request);

completato();
I assign to the Array as value, all the fonts found in the loaded SWF. I use the static method "enumerateFonts" of the Font class with the value "false" (otherwise, Flash would add all the fonts found on system and not only the ones found in the loaded SWF).
fonts_array=Font.enumerateFonts(false);
Using the method "sort" of the Array class, I reorder its content by alphabetical order
fonts_array.sort();
I do a trace just to make sure that all the fonts included in the external SWF are now included in "main.fla"
trace(fonts_array);
This would be the output: [object AmericanTypewriter],[object BookmanOldStyle],[object Monaco] , three objects ordered alphabetically

createFields();
this method creates three text fields as a purely didactic purpose. To each of them I assign a font present in the loaded SWF.
I create the text field assigning it as value, a text field that returned the function "getTextField" (that we will see next), which will create a text field, assign the correct properties and textFormat based on one of the fonts.
Also, I pass a numerical value to "getTextField" used next as index of "fonts_array" to retrieve the font.
As I ordered the array alphabetically, I know that the M of Monaco will be the last font present in the Array. The last index Array will then be 2 (as there is 3 fonts)
var monaco_txt:TextField=getTextField(2);
I add it to the stage
addChild(monaco_txt);
I assign it a text
monaco_txt.text='questo testo ha la font Monaco';
I assign it a width equal to the contained text width
monaco_txt.width=monaco_txt.textWidth+10;
I repeat the same process twice passing the value 0 for American Typewriter and the value 1 for Bookman
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
this method returns a text field once called
I create a text field
var field:TextField=new TextField();
I impost it non selection able
field.selectable=false;
I impost the property embedFont to true
field.embedFonts=true;
I assign a new TextFormat calling the method getFormat which returns a new instance of the textFormat class. Also I pass it the numerical value "n" retrieved first from the method createFields.
field.defaultTextFormat=getFormat(n);
I return the text field
return field;

getFormat(n:int):TextFormat
this method creates a new TextFormat
var format:TextFormat=new TextFormat();
to which I assign as font, the font with an index array equal to "n" passed by the method getTextField and before that by createFields.
I create a Font variable to which I assign that font
var font:Font=fonts_array[n];
using its property "name", I assign it to the property "font" of TextFormat
format.font=font.fontName;
I assign a colour to TextFormat
format.color=0xFF6600;
I assign a dimension
format.size=20;
I return the TextFormat
return format;

NB: this way, we can add a preloader as the SWF containing the fonts could weight quite a bit and we could at least advert the user while loading it. Also using this way, the main fla remains lighter.

Stay tuned !

[lfdesign]

Hi!

First of all, thanks for your tutorial!! But I have a small question...

I have a main swf file that I import the fonts to... But how can I use those fonts in the other swf's files that will be loaded to the main swf???

I hope you understand my question and help me!


Stay nice!

[Flep]

Hi,
i think the loaded SWF has access to the enbed fonts of the main.swf .
Use Font.registerFont in the main SWF and call the font from the loaded SWF.

Anyway, in my opinion, if you must use many fonts the best thing to do is to keep all the fonts in external SWF ( for example fonts.swf ) so you can preload them ( as this sample ).
And before all, load fonts.swf so you have the fonts availables, and after load the other swf and you can access the fonts.

[lfdesign]

I think you are not understanding my problem...

I've managed to use the fonts loaded from the "fonts.swf" file in the "main.swf"...

But when I load the "home.swf" into the "main.swf" I can't access the text format I've created on "main.swf"! It says "1120: Access of undefined property txtFormatGrunge."

[Flep]

ok sorry
now i understand.

Has home.swf the Document Class ? If yes, add in its constructor the event Event.ADDED_TO_STAGE so you can easy refer to variables in main.swf .

If it has not the Document Class, from home.swf try this to get the root of main.swf:
var m:MovieClip=parent.parent as MovieClip;
trace(m.txtFormatGrunge);

[lfdesign]

Yes, "home.swf" has a document class and the event ADDED_TO_STAGE!

On the event I putted

news_txt.text = "bla bla bla bla";
news_txt.defaultTextFormat = txtFormatGrunge;

But even so, when I test the "home.swf" alone it appears the same error... And when I test the "main.swf" and load the "home.swf" it's the same...

[Flep]

Did you try stage.news_txt.text = "bla bla bla bla"; ?

[Flep]

lemme see some code of home.swf document class

[lfdesign]

private function addedToStage(event:Event):void {
            stage.addEventListener(Event.RESIZE, layout);
            layout(null);
            
            news_txt.text = "bla bla bla";
            news_txt.defaultTextFormat = txtFormatGrunge;
        }

txtFormatGrunge is only declared as a public TextFormat variable on the "main.swf"...

I don't think this method is gonna work... Can you give some example?

[Flep]

It should work like this:

private function addedToStage(event:Event):void {
            stage.addEventListener(Event.RESIZE, layout);
            layout(null);
            
            news_txt.text = "bla bla bla";
            news_txt.defaultTextFormat = parent.parent.txtFormatGrunge;
        }

or

private function addedToStage(event:Event):void {
            stage.addEventListener(Event.RESIZE, layout);
            layout(null);
            
            news_txt.text = "bla bla bla";
            news_txt.defaultTextFormat = stage.txtFormatGrunge;
        }

Can you attach the files ?
I will have a look