New Article in WDDJ

The latest issue of Web Designer and Developer's Journal is now available online, and features an article by yours truly. You can check it out here: http://pdf.sys-con.com/MX/Expert.pdf. I'm on page 30. Enjoy!

New Publication on Devnet!

Keun Lee and I recently completed an article for Adobe Devnet, entitled "Building RIAs from front to back – Part 2: Layout beyond the standard container in Flex 2". Be sure to check it out at:

• http://www.adobe.com/devnet/flex/articles/frontback_pt2.html

Enjoy!

-Andy

Census Mashups Using StrikeIron Web Services and Yahoo Maps in Flex 2

Not too long ago, StrikeIron was in our office demonstrating some of the services that they provide... If you weren't aware, StrikeIron is a provider and distributor of web services. They have a ton of services that you can purchase for various tasks, and they can also resell services that you have developed. One of their free services is the "Super Data Pack"; a free set of web services (free up to 10,000 hits per month) that encompass a broad range of functionality, and are great for creating mashups or extending the functionality of your applications AND they have a crossdomain.xml file, so it works with Flex!

I thought it would be a good idea to take some of their services and put them to use within a Flex application, and here's what I came up with...


Launch Census Dashboard Mashup

It is a mashup using StrikeIron's Zip Code Information Web Service, StrikeIron's Population Demographics By ZIP Code Web Service and Yahoo Maps to give detailed information for a specific US zip code. I find it to actually be a really cool tool. You can drill into the data to see regional age distribution, renter/owner distribution, and ethnic diversity, among other population/housing demographics. All of the data is based on United States Census information. I wish it showed income distribution for the specified areas, but the free web services do not contain that information. This tool could be an especially handy research tool if you are in the market for a new home. I have noticed that some zip codes don't return any demographic data (which I assume is not in the Census data), but for the most part it is very accurate.

When putting this together, I started with a basic application that called just one service... You can check it out here. In order to use StrikeIron's services, you need to include your login information in the SOAP header. This isn't difficult, but was a little tricky at first. In order to access the services, you have to create a soap header and attach it to the web service instance. Here's what I did:

Web Service Instantiation:

<mx:WebService id="ws" 
 wsdl="http://sdpws.strikeiron.com/sdpCensus?WSDL"
    useProxy="false">
 <mx:operation name="GetCensusInfoForZipCode" 
  result="onResult( event );"
  fault="onFault( event )" />
</mx:WebService>

Soap Header Modification:

private function onCreationComplete() : void
{
 //add the LicenseInfo parameters to the web service SOAP header
 var qName : QName = new QName( "http://ws.strikeiron.com", "LicenseInfo" );
 var licenseInfo : XML = <LicenseInfo>
    <RegisteredUser>
     <UserID>userid</UserID>
     <Password>password</Password>
    </RegisteredUser>
   </LicenseInfo>;
 
 var header : SOAPHeader = new SOAPHeader( qName, licenseInfo );
 ws.addHeader( header );
 sendData();
}

One thing to watch out for... When you try to log in with invalid credentials, you will not get a HTTP 400 error code. You will get a 403: Forbidden code. When that happens, you cannot see any error messages from the server through the Flex environment. You get an error message in Flex stating "Error in socket". In order to accurately debug and figure out what was going on, I had to use Ethereal (a protocol analyzer) to intercept the http traffic and see the error messages.

• Launch Dashboard Mashup
• Launch Basic WebService Demo
• View Basic WebService Demo Source
• Download Basic WebService Demo Source

Feel free to contact me with any comments or questions at andrew.trice[ at ]cynergysystems.com. You can find out more information regarding StrikeIron's services by contacting Dave Nielsen at dnielsen[ at ]strikeiron.com.

Named Colors In Flex

Have you ever run into the scenario where you are using data from a legacy html-based system in a flex application, and you have data that isn't really formatted for flex? I have, and it can get to be quite annoying sometimes, but there is always a workaround. Well, in this case I needed to convert web-named colors into their numeric equivalient. I created a simple util class that allows you to do a lookup by name (non case sensitive) to convert the named color to its numeric equivalent. It also allows you to pass in a numeric value and get a hex string out of it. It's actually pretty handy, and I figure others can benefit from using it too, so here it is... Feel free to contact me with any questions or comments at andrew.trice[ at ]cynergysystems.com. Enjoy!

