Flex/AIR/AS3/Skin2009.11.10 04:11

오랫만에 글을 쓰는거 같네요;; 그동안 너무 바빠서 글을 쓸 정신이 없었습니다 ㅠ_ㅜ

지금도 일이 끝나지 않았지만 처음 블로그를 만들면서 가졌던 마음가짐을 버리지 않기 위해 짬을 내서 ^^;

(원래 계획은 하루 하나씩 글을 쓰자였는데 역시나 아직 블로그 초보라서 그런지 글 하나를 작성하는데 걸리는 시간이 보통 한시간이 넘어감에따라 하루에 하나의 글은 무리인거 같네요 흑... 언젠간 익숙해지겠죠 ㅋ

그럼 이번 글을 쓰게된 목적부터 알아보겠습니다.

Flex 3 에서 4로 넘어오면서 spark 라이브러리를 사용함에 따라 Flash Builder 에서 기존에 사용하던 방식에서 많이 달라진 점이 바로 콤포넌트에 스타일을 적용시키는 방법입니다.

간단하게 설명드리자면 기존 halo 라이브러리에서는 스타일(CSS)로서 콤포넌트의 모양을 수정했지만 spark 라이브러리에서는 스킨자체를 콤포넌트 형식으로 작성을 하는 형태라 기존 halo에 적응되셨던 분들은 스타일을 주는게 상당히 까다로워지고 귀찮아졌다고 느껴집니다. 저 역시 스타일로 모양을 꾸미는 방법에 익숙해져 있던터라 처음 Flex4를 사용할때 막히는 점이 한두가지가 아니더군요;; 하지만 spark 라이브러리의 스킨형태로 모양을 꾸미는 방법은 확장성에 있어서는 기존 스타일을 사용했던 방식보다 상당히 좋아졌습니다. 또한 익숙해지다보면 그리 어렵지도 않습니다. 실제로 스킨에 사용되는 클래스는 상당히 직관적인 이름들을 가진 형태로 되어 있기 때문에 한가지 스킨 형태만 보더라도 자신이 원하는 스킨을 만드는건 결코 어렵지 않습니다.

아;; 자꾸 주제가 산으로 가는군요 ㅜ_ㅜ 자 그럼, 원래 주제로 돌아가서 기존에 Flex 3에서 기본적으로 투명한 application을 만들기 위해서는 backgroundAlpha 를 0으로 주기만 하면 간단하게 투명 플래쉬를 제작할 수 있었습니다. 하지만 Flex 4.0에서는 application에 backgroundAlpha 항목이 사라져 버렸습니다.

저도 처음에 당연히 backgroundAlpha가 있을거라 생각하고 코딩을 했더니 Flash Builder에서 거부를 하더군요 ㅡ_ㅡ;
backgroundAlpha가 안되자 밀려오는 당혹감이란 ㅡ_ㅡ;;; 스펠링이 틀렸나 검사도 해보고...;;

그러나 이유는 다른곳에 있었습니다. 기존 Flex3에서 application을 제작할때는 기본적으로
<mx:Application ... 이런식으로 시작이 되었으나 Flex4로 넘어오면서
<s:Application ... 이런식으로 spark 라이브러리를 기본으로 사용하고 있습니다.

여기서 깨달은 한가지 그냥 새로운 spark 라이브러리에 적응하기 귀찮으신 분들은 <mx:Application 이렇게 고쳐서 backgroundAlpha="0"으로 주면 투명 플래쉬를 만들 수 있습니다 ㅡoㅡ ; 그러나 기존 방식대로 하기엔 자존심이 ㅡ_ㅡ;; 쿨럭; ㅋ 자존심 보다는 앞으로 나올 Flex 4 정식 버젼에 빨리 적응하기 위해서라도 새로운 방식을 알아둘 필요가 있다고 생각해서 spark 라이브러리에서 배경이 투명인 application을 만드는 방법에 대해서 생각해 보다가 전에 포스팅했던 spark 라이브러리에서 스킨 적용하기를 썼던 생각이 들더군요 ㅡ_ㅡ 그래서 Flash Builder Help에서 ApplicationSkin을 검색해 보았습니다.


역시나 있더군요;; 그럼 이제 문제는 기본 ApplicationSkin으 구조를 보고 배경만 투명으로 처리하는 스킨을 만들면 되겠구나라고 생각하고 기본 ApplicationSkin을 불러와 봤습니다.








    
    
     

    
        
        
        
        
    
    
    
    
    
        
            
        
    
        
    
        
            
        

        
        

            
            
               
                    
                        
                        
                    
               
            

            
            
               
                    
                        
                        
                    
               
            

            
            
                
                    
                
            

            
            
                
                    
                
            
        

        
        

    




아 역시나 위에서 spark 스킨에 대해서 말했듯이 기본적인 영어만 알더라도 쉽게 알 수 있는 형태로 되어 있습니다;

자 그럼 위에 코드를 보시면 친절하게도 주석으로
<!-- fill -->
<!---
        A rectangle with a solid color fill that forms the background of the application.
        The color of the fill is set to the Application's backgroundColor property.
-->

이렇게 주석으로 application의 배경색 rectangle라고 알려주는군요 ㅎ
저희는 이 부분들 투명하게만 바꾸면 됩니다.
이부분의 내용을

        
            
        
    

위 내용을 아래처럼 solid color에 alpha값을 0으로만 고쳐 주시면 됩니다.

        
            
        
    


자 이제 스킨 alpha를 0으로 고친 스킨을 만들어 보겠습니다.

Flash Builder 에서 File → new → MXML Component를 선택한후 원하시는 파일이름을 적고 아래 그림 처럼 Base on 부분에 Browse를 클릭하여 skin을 선택하여 줍니다.


이제 생성된 콤포넌트에 코드를 아래처럼 수정하여 줍니다.



	
	
		
	 
	
	
		
		
		
		
	
	
	
	
	
		
			
		
	
	
	
		
			
		
		
		
		
			
			
			
				
					
						
						
					
				
			
			
			
			
				
					
						
						
					
				
			
			
			
			
				
					
				
			
			
			
			
				
					
				
			
		
		
		
		
		
	
	


이제 스킨을 만들었으니 application에 적용을 해야합니다.

application property에 skinClass 부분에 방금 만든 skin의 이름을 적어 줍니다.



코드로 보면 다음과 같습니다.



	
		
	



그럼 테스트를 위해 원형 그라디언트를 그려보겠습니다.

코드에 다음처럼 네모난 사각형에 원형 그라디언트를 그려보겠습니다.



	
		
	
	
	
		
			
				
					
					
					
				
			            
		
	



이제 빌드를하고 결과물을 보겠습니다.



음... 배경이 흰색이니 투명이 된지 잘 모르겠군요;; 배경색이 다른 레이어 위에 올려 보겠습니다.



배경색이 투명이 되지 않았네요 ㅎ 당황하실 필요는 없습니다. 당연한거니까요 .
Flex3에서와 마찬가지로 wmode를
로 주기만 하면 투명한 플래쉬 완성~
html문서를 여시고
params.wmode = "transparent";
<param name="wmode " value="transparent" />
이런식으로 wmode를 추가해 주고 다시 테스트 해보겠습니다.



투명효과 완성~ ^ㅡ^

잘 이해 안가시는 부분은 언제든 댓글을 달아주세요~~ ( 격려의 댓글도 환영해요~ ㅋ )
저작자 표시 비영리
신고
Posted by 코멧'★
Flex/AIR/AS3/Skin2009.10.30 22:57
어제 "Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!" 라는 글을 썼었는데 오늘은 그 2탄으로 이번엔
일러스트로 Spark Skin을 만드는 법에 대해 알아보겠습니다.

Flash로 스킨을 만드는 것 보다 훨~~씬 간단하니 긴장하진 마세요 ^^;

우선 일러스트로 up, over, down, disabled 에 쓰일 버튼을 제작해 보겠습니다.
사이즈는 간단하게 100x100으로 잡고 버튼에 쓰일 스킨을 만들어 보겠습니다.

 UP  OVER  DOWN  DISABLED
 
 
 
 

위와 같이 up, over, down, disabled에 쓸 스킨을 일러스트로 그립니다.

일러스트로 해당 스킨을 그렸으면 이제 중요한 작업이 바로 만든 스킨을 FXG 파일로 저장을 해야하는데
File → Save As... 를 선택하여 파일 형식을 FXG로 선택하신 후 저장만 하시면 아주 간단하게 만드실 수 있습니다.




자 이제 스킨에 쓰일 FXG 파일들을 다 만드셨다면 Flash Builder에서 작업을 해주어야 합니다.

우선 새 프로젝트를 생성한 후 스킨을 적용할 버튼을 하나 가져다 놓습니다.


그럼 이전에 2009/10/29 - [프로그래밍/Flex / ActionScript] - Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자! 글에서도 했던것 처럼 버튼의 Properties에서 Style 부분에 Skin 옆 연필 모양을 클릭하여 Create New Copy of Skin을 선택하여
스킨에 쓰일 ButtonSkin1.mxml 파일을 생성합니다.


ButtonSkin1.mxml 의 소스를 다음과 같이 수정합니다.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             minWidth="100" minHeight="100">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
     
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    
</s:SparkSkin>


(이 수정을 하는 이유는 연필 모양을 클릭하여 새로운 스킨을 만들기를 하면 기본 스킨의 코드가 복사되어 만들어지기 때문에 기존 Default 스킨을 사용하지 않고 저희가 제작한 FXG를 스킨으로 사용하기 위한 것입니다. 만약 초보가 아니시고 어느 정도 하시는 분이시라면 굳이 연필 모양을 클릭하시지 않고 MXML Component로 SparkSkin을 상속받아 만드셔도 상관 없습니다. 이글은 단지 아직 코드가 익숙하지 않으신 분들을 기준으로 좀 더 쉽게 만드는법을 설명드리고자 이렇게 설명드리는 것이니 양해 부탁드립니다 ^^;)

일러스트로 만든 FXG 파일들은 프로젝트의 src 폴더 밑에 skin이라는 폴더를 만들어 그곳에 넣어 둡시다.


이제 ButtonSkin1.mxml 파일에서 Design 모드로 선택합니다.


그 다음 State를 up 부분을 선택하시고


아까 만들어 놓은 스킨중 up에 해당하는 스킨을 끄집어다 가운데에 배치 시킵니다.


이런식으로 각 스킨을 up, over, down, disabled 에 해당하는 스킨들을 각 state에 배치하여 줍니다.

소스로 보신다면 아래와 같이 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             minWidth="21" minHeight="21" width="100" height="100" xmlns:skin="skin.*">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <skin:buttonSkinA_UP includeIn="up" x="0" y="0"/>
    <skin:buttonSkinA_OVER includeIn="over" x="0" y="0"/>
    <skin:buttonSkinA_DOWN includeIn="down" x="0" y="0"/>
    <skin:buttonSkinA_DISABLED includeIn="disabled" x="0" y="0"/>
    
</s:SparkSkin>

이제 저장을 하시고 아까 스킨을 적용시킬 버튼으로 돌아가겠습니다.


그럼 Style부분에 방금 스킨으로 만든 ButtonSkin1이라는 이름이 들어간걸 확인하실 수 있습니다.
(만약 안들어가 있다면 직접 적어줍시다;)

이제 실행 시켜서 스킨이 작 적용되나 확인해 봅시다~!

 

음~ ^ㅡ^ 잘 적용 되는 군요~ 이로써 일러스트를 이용한 Spark Skin용 FXG 만들기 완성~~
(※ 주의 사항으로 만약 일러스트에서 폰트를 사용할 경우 기본 폰트가 아닐 경우 제대로 표현되지 않을 수 있으니 Expend 시켜 사용하셔야 합니다.)

관련글
저작자 표시 비영리
신고
Posted by 코멧'★
Flex/AIR/AS3/Skin2009.10.29 17:03

Flex Builder에서 Flash Builder 4로 넘어오면서 spark library를 사용하게 됨에 따라 Spark Skin을 제작하여 쓰게되는 경우가
생겨서 기존 mx skin을 만드는 방식에서 벗어나 Spark Skin에 Flash로 제작한 swc 파일을 적용해보려고 생각했는데요.

생각보다 쉽진 않더군요 ^^; 기존 halo에서 swc 스킨을 사용하기는 그냥 지정만 하면 끝났는데 Spark Skin은 좀 더 손이 많이 갑니다. ㅜ_ㅜ

그럼 일단 스킨을 만들기 위해서는 준비물이 필요합니다.
Adobe Flash CS3 or CS4
Adobe Flash Builder 4 Beta2 (꼭 빌더로만 해야하는건 아닙니다 ^^;;)
그리고 아래 글들을 참고 하셔서 Flex 템플릿을 만들 수 있는 Extension Package File을 설치 하셔야 합니다.
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS3로 Flex Component Skin 제작하기
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS4로 Flex Component Skin 제작하기


우선 Flex Skin을 제작하기 위한 Flash CS3 또는 Flash CS4가 필요합니다.
(물론 Skin을 만드는 방법은 꼭 Flash로만 만들어야 하는건 아니지만 지금 주제가 Flash로 제작해보자이니 이해해주세요^^;)

만약 Flash CS4만 있다면 아직 CS4에서는 Extension Package File이 제공되지 않아서
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS4로 Flex Component Skin 제작하기
위 글을 보시고 Flex Component 템플릿으로 제작을 하셔야 합니다.

(템플릿을 쓰지 않고 플래쉬 무비를 만들어서 독자적인 Component를 만드실려는 분들은 CS3 버젼에
commands → Convert Symbol to Flex Component 메뉴를 사용하여 라이브러리 심볼을 Flex 콤포넌트로
컨버트 시켜야 하기때문에 템플릿으로 제작하지 않는 분들은 CS4에서 아직 CS4용 Extension Package File을 지원하지
않고 있기 때문에 CS3 버젼을 이용하셔야 합니다.)

CS3와 CS4의 경우 둘다 비슷한 방법으로 제작되니 CS3 기준으로 설명 드리겠습니다.
우선 Flex Skins 템플릿이 설치 되어 있다고 가정하고 진행을 하겠습니다. 만약 설치되어 있지 않다면
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS3로 Flex Component Skin 제작하기
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS4로 Flex Component Skin 제작하기
위 글들을 보고 설치 하여 주시기 바랍니다.

그럼, 일단 Flash CS3를 실행 시킵니다.


위 처럼 Flex Skins를 선택합니다.

만약 초기 화면을 지나 치셨다면 File → New 메뉴를 선택하여 다음과 같은 창에서 Flex Skins를 선택합니다.


그럼 가장 만만한 Button 스킨을 선택해 보겠습니다.


위와 같은 화면이 나타나면 우측 Library창에서 Button_skin Movie Clip을 더블클릭하여 선택하여 줍니다.


음... 이제 나름대로의 스킨을 만들어 보겠습니다. 이글의 목적이 'Spark Skin을 Flsah로 제작해보자' 이기 때문에 간단하게 바꿔보겠습니다. 만약 좀더 동적이고 멋진 Skin을 만들고 싶으신분은 다른 분들의 글이 많으니 참고해주세요~
참고로 딴똥네님의 동영상 강좌를 보시면 아주 큰 도움이 된답니다 ^^;
딴동네님 동영상 강좌 : http://ddandongne.tistory.com/226


자 위처럼 타임라인이 보이실 껍니다. 자세히 보시면 states에 빨간색 flag 모양으로 표시 된 곳에 up, over, down, disabled 라고 라벨이 붙어 있습니다.

up, over, down, disabled의 색깔과 모양만 변경된 스킨을 만들어 보겠습니다.


이제 완성된 스킨을 SWC 파일로 export 시키겠습니다.
File → Publish Settings... 메뉴를 선택합니다.


Publish Settings 창에서 Export SWC 부분에 체크하신후 Publish 버튼을 눌러 SWC 파일을 생성합니다.

SWC파일을 만드는 또다른 방법




자 이제 SWC 파일을 만들었으면 Flash Builder에 새 프로젝트를 생성한 후 버튼을 만들어 보겠습니다.


아까 생성한 SWC 파일은 새로 생성한 프로젝트의 src 폴더 밑에 skin 폴더에 저장하였습니다.
이제 저장한 SWC 파일을 프로젝트에 포함시켜 보겠습니다.


프로젝트에서 오른쪽 마우스 클릭 후 Properties 메뉴를 선택합니다.


Properies 창에서 Flex Build Path 부분에서 Library 탭을 선택하신 후 Add SWC... 버튼을 눌러 아까 저장한 SWC 파일을 선택하여 프로젝트에 포함시켜 줍니다.

이제 프로젝트에 가져다 놓은 버튼을 클릭하여 properties 창을 보면 중간 Style 부분에 Skin이라고 되어 있는 부분 옆에 연필 모양으 버튼을 클릭하여 Create New Copy of Skin 을 선택하여 줍시다.
(그냥 스킨 mxml을 만들어도 되지만 스킨이 어떠한 형태를 이루고 있는지 보시려면 Create Copy of Skin으로 현재 기본 스킨이 어떠한 형태로 이루어져 있나 보시는 것도 큰 공부가 됩니다 ^^;)



이제 위 그림 처럼 ButtonSkin1.mxml이 생성되면 Source 탭을 눌러 코드를 수정 하여 주어야 합니다.
소스를 보시면 아시겠지만 기본적인 버튼의 스킨이 코드로 나와 있습니다. 하지만 저희는 아까 만든 SWC 파일을 스킨으로 쓸 것이기 때문에 소스를 다음과 같이 수정합니다.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:skin="*"
             minWidth="21" minHeight="21"
             alpha.disabled="0.5">
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            protected function state1_enterStateHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                tmpSkin.gotoAndStop("up");
            }
            
            
            protected function state2_enterStateHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                tmpSkin.gotoAndStop("over");
            }
            
            
            protected function state3_enterStateHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                tmpSkin.gotoAndStop("down");            
            }
            
            
            protected function state4_enterStateHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                tmpSkin.gotoAndStop("disabled");
            }
            
        ]]>        
    </fx:Script>
    
    <!-- states -->
    <s:states>
        <s:State name="up" enterState="state1_enterStateHandler(event)" />
        <s:State name="over" enterState="state2_enterStateHandler(event)" />
        <s:State name="down" enterState="state3_enterStateHandler(event)" />
        <s:State name="disabled" enterState="state4_enterStateHandler(event)" />
    </s:states>
    <skin:Button_skin id="tmpSkin" />
    
