When I started writing this editor, I wanted to create something to handle xml files for the global navigation. It quickly turn into something much more complex, and even better, much more flexible. In a next post I will show how you can turn this editor into a specialised editor for Gaia site xml files, for example. By creating so called configuration xml files you can use this xml editor for any of your xml files.

Simple but flexible CMS
I have also implemented a rich text editor. In the final version you will be able to install this editor on your server and turn it into a simple but flexible CMS with individual user management. Easy but effective. More later.

Stay tuned!
Christian

I finally have launched a website on which I can show that I actually use all the stuff that I write about in this blog. I have also integrated my upcoming online xml editor, which is almost complete. Well, it actually is, but as usual I have to setup the documentation etc. But you can already have a look and try out the basic functions: www.online-xml-editor.com (User: demo, Pw: demo). For the menubar of the XML editor I used the global navigation. As you can see, it is also very suitable to create application-like menus!

BTW: All content of the turtlebite.com flebsite is managed by the Turtlebite Flash CMS. Have a look at this video:

www.youtube.com/watch?v=KQrFRPzPNCw

Online XML Editor
I will write a special post for the XML editor itself soon!

Cheers,
Christian

I know this has been a long discussed topic. And I’m not going to re-invent the wheel. I have been searching for a long time now and have found many ways to dynamically load fonts at runtime in AS3, there are a lot of good solutions out there. But yesterday I found a font manager class and WOW, that’s a really smart method. So all I did was wrapping it in another class, to make the handling even easier. Here it is.

You should start with this tutorial for the basic font loader manager class by etcs.ru (translated). Excerpt: “What the fontloader does is reading the swf bytecode and extract all fonts from it and registers it to the flash font class.”

What I did is creating a wrapper class for this, that makes the handling even easier and traces the CSS output file to the output window in the Flash IDE, so you can just copy it and paste in into a new style.css file.

Here is the code to load the fonts and listen to the events:

import net.kaegi.utils.FontManager;
import net.kaegi.events.FontManagerEvent;
var fontManager:FontManager = new FontManager();
fontManager.addEventListener(FontManagerEvent.LOAD_PROGRESS, onFontManagerLoadProgress, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_COMPLETE, onFontManagerLoadComplete, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_ERROR, onFontManagerLoadError, false, 0, true);
fontManager.init("resources/fonts.swf", "resources/style.css")

function onFontManagerLoadProgress(event:FontManagerEvent) {
	trace("FontManager LOAD Progress... "+event.params.type+": "+event.params.perc+"% ("+event.params.bytesLoaded +"/"+event.params.bytesTotal+")");
}
function onFontManagerLoadComplete(event:FontManagerEvent) {
	trace("FontManager LOAD Complete!");
	trace(event.params.displayFonts);
	trace(event.params.cssFileOutput);
}
function onFontManagerLoadError(event:FontManagerEvent) {
	trace("FontManager LOAD Error!");
	trace(event.params.msg);
}

Here is the output of the css trace, ready to use: You can copy and paste it into a new style.css file, then edit it to your needs.

