Turtlebite's Blog

This first tutorial will cover a very basic requirement of the Flash CMS: defining different fonts and font styles.

I assume you have downloaded and installed the Flash CMS and everything works fine so far. You’ve tested and played around with it and now want to take the next steps.

Step 1: Embedding the fonts

1. Open “fonts.fla” in Flash.
2. Open the library: you see 2 fonts already defined: “_myfont1″ and “_myfont2″. You are going to owerwrite these 2 and create a third, new font.
3. In the library, create a new font. Name it “_myfont3″. (Note: The CMS will refer to these names. You can define up to 15 different fonts: “_myfont1″ to “_myfont15″).
4. Open “_myfont1″ in the library and choose any font you like. Be sure your export settings are the same as in the screenshot. Repeat these steps for “_myfont2″ and “_myfont3″ with different fonts.

Step 2: Defining textstyles

1. Now open frame 1 (“setup”) in the actions panel to edit it.
2. At the top you can see the styles for hyperlinks. Change it if you like (different colours and decorations).
3. Next, you can find an array “_level0.testFontStyle”. Leave the name for now. There are 3 styles defined: “Body”, “Body bold” and “Headline”. These are the names the user sees and can choose from in the CMS.

Now, type in the fontnames you have embedded. I have used these fonts: “Bumblebee” (_myfont1), “JanicesHand” (_myfont2) and “Gadget” (_myfont3). 

Here the code after all changes:

_level0.testLinkStyle = new TextField.StyleSheet();
_level0.testLinkStyle.setStyle("a:link",{color:"#24A831", textDecoration:"underline"});
_level0.testLinkStyle.setStyle("a:hover",{color:"#177120", textDecoration:"none"});
// --------------------------------------------
_level0.testFontStyle = [];
// --------------------------------------------
f = {};
f.styleName = "Body";
f.font = "_myfont3";
f.size = 12;
f.color = 0x000000;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "Handwriting in red";
f.font = "_myfont2";
f.size = 15;
f.color = 0x990000;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "bigger Handwr. in blue";
f.font = "_myfont2";
f.size = 20;
f.color = 0x003399;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "HUGE Handwr.in pink";
f.font = "_myfont2";
f.size = 45;
f.color = 0xD906F0;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "The bubble Bumblebees";
f.font = "_myfont1";
f.size = 22;
f.color = 0x003333;
_level0.testFontStyle.push(f);

Step 3: Export fonts.swf and upload it to the server

1. Export fonts.swf for (ActionScript 2!) and upload it into the folder “login” on your server.

Login the CMS and test it. It should look similar to this (of course with your chosen fonts).

Step 4: Create the FLA that loads this content

First, we will create the “fonts_as3.swf”. In this SWF the fonts are embedded for global use all over your website. Create 3 fonts in the library with the settings as shown in this screenshot below.

Step 6: Register the fonts in AS3

Font.registerFont(_myfont1);
Font.registerFont(_myfont2);
Font.registerFont(_myfont3);

import net.kaegi.utils.VarCentral;
var fonts:Array = [];
fonts[0] = ["_myfont1","Bumblebee"];
fonts[1] = ["_myfont2","JanicesHand Regular"];
fonts[2] = ["_myfont3","Gadget"];
VarCentral.getInstance().vars.fontsForCMS = fonts;

In the code above you can see that I use a little class, “VarCentral”. This comes in very handy if you want to store any variables in a central place because you may need them somewhere else in your site. It’s up to you to also use this or do the handling of global vars in your preferred way. The array “fonts” will later be used to replace all occurences of “_myfontX” in the html textfields of the CMS with the corresponding real fonts. This method is very useful, because you are able to change fonts without disturbing the saved html text.

Step 7: Create the SWF that loads the CMS slots

Please download this FLAs. I have commented everything so it should be self-explanatory. It also contains the font_as3.fla. Note that you may have to adjust it to your own fonts.

Below just a reminder that the Flash CMS backend is written in AS2 and your website is written in AS3:

.