프로그래밍/Flex/AIR2007.01.25 11:29
버그가 쪼금 있어요.. rollover rollout 시에 Zoom Effect 를 쓰는데
뭔가 꼬여있다고 할까;
시간되면 고치야죠^^;

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 creationComplete="init();" horizontalAlign="center" verticalAlign="middle">
 
 <mx:Style>
  Application
  {
      font-size: 24;
  }

  .cssrollover {
   background-color: "#ffffff";
   color: "";
   background-alpha: 1;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.containers.Box;
   import mx.containers.HBox;
   import mx.controls.Label;
   private function init():void
   {
    trace("App width : " + this.width);
    trace("App height : " + this.height);
   
    trace("board width : " + board.width);
    trace("board height : " + board.height);
   
   
    var tasg:Array = ["flex2", "money", "girl", "power", "tagbbbbbbbbb1",
          "tag--2", "tagC", "tagD", "tagE", "tagF", "tagG"];
   
    for (var i:uint; i < tasg.length; i++)
    //for (var i:uint; i < 2; i++)
    {     
     var tag:Label = new Label();
     tag.text = "["+i+"]" + tasg[i];
     tag.truncateToFit = false;
     //trace(" w : " + tag.measuredWidth);
     
/*      tag.width  = String(tasg[i]).length * 25;
     tag.height = 40;
     if (posX + tag.width >= board.width) {
      posX  = 0;
      posY += 30;
     }
     
     tag.x = posX;
     tag.y = posY;
     posX += tag.width; */
     
     tag.scaleX = .5;
     tag.scaleY = .5;
     tag.setStyle("textAlign", "center");
     tag.setStyle("fontWeight", "bold");
     tag.setStyle("fontAntiAliasType", "advanced");
     tag.setStyle("horizontalScrollPolicy", "off");
     tag.setStyle("verticalScrollPolicy", "off");
     
     //tag.x = 100;
     //tag.y = 100;
 
     //tagBox.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
     //tagBox.addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);
     //tagBox.addEventListener(MouseEvent.ROLL_OVER, doZoom);
     //tagBox.addEventListener(MouseEvent.ROLL_OUT, doZoom);
     
     tag.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
     tag.addEventListener(MouseEvent.ROLL_OUT,  onRollOut);
     
     //tag.d
     
     var box:Box = new Box();
     //box.width = (tasg[i] as String).length * 20;
     //box.height = 30; //tag.height;
     
     
     //box.setStyle("borderStyle", "solid");
     box.setStyle("cornerRadius","5");
     box.setStyle("horizontalAlign", "center");
     box.setStyle("verticalAlign", "middle");
     box.setStyle("backgroundColor", "#ffffff");
     box.setStyle("horizontalScrollPolicy", "off");
     box.setStyle("verticalScrollPolicy", "off");
     
     box.addChild(tag);
     
     
     board.addChild(box);
    }
   
    callLater(display);
   }
   
   private function display():void
   {
    var posX:uint = 0;
    var posY:uint = 0;
    var tagBox:Box;
   
   
   
    //var emptySpace:Array = new Array();
    var emptyAC:ArrayCollection = new ArrayCollection();
   
    for each(tagBox in board.getChildren())
    {
     var tagLabel:Label = tagBox.getChildAt(0) as Label;
     
     trace("TagBox (" + tagBox.width + ", " + tagBox.height + ")");
     trace("[" + tagLabel.text + "] : labelText(" + tagLabel.textWidth + ", " + tagLabel.textHeight + ")");
     trace("[" + tagLabel.text + "] : label(" + tagLabel.width + ", " + tagLabel.height + ")");
     
     tagBox.width  = tagLabel.textWidth  + 15;
     tagBox.height = tagLabel.textHeight + 15;
     
     /* if (tagBox.height) {
     
     } */
     
     //trace("== 후보 len : " + emptySpace.length);
     var obj:Object = null;
     for (var i:uint=0; i < emptyAC.length; i++)
     {
      obj = emptyAC[i];
      if ((obj.x + tagBox.width <= board.width) && (obj.w >= tagBox.width) && (obj.h >= tagBox.height)) {
       //var ac:ArrayCollection = new ArrayCollection(emptySpace);
       emptyAC.removeItemAt(i);
       break;
      } else if (i + 1 == emptyAC.length) {
       obj = null;
      }
     }
     
     // 넣어야 할 곳이 좁다면 밑으로 뺀다
     if (tagBox.width + posX >= board.width)
     {
      // 좁은 곳은 후보 배열에 넣는다
      var ww:uint = board.width - posX;
      emptyAC.addItem({x: posX, y: posY, w: ww, h: tagBox.height});
     
      posX = 0;
      posY += tagBox.height;
     }
     
     // 새로운 위치를 정해준다.
     // 후보 칸에 넣을 수 있다면?
     //trace("후보가 있나? " + (obj != null));
     if (obj != null)
     {
      tagBox.x = obj.x;
      tagBox.y = obj.y;
     }
     else
     {
      tagBox.x = posX;
      tagBox.y = posY;
      posX += tagBox.width;
     }
    }
   
    board.visible = true;
   }
   
 
   public function onRollOver(event:MouseEvent):void
   {
    //trace((event.target as Label).text + event.type);
          zoomin.play([event.target]);
          //event.target.setStyle("backgroundColor","#000000");
         
          var hb:Box = ((event.target as Label).parent) as Box;
          hb.setStyle("borderStyle", "solid");
          hb.setStyle("backgroundColor","#000000");
          hb.setStyle("color","#ffff00");
   }
   
   public function onRollOut(event:MouseEvent):void
   {
          zoomout.play([event.target]);
         
          var hb:Box = ((event.target as Label).parent) as Box;
          //hb.setStyle("backgroundColor","#ffffff");
          hb.setStyle("borderStyle", "");
          hb.setStyle("backgroundColor","");
          hb.setStyle("color","");
   }
   
   
/*    public function doZoom(event:MouseEvent):void
   {
    var tagLabel:Label = event.currentTarget as Label;
    trace(event.type + "::tag textwidth : " + tagLabel.textWidth);
                if (zoomAll.isPlaying) {
                    zoomAll.reverse();
                }
                else {
                    // If this is a ROLL_OUT event, play the effect backwards.
                    // If this is a ROLL_OVER event, play the effect forwards.
                    zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);
                }
                //zoomAll.play([event.target], event.type == MouseEvent.ROLL_OVER ? true : false);
            } */
  ]]>
 </mx:Script>
 <mx:Canvas id="board" width="400" height="300" visible="false" showEffect="Fade" backgroundColor="#ffffff"
  borderStyle="outset"
  horizontalScrollPolicy="off" verticalScrollPolicy="off" />
 <!-- mx:Zoom id="zoomAll" duration="500" zoomWidthFrom=".5" zoomHeightFrom=".5" zoomWidthTo="1" zoomHeightTo="1" /-->
 <mx:Zoom id="zoomin"  duration="100" zoomWidthFrom=".5" zoomHeightFrom=".5" zoomWidthTo="1"  zoomHeightTo="1"  />
 <mx:Zoom id="zoomout" duration="100" zoomWidthFrom="1"  zoomHeightFrom="1"  zoomWidthTo=".5" zoomHeightTo=".5" />  
</mx:Application>

Posted by 시난

댓글을 달아 주세요