Turtlebite's Blog » mod_rewrite

Fleb Framework 1.0 released!

Christian — Thu, 06 Aug 2009 14:25:42 +0000

Ok, 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

Introducing the Fleb Framework!

Christian — Sat, 01 Aug 2009 12:53:05 +0000

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.

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:



Flebsite Demo
This website is a pure flash website, or short: a flebsite!{Dies ist eine reine flash website, oder einfacher: eine flebsite 
flash,website framework,cms

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:



About us

This is a nice description of the image for SEO!

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