</s:SparkSkin>

<skin:Button_skin id="tmpSkin" /> 여기에서 Button_skin은 아까 flash에서 Movie Clip 이름입니다.
Flash Builder를 사용하신다면 <skin: 까지만 입력하시면 자동완성으로 코드가 나타납니다.

그리고 이벤트에 보시면 아시겠지만 tmpSkin.gotoAndStop("up"); 이런식으로 flash로 만든 스킨의 states 레이어의 라벨명등을 이용하여 Movie를 제어하실 수 있습니다.

스킨을 적용시킬 버튼에는 아래와 같이 수정하여 주시면 됩니다. skinClass에는 ButtonSkin1.mxml 의 이름부분만 적어주시면 됩니다.
<s:Button x="113" y="137" label="Button" skinClass="ButtonSkin1"/>


생각보다 내용이 두서가 없는거 같네요 ㅜ_ㅜ;;

시간에 쫒기다 보니 끝부분으로 갈수록 대충 설명하는 경향이 ㅡ_ㅡㆀ 죄송 ㅜ_ㅜ

혹시나 궁금하신 점은 언제든 댓글 환영입니다~~

관련글
저작자 표시 비영리
신고
Posted by 코멧'★
TAG Flash, flex4, IT, Skin
Flex/AIR/AS3/Skin2009.10.27 22:19



