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.”

Use the browser scrollbar
This seems to be the obvious choice. I do this sometimes, and if I do I use SWFFIT. This is a really good solution, but there is a drawback when you use this method: you can only scroll the flash movie as a whole. This is a problem if you want to keep a background image in your flash movie in place and only scroll part of your site.

Use a scrollpane
Because I prefer to have more control, I used to do the scrolling by using  a scrollpane: I just put the whole flash site into a scrollpane. This works fine, I did this in many sites: dlog.ch, saltonatale.ch, marviva.net etc. But it also has drawbacks: I cannot click on anything which is behind the scollpane, and, more annoying: I cannot take control over the scroll amount (at least until today I have not found out how to do it). If the content loaded into the scrollpane contains for example movieclips placed at the far bottom (masks, movieclips placed “off stage” as starting positions of animations etc.), this will make the movieclip too big (height). And you are limited to the frame of the scrollpane: The content is always “inside” (and therefor masked by) the scrollpane which is not always desired.

Use a third party scrollbar
Every now and then I like to use the Advanced Scrollbar from flashtuning.net or the Ultimate Scroller Pro from flashloaded.com, but only to scroll “small things”.

Take full control with the UIScrollbar!
I always thought that the UIScrollbar was for scrolling text only. How wrong I was! Today I do all my scrolling with the UIScrollbar, because you can not only scroll textfields, but movieclips as well. And the best thing is: I can precisly control the scroll amounts. Have a look at the SWF below. Click here to test the mousewheel.

The simple trick is to not assign a scroll target to the scrollbar, but a scroll amount only. Then just listen to the scroll events and scroll whatever you like:

// setScrollProperties(pageSize:Number, minScrollPosition:Number, maxScrollPosition:Number, pageScrollSize:Number = 0):void
var scrollbar_height:uint = 200;
var extra_height:uint = 10;
sb_vertical.setScrollProperties(200, 0, scroll_target.height - scrollbar_height + extra_height, scrollbar_height);
sb_vertical.addEventListener(ScrollEvent.SCROLL, onVerticalScrollHandler);
//
function onVerticalScrollHandler(event:ScrollEvent):void{
scroll_target.y = -event.position + sb_vertical.y + 5;
}

Download the source files here. I have also included the files needed to enable mouse wheel scrolling on the mac.

Update 2009/12/01: Here is a real example of a website using the UI Scrollbar for full site scrolling.

Happy scrolling!
Christian

Before you start

To complete this tutorial it is required that you have installed and tested the Flash CMS. I have used free fonts from dafont.com: “Another“, “Chicken Scratch” and “Hardcore Pen“. Note for Mac users: On my MacBook Pro the fonts do not work in the flash IDE. I had to convert them into Mac True Type format (.dfont) first. I could not find a software for the Mac so I ended up using CrossFont on my old PC for doing this.
While reading this tutorial you might want to visit the case studies for more details. You can find the source files for this tutorial in the download section of the CMS.

Initial situation
Let’s assume some time ago you have created a website in AS3 that contains a “greeting card” like the one in the screenshot above. One day your client calls you to ask if you can make the text on the right side of the greeting card editable…

As the Turtlebite Flash CMS is a back end solution, this can easily be done. This is one of the huge advantages of this Flash CMS: You don’t have to build your website in a certain way or in a special cms system. Just create the website the way you prefer and “plug in” the cms later. Even better: the client gets a simple login to the Flash CMS and is only seeing what is relevant at the very moment: the textfield for the greeting card. No upload buttons, setting buttons or menu items that are not used yet and so on. Just give your client what he has demanded and don’t distract him with a bunch of not (yet) needed functionality. You set the menu on a per user basis in an xml file, but more about this later on.

Let’s integrate the Flash CMS

After you have installed and tested the Flash CMS, there are the following 5 steps that need to be done to integrate the Flash CMS:

1. Analyze the textfield of your FLA file (width, used fonts, colors and styles).
2. Embed the fonts.
3. Define the layout. Information about the textfield (type, width, position, multiline, textstyles, background color etc.) is saved in an xml file.
4. Create the Flash CMS menu. An xml file that contains all the menu items your client will be seeing. You can have a different menu for each user.
5. Create the user account.

Okay, let’s get a deeper look at each step.

