Fleb Framework 1.0 released!
August 6, 2009 by: ChristianOk, it’s ready for release. 
You can download the framework here.
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
Great, Christian! It works splendidly. Thank you for sharing!
There is one thing I don’t understand about the _page.php file. You write: “Usually there is always a pair of a PHP and an XML file”. Should there be a [page].php file for every page?
I guess you’re not going to update your SEO solution for Gaia now you have your own framework, right? Fair enough
It’s just that I like this Fleb method with several XML content files much better than the one with one big datasource file. These xml files would make better Gaia assets than datasource.php because separate files give the possibility for “update bytes in site xml” through the Gaia panel which makes the preloader more accurate.
I’ll give it a try myself. See if I can merge some code to work with my existing sites. Any new project I might as well make a Fleb project!
Pieter
Hi Pieter
By saying that there is ususally a pair of a page.php and page.xml file means that in the SWF I load/parse the xml file directly, whereas in the SEO version I need a php file to parse that same xml file. There can be a page.php for every single page, but i can also be one big file. It’s completely up to you. Sometimes it is not important to split it up in more files, for example when there is not much content. Or if you load content dynamically from a database. You have full freedom to organize your content the way you prefer. Have a look at _page.php in the demo flebsite: There is no need to have more than this _page.php file because I load the xml files dynamically ($node["source"]).
About SEO for Gaia: The concept is exactly the same. This SEO solution is outside of Gaia or Fleb. I wanted to leave the original files of Rostislav (SWFAddress) as much as possible for Gaia. He uses one datasource.php file. All you have to do is, instead of having all content inside that file, use “include” to have separate php files per page.
I hope I could clear things up a bit…
Cheers,
Christian
Thank you, Christian. I get it now, I should have looked better. It is more or less as I thought: one simple _page.php file that parses all the content xml files. That’s perfect, at least when all the content xml’s have the same structure of course.
Pieter
Yup, in fact it’s quite simple: You can start with one page.php file and if it gets to heavy, just create a new file, let’s say, _page2.php. Then simply change the attribute in structure.xml: seosource=”_page2.php”. As I said, it’s all up to you…
Hi Christian,
I think I found a small bug on the demo site. Toggling language and then hitting the back button of the browser returns this:
TypeError: Error #1010: A term is undefined and has no properties.
at net.kaegi.navigation::NavigationManager2/activateBtnByAddress()
Pieter
Hi Pieter
Thanks for the report. I cannot reproduce it, though. Can you tell me the exact steps you did? Anyway, I will integrate a try…catch…finally in NavigationManager2 to prevent type errors 1010.
Hi Christian,
this is all I did:
I visited to http://www.flashcmsframework.com/flebsitedemo
I clicked “About us”
I clicked “Toggle language”
I pressed “back” in the browser. (both safari and FF on OS-X)
Then I got the report in the popup from the Flash debugger player 10.
Pieter
Aaargh. I’m on OS-X too, tried exactly the same and I get no error. I love such errors…
But thanks, I will do the fix I mentioned before and will get back to you.
Thanks!
Even when I don’t get the pop-up, I still get the 1010 error in the “ThunderBolt AS3 Console” (which just shows the content from flashlog.txt).
I’ve been searching for this kind of thing for a long time now. I haven’t tested this yet but it looks very promising. Thank you very much for this.
I still need to migrate to AS3 from AS2.