FLEX에서 보통 스킨을 변경하는 것은 setStyle을 통해 이뤄 지죠...

그래서 스킨을 동적으로 변경하자고 하는 경우

.type1{
color:"#ff0000";
}

.type2{
color:"#0000ff";
}

css에서 이런식으로 만들어 놓은 이후 styleName = type1 ... styleName = type2 이런식으로 바꿔서 처리 합니다.

하지만 위와 같이 고정된 값이 아니라 외부에서 XML 또는 소켓통신 등을 통해서 값을 읽어들인 값을 기준으로

스킨의 값을 변경하고자 하는 경우에는 ... 스킨 클래스를 만들어 놓고 해당 클래스에 불러들인 값을 대입한 이후

해당 클래스를 스킨클래스로 지정하는 방법이 존재 합니다.

자세한 것은 첨부 파일을 참조 바랍니다 -__- 설명의 귀차니즘..


http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins 에 접속하여 다양한 형태의 플렉스 스킨 적용 방법을 확인 할 수 있습니다.
(위 사이트에 접속하면 Flash, FireWork 등 다양한 방법으로 스킨을 적용할 수 있습니다.)

우선적으로 AdobePhotoShop을 활용하여 스킨을 적용하는 방법을 설명하겠습니다.

[ 설치 파일 ]

1. 포토샵이 설치된 폴더에 다운로드 받은 Presets 폴더의 압축을 해제합니다.

2. 포토샵 실행 File -> Scripts -> New Flex Skin ...


3. 적절한 옵션을 선택


4. 파일을 수정(해당 레이어를 수정하면 됨)


5. 작업 완료 이후 파일 저장

(_HIDE BEFORE EXPORTING 라는 레이어는 Export 이전에 숨겨야 된다.)

6. File - Scripts -> Export Flex Skin ... 을 선택한다.

[그림 : 작업 완료 이후 생성된 파일 ]

7. 마지막으로 Flex에서 Import - Skin Artwork 메뉴에서 이전 저장한 파일을 Import 하면된다.





8. 작업 완료 이후 생성된 파일을 확인 할 수 있다.
( CSS생성, MXML에 CSS구문 추가, Image File Import 작업)




9. 작업전과 작업 이후 변경된 TabBar의 모습

작업 전
작업 이후

[이미지는 자작으로 만든것이라 ㅡ,.ㅡ;; 안 이뻐도 이해를....]

10, 기타 사항

앞에서도 언급한 것처럼 위 방법은 PhotoShop을 가지고 적용하는 방법입니다. Flash를 사용할 경우 위 사이트를 참조하여 작업을 진행하시면 될것입니다.

11. TEST CODE [ tabBarTest.mxml ]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 <mx:TabBar dataProvider="tabSource" />
 
 <mx:ViewStack id="tabSource">
  <mx:HBox label="TAB 1" />
  <mx:HBox label="TAB 2" />
  <mx:HBox label="TAB 3" /> 
 </mx:ViewStack> 
 <mx:Style source="assets.css"/> <!-- ARTWORK 사용시 자동적으로 추가 된 부분-->
</mx:Application>

+ Recent posts