Simple example of fish eye effect in flex

Ok,

it's very simple, but can do the work :) Below, there is a screenshot from the rss component from Vine Toolkit - you can change views using that feature. When pointer is over the icon it's being zoomed in, with pointer out of the icon area it's zoomed out to its original state.  Additionally whole logic ( except effect definitions ) is done on the Action Script side.

In the mxml code define 2 effects responsible for the image resizing:

<mx:Zoom id="zoomIn" zoomHeightTo="1.1" zoomWidthTo="1.1"></mx:Zoom>
<mx:Zoom id="zoomOut" zoomHeightTo="1.0" zoomWidthTo="1.0"></mx:Zoom>

Then in our as class we need a logic for creating icons with their handlers:

[Bindable]

[Embed(source="assets/panel_view_250_176.png")]

static public var panelViewIcon:Class;

[Bindable]

[Embed(source="assets/accordion_view_250_176.png")]

static public var accordionViewIcon:Class;

[Bindable]

[Embed(source="assets/tab_view_250_176.png")]

static public var tabViewIcon:Class;



public function createChangeViewHBox():void {

   viewHBox = new HBox();



   var panelViewButton:Button = new Button();

   panelViewButton.setStyle("icon", panelViewIcon);



   panelViewButton.addEventListener(flash.events.MouseEvent.CLICK, 

    function(event:flash.events.MouseEvent):void {

       PopUpManager.removePopUp(viewHBox);

       Alert.show("panelViewButton clicked");

   });



   panelViewButton.setStyle("rollOverEffect", zoomIn);

   panelViewButton.setStyle("rollOutEffect", zoomOut);



   viewHBox.addChild(panelViewButton);



   var accordionViewButton:Button = new Button();

   accordionViewButton.setStyle("icon", accordionViewIcon)

   accordionViewButton.addEventListener(flash.events.MouseEvent.CLICK,

    function(event:flash.events.MouseEvent):void {

       PopUpManager.removePopUp(viewHBox);

       Alert.show("accordionViewButton clicked");

   });

   accordionViewButton.setStyle("rollOverEffect", zoomIn);

   accordionViewButton.setStyle("rollOutEffect", zoomOut);



   viewHBox.addChild(accordionViewButton);



   var tabViewButton:Button = new Button();

   tabViewButton.setStyle("icon", tabViewIcon)

   tabViewButton.addEventListener(flash.events.MouseEvent.CLICK, 

    function(event:flash.events.MouseEvent):void {

       PopUpManager.removePopUp(viewHBox);

       Alert.show("tabViewButton clicked");

   });

   tabViewButton.setStyle("rollOverEffect", zoomIn);

   tabViewButton.setStyle("rollOutEffect", zoomOut);



   viewHBox.addChild(tabViewButton);

}

As you can see it's pretty simple code, just don't forget that effects and icons are set via setStyle() method.

Second thing, viewHBox is a separate widget just to make a popup of it.