Rants and raves of a rich internet application developer. Why Flex, Flash & Fusion you might ask? It's because thats what I do... develop flex, flash and coldfusion applications.
Friday, March 23, 2007
More 3D Visualization Experiments
If you didn't check out Keun's last post on 3D Charts and Molecules in Flex, you should check it out, it's VERY impressive. I've also added some more functionality to my 3D audio visualization experiment. Not only is there 3D frequency visualization, but now there is 3D waveform visualization too (And this could easily be used for a 3D line chart!). I'm sure there will be more to come soon. It runs a little slower than my previous example, but there is a heck of a lot more going on behind the scenes, since there are 2 three dimensional scenes. You can check out the latest here:
Recently at AJAXWorld, Keun Lee introduced me to 3D on the flash platform. In the past, I have seen demos of Sandy and PaperVision via other people's blog posts and throughout the web (and was thoroughly impressed), but I never had a chance to actually work with the technologies. Keun has some truly amazing Sandy and PaperVision demos that he is working on, and he inspired me to check it out. Thanks Keun! Well, with 3 1/2 hours to kill on the train ride from New York back to DC, I came up with my first PaperVision3D widget. It's a 3D audio frequency spectrum visualization widget. It's amazing how easy PaperVision3D is to use once you get the hang of it. I based it off of my older audio visualization code from a blog post from January. In my presentation at AJAXWorld, one of the key items that I stressed was the graphics advantages available by using the Flash platform, and this just takes it to a whole new level.
Just select a sound type on the bottom left, and click the "Play Selected File" button. The code isn't quite ready for public viewing, but I wanted to share what I came up with. I'm pretty excited about it. Feel free to ping me with any questions/comments at andrew.trice[ at ]cynergysystems.com.
Last week I created this component just for fun, and now I'm offering it to anyone who stumbles across it. It's a control that will allow you to load an image and interact with it. You can zoom in, zoom out, pan, etc... I had the idea to create it based on a Flash 8 project that I worked on last year. It also shows how you can use Flex effects to create a higher level of interactivity with your components, and how to use component masking. It's really pretty easy to use:
The image loads centered initially at 100% scale. While it's loading, you get a progress update (percentage as a text string), which can easily be updated to be a graphic, or something more dynamic. Once the image is loaded, you can zoom in/out by using the mouse wheel or by using the zoom functions (examples in demo below). You can also zoom in by double-clicking on the image. All of the scaling is done based on the scale of the image, not the actual dimensions, so smaller images may not appear to scale at the same rate as large images. In reality, they do: this is because the scale is incremented by a percentage of the original size. To correct this, I also implemented a "zoomIncrement" parameter. The "zoomIncrement" defines the increment to change the scale each time you zoom in/out. To pan the image, you just click & drag.
I also added another feature that I think is pretty handy: I call it "MouseFollow". When this option is turned on, any zoom in/out by mouse wheel or double-click will use the MouseFollow logic. The mouseFollow logic uses the mouse position to be the point of origin for the zoom. This means that if you hold the mouse over the top left corner, the zoom will zoom in/out based on that top left corner. IF the mouse is in the center of the image, it will zoom into the center. If the mouse is in the bottom right, it will zoom in/out based on the bottom right corner.
Here's a demo application... It is "yet another" flickr viewer. There are so many of these around, and here I go adding another one. :) It uses the flickr rss feeds for the image search (based on image tags), rather than the flickr api. I did this purely to keep the example simple. The rss feeds limit you to 20 results per search, so you can't really drill into the results coming back. It also uses the SuperImage component by Ely Greenfield for the list images, and a customized preloader based off of the version by Ted Patrick. Full source code is available below:
Mouse Wheel does not work on some Macs. I think this is a mac issue or mac/flash player issue b/c I have seen the same behavior on other applications.
Zooming in REALLY far on an image eventually causes it to disappear from the screen. I'm just using the mx:Zoom effect for the zooming. I'm not sure where the bug is... I haven't had the time to track it down.
This code is free, and does not have any warranty, it is offered as-is. Feel free to contact me via email with any questions/comments at andrew.trice[ at ]cynergysystems.com.
New Mapping Mashup Using ESRI, StrikeIron, & OpenKapow
If you haven't used OpenKapow or Yahoo Pipes, you should really look into it. There are endless possibilities of what you can do with those services. Both Yahoo! Pipes and OpenKapow are services that allow you to consume and aggregate data from existing data feeds and web pages, anywhere on the internet, from multiple sources! Both are VERY interesting and VERY powerful and definitely worth a look. I know that OpenKapow has a crossdomain.xml file... I would assume the Yahoo Pipes does too, but I haven't tried it.
I started the new version by trying to find a way to consume data over the internet so that I could type in a U.S. city and state and get a list of all available zip codes for that state. I had seen mention of OpenKapow on Ted Patrick's blog a while back, and figured this was a good place to start (and it definitely was). Browsing their site, I was able to figure out how to make this happen. You need to download their "RoboMaker" software, which allows you to build RSS feeds or REST web services based off of ANY site on the internet. I created a data feed that consumed data from the "Find a Zip Code by City" functionality on www.usps.com. This allowed me pass in any city/state combination to the feed, and would return a list of all available zip codes (excluding PO Box zip codes) in a xml format. You can check it out for yourself here: http://openkapow.com/files/folders/searching/entry7769.aspx.
Once you have the data being pulled back in an XML format, it is very easy to integrate it into Flex. I just used a HTTPService to grab the data form OpenKapow, and displayed it in a datagrid. Changing the selected item on the datagrid triggers the Strikeiron census web service, and updates the ESRI mapping components.
OK, now the actual mashup... The biggest difference in the two mashup versions is that this latest version uses the alpha version of ESRI's Mapping Components. The ESRI mapping components are native to Flex 2. You do not need any special methods or work-arounds to get them to work. I had some problems getting the Yahoo map to behave the way I wanted it to, especially regarding resizing & refreshing data, which are quirks with the Flash 8/Flex 2 interaction over a LocalConnection object. Using ESRI's services also provides you access to their underlying data (which is quite extensive). You have a lot of control over map types (street/satelite/topographical/based on poulation data/etc...) that is very customizable, and be can changed dynamically at runtime.
For quick and easy geocoding, I used the Google Maps API. I set it up so that my application makes a call to Google Maps using ExternalInterface to retrieve latitude/longitude for a zip code using a GClientGeocoder object. On the result of that, the javascript GClientGeocoder makes a call back into the Flex app to update the map.
Same interaction as the last experiment... Pick a sound file in the grid, and click "play selected file". 
