Typiler

위 화면을 Fullscreen일 경우에만 보여준다고 생각을 하면, 어떨까? 그러니깐 FullScreen 화면과 일반화면에 보여지는 것이 전혀 다르게 하는것이 목적이다. 굳이 이렇게 작업할 필요는 없지만, 사용자 입장에서는 풀화면으로 전환시 다른 화면이 나왔다고 느끼게 하기 위해서 이다.

일반 화면은 아래와 같은 화면으로 한다.

이 화면은 Flex 예제사이트를 참고했다.

일반 부분의 소스를 보면...fullScreenHandler라는 함수를 주목하자. 이부분이 중요하다. 이부분에 Fullscreen 화면과 일반화면의 전환시 동작해야하는 기능들을 넣어주면 된다.
<<FullScreen.mxml>>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationComplete="init(event)"> <mx:Script> <![CDATA[ import flash.display.StageDisplayState; private function init(evt:Event):void { /* Set up full screen handler. */ Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler); dispState = Application.application.stage.displayState; } private function fullScreenHandler(evt:FullScreenEvent):void { dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")"; if (evt.fullScreen) { /* Do something specific here if we switched to full screen mode. */ /* 바로 이부분이다. Fullscreen 일경우의... */ } else { /* Do something specific here if we switched to normal mode. */ /* 바로 이부분이다. 일반화면 경우의*/ } } private function toggleFullScreen():void { try { switch (Application.application.stage.displayState) { case StageDisplayState.FULL_SCREEN: /* If already in full screen mode, switch to normal mode. */ Application.application.stage.displayState = StageDisplayState.NORMAL; break; default: /* If not in full screen mode, switch to full screen mode. */ Application.application.stage.displayState = StageDisplayState.FULL_SCREEN; break; } } catch (err:SecurityError) { // ignore } } ]]> </mx:Script> <mx:String id="dispState" /> <mx:Label text="width={Application.application.width}" /> <mx:Label text="height={Application.application.height}" /> <mx:Label text="displayState={dispState}" /> <mx:Button id="btn_fullscreen" label="Toggle fullscreen" click="toggleFullScreen()" /> </mx:Application>

그리고 Fullscreen의 경우의 화면 소스
<<FullDisplay.mxml>>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ty="*" layout="absolute" creationComplete="creationCompleteHdlr()"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; //** IMAGE DATA */ private var item:ArrayCollection = new ArrayCollection([ {no:"1", label:"Autumn Leaves", data:"assets/Autumn Leaves.jpg"}, {no:"2", label:"Creek", data:"assets/Creek.jpg"}, {no:"3", label:"Desert Landscape", data:"assets/Desert Landscape.jpg"}, {no:"4", label:"Dock", data:"assets/Dock.jpg"}, {no:"5", label:"Forest Flowers", data:"assets/Forest Flowers.jpg"}, {no:"6", label:"Forest", data:"assets/Forest.jpg"}, {no:"7", label:"Frangipani Flowers", data:"assets/Frangipani Flowers.jpg"}, {no:"8", label:"Garden", data:"assets/Garden.jpg"}, {no:"9", label:"Green Sea Turtle", data:"assets/Green Sea Turtle.jpg"}, {no:"10", label:"Humpback Whale", data:"assets/Humpback Whale.jpg"}, {no:"11", label:"Oryx Antelope", data:"assets/Oryx Antelope.jpg"}, {no:"12", label:"Toco Toucan", data:"assets/Toco Toucan.jpg"}, {no:"13", label:"Tree", data:"assets/Tree.jpg"}, {no:"14", label:"Waterfall", data:"assets/Waterfall.jpg"}, {no:"15", label:"Winter Leaves", data:"assets/Winter Leaves.jpg"} ]); private function creationCompleteHdlr():void{ menuBar.item = this.item; } ]]> </mx:Script> <mx:Image source="{menuBar.horizontalList.selectedItem.data}" maintainAspectRatio="true" horizontalAlign="center" width="100%" height="100%"/> <ty:MenuBar id="menuBar" x="0" y="{Application.application.height-30}"/> </mx:Application>
item 이라는 ArrayCollection변수를 생성하여 이곳에 이미지가 있는 주소 데이터를 만들어준다. MenuBar라는 새로만든 컨포넌트의 데이터이기도 하다.

<<MenuBar.mxml>>
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="30" backgroundColor="#242323" verticalAlign="middle"> <mx:Script> <![CDATA[ import mx.graphics.ImageSnapshot; import mx.controls.Image; import mx.collections.ArrayCollection; private var timer:Timer = new Timer(scrollSpeed);; public var scrollSpeed:Number = 100; private function itemListScrollOverEventHdlr(event:MouseEvent):void{ var btn:Button = event.currentTarget as Button; if(btn.id == "btn_next"){ if(timer.running) { timer.stop(); } timer = new Timer(this.scrollSpeed); timer.addEventListener(TimerEvent.TIMER, scrollNextFunction); timer.start(); }else if(btn.id == "btn_previous"){ if(timer.running) { timer.stop(); } timer = new Timer(this.scrollSpeed); timer.addEventListener(TimerEvent.TIMER, scrollPreviousFunction); timer.start(); } } private function stopScrolling(event:Event):void { if(timer.running) { timer.stop(); } } private function scrollNextFunction(event:TimerEvent):void{ if(horizontalList.horizontalScrollPosition < horizontalList.maxHorizontalScrollPosition){ horizontalList.horizontalScrollPosition++; } } private function scrollPreviousFunction(event:TimerEvent):void{ if(horizontalList.horizontalScrollPosition > 0){ horizontalList.horizontalScrollPosition--; } } ]]> </mx:Script> <mx:ArrayCollection id="item" /> <mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center" paddingLeft="10" paddingRight="10"> <!-- 1. message --> <mx:Text text="Index : " color="#FFFFFF"/> <mx:Text id="txt_index" text="{horizontalList.selectedIndex}" color="#FFFFFF"/> <!-- 2. image choose controller --> <mx:HBox id="itemScrollBox" width="95%" horizontalAlign="center" horizontalGap="2"> <mx:Button id="btn_previous" width="40" height="20" label="＜" mouseOver="itemListScrollOverEventHdlr(event)" mouseOut="stopScrolling(event)"/> <mx:HorizontalList id="horizontalList" labelField="label" dataProvider="{item}" itemRenderer="CustomItemRenderer" columnCount="9" columnWidth="20" rowCount="1" rowHeight="20" horizontalScrollPolicy="off" paddingBottom="0" paddingTop="0" borderStyle="none"/> <mx:Button id="btn_next" width="40" height="20" label="＞" mouseOver="itemListScrollOverEventHdlr(event)" mouseOut="stopScrolling(event)"/> </mx:HBox> <!-- 3. exit button --> <mx:Button id="btn_exit" label="Exit" /> </mx:HBox> </mx:HBox>

MenuBar에서 HorizontalList 컨포넌트안에 들어가는 item을 itemRenderer를 이용하도록 만들었다.
<<CustomItemRenderer.mxml>>
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" backgroundColor="#242323" mouseOver="mouseOverHdlr(event)" mouseOut="mouseOutHdlr(event)"> <mx:Script> <![CDATA[ private function mouseOverHdlr(event:MouseEvent):void{ this.setStyle("backgroundColor", 0xFFFFFF); txt_no.setStyle("color", 0x242323); } private function mouseOutHdlr(event:MouseEvent):void{ this.setStyle("backgroundColor", 0x242323); txt_no.setStyle("color", 0xFFFFFF); } ]]> </mx:Script> <mx:Label id="txt_no" text="{data.no}" fontSize="10" fontWeight="bold" color="#FFFFFF"/> </mx:VBox>

이것들을 이용해서 Fullscreen 모드에서만 동작하도록 만들어보았다. (좀더 응용을 해보았다.)
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ty="*" layout="absolute" applicationComplete="init(event)" creationComplete="creationCompleteHdlr()" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Script> <![CDATA[ import flash.display.StageDisplayState; import mx.collections.ArrayCollection; //** IMAGE DATA */ private var item:ArrayCollection = new ArrayCollection([ {no:"1", label:"Autumn Leaves", data:"assets/Autumn Leaves.jpg"}, {no:"2", label:"Creek", data:"assets/Creek.jpg"}, {no:"3", label:"Desert Landscape", data:"assets/Desert Landscape.jpg"}, {no:"4", label:"Dock", data:"assets/Dock.jpg"}, {no:"5", label:"Forest Flowers", data:"assets/Forest Flowers.jpg"}, {no:"6", label:"Forest", data:"assets/Forest.jpg"}, {no:"7", label:"Frangipani Flowers", data:"assets/Frangipani Flowers.jpg"}, {no:"8", label:"Garden", data:"assets/Garden.jpg"}, {no:"9", label:"Green Sea Turtle", data:"assets/Green Sea Turtle.jpg"}, {no:"10", label:"Humpback Whale", data:"assets/Humpback Whale.jpg"}, {no:"11", label:"Oryx Antelope", data:"assets/Oryx Antelope.jpg"}, {no:"12", label:"Toco Toucan", data:"assets/Toco Toucan.jpg"}, {no:"13", label:"Tree", data:"assets/Tree.jpg"}, {no:"14", label:"Waterfall", data:"assets/Waterfall.jpg"}, {no:"15", label:"Winter Leaves", data:"assets/Winter Leaves.jpg"} ]); private function creationCompleteHdlr():void{ menuBar.item = this.item; menuBar.btn_exit.addEventListener(MouseEvent.CLICK, toggleFullScreen); } private function init(evt:Event):void { /* Set up full screen handler. */ Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler); dispState = Application.application.stage.displayState; } private function fullScreenHandler(evt:FullScreenEvent):void { dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")"; if (evt.fullScreen) { /* Do something specific here if we switched to full screen mode. */ contBox.visible = false; menuBarMoveChk.visible = true; menuBar.visible = true; img.visible = true; } else { /* Do something specific here if we switched to normal mode. */ contBox.visible = true; menuBarMoveChk.visible = false; menuBar.visible = false; img.visible = false; } } private function toggleFullScreen(event:MouseEvent):void { try { switch (Application.application.stage.displayState) { case StageDisplayState.FULL_SCREEN: /* If already in full screen mode, switch to normal mode. */ Application.application.stage.displayState = StageDisplayState.NORMAL; break; default: /* If not in full screen mode, switch to full screen mode. */ Application.application.stage.displayState = StageDisplayState.FULL_SCREEN; break; } } catch (err:SecurityError) { // ignore } } private function showMenuBar(evt:Event):void{ var chk:CheckBox = evt.target as CheckBox; //show menu bar controller move effect moveeff.end(); if(chk.selected){ moveeff.yTo = Application.application.height - 30; } else{ moveeff.yTo = Application.application.height; } moveeff.play(); } ]]> </mx:Script> <mx:Move id="moveeff" target="{menuBar}" duration="500" /> <mx:String id="dispState" /> <mx:VBox id="contBox" y="10" width="100%" horizontalAlign="center"> <mx:Label id="labal1" text="width={Application.application.width}"/> <mx:Label id="labal2" text="height={Application.application.height}" /> <mx:Label id="labal3" text="displayState={dispState}" /> <mx:Button id="btn_fullscreen" label="Toggle fullscreen" click="toggleFullScreen(event)" /> </mx:VBox> <mx:Image id="img" source="{menuBar.horizontalList.selectedItem.data}" maintainAspectRatio="true" horizontalAlign="center" width="100%" height="100%" visible="false"/> <ty:MenuBar id="menuBar" x="0" y="{Application.application.height}" visible="false"/> <mx:CheckBox id="menuBarMoveChk" x="10" y="{Application.application.height-50}" visible="false" change="showMenuBar(event)"/> </mx:Application>

소스를 보면 Fullscreen 모드일때 숨겨두었던 컴포넌트를 보여주고, 일반화면일때 보이던 컴포넌트를 숨기는 단순한 방법을 선택하였다. 더좋은 방법이 있을까??
Fullscreen 모드에 관한 html 설정은 아래 포스트를 참조하길..


도움이 되셨다면 추천 부탁드립니다.

위처럼 만들면 스크롤바가 눈에 거슬린다. 아니 차라리 없는편이 더 나을지도 모르겠다. HorizontalList을 어떻게 적용하느냐의 문제겠지만, 일단 지저분에 보이는것은 사실.

그래서 어떻게 만들면 보기좋게 만들까 고민을 하다가 버튼을 이용해서 스크롤의 기능을 대신하면 어떨까 라는 생각을 하게되었다.

일단 결과먼저..


보기에도 훨씬 깔끔하고 기존 스크롤보다 사용하기도 편해졌다. (물론 개인적인 생각...)
마우스 오버와 마우스 아웃 이벤트를 사용하였고, 여기에 Timer 이벤트로 지속적으로 마우스 오버이벤트를 발생 시켰다.

소스
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center"> <mx:Script> <![CDATA[ import mx.graphics.ImageSnapshot; import mx.controls.Image; import mx.collections.ArrayCollection; private var timer:Timer = new Timer(scrollSpeed);; public var scrollSpeed:Number = 100; private function itemListScrollOverEventHdlr(event:MouseEvent):void{ var btn:Button = event.currentTarget as Button; if(btn.id == "btn_next"){ if(timer.running) { timer.stop(); } timer = new Timer(this.scrollSpeed); timer.addEventListener(TimerEvent.TIMER, scrollNextFunction); timer.start(); }else if(btn.id == "btn_previous"){ if(timer.running) { timer.stop(); } timer = new Timer(this.scrollSpeed); timer.addEventListener(TimerEvent.TIMER, scrollPreviousFunction); timer.start(); } } private function stopScrolling(event:Event):void { if(timer.running) { timer.stop(); } } private function scrollNextFunction(event:TimerEvent):void{ if(horizontalList.horizontalScrollPosition < horizontalList.maxHorizontalScrollPosition){ horizontalList.horizontalScrollPosition++; } } private function scrollPreviousFunction(event:TimerEvent):void{ if(horizontalList.horizontalScrollPosition > 0){ horizontalList.horizontalScrollPosition--; } } ]]> </mx:Script> <mx:Label color="blue" text="A HorizontalList Scroll Button control displays items in a single row. "/> <mx:HBox verticalAlign="middle" horizontalAlign="center"> <mx:Button id="btn_previous" width="40" height="20" label="＜" mouseOver="itemListScrollOverEventHdlr(event)" mouseOut="stopScrolling(event)"/> <mx:HorizontalList id="horizontalList" height="30" columnCount="3" columnWidth="30" horizontalScrollPolicy="off"> <mx:dataProvider> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> <mx:Object label="5"/> <mx:Object label="6"/> <mx:Object label="7"/> <mx:Object label="8"/> <mx:Object label="9"/> <mx:Object label="10"/> <mx:Object label="11"/> <mx:Object label="12"/> <mx:Object label="13"/> <mx:Object label="14"/> <mx:Object label="15"/> <mx:Object label="16"/> <mx:Object label="17"/> <mx:Object label="18"/> <mx:Object label="19"/> <mx:Object label="20"/> </mx:Array> </mx:dataProvider> </mx:HorizontalList> <mx:Button id="btn_next" width="40" height="20" label="＞" mouseOver="itemListScrollOverEventHdlr(event)" mouseOut="stopScrolling(event)"/> </mx:HBox> </mx:Application>

간단하게 요약하자면, 마우스가 해당 버튼으로 이동시 마우스 오버 이벤트를 발생하고, 마우스 오버 이벤트에서는 Timer 이벤트를 동작시켜 scrollNextFunction, scrollPreviousFunction 를 호출한다. 호출된 각각의 함수에서는 horizontalList의 dataProvider 갯수안에서만 움직이도록 코딩해주었다.

위 소스의 전체는 아래에...

소스를 가져가실땐, 댓글을 달아주세요..