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

Cheers, Christian

Goodbye Servicecenter…
In this release I also got rid of the Servicecenter I introduced in version 4.67. Its intention was to optimize the installation process, but in the end many users had problems with it because of file permission issues. As a consequence I have moved all settings into one file called “config.php”, where you edit all settings. User management is now also handled in this config file, so the table turtlebite_user is also not needed any longer.

«flashcmsframework.com» changed to «turtlebite.com»
And finally, I changed the main domain name from “flashcmsframework.com” to “turtlebite.com”. When I started this blog, I thought it would be all about the Flash CMS. But than came the Global Navigation and the Fleb Framework. And there is another project in the works: an online xml editor. Stay tuned!

I just came across a blog entry by Grant Skinner about BitmapSlice9. This is awesome news for the global navigation. I will check it out and post a sample project soon (ok, as soon as I have time…)

Cheers,
Christian

<preload_cache>
<data file="mainBtn.swf" bytes="63351"/>
<data file="images/b1africanl001.jpg" bytes="16384"/>
<data file="images/b2architecturals018.jpg" bytes="16759"/>
<data file="images/b4architecture_interiors002.jpg" bytes="19810"/>
<data file="images/b6nature_animals_sea000.jpg" bytes="18644"/>
<data file="images/b10mechanics019.jpg" bytes="19458"/>
<data file="images/b12architecture_interiors002.jpg" bytes="16384"/>
<data file="images/b19nature_animals_sea039.jpg" bytes="13505"/>
</preload_cache>

Quick links (more info etc.):
Download the Fleb Framework
XML Attributes (structure.xml in detail)
Fleb documentation

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.flashcmsframework.com/flebsite_demo_v1.2
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.flashcmsframework.com/flebsite_demo_v1.2/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.flashcmsframework.com/flebsite_demo_v1.2/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.flashcmsframework.com/flebsite_demo_v1.2/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.flashcmsframework.com/flebsite_demo_v1.2/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.flashcmsframework.com/flebsite_demo_v1.2. 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.

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

Test it here (select example Nr. 16)

Visit the download section and the changelog for more details.

Cheers,
Christian

The funny thing is, it is really simple if you know the right MySQL syntax you have to use. It is not done by setting the “Default Character Set” of  the database tables to “utf8″, which is what I have tried many times before. You have to add 2 more lines before the query.

In PHP, Instead of this:

//......
$query = "SELECT * FROM table";
$result = mysql_query($query);
//.....

…it should look like this:

//......
$query = "SELECT * FROM yourtable";
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET NAMES utf8");
$result = mysql_query($query);
//.....

I know this may seem too obvious, but at the time I was trying to solve this I just didn’t find the solution. And as I said, I had a workaround that was fine for a long time.

Another small improvement in version 4.71: skip crop/resize picture
I have added a checkbox in the upload section of the CMS, when you crop/resize a picture. It is now possible to skip the first cropping/resizing and therefor upload a picture “as is” (see the screenshot below). After that, you can still define the thumbnail. Why that? I have a client who is very keen on image quality. Even if I set the quality of imagemagic to 100%, the image quality loss was to big for the client, and even worse, the image became to large in file size. So now the client can prepare the image in photoshop, upload it as it is and just use the thumbnail functionality of the CMS to create the thumbnail, where quality does not matter that much.

Download the Turtlebite Flash CMS here.

Cheers,
Christian

You can download the Flash CMS here. Be sure to visit the documentation for further info.

Don’t hesitate to leave a comment or drop me a line if you need help or have questions!

BTW: Merry christmas!
Christian

Here is what the say about themselves:

“We are excited to introduce new informative Topflashcms.com source you could find useful for yourself. You may ask what is it all about? It is innovatory blog from where the users can derive extensive knowledge about various top Flash CMS inventions.

In case you lack essential information, this source thoroughly examines new Flash technologies and consequently issues most effective informational output whether it is connected with diverse Flash CMS platforms, or with professional Flash CMS Templates.

For Flash designers, Topflashcms.com is considered to be a profound set of informative blocks that gives exhaustive explanations of every new Flash novelty. What is also exciting that Topflashcms.com enables the visitors and Flash fans to share their own flash conceptions within submitted guest posts. In addition, this blog, being considerably redesigned, uses modern and clean style approach to make intelligible lay-out execution.

Apart from all above, you can find there functional on-line store with comprehensive variety of top-quality Flash CMS Templates you can purchase at affordable prices.

So, either you are a Flash designer, Flash enthusiast, or a Flash site owner you have a lot of reasons to check out Topflashcms.com.”