Step 1: Analyze the textfield that needs to be connected to the Flash CMS
Open “quickstart.fla” and navigate to the textfield (book -> textbox -> tf). We need the following info:

• Textfield width: 338 pixel (You don’t need to bother about the height, it will later be auto-sized)
• Textfield leading: 2
• “hardcore_pen”, 45 Pt., color: #486401. Let’s call it it “Title”.
• “Another”, 20 Pt., color: #4D5544. Let’s call it “Body”.
• “ChickenScratch AOE”, 22 Pt., color: #000000. Let’s call it “Body Chicken Scratch”.
• The color for hyperlinks is #990000.

Step 2: Embed the fonts for the Flash CMS.

1. Create a new FLA, ActionScript 2. The size of the stage does not matter. Save it as “fonts.fla”.
2. In the library, add 3 new fonts with the settings shown in these pictures:
   
   [View with PicLens]

   

   

   

   
3. In the first frame, copy and paste this code:

   
   _level0.myFontStyle = [];
   _level0.myFontStyle.push({styleName:"Body",font:"_myfont1", size:20, color:0x4D5544});
   _level0.myFontStyle.push({styleName:"Body Chicken Scratch", font:"_myfont2", size:22, color:0x000000});
   _level0.myFontStyle.push({styleName:"Title",font:"_myfont3",size:45,color:0x486401});
   // --------------------------------------------
   _level0.myLinkStyle = new TextField.StyleSheet();
   _level0.myLinkStyle.setStyle("a:link",{color:"#990000", textDecoration:"underline"});
   _level0.myLinkStyle.setStyle("a:hover",{color:"#FF0000", textDecoration:"none"});
   

4. As you can see when you look at the code above, the font information of step 1 is used here to define the font menu for the text editor. Later in the Flash CMS the “Select font style” menu will look like this:
   
   Export this FLA for ActionScript 2. Then upload the “fonts.swf” into your the folder “login” which is inside your CMS folder on your server. There is already a “fonts.swf” file from the basic installation. You can rename it before you upload the newly created fonts.swf if you don’t want to overwrite it.

Step 5: Define the layout.
So far we have installed the Flash CMS, tested it, created and uploaded an SWF with the embedded fonts. The technical part is done. Now the Flash CMS needs to know about the textfield for the greeting card, the size of it, the fonts being used, colors and so on. All of this information is stored in an xml file.

Create an xml file, copy and paste the content below and save it as “slot_layout_quickstart.xml”.

<?xml version="1.0" encoding="UTF-8"?>
<root>
<setup maxRows="15" slotSpace="2" tabChar="§" editRollOverColor="990000" editRollOutColor="CCCCCC" layoutMenuHorizontal="false"/>
<layouts>
<layout label=" Single Textfield "/>
</layouts>
<targets>
<target id="tf" type="text_html" visibility="1" x="0" y="0" width="338" richtext="true" embedfonts="true" multiline="true" align="left" leading="2" textStyles="myFontStyle" linkStyle="myLinkStyle" linkDir="" linkRemovedColor="4D5544" antiAliasType="advanced"/>
</targets>
</root>

Please refer to the docs for a complete description of each node/element of this slot xml file.
Now upload “slot_layout_quickstart.xml” to the server into folder “config” of your CMS installation.

Step 6: Create the Flash CMS menu
Now that the definition of the editable parts (the textfield of the greeting card) are defined, it’s time to create the menu bar for the Flash CMS:

Create an xml file, copy and paste the content below and save it as “cms_menu_quickstart_john.xml”:

<?xml version="1.0" encoding="UTF-8"?>
<menu>
<menuitem label="File">
<menuitem label="Logout" id="logoff"/>
</menuitem>
<menuitem label="Edit">
<menuitem label="Greeting Card" contentSource="greeting_card" slotSource="slot_layout_quickstart.xml" hideContentVersionManager="1" slotNew="0" slotMove="0" slotCopy="0" slotLayout="0" slotDelete="0" bgColor="FFFFFF"/></menuitem>
</menu>

Because our fictive user “john” should only be allowed to edit a single textfield and not being able to add new/move/copy/delete a slot, we have disabled these attributes in the cms menu xml file. Now we need to create an administrator file. Create an xml file, copy and paste the content below and save it as “cms_menu_quickstart_admin.xml”:

