<mx:Style>
Application{backgroundColor:#FFFFFF; fontFamily: "verdana", "돋움체"; 
fontSize: 12;}
ToolTip{fontSize: 12; fontFamily: "verdana", "돋음";}
.preBtn {upSkin: Embed('/images/pre_over.png'); 
downSkin: Embed('/images/pre_down.png');
 overSkin: Embed('/images/pre_over.png');}
.nextBtn {upSkin: Embed('/images/next_over.png'); 
downSkin: Embed('/images/next_down.png');
 overSkin: Embed('/images/next_over.png');}
</mx:Style>

<mx:Script>
<![CDATA[/* image 롤링배너를 위한 메서드.*/
[Bindable] private var currentNum :Number = 0;
[Bindable] private var labelStr:String = ''
[Bindable] private var labelDesc:String = ''
/* 다음 배너를 조회하기 위한 function*/
private function nextHandler():void{
 if(currentNum+1==imgAC.length){currentNum=-1;}
 currentNum++;
 if(img1.x==0){
 img2.source=imgAC[currentNum].SOURCE;
 img2.toolTip=imgAC[currentNum].DATA;
 labelStr=imgAC[currentNum].DATA;
 labelDesc=imgAC[currentNum].DESC;}
else{
 img1.source=imgAC[currentNum].SOURCE;
 img1.toolTip = imgAC[currentNum].DATA;
 labelStr=imgAC[currentNum].DATA;
 labelDesc=imgAC[currentNum].DESC;
 }

 moveRight();
 }

 /* 이전 배너를 조회하기 위한 function*/
private function preHandler():void{
 if(currentNum-1==-1){currentNum=imgAC.length;}
  currentNum--;
  if(img1.x==0){img2.source=imgAC[currentNum].SOURCE;
    img2.toolTip = imgAC[currentNum].DATA;
    labelStr =imgAC[currentNum].DATA;
    labelDesc =imgAC[currentNum].DESC;}
  else{img1.source=imgAC[currentNum].SOURCE;
      img1.toolTip = imgAC[currentNum].DATA;
      labelStr =imgAC[currentNum].DATA;
      labelDesc =imgAC[currentNum].DESC;}

      moveLeft();}
/* 다음 배너를 이동시키는  function*/
 private function moveRight():void {

 if(img1.x == 0){move1.end();
 move2.end();            
 img2.x = 285;
 move1.xTo = -285;
 move2.xTo = 0;
 move1.play();
 move2.play();}
else{img1.x=285;
 move2.xTo = -285;
 move1.xTo = 0;
 move2.play();
 move1.play();} }

/* 이전배너를 이동시키는  function*/
private function moveLeft():void {
if(img1.x == 0){move1.end();
  move2.end();
  img2.x = -285;
  move1.xTo = 285;
  move2.xTo = 0;
  move1.play();
  move2.play();}
else{img1.x=-285;
   move2.xTo = 285;
   move1.xTo = 0;
   move2.play();
   move1.play();} }   
]]>

</mx:Script>

<mx:VBox width="100%" height='100%' creationComplete="nextHandler()"> 
<mx:Panel title="IMAGE 배너" height="75%" width="650"
creationComplete="nextHandler()" paddingTop="10"
paddingLeft="10" paddingRight="10" paddingBottom="10" >
<mx:HBox width="100%">
<mx:Canvas width="400" height="300">
<mx:Button x="10" y="30" styleName="preBtn"
click='preHandler();' toolTip="다음문항으로 이동합니다." width="17" height="90"/>
<mx:Canvas x="40" y="5" width="284" height="234" borderStyle="none" 
horizontalScrollPolicy="off" 
verticalScrollPolicy="off">
<mx:Image x='0' y='0' id='img1' source="images/001.jpg"toolTip="동대산 
전경입니다."
 width="284" height="235"/>
<mx:Image x='285' y='0' id='img2' source="images/002.jpg" toolTip="두로봉 
전경입니다." 
width="284" height="235"/>
</mx:Canvas>
<mx:Button x="350" y="30" styleName="nextBtn"
click='nextHandler();' toolTip="다음문항으로 이동합니다." width="17" height="90"/>
</mx:Canvas>

<mx:VBox borderStyle="solid" height="240" width="180" horizontalAlign="center">
<mx:Label id='lvl1' text="{labelStr}" fontWeight="bold"/>
<mx:Text htmlText="{labelDesc}" width="150" />
</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:VBox>

<mx:ArrayCollection id='imgAC'>
<mx:Object SOURCE="images/001.jpg" DATA="동대산 전경입니다."
DESC='높이 1,434m의 동대산은 북쪽의 두로봉, 동쪽의 노인봉 등과 함께 백두대간의 줄기를 이룬다. 
... '/>
<mx:Object SOURCE="images/002.jpg" DATA="두로봉 전경입니다."
 DESC='두로봉은 강원도 평창군 진부면과 홍천군 내면 및 강릉시 연곡면 사이에 있는 산으로 높이 
1,422m이다. ...' />
<mx:Object SOURCE="images/003.jpg" DATA="비로봉 전경입니다."
DESC='적멸보궁은 부처님의 정골사리를 봉안한 곳이다. ...'/>
<mx:Object SOURCE="images/004.jpg" DATA="상왕봉 전경입니다."
DESC='백두대간은 힘찬 기세로 금강산, 설악산을 지나 대관령, 태백산, 소백산으로 
이어지는데 ... '/>
</mx:ArrayCollection>
</mx:Application>