Check it out: www.online-xml-editor.com

Happy coding,
Christian

I’ve been asked a few times how to set up a navigation where some groups are decoupled from each other. Let’s say, you have a main navigation on the left side, and when you select a menu item, show the sub navigation on the right side. What you have to do in such a case is reparenting the buttons. By default, they are all inside the same movie clip. But of course you can easely take them out and move them where you need them. Check it out here, Example Nr. 18. Just download the example files in the download section and examine the code inside the FLA file.

Another request was: How can you change the button label at runtime, let’s say at roll over? Check it out here, Example Nr. 17. Again, the FLA file of it is in the demo files download.

Be sure to download the newest classes, version 2.16, in order to get the features mentioned above.

Happy navigating!
Christian

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

And something completely different: For those of you who sent me an email on saturday 3 december 2010, please send it again, my harddisc crashed and I have lost some mails…

Have a look at this screenshot:

As you can see, there is a loaded Gaia site.xml file. It’s not really convenient to only read “page, asset, page, page, asset, page…” and so on. In the case of a site.xml file of Gaia it would make more sense to show the content of the attribute “id” instead of the plain node name itself.

Let’s look at the next screenshot:

It is the same site.xml file, but with a few significant differences: Now the configuration file is loaded (notice the green bottom bar), the nodes are better labeled and you can distinguish “page” and “asset” nodes by there color. In the node attributes window, you can see that there are much more attributes available. The first three are actually used (“id” and “src” are required ones), the others (light grey) are just one click away if needed.

Check it out:
I have set up an extra url: http://www.online-xml-editor.com

If you want to check out the configuration files, click “login“, then enter user=”demo“, password=”advanced”
In case you are lazy like me and want to automatically load the Gaia configuration file, enter user=”gaia“, password=”gaia”
I’ve added 3 site.xml examples. Be sure to import your site.xml files too!

For in-depth information, be sure to visit the documentaion of the Online XML Editor.

You will also find a configuration file for the global navigation and some example files under “File -> Load XML”.

Happy coding!
Christian

When I started writing this editor, I wanted to create something to handle xml files for the global navigation. It quickly turn into something much more complex, and even better, much more flexible. In a next post I will show how you can turn this editor into a specialised editor for Gaia site xml files, for example. By creating so called configuration xml files you can use this xml editor for any of your xml files.

Simple but flexible CMS
I have also implemented a rich text editor. In the final version you will be able to install this editor on your server and turn it into a simple but flexible CMS with individual user management. Easy but effective. More later.

Stay tuned!
Christian

I finally have launched a website on which I can show that I actually use all the stuff that I write about in this blog. I have also integrated my upcoming online xml editor, which is almost complete. Well, it actually is, but as usual I have to setup the documentation etc. But you can already have a look and try out the basic functions: www.online-xml-editor.com (User: demo, Pw: demo). For the menubar of the XML editor I used the global navigation. As you can see, it is also very suitable to create application-like menus!

BTW: All content of the turtlebite.com flebsite is managed by the Turtlebite Flash CMS. Have a look at this video:

www.youtube.com/watch?v=KQrFRPzPNCw

Online XML Editor
I will write a special post for the XML editor itself soon!

Cheers,
Christian

As Fleb itself is based on the global navigation, it was easy to add another navigation bar for a restaurant entry. In the screenshot below you can see two separate navigations: one at the left side, which is for the main site and another one for a restaurant entry. This navigation xml is created “on-the-fly”, so it is really flexible.

Using Fleb was fun, because I could concentrate on other things and let Fleb do the rest. A restaurant can even use the content for there own website. They can choose from many different colors. This is very convenient, because they only have to edit content in a single place.

Cheers,
Christian

I know this has been a long discussed topic. And I’m not going to re-invent the wheel. I have been searching for a long time now and have found many ways to dynamically load fonts at runtime in AS3, there are a lot of good solutions out there. But yesterday I found a font manager class and WOW, that’s a really smart method. So all I did was wrapping it in another class, to make the handling even easier. Here it is.

You should start with this tutorial for the basic font loader manager class by etcs.ru (translated). Excerpt: “What the fontloader does is reading the swf bytecode and extract all fonts from it and registers it to the flash font class.”

What I did is creating a wrapper class for this, that makes the handling even easier and traces the CSS output file to the output window in the Flash IDE, so you can just copy it and paste in into a new style.css file.

Here is the code to load the fonts and listen to the events:

import net.kaegi.utils.FontManager;
import net.kaegi.events.FontManagerEvent;
var fontManager:FontManager = new FontManager();
fontManager.addEventListener(FontManagerEvent.LOAD_PROGRESS, onFontManagerLoadProgress, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_COMPLETE, onFontManagerLoadComplete, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_ERROR, onFontManagerLoadError, false, 0, true);
fontManager.init("resources/fonts.swf", "resources/style.css")

function onFontManagerLoadProgress(event:FontManagerEvent) {
	trace("FontManager LOAD Progress... "+event.params.type+": "+event.params.perc+"% ("+event.params.bytesLoaded +"/"+event.params.bytesTotal+")");
}
function onFontManagerLoadComplete(event:FontManagerEvent) {
	trace("FontManager LOAD Complete!");
	trace(event.params.displayFonts);
	trace(event.params.cssFileOutput);
}
function onFontManagerLoadError(event:FontManagerEvent) {
	trace("FontManager LOAD Error!");
	trace(event.params.msg);
}

Here is the output of the css trace, ready to use: You can copy and paste it into a new style.css file, then edit it to your needs.

.font1 {
	font-family: "Verdana";
	font-size: 12;
	color: #000000;
	/*font-weight: normal;*/
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font2 {
	font-family: "Arial Unicode MS";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font3 {
	font-family: "Helvetica CY BoldOblique";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	font-style: italic;
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

Here are all the source files.

Some more useful links and resources about this topic:
http://etcs.ru/pre/FontLoaderDemo/
http://www.thetechlabs.com/tutorials/flash/dynamically-loading-fonts-with-fontloader-and-applying-styles-with-css-stylesheet-in-as3/
http://lab.revoke.ca/2010/02/as3-external-font-loading-class/
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html

Even though I don’t need it in the font loading method described here, while searching the web I found a nice site to get unicode ranges: http://www.tillschneidereit.de/unicode_range_tool.html If you are embedding your founds using the EMBED tag you might find it useful.

OK, now back to daily business!

Cheers,
Christian