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. Nasr says:

    Nice work. Hope to get new docs updated with demo site in it. I still have the problem of loading multiple external swf and workout the swfaddress with them. Website title update but when I put the address in the browser it won’t show up. Do you have a tutorial for that?

    Thank you Christian.

  2. Christian says:

    Hi Nas

    Could you send me a download link to your project files? I’m not sure exactly what you mean by “multiple external swf”. I’ll be glad to help.

  3. pico says:

    First of let me congrat you for this project! I’ve been following the evolution of FlebFramework for a while. Very very nice and clean. I’m working on my first website based on you project, but when it’s on a real server swfaddress won’t seem to work. I mean if I type this url: http://www.turtlebite.com/flebsite_demo_v2/index.php it turns into plain http://www.turtlebite.com/flebsite_demo_v2/#/en. But in my case it remain as …/index.php. Can you help telling me what can be wrong? (I set rewritebase / in .htaccess, too) Thanks!

  4. Christian says:

    Hi Pico
    Sorry for the delay. Can you mail me a link to your project so I can have a quick look? It’s otherwise difficult to pin down the problem.

  5. Flash Effect says:

    Nice job, so this way you make a mobile version of your Flash site.

  6. fakeartist says:

    Hi Christian.

    Can the use the fleb framework to create a site with more than 2 languages?

    An if yes, how? I just another “{” in the structure.xml?

    Thanx in advance

  7. Christian says:

    Yes, just add another “{“. The demosite is already in english/german, so you can go from there.

    Cheers,
    Christian

  8. fakeartist says:

    This upgrades your framework from ‘cool’ to ‘super-cool’!!!!

    Thanx a lot for your quick answer!

    Cheers

  9. fakeartist says:

    Hi Christian (again..)

    I have two questions regarding fleb.

    1. When I try to run fleb using localhost it turns out that the php script returns a whole bunch of errors (index missing etc.). So the only way to run it properly is to disable “display errors” in wamp. Shouldn’t it run even if I have “display errors” on?

    2. Say in the structure xml of your demo that I want to change the default landing language (I want the german to come up first when I enter in the browser the http://www.myflebexample.com. What is the easiest way of doing this? I tried swapping in the xml the en tags with de tags but it doesn’t wok. What am I missing here?

    Thanx in advance for your feedback.

    I really enjoy working with fleb. I guess if ones fully understands it then create a site becomes a piece of cake.

    Keep up the nice work!

  10. Christian says:

    Hi

    1. I cannot reproduce this. Maybe it has to do with wamp? It shouldn’t, but anyway, maybe you want to try XAMPP? I use it on both Windows and Mac and have never had any problems.

    2. At initial load, the url is checked to see if there is a language (for example http://…/en/…). If not, the website tries to use the language of the browser, if this is also not possible, the first language found in the structure.xml is taken. Have a look at structure.php, line 93 for more info!

    Happy coding,
    Christian

  11. fakeartist says:

    Wow.. You are fast!

    1. Regarding wamp, I installed xamp but it keeps sending the same errors, for example:

    Notice: Undefined index: debug in C:\xampp\htdocs\TESTS\fleb\deploy\structure.php on line 44

    Whatever, I will just turn off error reporting, so no big deal.

    2. That helped me big time!!! I opened the structure.php as you pointed, uncomment line 47 and changed it to this (i didnt want the code to select language based on the operating system):

    $syslang = “de”;

    That’s all! Now it works! No need to swap all the english with the german tags in structure.xml!!! Thank you very much!!!!

  12. fakeartist says:

    Hi Christian!

    In your demo site if enter a german address in the browser, for example

    http://www.turtlebite.com/flebsite_demo_v2/#/de/ueber-uns/

    the menu is in english!!!

    Is it a bug?

    Thanx again

    Cheers!

  13. Christian says:

    Hi

    My second name is “el rapido”… ;-) Thanks for the hint! You are right, I have to check this. Although I somehow fixed it already, because in my site it works: http://www.kaegi.net/de/ and http://www.kaegi.net/en/

  14. Christian says:

    Fixed it! :-) In fact, it was just one line of code: in “src/net/kaegi/fleb/Core.as” in line 434 add “navigationManager.changeLanguage(varcentral.flebLanguage);”. That’s it. (I have also updated the download section: (http://turtlebite.com/docs/fleb-framework-download)

    Cheers!
    Christian

  15. fakeartist says:

    You just made my day!!

    It now works!!!

    Thanx a lot!

    cheers

  16. fakeartist says:

    Hi Christian!

    I know that I have asked a lot of questions and I hope I’m not bugging you, but I really like fleb and want to fully understand it. Thanx so far for all your feedback. You are really helping me.

    I have one more question.

    I am experimenting with the navigation buttons, so I want to see them every time I compile main.fla.

    It gives me error

    ERROR: varcentral.flebStructureXML is undefined. Start base.swf!

    so I see the home page, but navigation buttons are missing.

    I know that I can compile main.fla first and then base.fla, so that I can the see the changes.

    But is there any way in which I can just compile main.fla and see my navigation buttons in action? For testing purposes? So that I can speed up the workflow?

    Thanx in advance

    cheers!

  17. Christian says:

    I know exactly what you mean, in the beginning it was possible to compile just main.swf. But at some point I have given up this opportunity because it started to get messy with redundant code. That’s why there is this message to remember you to start base.swf first. My workflow is like this: I leave a browser window open with the site loaded. Then I compile main.swf, switch to the browser and hit reload. Or, if I really want to get my hands dirty with a cool navigation, I isolate it completely and play around in a separate fla until I am satisfied, then move the navig code to main.swf and structure.xml. You can start with the global navigation examples (http://www.turtlebite.com/docs/global-navigation-home -> Demo & Examples, and Download).

    Hope that helps!

  18. fakeartist says:

    It sure helps!

    I just downloaded the global navigation examples and I am ready to get my hands dirty with them before using them in fleb!

    Thanx again for your feedback!

    Cheers!

  19. fakeartist says:

    Hi Christian!

    I have a little problem understanding something. Your help is needed!! :)

    I want in my Main.as document class, to know whenever I roll over a main menu button.

    So that I ‘ll be able to attach an event listener and do something (let’s say fade in textfield, or whatever).

    I also want to know, the id of the button I’m rolling over (eg. contact), so I can make the appropriate action.

    I tried this

    public function Main()
    {
    …………………………………..
    varcentral.flebNavigationManager.addEventListener(NavigationEvent.MC_MOUSE_OVER, doSomething, false, 0, true);
    }

    private function doSomething(e:NavigationEvent):void
    {
    // how do I find the btn id here?????
    }

    but the compiler says that the varcentral.flebNavigationManager is undefined!

    Why? I thought it was initialized in Core.as.

    Maybe I’m trying to access it before it is initialized?

    I’m at a loss (for one more time).

    Can you please tell me what do I miss here? I already read the section http://www.turtlebite.com/docs/fleb-framework-global-variables, but still in problem…

    Thanx in advance

    cheers!!

  20. fakeartist says:

    Ok! I solved the undefined part of the previous post.

    It turns out that I was try to get varcentral.flebNavigationManager before it was initialized.

    So I inserted the listener above in navigBtnReleaseHandler function in Main.as and now it works!!

    Now trying to figure out how to get the button ID…

  21. fakeartist says:

    Solved the second part of my problem too (about the button ID and properties)!!!

    Turns out that the you need to use the e.params in the event listener function.

    Here’s the code for anyone that came across the same problem.

    varcentral.flebNavigationManager.addEventListener(NavigationEvent.MC_MOUSE_OVER, doSomething, false, 0, true);

    private function doSomething(e:NavigationEvent):void
    {
    trace(e.params.id); // traces the button id
    trace(e.params.btn.x); // traces the button x posision
    }

  22. Christian says:

    Hi!

    The next time I have to first check if you already solved it by yourself before I write a solution…arrgh.. ;-) You were right, I use to move the varcentral.flebNavigationManager part in main.as into “releaseNavigation()”. At that time it will be initialized. And here is the the link to the docs about the events: http://www.turtlebite.com/docs/global-navigation2-events

    Cheers!
    Christian

  23. fakeartist says:

    Hi Christian!

    I have a another question (a bug maybe?).

    I want in my html alternatives, the browser scrollbars to be seen (if the text is too high for example). Right now, in the fleb demo they do not work (in the html alternatives).

    I see that in the index.php you use:

    document.write(‘‘);

    So you basically hide them, right (I guess in order to use the UI flash scrollbars)?

    If I set overflow:auto, then the scrollbars are visible and working in the html version, but they remain in the flash swf too (so I see both browser and flash scrollbars).

    So I wonder. Is there any way so that the browser scrollbars are visible only in the html version, while in the swf version, your UIScrollbars are seen?

    I hope I made my point clear..

    Please help me if you can!

    Thanx in advance

  24. fakeartist says:

    Oops. For some reason, the line code above was delete from my post. Here it is again:

    document.write(‘html{ overflow:hidden;}’);

  25. Christian says:

    Yeah, that’s true. In the flash version, the browser scrollbars should be hidden so only the flash scrollbars are visible. If you start the website with deactivated javascript, the browser scrollbars are visible. It’s working in the demo http://www.turtlebite.com/flebsite_demo_v2/ Or am I missing something?

    Cheers, Christian

  26. fakeartist says:

    Let me be more specific.

    I try this: I uninstall flash (let’s say that a visitor does not have it installed on his system). But I don’t disable javascript (let’s say that the visitor has javascript enabled, but no flash).

    Then when open, for example http://www.kaegi.net, I see no scrollbars when I make the browser window small.

    So, what I want to say, is that the scrollbars do not work, with flash plugin disabled (with javascript disabled they work fine).

    Please tell me if you can recreate the problem (by deactivating adobe flash plugin).

    And I have another thing that has been torturing me the past days.

    Say that I have a menu btn named ‘products’ which children buttons “child 1″ and “child 2″.

    I want, when I click the ‘products’ button, to activate the “child 1″ button.

    Is this possible?

    I tried adding the btnAutoActivate=’true’ to ‘child 1′, but the child 1 page is shown when I roll over the ‘products’ (parent) button. I want it to be shown when I click the parent button.

    I didn’t find this in any of the global navigation examples.

    Thanx a lot for your feedback!

    cheers

  27. Christian says:

    Hi
    Now I see. In fact, I only handled the case when JS is deactivated. If the flash plugin is not active but JS is, then the browser scrollbar will not show. But it should be possible to check this and handle this special case, unfortunatly I don’t have the time right now to take care of this.

    The other thing with the auto activation of the button: btnAutoActivate should work. Do you have a navigation where the submenues show when you rollover or when you click? When you click it should work. But maybe you can send me a link to your navig or project, so I can exactly see what is going on. Maybe I find some time next weekend…

    Cheers,
    Christian

  28. fakeartist says:

    Christian hello again and happy new year!

    Concerning the previous post, I have a navigation where the submenu shows when you roll over the parent button. I want when i click this parent button, the first submenu page to open. But only then. I do not want the submenu page to open when I roll over the parent button.

    Next, I think I found a bug concerning font embedding in the fleb framework…

    Maybe this can save some time to others coming in the same situation.

    I could not embed a font (using css the way you suggest) and I could not find what was the mistake. In your demo it worked ok, but in my code, my font was invisible.

    So after a lot of hours/days of banging my head on the wall, I finally noticed this:

    If, say for example, in “page_embeded_fonts” fla, change the PAGE (top left) static textfield from arial to chickenscratch (the one used in the page title), then, magically, the swf shows this top left work in chickscratch, but DISSAPPEARS the title dynamic text.

    Try it if you want to see what I mean.

    Conclusion? You cannot use in the same page a static textfield and use the same font for another dynamic textfield that uses the font manager. It seems that flash only sees the characters embeded in the static and ignores the font in the fonts.swf file.

    I think it is a FontManager or FontLoader issue. What do you think?

    Cheers

  29. Christian says:

    Happy new year to you too!

    When you have a navigation that shows its submenu on rollover and have autoactivate on, the submenu gets activated. I have never had a situation where I used this and maybe this should be fixed. But I would try this: remove the btnAutoActivate and do it manually. Listen for the MC_ACTIVATED event of the main menu button (http://www.turtlebite.com/docs/global-navigation2-events) and then activate the corresponding submenu button manually (http://www.turtlebite.com/docs/global-navigation2-public-methods#activatebtn). That should do the trick.

    For the fonts: They always have been a pain in flash, I mean, there is always some small pieces that sometimes just don’t work as expected. I’m glad you found a solution fo the moment!

    Cheers,
    Christian

  30. fakeartist says:

    Christian, thanx a lot for your answers. I’ll try your suggestion.

    I think I found some syntax errors in index.php and structure.php. Maybe you want to fix them.

    In index.php:

    In line 137 you forgot a “/” in the end (before the “>”).

    In structure.php:

    In line 226, “kewords” must be “keywords”
    In lines 209, 215, 221, 227, the arguments in the explode functions, should be reversed like this:
    209 $contentArr = explode($languageSplitter,$content );
    215 $titleArr = explode($languageSplitter,$title);
    221 $descriptionArr = explode($languageSplitter,$description);
    227 $keywordsArr = explode($languageSplitter,$keywords);

    That’s all. I hope that helps.

    Fleb rules!

  31. fakeartist says:

    Ah! And one more syntax error (this really messes up seo browser titles, in your site http://www.kaegi.net it worked great but not in the fleb-demo site).

    In index.php, in line 132, there is no $browsertitle variable defined in structure.php (or anywhere in your project). I guess you want to use $title right? By using it it all works great!!! :)

    cheers

  32. Christian says:

    Oh man, you bury me with work… ;-) I’ll do my best and see if I find some time to fix this!
    Thanks!

  33. fakeartist says:

    Correction to the previous post. Setting $title instead of $browsertitle does not solve the problem.

    In fact every page seems to get the title, description and keywords from the last xml node of the navigation page (in the demo case embedded fonts”. At the same time they are returned (in firebug) as something like

    embedded fonts,%site%{eingebettete schriften,%site%

    Christian, I’m puzzled, please help all the fleb lovers out there! :)

    Sorry about all my posts but I really like fleb and want to make the most of it! ;)

    Maybe you could upload a fleb version 1 (the old version) and let me check it out for you (try to find what changed). I guess the kaegi.net is based on the old version right?

    Thanx a lot for all your time!

    Cheers

  34. Christian says:

    Thanks for your bug report, I fixed it all: http://www.turtlebite.com/docs/fleb-framework-download
    Because of people like you the Fleb framework can only get better! :-)

    Cheers,
    Christian

  35. Christian says:

    …and the thing about $browserTitle: that variable is defined in page.php, so it is ok like this!

  36. fakeartist says:

    Wow! That was fast!

    Thanx a lot!

    With the new version descriptions and keywords work great!

    But… Seems another fix needs to be made (more work, Im sorry! :) )

    Titles are empty. Aren’t they supposed to get their values from structure.xml? (as descriptions and keywords do?)

    One more step closer to perfection… And then I think we are set!!!!

    cheers!

  37. Christian says:

    What titles? Can you send me a screenshot or some more infos?

  38. fakeartist says:

    Sure thing!

    Just go to http://www.turtlebite.com/flebsite_demo_v2/

    Disable javascript.

    And notice the browser title. That’s the title search spiders see right?

    Now it is http://www.turtlebite.com/flebsite_demo_v2/

    while it should be

    “Welcome to the Demo-Flebsite”

    See what I mean?

    thanx again!

    cheers

    PS. In your site http://www.kaegi.net if I do the above procedure, all work great!
    PS2. The $browsertitle still does not exist anywhere in you php code (not even in the page.php).

  39. Christian says:

    Fixed! :-) http://www.turtlebite.com/docs/fleb-framework-download

    It had to do with the browserTitle. When I said it was in page.php in fact it was, but not in the download but in my own site “kaegi.net”. I moved it into structure.php so now it should all work as expected. Let me know!

    Cheers,
    Christian

  40. fakeartist says:

    That did it!!! Thanx a lot Christian! You made my week!!!! :)

    Cheers

  41. fakeartist says:

    Hi Christian!

    Emergency question here.

    I try to upload a flebsite in a server that provides PHP4.4!!!!!

    Yes, you read right, PHP4. Ancient history.

    And the most beautiful part? They cannot upgrade to PHP5!!!

    So of course fleb doesn’t work.

    Is there any way to upload it (even in it’s most simple form, without swfaddress redirects)?

    Please help!

    Cheers

  42. Christian says:

    Hi

    Oh, that’s bad! structure.php uses simple_xml to parse the xml files, which is only available in PHP 5 and higher. So I’m afraid, right now I don’t see a solution other then move to a PHP 5 friendly server. I simply don’t have the time to wrap my head around another solution…

  43. fakeartist says:

    Hi Christian. Thanx for your previous reply.

    I have another question.

    In your flebsite demo, when I click the language btn, the FlebEvent.CHANGE_LANGUAGE event is dispatched twice!

    One dispatch comes from function baselinkChange(), the other comes from the public function changeLanguage() (which you call from main). These functions exist in Core.as.

    Why is that?

    The FlebEvent.CHANGE_LANGUAGE should be dispatched one time, right?

    Is this a bug?

    Thanx again

    Cheers

  44. Christian says:

    I have to check this out, I have a site in the pipeline which also uses 2 languages, so I will look at it when the time comes. Right now I’m just too buried with other things… I will get back to this!

  45. fakeartist says:

    Hi Christian!

    I have one easy question (I guess).

    How can I return the id of the parent of my active button?

    I use

    trace(varcentral.flebActiveBtn.parentBtn);

    but this returns the id in the form ‘b_1′, ‘b_2′, etc.

    I want to return the id that I’ve set in the XML. (‘company’, ‘about’, etc.)

    Thanx a lot in advance

    cheers

  46. Christian says:

    Hi
    It’s possible, although a bit hidden. You can use “getParent” (http://www.turtlebite.com/docs/global-navigation2-public-methods#getparent)

    if (varcentral.flebNavigationManager.getParent(varcentral.flebActiveBtn.id) != null) {
    trace(varcentral.flebNavigationManager.getParent(varcentral.flebActiveBtn.id).id);
    }

    Cheers,
    Christian

  47. fakeartist says:

    It works like a charm!

    Thanx a lot!

    cheers

    PS. Did I ever mention that fleb rules? :)

  48. Hi Christian!

    Your framework is so incredible and I really really love it. But I mainly developed on flex builder and flex framework. It has a littte bit difference with flash version. Do you have a version working for flex. If have, it will be so nice for me.

    Tung

  49. Christian says:

    Hi Tung

    Thanks for your words. It is “as it is”, there is no version specifically for flex, sorry.

    Chreers,
    Christian

  50. Hi Christian,

    So can I use module created by flex framwork and load to main by using fleb framework.

    Thanks,
    Tung

Leave a Reply

*