TeamFlex(팀플렉스) - 실무 프로젝트

이미지 혹은 Panel 등등을 회전시키거나 책넘기기등등.. 여러가지 Effect 를 사용할 수 있습니다.

invalid-file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:distortion="view.distortion.*"
 xmlns:sides="view.sides.*"
 creationComplete="init();">

 <mx:Script>
  <![CDATA[

   import com.adobe.ac.mxeffects.*;
   import com.adobe.ac.util.*;
   import com.adobe.ac.controls.*;

   /*

     몇가지 종류가 있으니 골라잡아서 이름만 샥샥 바꾸면 됩니다..

    Flip, CubeRotate, Push, Pop, Door, Gate

   */
   
   private function EffectTest( Cnt:int ) : void
   {
    var i:int;
   
    var e:CubeRotate = new CubeRotate( img );
     e.siblings= [ img ];
     e.direction= DistortionConstants.TOP;
     e.smooth= false;
     e.duration = 500;
     e.distortion= 25;

    // 몇번 돌릴거지?
    if ( Cnt > 1 )
    {
     for ( i=1; i<=Cnt; i++ )
     {
      e.play();      
     }
     
     LoginResize2.play();
     LoginResize2.stop();
     LoginResize.play();
    }
    else { e.play(); }
   }

   // Effect 처리 두번째부분(e:이펙트명)
   private function EffectTest2() : void
   {
    var i:int;
   
    var e:Pop = new Pop( img ); // 이부분만 바꾸면 바로 적용됨
     e.siblings= [ img ];
     e.direction= DistortionConstants.TOP;
     e.smooth= false;
     e.duration = 500; // 시간조절
     e.distortion= 25;

     e.play(); // 실행(밑에 정의했음)      
   }

     private var s:uint = 2;
 
     // 시작시 발생하는 이벤트
     private function init():void
     {
       img.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
     }

     private function enterFrameHandler(e:Event):void
     {
       if(img.x < 0) img.x += (0-img.x)/s;
       if(img.y < 0) img.y += (0-img.y)/s;
       if(img.x+img.width > pn.width) img.x += (pn.width-img.width-img.x)/s;
       if(img.y+img.height > pn.height) img.y += (pn.height-img.height-img.y)/s;
     }

   // 마우스 클릭시 드래그 시작
     private function mouseDownHandler(e:MouseEvent):void
     {
       img.startDrag();
       }
   
     // 드래그 종료  
     private function mouseUpHandler(e:MouseEvent):void
     {
       img.stopDrag();
     }

  ]]>
 </mx:Script>

<!-- Effect 처리 부분 -->
 
 <mx:Resize id="LoginResize" target="{img}" widthTo="400" heightTo="400"/>
 <mx:Resize id="LoginResize2" target="{img}" widthTo="200" heightTo="200"/>

 <mx:Panel id="pn" title="꿈꾸던 그것-이미지 드래그 가능" width="500" height="500"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" fontFamily="맑은고딕" fontSize="12" fontWeight="normal">
        <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
         <mx:Image id="img" width="200" height="200" source="1.jpg"
               mouseDown="mouseDownHandler(event)"
         mouseUp="mouseUpHandler(event)" />
        </mx:HBox>

        <mx:ControlBar>
            <mx:Button label="땡겨" click="LoginResize.end(); LoginResize.play();"/>           
            <mx:Button label="놔" click="LoginResize2.end(); LoginResize2.play();"/>
            <mx:Button label="돌리" click="EffectTest(0);"/>
            <mx:Button label="돌리면서 땡겨" click="EffectTest(3);"/>
            <mx:Button label="버려" click="EffectTest2();"/>
        </mx:ControlBar>

    </mx:Panel>
 
</mx:Application>

플렉스의 장점인 State 를 활용하여 화면전환하는 부분과

보통 쇼핑몰에서 많이 사용하는 하단에서 펼쳐지는 장바구니 기능을 State 를 이용해서 한번 만들어 봤습니다.

사실 다 마무리해서 올릴려고 했는데  만들다 말았지만 참고하시라고 올립니다...

뭐 딱히 설명할건 없는데 궂이 기능이라고 할거는

State Effect Test 부분에서 메뉴1 클릭시 화면전환되고 메뉴2 클릭시 다시 복귀합니다.

