Search Flex Samples

High Resolution Image Viewer In Flash 8 it's Great

Here is a neat application widget that I created recently. A friend of mine at Revolution Web Design approached me about creating a Flash application to be used in displaying floorplans for a marketing site he is developing for a home builder. I said "sounds great", and started developing it. What is really cool about it is not necessarily what it does, but HOW I put it together. It is very generic and very configurable, so it can have a wide aray of uses. The wide array of uses definitely increases the coolness factor.

Here's the prototype for the initial purpose:
Floorplan Viewer

And here are some customizations I made on it:
Satellite Image Viewer
Image Viewer With Captions

Yes, they're all the same application, just configured for different purposes. You'll see that they all have the same elements, and function in exactly the same way. All of the configuration is in an XML file, so it's really easy to customize.

Here's basically how it works...

  1. The application loads and reads the configuration file. This tells the application where to get content from, what colors to display, what messages should be displayed, whether or not to cache urls, etc...
  2. The user selects an item from the list, the image is loaded into a Loader class object. In the "progress" event of the loader, the progress bar gets updated.
  3. The "complete" event of the loader shows the image and hides the scrollbar.
  4. The user can zoom in/out & reset the picture using the controls on the top right. The user can also zoom in by using the wheel on their mouse. The trick to zooming in is this: Increasing the _xscale or _yscale property on a Loader increases/decreases the size based on the position 0,0 of the object. In order to make it appear to zoom from the center of the object, you will actually need to shift the x,y position with respect to new size of the loader, and its old x,y position. Just have your resize function shift the x,y position after it increases the zoom scale. Presto: it now appears to zoom in from the center.


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples