Fleb 2.0: the Flash Website Framework has grown up!

December 7, 2010 by: Christian

Again some time has passed and while working on different projects I have continuosly improved the Fleb Framework. I have finally found the time to wrap it all up and release the next version. Besides a lot of small improvements to the global navigation (which is part of the Fleb Framework), I have integrated a few things for your convenience. Okay, let’s start with the new features:
.

iPhone / iPod / iPad Detection

Flash on the iPhone? Unfortunatly not (not yet… I’m an optimist :-) ). But anyway, I believe it’s the wrong way to have the exact same site on a mobile device and in the browser. Not only is the screen smaller and loading takes longer, I personally have other priorities when surfing on a mobile phone. So let’s take this as a challenge and provide different content when someone visits your page on an iPhone. All I did is provide a detection in index.php which redirects users of iPhone & Co. to a special page: iphone.php. In this file the same xml structure is parsed, but this time the navigation is displayed in a flat hierarchy to provide as much room as possible for the content itself. Check it out! I have used some iPhone specific settings so that the zooming is disabled for example:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

You only need to adjust the CSS files to your needs.

Here 2 links with useful and detailed infos:
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
http://fuint.com/2010/09/when-developing-websites-you-have-to-...
.

Automatic width and height handling with full browser scrolling

I’ve decided to implement this into the Fleb Framework, because I use it in every website to be sure the user can see all content, even if he/she has a small display. I prefer to use the built in UI Scrollbars, because that way I get the most flexibility.
A few times I used other solutions that make use of the native browser scrollbars, but I was not happy with that, because there is no way to scroll just a part of the website: it always scrolls the whole embedded SWF. Check out this deeplink of the Flebsite demo and scroll. Watch the word “BASE” at the upper left corner and also the black gradient at the top. It stays where it is, exactly what is wanted. This would not be possible if the browser scrollbars were used. Or another example to make it more clear: only the content is scrolled, the header and footer don’t move. :-) By the way: of course you can set if and how much the scrolling will ease in and out.

But if you prefer it the other way (SWFFit for example): simply remove a few lines of code to get rid of the SiteScrollbars class and use your preferred solution.
.

Font Manager

Another nice thing is now part of the Fleb framework: dynamic font loading. This is a really cool method I’ve found some time ago. Here is a post about it. It’s ridiculously simple: Just create an empty FLA file, add one or more dynamic textfields to the stage and select the fonts, compile, done. All you have to do in Fleb later is telling the framework where the fonts are:

Core.getInstance().init(this, pH, nH, "fonts/fonts.swf", "fonts/style.css");

You can also load the styles at the same time. The font manager will be accessible from anywhere like this:

import net.kaegi.utils.VarCentral;
var varcentral:Object = VarCentral.getInstance().vars;
tf.styleSheet = varcentral.flebFontManager.getStyleSheet();
tf.text = "<span class='font2'>" + txt + "</span>";

.

Print Manager: multipage printing out of the box


In the flebsite demo, I have integrated the printing solution to show how you can use it in a Fleb site if needed. It is a very handy method to provide the possibility to print out your website or parts of it. The Print class will adjust the size, accordingly to the choosen paper orientation, to always fit the content to the page (or pages, if multipage printing is desired). This class is simply imported in your Fleb main document class. It’s there for your convenience: if you don’t need it, just remove the import and the printing methods. To get more info about this class visit this post and the documentation.

.

And now?

You will find all of this in the demo site. You can download all files and analyze them. To get started and download the framework, please visit the documentation.

Cheers (and merry christmas if this was my last post in this year…)
Christian

Comments

52 Responses to “Fleb 2.0: the Flash Website Framework has grown up!”
  1. Christian says:

    I have not tried it, but I think it would be cumbersome.

Leave a Reply

You must be logged in to post a comment.