Who, if not a habrachelovek, spending a few hours a day reading a useful and interesting material, knows that the content rules the Internet. And its correct and beautiful display, which finds its realization in various fonts, rules our taste.
The huge number of sites that we view daily pleases our eyes with a variety of font solutions: headings, slogans, texts, polls, comments ... For all this there is a unique font. That is why we would like to talk today about how to make the site not only more dynamic, but also more readable. It will be about the development of MotoCMS -
online font manager .
After reading the article to the end, you will learn all the features of this manager, and also understand how you can use it in your flash-projects.
')
Let's start with a brief outline of our article. Today we will talk about:
- advantages and disadvantages of embedded fonts;
- most common compilation errors;
- how to integrate a new font into any flash site;
So, as old Gagarin liked to say, let's go ...
Advantages and disadvantages of embedded fonts
If you are concerned about the introduction of a font into your project, this means that it will be available for playback by the Flash Player at any of the working moments and you will not have to worry about the fact that a font is missing from any user. Among the main obvious advantages of embedded fonts are the following:
- the font does not require additional installation for correct display;
- effects can be applied to the embedded font, make it faded, rotate and the like;
- smoothing embedded fonts better perceived by the user;
- the use of embedded fonts allows for better rendering of text in flash files
However, like any medal, embedded fonts have their drawbacks.
- You can use fonts in .TTF and .OTF formats only. If you need to use a non-standard font, then you will need to import it into a separate .swf file, and only then correctly register the file in your application.
- Embedded fonts will affect the final weight of the file - make it bigger, which means users will need more time to wait for your site to load.
- Often you will need to use additional code in order to add a new font.
The use of additional embedded fonts in any case is justified, since it allows you to make your site even more attractive, unique and easy to read.
In any case, in order to begin the process of adding a new font, you must have it in stock, in the .TTF or .OTF format. You will need to convert it to .SWF. With the
online font manager (OMSH) procedure is performed in a few minutes.
The logic of creating a new font
Open the link:
www.cms-guide.com/online-font-creatorChoose a font in the format .TTF or .OTF and load it using the button "Add font"
Click on the button “Create fonts”. The process has begun
As a result, we get an archive with a converted font, ready for further use in flash-sites
The online font manager is an independent free product of
MotoCMS and is available absolutely for all developers.
Possible compilation errors
To date, virtually any font can be compiled according to the instructions given above. However, it should be noted that sometimes users may encounter errors during the creation of the font. At its core, it can be various problems, the cause of which, as a rule, is always the same ...
The variety of fonts that exists today in the public domain on the Internet is not always created taking into account all the necessary parameters for its smooth and correct operation. If the designer created the font, taking into account all the nuances and parameters of its use, then the compilation process will pass without problems. Almost all the errors that occur to the user in the compilation process, as a rule, relate to incorrect initial indicators of this font.
In some cases, if the font you use in the .TTF or .OTF format was previously not entirely correctly compiled from another format - this can also cause an error.
In order for the compilation procedure to be successful, we also recommend you to pay attention to the additional parameters that will become available to you if you click on the button with the image of a pencil
Using the edit option, if necessary, you can set the additional font parameters you need:
- the ability to change the font family;
- default display (standard, bold, italics);
- add only required characters.
I would like to dwell on the last paragraph. The use of the whole range of characters affects the final file size, which means that the download speed will depend on this parameter. If you know that you only need a certain set of characters, you can only download them. Thereby significantly reducing the size of the final file. For example, such a situation would be very appropriate if you select a non-standard font for the preloader, from which you ultimately need to display only 11 characters (U + 0025, U + 0030-U + 0039).
It is also worth noting that some fonts are recommended to optimize before using them with Flash. Take, at least, pixel fonts. As a rule, they are very popular, but their use involves a number of additional settings and restrictions.
If you are using
a site template or a finished project with a Moto CMS Control Panel, then adding the resulting font will be almost no effort through the administration interface. For all other projects use the code.
Code to add the finished font
If your project is not executed on
MotoCMS , the font file generated in the
OMSH is added using 59 lines of code. Here he is
{ import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; import flash.text.Font; import flash.text.TextField; import flash.text.TextFormat; public class LoadFontProject extends Sprite { protected var fontFileName:String = "ComicSansMS.swf"; public function LoadFontProject() { var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler); loader.load(new URLRequest(fontFileName)); } protected function loaderCompleteHandler(event:Event):void { var loaderInfo:LoaderInfo = event.target as LoaderInfo; var motoFontInfoClass:Class = loaderInfo.applicationDomain.getDefinition("MotoFontInfo") as Class; if (motoFontInfoClass) { var fontName:String = motoFontInfoClass.FONT_NAME; var definitionName:String = motoFontInfoClass.FONT_CLASS; var fontClass:Class = loaderInfo.applicationDomain.getDefinition( definitionName) as Class; for (var j:uint = 0; j < fontClass.classes.length; j++) { Font.registerFont(fontClass.classes[j]); } trace("Font name: " + fontName); } var textField:TextField = new TextField(); var textFormat:TextFormat = textField.defaultTextFormat; textFormat.font = fontName; textField.defaultTextFormat = textFormat; textField.embedFonts = true; textField.text = "Sample text"; addChild(textField); } } }
Here let's stop in more detail. At the beginning of the code we indicate the name of the generated font.
protected var fontFileName:String = "ComicSansMS.swf";
Then we create a loader for the specified file and call the loaderCompleteHandler method.
public function LoadFontProject() { var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler); loader.load(new URLRequest(fontFileName)); }
Get the MotoFontInfo class from the loaded .swf font file
var loaderInfo:LoaderInfo = event.target as LoaderInfo; var motoFontInfoClass:Class = loaderInfo.applicationDomain.getDefinition("MotoFontInfo") as Class;
MotoFontInfo is a class that is automatically added to each .swf file when generating a font. In the next step, we get the font characteristics
var fontName:String = motoFontInfoClass.FONT_NAME;
The .SWF font file also contains a class in which many styles are included (for example, bold, italics). We select the class name of the font to get it from *. SWF file.
var definitionName:String = motoFontInfoClass.FONT_CLASS; var fontClass:Class = loaderInfo.applicationDomain.getDefinition( definitionName) as Class;
The next step is to use the loop. This is necessary in order to bring together all the styles that can be registered in the font class
for (var j:uint = 0; j < fontClass.classes.length; j++) { Font.registerFont(fontClass.classes[j]); }
At the end of the code, we create a new text field to demonstrate the resulting font.
The above code can be used on any flash project that you want to diversify with a variety of font solutions.
We will be glad if the article is useful to you in order to make a new project using an unlimited number of fonts, or to supplement an existing one.