Introducing the Fleb Framework!
August 1, 2009 by: Christian
Hi everyone! I have created my own framework to build pure flash websites, or short: flebsites 
. Let me introduce the Fleb Framework. But why another framework when there is the wonderful Gaia Framework around? Let me explain: I really like the Gaia Framework, I have used it for my last websites. As I wrote in my very first post in the Gaia forum, I had my own framework coded in AS2 and I was thinking of porting it to AS3. The point was that this AS2 framework was kind of a mess, so porting it to AS3 would have been like coding it from scratch. Then I discovered Gaia and all of a sudden I could jump into an AS3 framework and did not have to code my own. But there were two things I missed in Gaia: a global navigation and a more advanced SEO technique. As time went by I solved both problems: creating a global navigation system and a SEO solution for Gaia. But there was still something else I had to do same hacking: multi language support. The fact that I have never really used the Gaia panel, which is one of the core features, was yet another reason. Whenever I start with a new website, I like to reuse code from the previous one, that is why I didn’t use the Gaia panel which always scaffolds a new and empty setup I have to edit. Please don’t get me wrong: Gaia is a wonderful framework which is available for AS3 and AS2 (Fleb Framework is AS3 only), I still highly recommend it for everyone (for example, there is no context menu “out of the box” in Fleb), but it simply did not match my way of working anymore. (And I just could never get used to the “/#/home” in the address bar…)
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.
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
Looks very promising Chrisian! I can hardly wait.
Indeed it would be nice if you could avoid JSON and use XML instead for the data source. More straightforward.
off topic: Wouldn’t putting the data in a mySQL database be even better? The last project I used your Gaia-SEO approach for (vdbtheater.com), has a rather large datasource file (32 kb). I was wondering if putting these data in mySQL tables would speed up loading a bit. I might try that.
And one more thing: the alternative html content on your demo site looks a lot better than I’ve managed to make so far. I am not particularly good at css/xhtml design. But I was wondering, is it really necessary to make this html content look pretty?. Who is ever going to see this content apart from the google robot? Not the visitors with an old flash player installed because they get the express-install-adobe-popup instead. What remains are the very few visitors with no flash player installed at all, or those with javascript disabled. Or am I wrong?
Cheers,
Pieter
Hi Pieter
The way I’m using the datasource file is different in the FLEB framework. Before, I used “switch – case” etc. to provide the content. In FLEB, you don’t have to touch datasource.php. It only serves kind of a switch to load the right content (-> see [page].php in the graphic above). In these page.php files you can have what suits best: query a MySQL database, parse an XML file (thats what I did in the Fleb Demosite) or just plain data (using JSON or whatever). The way you work with FLEB is completely up to you. It is only a suggestion and reflects the way I use to create websites. You are right, it is not so important how the content is designed, the SE-robots don’t care. But I use to show my clients this version to explain that the flash site is fully indexable, and I like it if it looks nice and clean in the no flash html version. The nice thing about FLEB is that you can just use the HTML/CSS layout as it is, but if you like, you can customize it freely if you like.
Cheers, Christian
Thank you Christian. I took a new look at the overview graphic. It makes more sense now. Very clever framework indeed!
Pieter
nice work you have here.. im looking forward for some idea of yours in the future.. cheers!
Hey Christian,
What a great solution. What can be done with flash is much more exciting than a static site and I look forward to play with your framework.
IMHO: for me it’s way more easier to work with XML files rather then MySQL. Since it’s a pain for end users to install application.
Regards,
Jack
Hi Jack
I think it is not a question of what is easier to work with: XML or MySQL. I also prefer XML when the data is not getting to large, but when I want to be able to filter and/or search data in a larger setup I prefer MySQL because it is way much faster. If I have let’s say an image gallery containing 50 pics and descriptions it is just nicer to handle it using MySQL.
Hi there!
Looks very promising!
I’ve tried the demo site and I’m getting some php-error msgs.
Warning: include(content_source/) [function.include]: failed to open stream: Operation not permitted in /home/www/web78/html/flebsitedemo/structure.php on line 231
Warning: include() [function.include]: Failed opening ‘content_source/’ for inclusion (include_path=’.:/usr/share/php’) in /home/www/web78/html/flebsitedemo/structure.php on line 231
I’m in Firefox – the older 3.0.13.
Right now I’m working on using the SWFAddress SEO solution together with GAIA. I’ve come to a problem that I have a really hard time solving. That is when a user answers no to the expressinstall uppgrade – the problem occurs when a user tries to navigate the alternate content after answering no to that question. The site goes blank – I’ve noticed that the same problem occurs in the demo site here as well. Anyone has any idea why this is the case? Obviously you would like the user to be able to see the alternate content if they choose not to upgrade. I’ve solved it by having the SWFObject code beeing dynamically inserted with php. The same goes for the optimize js code. Then I use php-sessions to have the SWFObject and optimize code beeing inserted or not inserted to the page. But still though – if cookies are turned off they won’t see the alternate content at all. I personally think that this is a far more common scenario than someone having js turned off. Some people who are on big corporate computers are not allowed to install flash but a lot of times they have an older version that some tech guy has installed for them but they aren’t allowed to upgrade. A lot of sites – not only flash sites that use SWFObject but classic html-sites depend heavily on js so I think most people have that turned on anyway.
Niklas
Hi Niklas
Thanks for the feedback! It seems that on your server it is not permitted to include files. Or does it help if you chmod the folders to 777? I’ve had this once some time ago. I asked the hosting provider to enable it. He did and all was fine. In the original code in index.php from the SEO download of asual.com the datasource.php is not included but called with fopen(). This was a bigger problem on certain servers so I started using include, which works more often. Let me know.
I have to admit I have not spent a lot of time on the situation when a user cancels the express install procedure. One solution would be to provide the content in a minimalistic way in a older flash plugin. But that can get too time-consuming. Definitly something to dig deeper! Thanks for pointing this up!
Christian
Hey Christian!
I think you missunderstood me. I get the error messages when I visit your demosite…
Hmm – I will look more into php sessions for handling the problem with expressinstall…
Niklas
Niklas, your right, I didn’t notice it was on my server (web78) and that the file was missing (content_source/….). I tried to produce the error, but I couldn’t. Maybe you can tell me exactly in which situation this occured. BTW, I’m currently at the expressinstall thing…
Christian
Hi Christian!
Well – it happens everytime I visit your demosite with Firefox the older 3.0.13 but also in IE6, IE7, IE8, Safari & Chrome. Am I the only one seeing these messages? That’s just weird..!
Very cool that you’re working on the expressinstall problem. I’ve solved it using php-sessions & settng a php variable from the expressinstall. I use the expressinstall fla from SWFObject’s latest release. Instead of calling the getURL(“javascript:swfobject.expressInstallCallback();”); I send a variable like so: var c = new LoadVars(); c.offvar = “off”; c.send(“index.php”, “_parent”, “POST”); I’m just like you when it comes to trying eliminate every case people have against flash so I guess that some critics probably would say that this requires cookies enabled which is bad thing but still I think most people have them enabled… Very much interested in what you might come up with!! I’ve tried sending the session via url only if a user clicks no om expressinstall but I haven’t succeded in making this work – I’ve managed to make it all the time but I don’t like that – besides that would mean that you would send some ugly looking URL’s to the bots…
All the best, Niklas
Crap – now I realised that I’m having another problem.
When a user enters the site via a subsection like for example:
http://www.yoursite.com/contact/ the expressinstall won’t start – but it does at http://www.yoursite.com/contact
Once again the site goes blank…crap
Niklas
Hey Niklas
I think I found a solution for the expressinstall problem. In short I did this: I modified the expressInstall.as to reroute the user to another php file, called “noflash.php”. In this noflash.php I use a parameter “swfaddress” to feed structure.php with the correct url. Please have a look: http://www.flashcmsframework.com/flebsitedemo/noflash.php This has another advantage: No session vars/cookies are needed and you can show your clients the no-javascript site without turning off javascript. There are even no links to noflash.php, I have set “noindex, nofollow” so that the BOTs don’t touch it. What do you think about this? Unfortunatly this still does not solve our newest problem you described about the deeplink and expressinstall not showing…
SOLVED!
Niklas, it’s working perfectly now. I had to wrap expressInstall.swf into swfaddress like this: < ?php swfaddress_resource('/flebExpressInstall.swf'). If you enter the site on a deeplink like this http://www.flashcmsframework.com/flebsitedemo/en/products/turbo-series/ and you have an old flash player installed, the expressInstall shows up as it should. If you hit cancel, the noflash version is displayed. Let me know hat you think!
Cheers, Christian
Oh – wow!
I think this is a great way of solving this!!
I’ve tried to wrap my head around this problem for quite some time! Impressed!
I will have a look at this tomorrow!! I feel a bit stupid not thinking of the idea of reroute to another php-file via expressinstall swf !!
I’m not quite sure what you mean by “In this noflash.php I use a parameter “swfaddress” to feed structure.php with the correct url.” Are you talking about the flebframework files? Things might be clearer once I have a look tomorrow… Thanks for sharing this!!
Best, Niklas
Niklas, could you please check if you still get the php errors? I think I fixed it. It works like this: If you enter the site without a deeplink (/), the site has to know which language you want. If it cannot be detected in the url (for example “/de/” or “/en/”) it uses your browser system language. In my case, this is “de”, that’s why I got no errors. If no language is found, the first language will be used, which in the demosite is “en”. But I believe on your system it’s none of these, right? So a system language was found, but it could not be matched to “de” or “en”. Now I fixed it, so if there is no match, the first language will be used. Sounds complicated, right?
Let me know if this solved it! (Please say yes… 
)
BTW: I will release a version 1.1 of the framework which includes your express install thing. I also have cleaned up the php files more. I will upload it probably tommorow.
Yeah – it’s fixed.
I’m on a browser language that is swedish…
Niklas
really ambitious work! hope you will have success with it! There should be more people doing so…
Hi Christian
Super nice work here..
However I want to ask about the navigation structure.. would it be possible to have a “landing page” like GAIA, like the example with gallery here: http://www.turtlebite.com/downloads/global_navigation/gaia/#/gallery
Thanks
//peter
Hi Peter
No problem at all, just set the xml attribute of “btnAutoActivate” of the desired button to “true”.
http://www.turtlebite.com/docs/global-navigation2-xml#btnautoactivate
Cheers,
Christian