FLEX学习第六步（鱼眼效果与图片放大）

鱼眼效果，在很多系统里面是可以用作导航栏的特效。我这里实现的就是，当鼠标移到图片上，图片会放大。点击图片后，会弹出一个弹出框，而弹出框中是这个图片的放大效果。

其实flash很简单，就是用了Zoom特效。以及popmanage来弹出一个canvas。

图片放大，这个特效其实更简单，就是允许用户将任何一张图片拖动到一个框框里，这个框框就会把图片放大。截图貌似有点问题，直接代码吧。

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Zoom effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script>
        <![CDATA[
         import mx.controls.Image;
         import mx.managers.PopUpManager;
         import mx.containers.TitleWindow;       
            import flash.events.MouseEvent;
   private var _popwin:TitleWindow;
   private var _imgarray:Array= new Array();
   private var startingLocation:Point;
   public function init():void
   {
    _imgarray=[img1,img2,img3,img4,img5]
    addevent(_imgarray); 
    //this.setChildIndex(titlewind,
    trace(hbox.getChildIndex(tt));
    trace(hbox.getChildIndex(img1));
   }  
            public function addevent(imgArray:Array):void{ 
             for each (var img:Image in imgArray)
             {
              img.addEventListener(MouseEvent.MOUSE_DOWN,handlestartdrag);
     img.addEventListener(MouseEvent.MOUSE_UP,hanlestopdrag);
             }
             }
             public function handlestartdrag(event:MouseEvent):void
             {
              startingLocation = new Point( );
     startingLocation.x = event.target.x;
     startingLocation.y = event.target.y;
              trace("触发了拖动");
              event.target.startDrag();
             }
             public function hanlestopdrag(event:MouseEvent):void
             {
              trace(mouseX);
              trace(mouseY)
              if((mouseX>25)&&(mouseX<280)&&(mouseY>25)&&(mouseY<220)){
               var img:Image=new Image();
               img.source=event.target.source;
               tt.addChild(img);
               event.target.x=startingLocation.x;
               event.target.y=startingLocation.y;
              }
              event.target.stopDrag();
             }
        ]]>   
    </mx:Script>
    <mx:Canvas width="100%" height="100%" paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5" id="test">
        <mx:HBox horizontalGap="20" id="hbox"  x="1" horizontalAlign="center" verticalAlign="middle">
        <mx:TitleWindow x="250" y="150" width="250" height="200" layout="absolute" id="tt">
        </mx:TitleWindow>
        <mx:Image
         id="img1"
            source="@Embed(source='img/1.jpg')"
            scaleX=".5" scaleY=".5"/>
        <mx:Image
         id="img2"
            source="@Embed(source='img/2.jpg')"
            scaleX=".5" scaleY=".5"/>
        <mx:Image
         id="img3"
            source="@Embed(source='img/3.jpg')"
            scaleX=".5" scaleY=".5"/>
        <mx:Image
         id="img4"
            source="@Embed(source='img/4.jpg')"
            scaleX=".5" scaleY=".5"/>
        <mx:Image
         id="img5"
            source="@Embed(source='img/5.jpg')"
            scaleX=".5" scaleY=".5"/>        
        </mx:HBox>
    </mx:Canvas>
</mx:Application>