Building Interactivity

Perhaps the most important aspect of this project that must be done well in order for this widget to work effectively for users is the interactivity that it allows.

First set of fundamental interactions:

1. Scroll wheel zoom.
2. Drag and Drop.
3. Up down,left and right pan with keyboard arrows.
4. Double click on node to go to external hyperlink.


1. Given the potential size of the maps generated in the node maps the user must be able to zoom in and out of the generated image. To accommodate this I have built a zoom control into the mouse scroll wheel.

2. When the user holds down the left mouse button anywhere on the map they can drag the map within the window to recenter areas of interest.

Combined with the scroll wheel zoom function users can recenter the map then zoom in on a new location (like google earth)

3. some users prefer to use the keyboard as their primary method of input. To accommodate this I have Incorporated simple motion controls using the arrows on the key board. in future versions I plan to include more "keyboard shortcuts" but that will have to wait until i have decided on all the "fundamental interactions".

4. One of the limitation with using flash as a development tool for user interfaces is the fact that flash does not allow you use the right mouse button or "right click" to control a swf. So in order to create a "intuitive" interface I decided to go with the other obvious interaction the "double click". This allows the map to sense when the user presses the left mouse button twice "quickly" and then opens up an external browser window to a designated web page.

This is where i hit my first big programming road block!

Each of these interactions individually is relatively simple to achieve in flash using actionscript 2.0 the problem arises when you combine them together and have to ask flash to handle multiple different "events" and distinguish between them.

In order to do this you need to create things called listeners to listen for events when they happen and inform the program so that it can respond.

Remember that each of the nodes in flash are movie clips. Well in AS2.0 there is node way to create listeners for mouse events that work directly with movie clips. A simple work around would be to convert the movie clips into button objects in flash and use button listeners but with the potential for over a hundred nodes on screen at any one time manipulating them as buttons in flash would be extremely cpu intensive.

To solve this problem I had to use actionscript 3.0. With AS 3.0 you can use event listeners for any object you want (movie clip, button ,sprite) as adobe has moved actionscript over to an object oriented language.

Of course this meant I had to completely over haul the prototype i had developed in AS 2.0 and rewrite it for AS 3.0. so preceded another week of debugging and hair pulling until i had worked around a number of road block that AS 3.0 introduced.

But the good news is that the new features that AS 3.0 brought with it allowed the code to node only compile faster it runs way more efficiently in the flash player. As it runs conditional statements such as "IF this do that" and "for" loops much quicker. Since the majority of my code is comprised of such elements it meant a vast improvement. To add to that adobe introduced the "sprite" which is like a slimmed down "movie clip" object that has only one frame. It has all the functionality of a movie clip but is way more CPU efficient to manipulate in the player using actionscript.

so all in all a necessary step but man what a pain in the butt. Total time spent developing this project so far 4 weeks solid!