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

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

For example, there is not much code to setup the easiest case:

// import classes
import net.kaegi.navigation.NavigationManager2;
import net.kaegi.events.NavigationEvent;

// create Navigation: parse the xml file, create and layout buttons
var navigationManager:NavigationManager2 = new NavigationManager2(this, "global_navigation_demo1.xml");

// Listen for events
navigationManager.addEventListener(NavigationEvent.MC_ACTIVATED, btnActivateHandler);
function btnActivateHandler(event:NavigationEvent) {

trace("id: "+event.params.btnID);
trace("dispatch: "+event.params.dispatch);
}

The global navigation uses TweenLite to do the movement in a vertical navigation setup, when the new buttons need space (see example Number 9 in the SWF above). I recommend using TweenLite/TweenMax for your animations when fading in and out the button groups.

Download global navigation

.