<?xml version="1.0" encoding="UTF-8"?>
<menu>
<menuitem label="File">
<menuitem label="Logout" id="logoff"/>
</menuitem>
<menuitem label="Edit">
<menuitem label="Greeting Card" contentSource="greeting_card" slotSource="slot_layout_quickstart.xml" hideContentVersionManager="1" slotNew="1" slotMove="1" slotCopy="1" slotLayout="1" slotDelete="1" bgColor="FFFFFF"/>
</menuitem>
</menu>

Now upload “cms_menu_quickstart_john.xml” and “cms_menu_quickstart_admin.xml” to the server into the folder “config” of your CMS installation.

Step 7: Create the user account(s)
Create 2 user accounts, one for “John” and the other one for the fictive adminstrator of John, “Kevin”. (If you already have users defined from the basic installation, just leave them for now). To do this, start the ServiceCenter -- > “Manage Users”. Click on the screenshots below to see the settings. Note the red arrow: this is the place where you link the Flash CMS menu to a user account. Be sure to activate the accounts by clicking on the “Active” checkbox.

John’s Account:

Administrator’s Account:

That’s it! Now let’s try it out.

Login to the Flash CMS as the administrator “Kevin”:

In the menu bar, click on “edit”, than “greeting card”. We have to create the first slot. Do this by clicking on “Add new”:

A new slot is created with an empty textfield:

Now logout: In the menu bar, click on “File”, then “Logout”:

Let’s see what it looks like for our client “John”. Log in now as “John”. In the menu bar click “edit”, then “Greeting card”. It should look like this:

See the difference? The Slot Navigator and the Slot Menu are missing. That’s because we use different slot layout xml files for user John and for administrator Kevin. John should not be able to move/copy/delete slots etc. and therefor does not need to see the Slot Navigator and Slot Menu. Keep it as simple as possible for the client!

Ok, lets enter some text now. Just lean back and watch the video:

Final step: Load the content of the CMS into the textfield of your FLA!
Open “quickstart.fla” and add this code in the first frame:

// Imports
import net.kaegi.cms.LoadSlots;
import net.kaegi.events.LoadSlotsEvent;
// This info is used in loadSlots. _myfontX in loaded html text will be replaced by the proper fontname.
var fonts:Array = [];
fonts[0] = ["_myfont1","Another"];
fonts[1] = ["_myfont2","ChickenScratch AOE"];
fonts[2] = ["_myfont3","hardcore_pen"];
// Load the textfield
var loadSlots:LoadSlots = new LoadSlots(this,fonts);
// Link style for the textfields
var linkStyle:StyleSheet = new StyleSheet();
linkStyle.setStyle("a:link",{color:"#990000", textDecoration:"underline"});
linkStyle.setStyle("a:hover",{color:"#FF0000", textDecoration:"none"});
loadSlots.styleSheet = linkStyle;
// avoid the slots being drawn. For more info see http://www.flashcmsframework.com/docs/doku.php?id=flash-cms-case-studies#free
loadSlots.drawSlotsEnabled = false;
// hijack textfield events:
loadSlots.hijackTextfieldEvents = true;
loadSlots.setup(pathToCMS, "slot_layout_quickstart.xml", "greeting_card");
loadSlots.load();
// Events
loadSlots.addEventListener(LoadSlotsEvent.TF_LOADED, textfieldLoadedHandler,false,0,true);
// Hijacked Textfield Events:
function textfieldLoadedHandler(event:LoadSlotsEvent):void {
book.textbox.tf.styleSheet = linkStyle;
book.textbox.tf.htmlText = event.params.tf.htmlText;
book.textbox.tf.addEventListener(TextEvent.LINK, onLinkEvent,false,0,true);
}

Your final compiled SWF of the greeting card should look like this:

Conclusion

Of course there is much more to cover. I realised that I have highly underestimated the effort of making a good documentation and how time-consuming it would be. I have put years into this Flash CMS and there are just so many things to explain. But this tutorial should give you a good starting point to get into it. Once you have completed your first project with it I’m sure you will gain speed quickly.

The next tutorial will cover the handling of images. Stay tuned!
Christian

Visit the documentation here.

I will finish the step-by-step tutorial within the next view days, so stay tuned.

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