2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS3로 Flex Component Skin 제작하기
CS3 번젼은 위 글을 참고하여 주시기 바랍니다.

Flex Builder 3


이번엔 Flash CS4로 Flex Component Skin을 제작하는 방법에 대해 한번 알아보겠습니다.

Flash CS4로 Flex Component Skin을 제작하는 방법은 CS3에서 처럼 Extension Package File로 아직 제공되지 않아서
CS3 처럼 클릭만으로 설치되진 않지만 그래도 하는 방법은 그리 어렵지 않습니다.

우선 CS3 마찬가지로 재료가 필요하겠죠? ㅋ 위에도 말씀 드렸다시피 Extension Package File이 아직 제공되지 않는 관계로
CS3에서 사용했던 templete 파일을 복사할 수 밖에 없습니다. 혹시나 CS3에 templete 파일이 없으신 분들은 아래 파일을 다운받으시기 바랍니다.

그럼 다운 받으신 파일을
C:\Documents and Settings\사용자 계정\Local Settings\Application Data\Adobe\Flash CS4\[LOCALE]\Configuration\Templates\
폴더에 압축을 풀어 주시면 설치가 끝~ 의외로 참 간단합니다 ^^;
([LOCALE] 은 영문판일 경우 en 한글판인 경우 kr 폴더입니다.)

