b-log – betriebsraum weblog

Software Development, Human-Computer Interaction, Projects…

Deeplinking in flash applications

December 13, 2005

Home » Deeplinking in flash applications

There are at least 4 things which are quite easily to do in HTML but rather involved to do in flash: Deeplinking, making your site search engine friendly, the browser back button and bookmarking sub pages.

This article deals with deeplinking because it’s one of the most important points and can be the base for all the other 3 “problems”. In my opinion the last two points (back button and bookmarking sub pages) are nice-to-have features in flash applications but not so essential as deeplinking and search engines…
For example on a flash site I would never try to press the back button because I wouldn’t expect it to work. Chances are relatively small that the creator of the site implemented it (for the sole reason that there’s currently no real cross-browser solution that’s easy to use and has a clean code and api) but of course most people don’t probably know that you shouldn’t press it on a flash-site.

So this is more of a usability problem, as well as bookmarking sub pages. When the people really want to visit your site and content they will try again and they probably don’t press the back button next time.

As I said I don’t think that it’s very usable but that’s how flash sites work and as long as Macromedia (Adobe) doesn’t come up with an solution that’s easy to use by the majority of web developers and integrated directly in flash (player) I don’t see 99% percent of all flash sites with that feature in the future…

So back to the actual title of this article. Why is deeplinking to important? On large flash sites you often have to jump directly to sub pages, either because there are links on content pages that must link to other pages which are or are not in the main navigation or you have to jump to a certain page when a user clicks a link in a newsletter, for example. Another good reason can be tracking and statistics which is simplified if you have a good deeplink system. The following lines aren’t a step-by-step tutorial how to make your site “deeplinkable” but more of a general description how one could do it…and actually this can be applied to almost any flash site:

The most important point is that you have to describe your site in XML. That sounds reasonable because when you get a page id (for example in the form of a GET parameter as in http://www.host.com/index.php?pid=home, which is passed in to your main class via flashVars) you have to know which menu item should be selected, which content has to be loaded and all the other things your site provides. How the XML should be structured depends on you and your site, of course. One solution is to hierarchically nest page nodes to create some kind of page tree, another possible solution is to “linearly” add page nodes to your xml files and don’t nest them (in our case this was easier – each solution has its advantages). So you have one page node with an id-attribute for every single page. Each page nodes describes which content to load, which teasers to show, which submenu to generate etc. Your xml file could look like this:

<mainmenu>
	<item label="home" pid="home" />
	<item label="about" pid="about" />
	<item label="services" pid="services" />	
</mainmenu>
 
<submenus>
	<submenu id="sm_about">
		<item label="Who we are" pid="whoWeAre" />
		<item label="What we do" pid="whatWeDo" />		
	</submenu>
</submenus>
 
<pages>
	<page id="about" parentId="about">
		<main bgimage="img/backgrounds/bg_about.jpg" width="730" keyvisual="swf/keyvisuals/kv_about.swf" content="swf/content/content_about.swf"/>
		<sub>
			<teaser>
				<slot file="swf/teaser/teaser_about_1.swf" width="600"/>
				<slot file="swf/teaser/teaser_about_2.swf" width="600"/>
			</teaser>
			<menu mid="sm_about" xoffset="300" yoffset="100" spacing="10"/>
		</sub>		
	</page>
 
	<page id="services"></page>
</pages>

After you have created your xml file you should write some kind of DataService class which encapsulates the retrieval of your external data. For example create methods like getMainDataById() or getMainMenuData() etc. which return the data in the form your other classes would expect. If your main menu class expects an array, you – guess what – generate an array from your xml data source :). In a previous article about multilingual content I mentioned the XML Shortcuts component by Arul Kumaran. It comes in really handy when you have to parse your xml file. You could make your DataService a singleton so that you can access it everywhere in your other classes/flas. An advantage in writing such a DataService class is that you could theoretically access a completely different data source like a database without changing your other gui classes and develop the gui and menu classes independently from each other in your team.

The next thing is to write a setPage method which accepts an id as a parameter.
In this method you plug in the data of the DataService to your classes, for example: contentManager.data = dataService.getContentDataById(id). Another method could be a selectMenus() method which selects the proper item in all your menus etc.. (provided you wrote some menu classes that accept an index to select an item…) or trackPage(id) for tracking…

In our project we had some back links (back to previous page) and other kinds of links to jump between pages so we wrote a PageHistory class – not to be confused with the browser history and back button. The class generates a flash-internal history
(but could theoretically be well combined with the browser back button thing) and provides methods like gotoPrevPage(), gotoNextPage(), gotoLastPage(), getPageAt() etc.. It works like a browser history, fires an onPageSet event when appropriate and passes the pageId via the event object. That means that you could move your code from the setPage method to the onPageSet event and in your setPage method you just call pageHistory.setPage(id) to keep track of your clicks. You can download the class in our download section.

Another thing to make our life easier was to create a link component. We created it partly for ourselfes to create links more quickly and partly for the people who have to update content swfs in the future, setting and changing the links etc..
You just drag the link component from the components panel onto the stage, style the appearance and set the pageId which page to jump to – all conveniently via the property inspector. Internally the component just calls the setPage method of the main class, so if you need to set a page manually and not via the component you could still call MainClass.setPage(id) or all the other methods the pageHistory provides to navigate back and forth.

So, that basically was our approach to enable deeplinking in flash.
An interesting point is that you actually get deeplinking for free if you are coding modular, dynamic and object oriented. So if you did already, there was probably nothing new for you in this article ;).

FON theme by Leon Paternoster. Powered by WordPress.