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

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.

.

How does it work?

It takes the content (movieclip or sprite), resizes it (keeping its aspect ratio) so that the width fits to the width of the selected paper format (landscape or portrait) and calculates the number of pages.

Try it out in the SWF below:

You can find the documentation and download of all source files here.

Here is a real example that makes use of the multipage printing class.

.

I have created some pictures of the CMS when logged in. In these screenshots I gave everything a name. I will post more infos as time comes. And I will set up a structured documentation here.

[View with PicLens]

So, again: Thanks for the patience and stay tuned!
Christian

.