.font1 {
	font-family: "Verdana";
	font-size: 12;
	color: #000000;
	/*font-weight: normal;*/
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font2 {
	font-family: "Arial Unicode MS";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font3 {
	font-family: "Helvetica CY BoldOblique";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	font-style: italic;
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

Here are all the source files.

Some more useful links and resources about this topic:
http://etcs.ru/pre/FontLoaderDemo/
http://www.thetechlabs.com/tutorials/flash/dynamically-loading-fonts-with-fontloader-and-applying-styles-with-css-stylesheet-in-as3/
http://lab.revoke.ca/2010/02/as3-external-font-loading-class/
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html

Even though I don’t need it in the font loading method described here, while searching the web I found a nice site to get unicode ranges: http://www.tillschneidereit.de/unicode_range_tool.html If you are embedding your founds using the EMBED tag you might find it useful.

OK, now back to daily business!

Cheers,
Christian

But what the heck has “Dinner is served” to do with the Fleb Framework?
When I build a flebsite, I like to think of it as a table ready laid. If I want to have dinner, I will always find 3 things for sure: the table itself, a plate and some food on the plate. (Some of you might argue now that you can also eat on the floor without a plate, holding the food in your hands… Right. And you can also build websites by using SimpleText or Word… ) Okay, back to the point. Oh, I forgot two more things: the tablecloth or placemat and the menu card. But lets start with the table.

The table
Normally, you do not spend a thought about the table itself, but it is really important. If you remove it,  you will end up in a mess. It always has to be there, but once you have placed it somewhere in your house or flat, you probably will spend more time on the things you put on that table than the table itself. So to me as a flash website designer, I like to see the table as the necessary PHP/CSS/HTML/SEO construct I don’t want to care about every time I build a new flebsite.

The tablecloth or placemat
For a decent dinner, before I put a plate on the table, I want to have a tablecloth or at least a placemat. To me, the tablecloth/placemat represents the basic settings of a flebsite: all the things that are most likely not going to change during a session, like the background image or color, a footer, a logo, a sound on/off switch etc. The tablecloth stands for a fullscreen flebsite, whereas the placemat represents a fixed size flebsite. The placemat, for example, may or may not be moved around with the plate, whereas the tablecloth will certainly stay in place when I scale the table (ups, sorry, I mean the browser window…)

The plate and the food on it
The plate is the place where the action is happening: During a dinner, you may have a drink, followed by a salad or soup, then the main dishes and finally a dessert. The plate may or may not change for every course, but the food certainly does. You can share one plate for salad and soup (maybe you are having dinner at home and just don’t have more plates… ), while the main dishes are being served on different plates (even the shape and colors of the plates may change). The dessert will be served on a nice transparent glass plate.
Think of the plate as your content page. The SWF displaying your data. The food is the actual data source. So you can have one plate that holds different food (the dynamically loaded content). If the food (the content) will be completely different (e.g. a change from a contact form to a gallery), than you might want to change the plate as well (the SWF). Than you have the cutlery that may or may not change with the plate: You can use the same fork for the salad and for the main dish. But you surely prefer a smaller spoon for the dessert than for the soup.

Got the point?
While the table will not change at all and the tablecloth and placemat will remain the same during a “dinner session”, the plates, cutlery, glasses etc. will change, being moved around and emptied/filled up a lot.

One more: the menu card
To make this metaphor complete I like to think of the global navigation as the menu card. When you hold it in your hands, it is floating above the table. In your mind you “navigate” through the dinner by selecting your food just like clicking on the buttons of a website.

…and the last one: the waiter or “the brain”
Because I later refer to “the brain” when talking about “main.swf”, think of it as the person who knows everything about your dinner: the waiter. While your guests are the visitors of your flebsite, the waiter knows what to put on which plate, where to place it on the table, in which order the dishes have to be served, who has salad and who has the soup, who is vegetarian and has the risotto, when it is time to light the candles, clean up breadcrumbs, dim the lights, pump up the volume of the background music, help you with the chair if you need to go to the ladies’/men’s room, inform you about an incoming telephone call, when to ask you if the coffee may be served and so on….

Fleb Framework 1.2

What’s new?
As written in the introduction, the whole framework has been cleaned up and restructured. Now there is much less code in main.as and you can concentrate on the design etc… As the Fleb Framework is based on the Global Navigation, I have moved the navigation settings into structure.xml. So now the whole website structure is defined in a central place.

Flow
When base.swf (the “tablecloth/placemat”) is loaded, it starts loading main.swf (the “waiter” or “brain”). A preloader in base.swf shows the loading progress, main.swf will use 50% of the preloader bar. When main.swf is loaded, the navigation is initialised, which will use the other 50% of the preloader bar so it will reach 100% when main.swf and the navigation are completely initialised. Main.as will also create the pageHolder movieclip (the “plate”) and the navigationHolder movieclip (the “menu card”)

Examine the demosite

Example 1: Landing on the homepage of the site
Launch the demosite: http://www.turtlebite.com/flebsite_demo_v2
As you can see, there is kind of an intro before the navigation is animated into place. Of course it is up to you to have an intro. This is just an example.

Example 2: Deeplinking
An intro is nice if the user enters the site via the homepage. But what about a deeplink?
Try this:  http://www.turtlebite.com/flebsite_demo_v2/en/products/turbo-series
Now the user wants to get quickly to the content, so the intro is skipped.

Example 3: Deeplinking with parameters
Maybe you have an image gallery on your site. You want to be able to deeplink to a specific image, but, because the gallery gets updated often, you cannot define all links in structure.xml. They need to be dynamic.
Check this: http://www.turtlebite.com/flebsite_demo_v2/en/service/some/more/info
The address defined in structure.xml is “/en/service/”. Everything which is beyond this scope will be stored in an array called deeplink. That way you can set up an event listener in your SWF and do whatever is needed, for example loading a certain image. This even works without flash, so you can catch the deeplink in your PHP file to feed the search engines:
http://www.turtlebite.com/flebsite_demo_v2/noflash.php?swfaddress=/en/service/some/more/info

Show your clients the “no flash” version
Maybe you’ve noticed the noflash.php part in the previous sample link above.
Try this: http://www.turtlebite.com/flebsite_demo_v2/noflash.php
This is the site the user will see if he cancels the express install procedure. But at the same time it is really useful to easily show your clients the work “under the hood” without having them deactivate javascript.

Transitioning pages
Launch the demosite: http://www.turtlebite.com/flebsite_demo_v2. If you navigate to “About us”, then “Service”, you see that the pages are just fading in and out. Now click on “Static content”. Here the previous page will not only fade out, but also move to the right, then there is a pause, just before the “static content” page slides in from the left.In fact it is very easy to set up different transitioning modes.

SWFObject 2.2 / 2.1
While using the new SWFAddress version 2.4, there are problems with SWFObject 2.2 when you cancel ExpressInstall in Firefox on PC: you will end up with a blank screen. This issue is not occuring with SWFObject 2.1, so I will continue using this version for the time being.

How to start?
Download the Fleb Framework from the download section. It also contains the complete source of the demosite. Dive into the files and visit the documentation, I have spent some time updating it.

Update 9 december 2010: Be sure to visit this post about version 2!

Happy coding!
Christian (the flebber….;-))

Test it here (select example Nr. 16)

Visit the download section and the changelog for more details.

Cheers,
Christian

Unfortunatly when the users aborts the express install he will end up with a blank screen. Even if the user was shown the no javascript alternative content we would run into problems because of SWFAddress, which would again start the express install at the time of the next click in the navigation menu. For Fleb, this needed some rethinking.

SWFObject 2.1 together with SWFAddress 2.3
At first I wanted to upgrade to the newest SWFObject 2.2, but I ran into 2 problems. First, when I have SWFObject 2.2 installed, when I test in Firefox (3.0.13 and 3.5.2) on the PC I get a blank screen and an error in firebug: “Error calling method on NPObject“. So I switched back to SWFObject 2.1, which I have not encountered any problems on the tested browsers. And there is even another issue: The combination of SFWObject 2.2 and SWFAddress 2.3 causes FlashVars to be NULL. Read this for more info about this issue. Conclusion for the time being: I will stick to SWFObject 2.1 and SWFAddress 2.3.

expressInstall.swf changed to flebExpressInstall.swf
Here is what I did: In expressInstall.as I changed the function installStatus like this:

function installStatus(statusValue) {
switch (statusValue) {
case "Download.Complete":
// Installation is complete.
break;
case "Download.Cancelled":
getURL(baseURL+"/noflash.php");
break;
case "Download.Failed":
getURL(baseURL+"/noflash.php");
break;
}
}

If the user hits “No”, he will be rerouted to “noflash.php”, which is in fact the same page as index.php, but without SWFAddress. See the graphic below.

This page is not linked to from anywhere and has the metatags “noindex, nofollow”, so the search engines should not index it. This page is only for the user to have at least something if he cannot upgrade to the needed flash player. At the same time this is a great way to show your clients the NO FLASH version of their new flash website, without having them deactivate javascript (which they normally don’t have a clue how to do it… )

robots.txt
In this release version 1.1 of Fleb I also have added a robots.txt file, to prevent the search engines from indexing certain files. For example SWFs. Read this post for more info about SWFAddress and robots.txt.
Here is what it looks like:

User-agent: *
Disallow: /base.swf
Disallow: /main.swf
Disallow: /noflash.php
Disallow: /structure.xml
Disallow: /structure.php
Disallow: /content_source/
Disallow: /content_swf/

More improvements
Because there are now two php files that use the same info texts (index.php and noflash.php) I didn’t want to have redundant data, so I have created a new file named “noflash_text.php” with those pieces of text. Just have a look at it to see what I mean.

Making things variable
I took everything out of index.php that you had to set (e.g. flash version, background color) and placed it in structure.xml. Now you don’t have to touch the index.php file anymore, it’s all variable and defined in structure.xml. In the download files I have also added a structure.xml file that contains only one language, for you to compare.

Removed code from Main.as
I have placed all code for language handling in the navigationManager2 class, now Main.as is much clearer. The code that is left there has to be there. I mean, I could take even more code out and place it in seperate classes, but that would probably get in the way of your coding style. I want the Fleb Framework to remain as clear as possible. I have put a lot of comments in Main.as to explain every step. Please let me know if you have problems or suggestions.

You can download the Fleb Framework here.

Cheers,
Christian

What is the Fleb Framework and who needs it?
It’s an open source front-end framework for AS3 to help you build pure flash websites with full SEO support. It is based on the Global Navigation for Flash and the SWFAddress SEO Solution. You define the whole structure of the website (navigation, title, description, keywords, assets etc.) in an XML file which is parsed by your SWF files for your flash site and PHP files for the no-javascript SEO version of your site.

What does “Fleb” stand for?
Very simple: It is just a short form of “flash web” -> “fleb”. I prefer to build flebsites now…

Concentrate on Flash
All is done automatically: You don’t have to think about the layout of the no-javascript website any longer, just concentrate on the content, keywords and description in your structure.xml file. By using the global navigation you can create almost any navigation setup you can think of. Check it out.

Test it!
Let me demonstrate it. Start the Fleb Demosite. Navigate through the site and observe the address bar. Also use the browser back/forward buttons. At any point, reload the site to see how deeplinking is working. Speaking of deeplinking, try this: Add some additional parameters to the url, for example like so:

http://www.flashcmsframework.com/flebsitedemo/#/en/products/ultra-power/1/2/3/

As you can see the parameters are split into an array. Whenever there are parameters in the URL an event is dispatch which you can listen to from anywhere and react accordingly.

SEO, please!
Now comes the interesting part: Turn off JavaScript to see what the search engines get.

The navigation is created automatically by parsing the same XML file that is used for your flebsite (structure.xml). You can easily adjust the colors of the sidebar, header, content background etc. in a separate css file, if needed. But remember, this no javascript version will almost no one ever see! . Please navigate around and watch the address bar. As you can see, the “#” has gone, you have clean URLs for the search engines. Also look at the source text of the website to see the content of the metatags “keywords” and “description”. Now turn javascript back on and reload. SWFAddress will automatically insert a “#” and you will be taken to the right location inside your flash website.

Since my last post about the fleb framework I have merged the 2 PHP files “seonavig.php” and “datasource.php” into one file, “structure.php” to make it easier. Please visit the docs for an in-depth explanation of each file.

Open and very flexible
Besides the use of the Global Navigation you are completely free how you create/code your site. The Fleb Demosite (included in the download) is just a suggestion and shows the way I use to create websites. The main part of your code will be in main.swf. This is the place where the navigation and SWFAddress are initialized and where the loading/unloading of content is organized. Anyway, there are some techniques and classes involved I like to explain. Remember, it’s up to you if you use these or any other solutions.

Debugging
I use one of these 3 debugger solutions. Each one has its advantages.
Alcon
Arthropod
DeMonster

Global event handling & global variables
Some time ago I discovered this post by Reyco1 about a centralized event system. This is very useful for events that need to be used all over your project. For example, in Fleb there are 3 of those “global” events: onDeeplink, onLanguageChange, onStageResize. These event classes are included in Fleb. Based on this concept I have created a very simple class called VarCentral, which is a singleton that stores any variable you can globally access from anywhere in your project (an object, for example):

 VarCentral.getInstance().vars.hello = {a:1, b:2}

Loading assets
For simple cases, I use a slightly enhanced class  found in Colin Moock’s Book “Essential Actionscript 3″, LoadChildAsset. That is okay for most of my needs. If you need a more sophisticated class, you have to check out the BulkLoader from Arthur Debert. It’s awesome!
And this also looks very promising (though I have not used it yet): Queueloader by Donovan Adams.

Browser window resizing
If I need a script that resizes my flash movie automatically if the browser window size changes, i use swffit.

Tweening
TweenLite/Tweenmax
GO
Desuade Motion Package (not really tested yet, it’s quite new but looks very promising)

Cheers!
Christian

What is the Fleb Framework?

A front end flash framework. It focusses heavily on SEO, based on the example found at asual.com. Because SEO was (and still is) always a discussion point wether to create a website in flash or html. I always try to do everything in flash, so I had to find a way to wipe out the arguments against flash. Check out the movie below to get an idea and play with the demosite online.

www.youtube.com/watch?v=WQRa8G_7gqI

Overview of the Fleb Framework

In order to use the framework you need to enable mod_rewrite in .htaccess file. It uses PHP and XML. Just read on for more details.

Fleb Framework Overview

1. index.php

The index.php embeds base.swf. It uses SWFObject to detect the flash plugin and SWFAddress for URL rewriting (by using mod_rewrite in .htaccess). Every request is rerouted to index.php.

2. base.swf

This is the base of your website. Its whole purpose is to load the main website (main.swf, see 3). It contains only the neccessary setup and a preloader. This SWF should be kept as small as possible in order to display the preloader very soon.

3. main.swf

This is where the “brain” of the website resides. In main.swf the global navigation is initialized, the content (pages) is handled (preloading, fading in/out, crossfading, unloading etc.) and event handlers are added (SWFAddress, navigation, language etc.). All is open for you to finetune, extend and so on.

4. [content].swf

Your actual content. I’ve put the name in square brackets because it could be any name, like “about_us.swf” or “products.swf”. It’s completely up to you how you create these content SWFs.

5. structure.xml

This is the “plan” of your website: It contains the title, description, keywords of your website as well as the navigation structure and the source XML files with the content. Here is an example:

<structure>
<site>
<title>Flebsite Demo</title>
<description>This website is a pure flash website, or short: a flebsite!{Dies ist eine reine flash website, oder einfacher: eine flebsite </description>
<keywords>flash,website framework,cms</keywords>
</site>
<navigation>
<button id="home" btnSWF="mainBtn.swf" btnPosX="0" btnPosY="0" btnSpacingX="5" btnAddLabelSpace="10" btnLabel="Home{Startseite" btnStayActive="false">
<data swf="" source="home" seosource="_page.php" title="Welcome to %site%{Willkommen! - %site%" address="/en/{/de/" keywords="%site%" description="%site%"/>
<yournode test="any data"/>
</button>
<button id="about_us" btnSWF="mainBtn.swf" btnAddLabelSpace="10" btnLabel="About us{Über uns">
<data swf="_page.swf" source="_about_us.xml{_ueber_uns.xml" seosource="_page.php" title="About us - %site%{Über uns - %site%" address="/en/about-us/{/de/ueber-uns/" keywords="about us,%site%{über uns,%site%" description="about us - %site%{über uns - %site%"/>
<yournode test="hello world 1">This is text of yournode 1</yournode>
<yournode test="hello world 2">This is text of yournode 2</yournode>
</button>
</navigation>
</structure>

6. [contentData].xml

Holds the data of your content pages. This XML file is loaded in the SWF and also in PHP for SEO. I prefer to use XML whenever possible instead of JSON/PHP to store content because XML can be loaded directly into an SWF while testing in the Flash IDE. Here is an example:

<page>
<title>About us</title>
<body bgColor="699306"><![CDATA[ABOUT US: But I must explain to you how all this mistaken.......]]></body>
<pic url="images/b6nature_animals_sea000.jpg">This is a nice description of the image for SEO!</pic>
</page>

7. seonavig.php

This file is included in index.php. It parses structure.xml and creates the navigation for SEO. With correct indentation etc.

8. datasource.php

datasource.php is also included in index.php. It parses structure.xml and stores the navigation data in an object. It than compares the SWFAddress value to the parsed address values of structure.xml and loads the corresponding content source file (page.php, see next point) for SEO.

Update 08/06/2009: Please have a look at this post. I have merged “seonavig.php” and “datasource.php” into “structure.php” to make it all clearer.

9. [page].php

As in point 6 I have used square brackets because these PHP files can have any name. Usually there is always a pair of a PHP and an XML file. I use this to parse the content XML file for SEO. page.php is only used to load data for SEO, either by parsing the XML file, by a MySQL query or JSON etc.

Conclusion

The Fleb Framework will be available open source very soon. As with my other code, I will create a documentation for this. The FLAs are already well commented, so there will be a lot of information in the code.

Stay tuned!

Christian

Check out the following 3 screenshots.:

Global Navigation XML + Gaia site XML together in one file

As you can see, this is how it used to be up to now (Global Navigation version 1.57a). The attributes of both Gaia and Global Navigation together in one file.

Gaia site.xml without Global Navigation

This is the normal Gaia site.xml without the Global Navigation.

The new Global Navigation XML source file

This is the new Global Navigation navig.xml file. Yellow marked you can see that the new attribute “id” is the same as the page IDs of the Gaia site.xml above. The root node can be of any name, but the “navigation” and “button” nodes have to be named like that.

Ok, but what is so exciting about this?

The fact that you don’t have to handle the button IDs by yourself is one thing, the other is that this is one of the last pieces of my own Flash Website Framework called “FLEB” which is based on the Global Navigation. One of the key features of this framework is SEO. Stay tuned!

Visit the docs to download the source files and classes.

.

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:

.