• View Application In New Window
• View Source
• Download Source

You can also find this code on the Flex Cookbook site by Adobe.

More Fun With Sound Visualizations

Happy New Year Everyone! I hope the new year is treating you all well. I decided to start my blog posts this year by continuing from my last post from 2006. If you didn't read it, its just a simple holiday-themed mp3 player with basic waveform visualization. I decided to play around with the visualization some more with this experiment. I created a base visualization component, and then created peak, waveform, and frequency visualization components that extend it. This was really a lot of fun to work on. I haven't added any effects or bitmap filters to it yet; this was really intended to play around with the SoundMixer.computeSpectrum() method for different sound types and to experiement with FFTMode = true (Fast Fourier Transform), which returns frequency spectrum data instead of the actual waveform data. It is very cool to visually see the relation of the waveform of a particular sound to the visually represented and audible frequencies. Here's what it looks like:



Or, you can launch the experiment. All you need to do is select a sound type, and then click on the "Play Selected Button" button.

Basically, I set it up so that you can select 5 different sound types (some are low frequency, so you might not hear on regular computer speakers. others are ear-splitting high frequencies, so be sure to control the volume):

• 1000 Hz Sine Wave
• 85 Hz Sine Wave
• Pink Noise
• a frequency sweep (frequency changes from low to high - 20Hz --> 16000 Hz)
• music

You can change the number of bars on the frequency visualization and you can also change the colors of the left and right channels. As I mentioned before, I created a base visualization component that the others extend from. This component adds the event listeners that are necessary for the other visualization components. If you are wondering why I did this, it is for code reuasability. All the other components would require this, so why not create a base component so that you don't have to put this code in all of the visualization components.

BaseVisualizationComponent.as

package com.cynergysystems.controls
{
 
 import flash.events.Event;
 import flash.utils.ByteArray;
 import mx.core.UIComponent;
   
 public class BaseVisualization extends UIComponent
 {         
  protected var spectrum : ByteArray;
           
  public function BaseVisualization() {
   spectrum = new ByteArray();
   addEventListener(Event.ENTER_FRAME, drawVisualization);
  }
            
  protected function drawVisualization(e:Event):void
  {
      //abstract function -- must be implemented in subclass
  }
 }
}

In all of the subclasses of BaseVisualization component, I override the drawVisualization function to actually draw the visualization.

In the waveform visualization, I set it up to draw a series line of lines to follow the shape of the waveform defined by the result of the computeSpectrum function. In the peak visualization, I looped over all of the values for each channel in result of the computeSpectrum function, and I used the highest absolute value per channel to draw rectangles that show that peak value for each channel. When doing the frequency visualization, I used FFTMode = true on the computeSpectrum function. According to the docs, "setting this parameter to true causes the method to return a frequency spectrum instead of the raw sound wave". The docs also say that the output of the computeSpectrum function should be in the range -1.0 to 1.0. The final result looks really cool and it is very cool that you can do this from within flash, but I am confused b/c I definitely got values greater than 1.0 when using FFTMode = true. I think the highest value that I saw (through trace output) was around 1.1. I searched the internet and found some blog chatter that this was not working properly in the beta version (Flash Player 8.5), but the frequency analysis seems to be working. If you take a look at the frequency sweep sound file, you can see the value move up the frequency spectrum (left to right) as you hear the frequency increase.

I also started playing with the drawing methods of the waveform visualizations just for fun. In my source code distribution thre's a cross waveform (left channel horizontal and right channel vertical) and a solid waveform (the value below the waveform is filled, similar to an integral in calculus).

Corss Waveform:


Solid Waveform


I hope you enjoy it... I did :-)

• Launch Application
• View Source
• Download Source

If you are looking for some other good visualization components, check out Andre Michelle, Ben Stucki or check out some of the Flash visualizations at theflashblog.com. I'm sure there are others out there, but these should be a few good ones to get you started.