아 영문 윈도우에서의 경로는 C:\Users\[USER]\AppData\Local\Adobe\Flash CS4\[LOCALE]\Configuration 입니다.

자 그럼 이제 확인을 해보기 위해 Flash CS4를 실행시켜 보겠습니다.


위 화면 처럼
 메뉴가 보인다면 이제 스킨을 만들 준비는 끝~


Flex Skins 메뉴를 클릭하면 위 그림처럼 템플릿을 선택할 수 있는 화면이 나타납니다. 여기서 만드시고 싶은 스킨을 선택하신후 (전 모든 스킨이 다 들어 있는 flex_skins 템플릿을 선택해 보겠습니다.) 확인 버튼을 클릭합니다.

위 처럼 각각의 스킨들이 라이브러리로 정리되어 있습니다. 원하시는 모양으로 스킨을 바꾸신 후 swc 파일로 Export 하신후 Flex에서 사용하시면 됩니다. 스킨을 제작하는 자세한 방법은 CS3에서도 말씀 드렸던

행복한앙님 블로그의 게시물을 참고해 주세요~
http://blog.naver.com/ang_/30029082083

관련글 보기



저작자 표시 비영리
신고
Posted by 코멧'★
Flex/AIR/AS3/Skin2009.10.27 20:06


Flash CS3에서 Flex Component Skin 제작하기

