Flash Debugger in Chrome

Ever since the lovely people at Google have started packaging the flash player into Chrome it's become a little harder to get the debugger version of the player working in this browser. Chrome will default to it's version of the player even after you've installed the debugging version. Here's the simple step you have to take, in Chrome go to:

chrome://plugins

Find the flash player, it should have 2 files as part of it, one is the built-in and the other is the debugger (you may have to click "Details" in the top right to see them). If you haven't installed it yet obviously you just see the built-in, and it doesn't matter the order in which you do install it. The trick is just to disable the built-in player, once you've done that chrome will use the debugger version you've installed.
Continue reading Flash Debugger in Chrome

Simple KML Loader Revisited

Recently we've been using some of our own tools in other projects and found some room for improvement on the KML Loader we developed. In particular we wanted a simple class that could handle all the processing from the loader, adding the resulting overlays to the google map. Also we needed it to load in some of the styles, such as colours and line types.

Example Kml Loader ScreenShot

So we've expanded our KmlLoader class and provided a few additional utility classes.
Continue reading Simple KML Loader Revisited

Open Exisiting Project in Eclipse (Flex)

This one has been frustrating me for a while, I just wanted to open an actionscript project that we have in our svn into my workspace.

Seemed like a simple concept, but I only recently discovered how to do it:

  • Go to File > Import
  • Select General > Existing Projects into Workspace
  • Find your directory with your .project file and select finish

Seems so simple now.

Simple KML Loader

Lately we have been playing around a fair bit with some google flash maps and have been amazed by the power and simplicity of the API. We used it heavily in the ABC Black Saturday site using custom markers with images and even a scrolling grid.

We were faced with another challenge of being able to mark out areas (districts) within Victoria that represented the most affected regions. These regions were sometimes complex and we needed to be able to update them simply and quickly as the need arose. The regions weren't to be displayed directly but used for two major items. Firstly to focus the map on a particular region, by moving the view to the region contained by these districts, and secondly, to assign events/markers to a district by calculating if they were contained within the bounds of the district lines.

The solution ended up being ridiculously simple. We created a shared map on google maps, with shapes defining the districts. We then could export from this online map to kml by grabbing the view in Google Earth link and changing the output parameter from nl to kml. This gave us the map of the districts in a nice kml format.

abc-district-google-map

Once we had the map in kml we needed to load in the objects and create overlays for google maps. Surprisingly there wasn't a simple "load kml" function in google maps, but there are some nice kml parsing utilities in the google map extras library. So we created a kml loader class that loads the kml file, extracts the objects and creates overlays for placement on a google map. Hopefully it can be helpful to others, check it out from the following:

https://github.com/marchbold/as3-gmaps-utils

Usage:

Firstly create the loader and start the load of your kml file. You'll need to add a listener to the COMPLETE event to process the code on completion.

  1. import com.distriqt.gmaps.kml.utils.*;
  2.  
  3. var kmlLoader:KmlLoader = new KmlLoader();
  4. kmlLoader.addEventListener( Event.COMPLETE, kmlLoader_completeHandler );
  5. kmlLoader.load( "your-kml-file-location.kml" );

Once the loading is complete you'll have to re-curse through the object list in the loader, adding the objects to your map. Note the "map" variable in the below should be your google map instance.

  1. function kmlLoader_completeHandler( _event:Event ):void
  2. {
  3. for each (var _object:KmlDisplayObject in KmlLoader(_event.currentTarget).objects)
  4. addObject( _object );
  5. }
  6. function addObject( _object:KmlDisplayObject ):void
  7. {
  8. // It may just be a container with child elements
  9. // so check if there is an overlay
  10. if (_object.overlay != null)
  11. {
  12. // Here you can add the kml object to your map
  13. map.addOverlay( _object.overlay );
  14. }
  15. // Add the children
  16. for each (var _child:KmlDisplayObject in _object.children)
  17. addObject( _child );
  18. }

Let us know if you find it useful.

OSX Tweaks

Here's some essential OSX tweaks / applications that I can never remember and always have to go searching for, so I thought I'd drop them into the one place. I'll update this with more as I remember and find them.

