Home > Archive > Developers/reference > Recipes & mashups > Custom Fonts
The API is still being finalized. This is a preview...
SpicyNodes offers large number of fonts types for the layout customization. They can be used by adding a particular font filename to the settings XML file. There is no additional action required when using a type from SpicyNodes predefined fonts set.
In some cases the developer might like to use her or his own fonts in the radial layout. SpicyNodes has an option to use externally created and hosted font libraries to be used by the engine. Font libraries consist of pairs of SWF files. One file of the pair contains the compressed font and the second file contains a movieclip which connects the font from the first file and permits importing itself into the engine containers. The idea is similar to shared font libraries commonly used in larger Flash applications.
Creating custom fonts requires running an Adobe Flash authoring tool. To help you get started, you can download custom_fonts_examples.zip.
- Open the Adobe Flash authoring software and create a new Flash Document. Open the Library window (Ctrl-L or F11), press the right mouse button over it and select “New Font...”. The “Font Symbol Properties” window should appear. Name the font symbol “SharedFont” and select the desired font (in this example is Collage).
Additional "Style" properties like Bold and Italic checkboxes should be used only if the font supports additional styles. Only one style can be used for one custom font library. After pressing “OK”, the new font symbol is added to the Library list. Press this symbol with the right mouse button and select "Linkage..." from the context menu.
In the "Linkage Properties" window check "Export for runtime sharing" and "Export in first frame". The "Export for ActionScript" checkbox should not be selected. For the URL enter the filename (with the .swf file extension) of the second file. It is easier to work with filenames derived from the font name. The second file creation is described below.
Press “OK” when the Linkage Properties are set properly, then select the first frame of the movie main timeline and press F9 (the “Actions” window). Inside the “Actions” window write three lines of ActionSctipn code:
1 var bold:Boolean = false; 2 var italic:Boolean = false; 3 var systemFontName:String = “Collage”;
The values bold and italic in lines 1 and 2 must correspond to the bolt and italic checkboxes in the “Font Symbol Properties” window edited before. If a corresponding checkbox in selected, then the value should be true, otherwise false. The value of systemFontName in line 3 is the system font name like “Arial”, “Courier New”, “Georgia”, “Gill Sans”, etc. This name corresponds to the Font combobox of the “Font Symbol Properties” window edited before. Please mind that all the entered text in the “Actions” window is CASE-SENSITIVE.
Save the file with a filename ending with “_fnt”, for example “Collage_fnt.fla” and test the movie (Ctrl+Enter) in order to compile the “Collage_fnt.swf” Flash file.
- Create a new Flash document in the Flash authoring tool. Open the Library window (Ctrl-L or F11), press the right mouse button in the window and select “New Symbol...” from the context menu.
The "Create New Symbol" window should appear. Enter "ForceShared" as the symbol Name. Leave the symbol Type as "Movie clip" (radio button). Below, in "Linkage" section press the checkbox "Import for runtime sharing". After checking the checkbox, the Identifier should become filled with “ForceShared”. The URL should be filled with the relative URL from the SpicyConnector (spicyconnector.swf) directory to the file storing the font; the same file as described above in point 1.
For example if the spicyconnector.swf file is stored in this way: "/http/my_application/spicyconnector.swf" and font library is stored "http/my_application/fonts/Collage_fnt.swf" then the URL field of the "Create New Symbol" window should be filled: "fonts/Collage_fnt.swf".
For more information about the SpicyConnector usage please read the chapter "EMBEDDING AND CUSTOMIZING SPICYNODES".
When ready, press OK but do NOT enter into the symbol editing mode. After pressing OK there should appear a message window saying "This symbol is imported from a Shared Library. If you edit this symbol, it will be no longer imported. Do you want to continue ?", please press "No".
When the new symbol called "ForceShared" appears in the Library items list, drag it to the stage and save the document using exactly the same name as the previous file (point 1. above) but without the "_fnt" ending. In this example the filename should be "Collage.fla". After saving test the movie (Ctrl+Enter) in order to compile the "Collage.swf" file.
Both files created basing on the “Collage” font preceding example should be uploaded to the server. There are two rules that need to be complied. First, both files - “Collage.swf” and “Collage_fnt.swf need to be placed in the same directory. Second, this directory has to correspond to the URL value added to the “Linkage properties” description of the “ForceShared” symbol described above.
When the custom fonts are uploaded correctly to the server then the last step in order to make them available in the layout is editing font settings in the settings XML file. For full description of the settings XML file please see the “SETTINGS XML” section. The following is just a brief example on how the preceding font libraries should be added to the settings file:
<font src=”Collage.swf” path=”fonts/” />
The src attribute always targets the Flash file which holds the ForceShared movieclip symbol imported for runtime sharing. The larger of both files which holds the compressed font is automatically loaded by the engine. The path attribute, using a relative URL targets the directory where both font files are stored. Please mind the path attribute does not contain a filename but only the path.