왼쪽 Tree 에 하위노드수출력되면서 mx.effects.easing 을 이용해서 펼쳐지면서 다소 설례바리 칩니다..ㅋㅋ

그리고 Tree 에서 기본적으로는 맨앞의 아이콘을 클릭해야 펼쳐지고 닫히는데 그냥 메뉴항목 클릭시 되도록 했습니다.

그리고 DataGrid 클릭시 해당 데이타를 상단에 뿌려주는 정도~~~

* 추가예정부분

1. mp3 재생
2. 동영상 재생
3. 디비와 연동

곧 올리겠습니다...^^;;

invalid-file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    verticalAlign="middle"
    horizontalAlign="center"
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off">
   
 <mx:Script>
        <![CDATA[
       
            import mx.events.MenuEvent;
            import mx.controls.Alert;
            import mx.events.ListEvent;
            import mx.collections.ICollectionView;
      import mx.effects.easing.*;

      // 클릭시 해당 노드 오픈  
            private function itemClick( evt:ListEvent ):void
            {
                var item:Object = Tree( evt.currentTarget ).selectedItem;
               
                if ( MenuList.dataDescriptor.isBranch(item) )
                {
                    MenuList.expandItem( item, !MenuList.isItemOpen(item), true );
                }
            }

   // 노드의 하위노드 갯수출력
            private function labelFunction(item:XML):String
            {
                var children:ICollectionView;
                var suffix:String = "";
               
                if ( MenuList.dataDescriptor.isBranch(item) )
                {
                    children  = MenuList.dataDescriptor.getChildren( item );
                    suffix   = " (" + children.length + ")";
                }
               
                return item[MenuList.labelField] + suffix;
            }

            
        ]]>
    </mx:Script>

<!-- State 처리부분 -->
   
    <mx:states>
        <mx:State name="Menu2">
            <mx:SetProperty target="{RightMenu}" name="height" value="542"/>
            <mx:SetProperty target="{RightMenu}" name="y" value="247"/>
           
            <mx:SetProperty target="{TopMenu}" name="x" value="936"/>
            <mx:SetProperty target="{TopMenu}" name="width" value="155"/>
           
            <mx:RemoveChild target="{BottomMenu}"/>
           
            <mx:SetProperty target="{LeftMenu}" name="width" value="798"/>
            <mx:RemoveChild target="{StatusBar}"/>
        </mx:State>
       
        <mx:State name="PanelUp">
            <mx:SetProperty target="{StatusBar}" name="y" value="600"/>
            <mx:RemoveChild target="{form1}"/>

            <mx:AddChild relativeTo="{canvas1}" position="lastChild">
                <mx:Form width="288" height="112" x="224" y="10"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off"
                  backgroundColor="#F2EDA2">
                 <mx:FormItem label="이름" backgroundColor="#9EF551" id="formitem0" fontFamily="Monaco" fontSize="12">
               <mx:Label text="{dg.selectedItem.name}" color="#094BA5" width="198" id="label0"/>
                 </mx:FormItem>
                <mx:FormItem label="연락처" backgroundColor="#9EF551" id="formitem4" fontFamily="Monaco" fontSize="12">
                  <mx:Label text="{dg.selectedItem.phone}" color="#094BA5" width="198" id="label4"/>
                 </mx:FormItem>
                 <mx:FormItem label="이메일" backgroundColor="#9EF551" id="formitem5" fontFamily="Monaco" fontSize="12">
                  <mx:Label text="{dg.selectedItem.email}" color="#094BA5" width="198" id="label5"/>
                 </mx:FormItem>
                </mx:Form>
            </mx:AddChild>
        </mx:State>

    </mx:states>

<!-- State Effect 처리부분 -->
<!-- 초급과정에서 참고만 하고 -->
<!-- State 처리는 되도록 액션스크립트로 처리할것을 권함 -->

    <mx:transitions>

        <mx:Transition id="myTransition" fromState="*" toState="*">
            <mx:Parallel id="t1" targets="{[LeftMenu, TopMenu, RightMenu]}">
                <mx:Move  duration="450"/>
                <mx:Resize duration="450"/>
                <mx:Iris targets="{[BottomMenu]}" duration="450"/>               
            </mx:Parallel>           
        </mx:Transition>

        <mx:Transition id="myTransition2" fromState="*" toState="PanelUp">
         <mx:Parallel id="t2" targets="{[StatusBar]}">
           <mx:Move duration="350"/>
         </mx:Parallel>
        </mx:Transition>

        <mx:Transition id="myTransition3" fromState="PanelUp" toState="*">
         <mx:Parallel id="t4" targets="{[StatusBar]}">
           <mx:Move duration="350"/>
         </mx:Parallel>
        </mx:Transition>

    </mx:transitions>