A Quake style terminal - Visor:
http://visor.binaryage.com/
(And you'll need SIMBL for this one)

An open-source package manager (apt-get etc):
Fink

Finder to display full path in title:

defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES
killall Finder

Change Login screen background:

sudo defaults write /Library/Preferences/com.apple.loginwindow DesktopPicture "/Path/to/your/loginwindow.jpg"

Change Finder open to use the return key:
http://www.returnopen.com/

Monitoring system statistics application:
http://islayer.com/apps/istatmenus/

Essential toolbar calendar popup:
http://www.charcoaldesign.co.uk/magical

To stop Finder writing .DS_Store files on network volumes:
defaults write com.apple.desktopservices DSDontWriteNetworkStores true

Quick look from the terminal add this line to .bashrc:
ql () { /usr/bin/qlmanage -p "$@" >& /dev/null & }

Search using Spotlight and show a "Quick Look" of matching files (again add this to .bashrc):
locateql ()
{
locatemd "$@" | enquote | xargs qlmanage -p >& /dev/null &
}

AS3 on the Command Line

As anyone who knows me would tell you, I live by the command line, so I thought I would share an old trick to compile as3 applications from the command line in bash.

The trick here is to use the Flex SDK compiler which is available free from Adobe. It also requires having installed java, which is so common on most machines that I won't talk about installation.

The setup process is fairly simple:

Once that's done you should be able to type mxmlc into the command line and see an error stating you must specify a target file. To compile an as3 file simply use the following:

  1. mxmlc main-app-file.as -o output.swf

Additionally I compile my libraries to my-libs.swc by doing the following:

  1. compc -source-path . -include-sources . -output my-libs.swc

Since this is a flex compile you can also use flex syntax in your actionscript to embed resources in the code. Most commonly I use the swf definition line below to simply definite the frame rate and dimensions of the compiled output.

  1. [SWF(width='990',height='680',backgroundColor='0x000000', frameRate='30')]


Now to use Flash CS3's V3 Components see this post: moock.org

Additionally there are Eclipse tools for actionscript: the rasx() context

SWFAddress on Macs causes weird artifacts

Been working with SWFAddress a lot lately on a few projects, and I'd noticed some weird artifacts appearing randomly on the screen when the address value is changed from a mouse click. Strange boxes appearing for a split second in seemingly random places, etc. After a little bit of testing it was apparent that it only happened on Macs, and was the worst in Firefox.

After some googling, I found a post on the Big Spaceship blog about the issue here - it's all explained in that post, basically a strange issue with Firefox 3 and ExternalInterface calls altering the DOM window. It's not SWFAddress' fault, but it's really apparent when you're using SWFAddress for deep-linking.

One solution to fix the SWFAddress issue, is to add a slight delay on the javascript call using the setTimeout function. Click through the link above, and you'll be able to grab a modified version of the swfaddress.js javascript code with the fix applied.

The other option is to add a slight delay in your Actionscript code, from when a button is clicked to when the SWFAddress.setValue() method is called. I did it this way, and used the Timer class and a 20ms delay, and this fixed the issue straight away.

Seamlessly combining 2D and PV3D

We have often been asked to combine some Papervision 3D components or animations into a 2D site. Seamless integration of the two components is very simple once you set the 3D environment up correctly.

The simplest way is to confine your 3D space to the z-plane (z = 0), and to place the camera at a fixed position as below:

  1. var _cameraDistance:Number = 1000;
  2. camera = new Camera3D();
  3. camera.zoom = 2;
  4. camera.focus = _cameraDistance / camera.zoom;

Once you have this camera in place, anything you add to the z-plane should be to scale with your 2D content.

The last thing you have to take into account is the different coordinate systems in the 2D flash and the PV3D space. PV3D obviously is a 3D coordinate system with the zero point in the center and the positive axes being up and right. In contrast, the 2D coordinate system in flash is centered on the top left of the screen, having the positive axes down and right. This is a fairly easy transformation, requiring a mapping from the center of the stage to the center of the 3D space and then reversing the y axis. Just remember to take this into account when placing your clips in 3D.