Reflections on the purity of the URL in flash-sites

Gone are the days when Jacob Nielsen scolded the flash, because it lacks easy navigation, for example the ability to assign a certain link to a specific page, the Back and Forward buttons, etc. do not work.

Jacob Nielsen, Article - Flash is 99% Unacceptable :

“Visitors to the site move as they like, when they want it. That is why the Web is so convenient to work, despite the presence of other shortcomings. Unfortunately, many Flash-designers limit this freedom of users and turn sites into presentations, which are more like television advertising than an interactive program. It is impossible to “unscrew” the movie back, the Back button does not work ” .
')
This article was written in 1999 and then all these points that Jacob Nielsen mentioned were really difficult to translate into reality. Almost impossible.

On the web on this topic, there is not so much information, and this question is often asked on forums and newsletters:

FlashGuru , article - Effective Flash Navigation and by Michael Antipin , article - Interaction Flash - JavaScript and navigation through a flash site .

As a result, navigation on your flash-site, after reading these lessons, will look like this: http://yoursite.com/#news/2006/08/25

And besides, the “Back” and “Forward” buttons will work (FlashGuru only has buttons. The address bar is not updated).

This article is not a little bit about that - it's about that, but here I want to show how you can make the URL more beautiful (clean). The URL would look something like this: http://yoursite.com/news/2006/08/25 .

Notice the difference with the previous example? Yes, the # sign is absent.
It seems a trifle, but without #, everything is early, agree more nice.

I advise you on this topic to read the chapter from the Artemy Lebedev Surgery:
§ 48. Fighting for clean URL

But my method is not without flaws, alas:

The “Back” and “Forward” buttons work, but only when they are pressed, the html page is completely reloaded. The real update of the address bar, passing requests from Flash, will not occur. But Flash can receive requests from the address bar and, based on them, load certain data. But more on that below.

• Your server must support the .htaccess file (and not only mod_rewrite)
• But of course, there are advantages:
• Undeniable - beautiful and clean URL.
• Supported by all browsers and platforms.
• The method is very easy to implement.

I will try to explain how this works and why you need the .htaccess file for this.

The .htaccess file (according to Wikipedia)

.htaccess - additional configuration file for the Apache web server, as well as similar servers. Allows you to set a large number of additional parameters and permissions for the web server, such as password access to directories, reassigning file types, etc.

.htaccess is a similarity to httpd.conf , with the only difference being that it affects only the directory in which it is located and its child directories. The ability to use .htaccess in a particular directory is specified in httpd.conf.

For details on the .htaccess file, go here - en.wikipedia.org/wiki/.htaccess , as well as to the apache.org website

1) So, create a .htaccess file:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . / - -/index.php [L]

I will not go into details about how it works. In general, putting the .htaccess file with the above typed code into the root folder of your site, no matter what path you write in the address bar, the index.php file that is located along with the .htaccess file is loaded in any way in the same root folder. .

Not necessarily index.php (your server may not support PHP), you can index.htm and index.html. The main thing that your server would know that if the file is index. (N-resolution), then you need to load this or that directory.

I think my idea is already starting to clear up a bit.

In index.php we embed swf, no matter how, you can in the standard way, but you can also with the help of SWFObject (I recommend). It is very important to specify the full path to the swf:

var so = new SWFObject("main.swf", "main", "100%", "100%", "8", "0x000000", false, "high");so.addVariable("app", getQueryParamValue("app"));
so.addVariable("id", getQueryParamValue("id"));
so.write("flashcontent");

So, if you specified just main.swf, then when you query from the address bar, say http://yoursite.com/eng/portfolio/design/my_first_work/ , SWFObject simply would not find main.swf, because the eng directory and portfolio etc. in reality does not exist.

Now, how does main.swf know that it is in the http://yoursite.com/eng/portfolio/design/my_first_work/ directory?

There are two ways:

1. Using javascript ( location.pathname ) and flashvars
2. Directly using ActionScript (_root._url )

I prefer the first way.
The scheme is this - the location.pathname property retrieves from the URL the part that contains the path. It sends the URL using flashvars to the main.swf file (by the way, using JavaScript, parse location.pathname and pass each main variable separately to main.swf. In my example, the location.pathname parsing occurs directly in main.swf):

var so = new SWFObject("http://yourserver.com/main.swf", "main", "100%", "100%", "8", "0x000000", false, "high");
so.addVariable("location_pathname", location.pathname);
so.write("flashcontent");


Well, then in main.swf, through _root , we get the variable location_pathname , say:
_root.location_pathname="/eng/portfolio/design/my_first_work/" and then comes the usual serialization of strings. The process of serialization depends on the structure of your site. For example, I’ll give you the code for the simple function of the Location Serializer function (this is the simplest example):

var location:Object = new Object();
location.pathname = _root.location_pathname
function LocationSerializer(path:String) {
var pathname_str:String = path.substr(1, path.length-2);
var path_arr:Array = pathname_str.split("/");
trace("Language: " path_arr[0]);
trace("Category: " path_arr[1]);
trace("SubCategory: " path_arr[2]);
trace("Id: " path_arr[3]);
}
LocationSerializer (location.pathname);


Based on path_arr[0] , etc., you can send a request to download xml (there are many solutions - you can give a link to a regular static xml, or store data in mysql and display xml on request).
Something like:

loadXML("project.php?lang="+ path_arr[0]+"&category="+ path_arr[1]+ path_arr[2]+"&id="+ path_arr[3])

Naturally you will say - path_arr[0] , [1] , [n...] manually create is not profitable. I agree, for me, for my projects - there is a special class (or rather, a group of classes) that do this. But this is a separate topic for conversation.

In this article, I share the general principles of creating clean URLs for flash sites, the so-called deeplinks. Basically, that's all.
I hope that I clearly laid out my idea - and gave you a reason for reflection.

And the reason for reflection is weight - for example:

1. What if xml was not loaded? Yep, exactly! generate a 404 page.
2. Think about serialization. This is a rather complicated question. Maybe on this topic I'll write an article.
3. How to notify the user that he has moved from the home page to / eng / portfolio / design / my_first_work /?

Here again, two options:

1. Or roughly open the page with getURL (which would entail - a lot of traffic and a long load of main.swf). I strongly advise against using this option.
2. Or create a special panel DIRECT LINK, which stores the current URL of the site. The implementation of this effect can be viewed at thefwa.com

By the way, navigation on thefwa.com functionality is exactly the same as mine:
http://www.thefwa.com/?app=winners&id=6025
The advantages of my example are obvious if it were used on thefwa.com :
http://www.thefwa.com/winners/6025

Easier to type, easier to read. And in general, the URL is clearer, say for the secretary who came to this site. By the way, many people have a question about how to do http://www.thefwa.com/?app=winners&id=6025 . Everything is elementary, using the same SWFObject:

var so = new SWFObject("main.swf", "main", "100%", "100%", "8", "0x000000", false, "high");
so.addVariable("app", getQueryParamValue("app"));
so.addVariable("id", getQueryParamValue("id"));
so.write("flashcontent");

You should read the article in Russian SWFObject - all about SWF implementation, player version detection and ExpressInstall.
Actually everything. Let the URL of your site “be as clean as a baby’s kiss”.

UPDATE : I will use this library — SWFAddress , which solves many problems with navigation (the Back, Forward, etc. buttons).