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

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

[ 설치 파일 ]
PS_Flex_Skinning_11_20.zip


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>

'etc > old' 카테고리의 다른 글

구글-네이버, ‘오픈’의 엇갈림  (0) 2009.05.28
TabBar 스타일 적용하기  (0) 2009.05.26
차트 - 디자인을 해보자 !  (0) 2009.05.21
‘오피스 2010’ 프리뷰 버전 유출, 이용자 확산  (0) 2009.05.20
한게임, 게임 오픈 마켓 '아이두게임' 오픈  (0) 2009.05.20

+ Recent posts

티스토리툴바