[출처] http://blog.naver.com/ang_/30029082083

자세한 제작 내용은 위 출처를 참고해주세요. 여기서는 Flex Skin Templetes 자료와 준비 과정까지만을 포스팅 하겠습니다.

Flash CS3에서 Flex Component Skin을 제작하기 위해서는 직접 플래쉬로 구현하는 방법도 있겠지만 초보자들에겐 쉽지만은 않은 방법입니다. 그래서 좀 더 편한 방법으로 제공되어진게 바로 미리 제작되어진 Templetes를 이용하는 방법이 있습니다.

우선 제작하기 위해선 flex skin 파일을 다운로드 받으셔야 합니다.
다운로드 - http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins#fxcompkit

위 사이트로 가시면 Flex Skin Design Extension for Flash에 있는 파일을 다운받으시기 바랍니다.

dlDownload for Windows and Macintosh (MXP, 4.44 MB) <--- 귀찮으신 분들은 여기를 클릭


(링크가 깨졌을 경우 아래 링크로 다운받으세요.)



를 다운 받으셨으면 이제 CS3 Extension Manager를 실행합니다.
Extension Manager은 아래 경로에 존재합니다.
C:\Program Files\Adobe\Adobe Extension Manager\Extension Manager.exe
Adobe Master Collection CS3 을 설치 하신 분들이라면
시작 → 모든프로그램 → Adobe Master Collection CS3 → Adobe Extension Manager CS3

