Introducing SWF Lightbox  ⁸

Posted by James to Flash/Actionscript on August 13th, 2008  

SWF Lightbox allows you to view hi-res images in true fullscreen mode using Flash's StageDisplayState.FULL_SCREEN functionality.

When SWF Lightbox is activated, you can cycle through other images on the page with a mouse click, and press escape as normal to exit fullscreen mode.

Here's a wee demo using SWF Object 2.0 and the default colour scheme:

Please install Flash

And another with a custom colour palette applied to the button:

Please install Flash

Visit the SWF Lightbox download page for v0.2, full instructions, and a list of planned features. Top of the list right now are jQuery and Wordpress versions.

SWF Lightbox originated during a project for London photographer Lee Mawdsley, which demanded a way to view fullscreen images whilst retaining the normal functionality of jpgs that graphic-designer-types love (eg right click and save, or drag to desktop). Because JavaScript-based solutions like Lightbox and Thickbox are limited by browser width, we turned to Flash to make use of the entire screen width.

Vector map overlay for Google Maps  ⁵

Posted by Michael to Flash/Actionscript on June 2nd, 2008  

For a project we're working on, it occured to us very early on that though we wanted the location accuracy of Google Maps, we didn't need the incredible detail that Google provides. We also knew that we wanted to have a more visually customized map.

Unfortunately, the GM API and docs dont give an overwhelming amount of information on how to create custom map types, and even less is available for the Flash API. But something you will realize quickly is that GM requires tiles, lots and lots of tiles, which are traditionally going to be hundreds of individually sliced PNG files.

Fortunately, the Flash API gives us an easier solution. The method used to create tiles (loadTile) returns a DisplayObject. Among other things, that means theres nothing to stop you from creating animated map tiles. The code below uses Bitmap objects, but the principle is the same.

We started by creating a vector map that matched up with the Google map at its most zoomed-out level (there are lots of free vector maps on the web to use as a starting point). This meant we had a 512 pixel wide vector world map. We instantiate the map in the TileLayer class, and from there, we simply used Google's math (256px tiles, 2^zoom number of tiles) to generate all of the tiles. The vector map overlay matches with the Google Map at every zoom from there on—no PNG files needed! Demo with sample code after the jump.
Continue reading