Search Me: Code for SearchTransition

Finally, here is the source code and demo for SearchTransition, an application that demonstrates animated transitions that's shown in this video that got posted a few weeks ago. First, let's see the demo: And here's the source code. Note that it's just the one file: no image assets, no other ActionScript code; it all works by simple MXML code and use of the standard Flex effects. I'll leave the explanation of the code and application to the video, so check that out if you haven't seen it yet. Enjoy!

SpringItem

Someone asked, in the comments to my Springtime posting, how that effect could be generalized to apply to DataGrid items. I came up with this simple demo to show the same effect at work for each item in the grid:

The only change I needed to make to the underlying Spring effect was to make it deal with IUIComponent, instead of UIComponent. The original demo only works on components. In the case of DataGrid items, however, we have item renderers, which are not UIComponents, but which do implement the IUIComponent interface. So I changed the code in SpringInstance accordingly, modifying UIComponent to IUIComponent and changing a call to componentToGlobal() to localToGlobal() (to get the mouse coordinates in terms of the global location) instead, and voila, it's a beautiful, springy data grid.

I had to make one change to my default DataGrid component to make it look reasonable: I centered the text in the cells with the text-align="center" style attribute. Without this change, it looked like the spring effect was happening off-center, just based on the default position of the text on the left that would then go shooting further to the left as it sprang out. Also, I enabled double-click events and added the spring effect based on double-clicking on an item, grabbing the itemRenderer from the event as the source for the effect.

The abbreviated MXML code for the application is here:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:effects="effects.*" layout="absolute" width="600">
    <effects:Spring id="spring" duration="500"/>
    <mx:DataGrid textAlign="center" width="100%" doubleClickEnabled="true"
        itemDoubleClick="spring.play([event.itemRenderer])">
        <mx:ArrayCollection>
         <mx:Object>
            <mx:Label>Thunderbird</mx:Label>
            <mx:Price>$2.99</mx:Price>
            <mx:Rating>8</mx:Rating>
            <mx:Notes>Hint of cough syrup</mx:Notes>
         </mx:Object>
         <!-- other items omitted for brevity... -->
      </mx:ArrayCollection>
    </mx:DataGrid>
</mx:Application>

The code for the effect itself can be obtained in the zipped source files.

I expect a similar approach could be taken with other list-based controls, although the details of doing so are left as an exercise for the reader (I love when books do that, implying that it's easy an obvious, but really it's just an indicator that the author didn't get around to trying it themselves yet).