(다운로드 받은 파일을 더블클릭하시면 자동으로 Extension Manager가 실행 되지만 만약 CS4를 같이 설치하신분이라면
CS4용 Adobe Extension Manager가 실행 되니 위에 나와있는 방법으로 실행하시면 됩니다.)


Extension Manager를 실행하시면 위와 같은 실행화면을 보실 수 있습니다.
 버튼을 클릭하여 다운받은
 파일을 선택하여 줍니다.


동의 창이 나오면 동의버튼을
  클릭합니다.


설치 화면이 나오고 설치 성공 화면이 나오면 확인 버틍을 클릭합니다.



Extension Manager를 종료하고 Flash CS3를 실행 시킵니다.



위 처럼 Flex Skins 라는 메뉴가 나오면 스킨 만들 준비 끝~~
그럼 이제 스킨 템플릿 파일을 열어 보겠습니다.


위와 같이 여러 콤포넌트들의 스킨을 제작할 수 있습니다.
여기서 flex_skins 파일을 선택합니다.


flex의 기본 콤포넌트의 스킨들이 모두 모아져 있습니다. 여기서 스킨을 수정 하여 swc 파일로 Export 시키셔서 flex에서 사용하시면 됩니다. 제작법과 flex에서 불러오는 법은 행복한앙님의 블로그에 자세히 나와 있으니 참고 하시기 바랍니다.
행복한앙님 블로그의 게시물 : http://blog.naver.com/ang_/30029082083
저작자 표시 비영리
신고
Posted by 코멧'★
TAG cs3, Flash, flex, IT, Skin
Flex/AIR/AS3/Skin2009.10.27 19:38
[출처] http://www.blogna.org/blog/adobe-flex/13-excellent-free-flex-skins/