<!-- XML 은 확장성을 고려하여 xml 파일을 읽어와서 처리하는게 좋음(액션스크립트 권장) -->
<!-- 예를 들자면 -->
<!-- <mx:XMLList id="treeData" source="_XML/CateGory.xml" /> -->

<!-- Left Tab XML -->

 <mx:XMLList id="treeData">
     <node label="장르목록">
         <node label="락발라드">
             <node label="Marketing"/>
             <node label="Product Management"/>
             <node label="Personal"/>
         </node>
         <node label="하드락">
             <node label="Professional"/>
             <node label="Personal"/>
         </node>
  </node>
    </mx:XMLList>

<!-- Right Tab XML -->
   
 <mx:XMLList id="treeData2">
     <node label="가수목록">
         <node label="이승철">
             <node label="1집"/>
             <node label="2집"/>            
         </node>
  </node>
    </mx:XMLList>

<!-- StatusBar XML -->

    <mx:XMLList id="employees">
        <employee>
            <name>서현주</name>
            <phone>010-111-2222</phone>
            <email>Jooooo@teamflex.co.kr</email>
            <active>true</active>
        </employee>
        <employee>
            <name>박은미</name>
            <phone>010-222-3333</phone>
            <email>Meeeee@teamflex.co.k</email>
            <active>true</active>
        </employee>
        <employee>
            <name>김해년</name>
            <phone>010-333-4444</phone>
            <email>Nyunnnnn@teamflex.co.k</email>
            <active>false</active>
        </employee>
    </mx:XMLList>

