Andrew Trice

Wednesday June 10, 2009

Cynergy.Congress - Flex 4 & Catalyst in the Wild

In case you missed Dave Wolf's post earlier today, Dave announced the release of Cynergy.Congress, a directory of the members of Congress, created using the Adobe Flash Catalyst and Flash Builder/Flex 4 workflow. In this post, we will walk through the details of the application, what it does, and how it was created.

Before we get too far into any detail, let's take a quick look at the application itself. The application is a directory of all members of congress (past and present). When it loads, you will see a grid showing all of the active members of congress.

From here you can either click on a member to see details about that person, or you can search all members in congress based on a name search, and filter by "active", "state", "party", or "branch" (house/senate). This enables you to perform varied searches, such as all members of congress throughout history containing the string "lincoln" within their name, or current republican senators from Colorado. Note: there are none, but i wouldn't have known that without using this application :-)

You can toggle between the graphical tile mode, or a data-grid mode, depending on your choice of navigation.

By either clicking on a tile, or double-clicking on the desired row in the grid, you can bring up details about a particular member of congress. This is where things really get interesting... The application aggregates data about that person from multiple data feeds, including that person's recent speeches in congress (with video clips!), that person's name in the news, that person's recent voting history, that person's name as it shows up in political blogs, a picture of that person, and links to their congressional website, and congress profiles. We don't host any of this data. We aggregate it from govtrack.us, metavid.org, and opencongress.org

In the center of the screen, you will see a picture of that member of congress (if one can be located), surrounded by thumbnails of recent video of their speeches in congress (if there is video data regarding that member of congress). If you click on a thumbnail, you will be able to see a video stream of that particular speech in congress.

On the right side of the screen, you will see a customized accordion that contains as much information as we can gather about that that particular person. This is where you will find biographic data, links to congressional website and profiles, committee assignments (only for recent members), term histories, news feeds, blog feeds, and recent voting history. For the news, blogs, and voting history, you can mouse-over an item to see an excerpt or details, and double click on it to be taken to a link containing details about that particular item.

Obviously, we won't be able to gather all of that information for every member congress throughout history. For example, take a look at the screen below... I don't think you will find a lot about Abraham Licoln's recent political activity, but you will be able to link to his congress profile.

On the left side of the "person details" screen, you will see a parabolic list of all the active search results. This allows you to easily switch between details of different members of congress without the need of toggling back to the search results view. All you need to do is move your mouse over the list, and it will scroll automatically based on mouse proximity.

One cool thing you may have noticed is that the background changed slightly between the different views. The features in Catalyst and Flex 4 allowed us to make the application more contextual based on who you have selected to view. Democratic members show up with a blue background, and Republican members show up with a red background. All other parties show up as a neutral color. The new animation framework within Flex 4 provided us with the means to animate color transitions easily and efficiently.

You can test it out on your own at http://congress.cynergysystems.com/

Now, on to the details...

As Dave mentioned, we were engaged with Adobe to evaluate the Catalyst and Flex 4 workflow and provide feedback. The Congress application is the fruit of a 2-week development effort between Aaron Adams and myself. That's a total of 160 man-hours, which isn't much time at all. The Catalyst -> Flex 4 workflow, along with ColdFusion 8 on the backend, enabled us to create a stunning application in almost no time at all. Also, as Dave mentioned, parts of this application source code will be available and open examples provided by Adobe for working with Catalyst and Flex 4. I'm not sure exactly when they will be available, but I know they will be.

After brainstorming some ideas and deciding what we were going to build. Aaron tackled everything from the design perspective. The original design was done in Adobe Fireworks, then imported into the current beta version of Flash Catalyst, available on Adobe Labs. In Catalyst, Aaron was able to take the static comps, and turn those into components that could be directly imported and used within the a Flex 4 project.

While Aaron was working on the design, i set forth building the services that would power the application. We were able to locate open data sets from govtrack.us, which we use to power the primary search interface. All detailed information about a member of congress is loaded on an as-needed basis from data feeds on metavid.org and opencongress.org. We cache these locally for up to 4 hours within ColdFusion before expiring them -- this is purely for performance reasons.

Once the services were complete, integration was a snap. I used the Flash Builder data import wizards to automatically generate service classes and return value objects directly from the CFC on the ColdFusion server. All that was left was to integrate the design and live data to make something "real".

While Aaron was working on the details of the design, I put together a rough layout of the application based on wireframes and discussions. When the design was ready, I was able to import the Flash catalyst project, and get things working almost immediately. All textual layout, all button skins, all image renderers and masks were generated by Catalyst.

Including, but not limited to:

All text layout was used directly from Catalyst with only minor modifications. The current build of Catalyst exports everything with a static layout (x/y position). I opened up the Catalyst exported assets in Flash Builder's design view, and assigned them constraint-based layout (top, bottom, left, right) instead of static x/y. All button skins were used directly without modification (all you need to do is set the skinClass style on a button instance). The image and tile renderers were used directly from the Catalyst import, however there were some changes made so that they would change based on the data that was passed into it.

For instance, in the grid tiles, the names change, the colors change (based on political party), the "representative/senator" label changes, and the photos change.

These are all values that are determined based on normal data bindings.

<s:Path winding="evenOdd" data="M 0 0 L 17 0 L 17 17 C 17 17 4 17 4 17 C 2 17 0 15 0 13 C 0 13 0 0 0 0 Z" blendMode="normal" alpha="0.8196078431372549" x="2" y="105">
  <s:fill>
    <s:LinearGradient x="2" y="105" scaleX="17" rotation="90">
      <s:GradientEntry color="{ getColor( data ) }" ratio="0" alpha="1"/>
      <s:GradientEntry color="{ getColor( data ) }" ratio="1" alpha="1"/>
    </s:LinearGradient>
  </s:fill>
</s:Path>

The parabolic layout and the circular layout for the "person details" screen are all based on DataGroup Flex 4/Spark components, with customized layouts.

<s:DataGroup
  id="videoGroup"
  dataProvider="{ _model.activePersonDetails.videos }"
  itemRenderer="views.components.VideoItemRenderer"
  width="375" height="375"
  horizontalCenter="-45"
  verticalCenter="-35">
  <s:layout>
    <layout:VideoThumbnailLayout />
  </s:layout>
</s:DataGroup>

You can read more about customized layouts here.

On the right-hand side, it is a standard halo Accordion control, with custom skins applied to the headers, and the contents of each is based on standard spark layout controls (SimpleText, RichText, VGroup, DataGroup, Scroller).

The background color gradient animations are based on Animate and MotionPath elements, using an HSBInterpolator:

<fx:Declarations>
  <s:Parallel 
    id="colorTween">
    
    <s:Animate target="{gradientEntry1}" >
      <s:MotionPath property="color" >
        <s:interpolator>
          <s:HSBInterpolator />
        </s:interpolator>
        <s:KeyFrame time="1000" value="{ targetGradientColor1 }" />
      </s:MotionPath>
    </s:Animate>
    
    <s:Animate target="{gradientEntry2}">
      <s:MotionPath property="color" >
        <s:interpolator>
          <s:HSBInterpolator />
        </s:interpolator>
        <s:KeyFrame time="1000" value="{ targetGradientColor2 }" />
      </s:MotionPath>
    </s:Animate>
    
  </s:Parallel>
</fx:Declarations>

And, in a nutshell, that's it. Go give it a test run at http://congress.cynergysystems.com/.