skins

I just wanted to share a few of the best free Flex skins that I have found. If you want to give your app some style, and you don't have the time to design a Flex skin yourself, you'll likely find something here that can spice up your app.

If you're interested in learning more about how to create new Flex skins or learn how to apply skins you have created, check out How to Create a Flex Skin and How to Apply a Flex Skin.

Enjoy!

ScaleNine

Undefined Skin One

Undefined Skin One
Preview
Download Source


Brownie

Brownie
Preview
Download Source


Kingnare

Kingnare
Preview
Download Source


Vista Remix

Vista Remix
Preview
Download Source


Aqua (Apple OSX Skin)

Aqua
Preview
Download Source


Darkroom

Darkroom
Preview
Download Source


fle[ks]ray

Black Edding

Black Edding
Preview
Download Source


Flexscribble

Flexscribble
Preview
Download Source


Yahoo!

Yahoo Flex Skin

Yahoo Flex Skin
Preview
Download Source


PhilterDesign.com

iCandy

icandy
Preview
Download Source


WebSector

WSBackgroundPixelSkin

wsbackgroundpixelskin
Preview
Download Source


FillColors.com

Carbon

carbon
Preview and Download


Rainbow

rainbow
Preview and Download

저작자 표시 비영리
신고
Posted by 코멧'★
TAG flex, IT, Skin

티스토리 툴바