<!-- StatusBar XML -->

    <mx:XMLList id="employees2">
        <employee>
            <subject>깊은밤의 서정곡</subject>
            <singer>블랙홀</singer>
            <album>블랙홀 1집</album>           
        </employee>
        <employee>
            <subject>깊은밤의 장송곡</subject>
            <singer>블랙헐</singer>
            <album>블랙헐 100집</album>           
        </employee>
        <employee>
            <subject>짜린밤의 서정곡</subject>
            <singer>쩔은헐</singer>
            <album>쩔은 39집</album>           
        </employee>
    </mx:XMLList>

   
 <mx:Canvas x="0" y="0" width="100%" height="100%">
  <mx:Panel x="130" y="39" width="155" height="750" layout="absolute" id="LeftMenu" title="Tab Part">
   <mx:TabNavigator x="5" y="10" width="90%" height="90%" fontFamily="Monaco" fontSize="12">
    <mx:Canvas label="장르" width="100%" height="100%" fontFamily="Monaco" fontSize="9">
     <mx:Tree x="5" y="5" width="90%" height="90%"
      fontFamily="Monaco" fontSize="12"
      dataProvider="{treeData}"
      labelField="@label"
            showRoot="false"
            openEasingFunction="Bounce.easeOut"
            labelFunction="labelFunction"
            itemClick="itemClick(event);"
            id="MenuList"></mx:Tree>
    </mx:Canvas>
   </mx:TabNavigator>
  </mx:Panel>
  <mx:Panel x="293" y="39" width="635" height="200" layout="absolute" id="TopMenu" title="Stete Effect 테스트">
   <mx:HBox x="0" y="0" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
    <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
     <mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" id="canvas1">
            <mx:Form width="288" height="112" x="224" y="10"
              horizontalScrollPolicy="off" verticalScrollPolicy="off"
              backgroundColor="#F2EDA2" id="form1">
                <mx:FormItem label="앨범" backgroundColor="#9EF551" id="formitem3" fontFamily="Monaco" fontSize="12">
                    <mx:Label text="{dg2.selectedItem.album}" color="#050595" width="198" id="label3" fontWeight="normal" fontFamily="Monaco" fontSize="12"/>
                </mx:FormItem>
                <mx:FormItem label="제목" backgroundColor="#9EF551" id="formitem1" fontFamily="Monaco" fontSize="12">
           <mx:Label text="{dg2.selectedItem.subject}" color="#050595" width="198" id="label1" fontWeight="normal" fontFamily="Monaco" fontSize="12"/>
                </mx:FormItem>
                <mx:FormItem label="가수" backgroundColor="#9EF551" id="formitem2" fontFamily="Monaco" fontSize="12">
                 <mx:Label text="{dg2.selectedItem.singer}" color="#050595" width="198" id="label2" fontWeight="normal" fontFamily="Monaco" fontSize="12"/>
                </mx:FormItem>
            </mx:Form>
            <mx:Tile x="10" y="35" width="69" height="57">
             <mx:LinkButton label="1" themeColor="#F08484" click="currentState='Menu2'" color="#DD1738"/>
             <mx:LinkButton label="2" themeColor="#F08484" click="currentState=''" color="#0DBD15"/>
             <mx:LinkButton label="3" themeColor="#F08484" click="currentState=''" color="#B52BCE"/>
             <mx:LinkButton label="4" themeColor="#F08484" click="currentState=''" color="#7A1930"/>
            </mx:Tile>
            <mx:Label x="10" y="10" text="메뉴" fontFamily="Monaco" fontSize="12" width="69" textAlign="center" fontWeight="bold" color="#3459E4"/>
     </mx:Canvas>
    </mx:HBox>
   </mx:HBox>
  </mx:Panel>
  <mx:Panel x="293" y="247" width="635" height="542" layout="absolute" id="BottomMenu" title="DataGrid Part">
   <mx:DataGrid id="dg2" x="0" y="0" width="100%" height="100%"
      fontFamily="Monaco" fontSize="12" textAlign="center"
      dataProvider="{employees2}">
    <mx:columns>
     <mx:DataGridColumn headerText="제목" dataField="subject" width="50" textAlign="left"/>
     <mx:DataGridColumn headerText="가수" dataField="singer" width="15" textAlign="left"/>
     <mx:DataGridColumn headerText="앨범" dataField="album" width="15" textAlign="left"/>
    </mx:columns>
   </mx:DataGrid>
  </mx:Panel>
  <mx:Panel x="936" y="39" width="155" height="750" layout="absolute" id="RightMenu" title="Tab Part2">
   <mx:TabNavigator x="5" y="10" width="90%" height="90%" fontFamily="Monaco" fontSize="12">
    <mx:Canvas label="가수" width="100%" height="100%" fontFamily="Monaco" fontSize="9">
     <mx:Tree x="5" y="5" width="90%" height="90%"
      fontFamily="Monaco" fontSize="12"
      dataProvider="{treeData2}"
      labelField="@label"
         showRoot="false"
         id="MenuList2"></mx:Tree>
    </mx:Canvas>
   </mx:TabNavigator>
  </mx:Panel>
 </mx:Canvas>

<!-- 정보창 부분은  Canvas 위에 겹쳐야되므로  전체 Canvas 밖에 정의함 -->

 <mx:HBox x="130" y="795" width="961" height="500"
   horizontalScrollPolicy="off" verticalScrollPolicy="off"
   id="StatusBar">
   
  <mx:Canvas width="100%" height="500">
   <mx:HBox x="0" y="0" width="100%" height="40" verticalAlign="middle">
    <mx:Button label="위로" fontFamily="Monaco" fontSize="12" click="currentState='PanelUp'" id="button4"/>
    <mx:Button label="아래로" fontFamily="Monaco" fontSize="12" click="currentState=''" id="button5"/>
   </mx:HBox>

   <mx:Canvas x="0" y="0" width="100%" height="460" verticalScrollPolicy="off" backgroundAlpha="0.5">
    <mx:DataGrid id="dg" x="0" y="40" width="100%" height="100%"
       textAlign="center" fontFamily="Monaco" fontSize="12"
       rowCount="5" dataProvider="{employees}">
              <mx:columns>
                  <mx:DataGridColumn dataField="name" headerText="이름"/>
                  <mx:DataGridColumn dataField="phone" headerText="연락처"/>
                  <mx:DataGridColumn dataField="email" headerText="이메일"/>
              </mx:columns>
    </mx:DataGrid>
   </mx:Canvas>
  </mx:Canvas>
 </mx:HBox>
 
</mx:Application>


[ 작성 : TeamFlex 개발팀 ] ( teamflex.tistory.com )