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 코멧'★
PHP2009.10.29 23:14

Flash Builder 4에서 PHP와 Flash Builder 간의 연동을 보여주는 동영상입니다.
저같이 PHP 프로그래머에서 플렉스로 전향한 사람들에겐 아주 유익한 동영상이네요 ^^;

PART 1. WORKING WITH PHP SERVICES IN FLASH BUILDER 4



PART 2. VIEW THE CODE : PHP SERVICES IN FLASH BUILDER 4




또 다른 동영상

USING THE PHP DATA WIZARD



다음 영상은 PHP 개발자들을 위한 COLDFUSION 이라는 동영상입니다.

COLDFUSION FOR PHP DEVELOPERS



저작자 표시 비영리
신고

'PHP' 카테고리의 다른 글

PHP 개발자들을 위한 Flash Builder 4 동영상  (2) 2009.10.29
PHP로 소켓 서버 작성하기  (0) 2009.10.27
Exif 함수  (0) 2009.08.24
Posted by 코멧'★
Flex/AIR/AS3/ANT2009.10.16 02:58

Flex를  접한지 이제 한 몇개월 지나다 보니 Flex로 library를 만들고 싶은 욕심이 생겼습니다.;;

아직 초보가 뭔 library를 만드냐라는 황당함을 뒤로한채 ASDoc 만드는법을 찾아 보았습니다. 생각보다 ASDoc문서를 만드는게 편하지 않더군요. 음... 그래서 편하게 만드는법을 찾아봤더니 제가 구입한 책중 Flex3 Knowhow Bible에 ANT로 ASDoc를 만드는법이 나와 있어서 따라해봤습니다. 잘되긴 하지만 역시나 빌더와 cmd 모드를 왔다 갔다하기도 귀찮고 걸리는게 좀 많더군요;

그래서 지돌스타님 블로그에서 ANT라고 검색해봤더니 Flex Builder 3에서 ANT 사용하기 라는 글이 있더군요!

오호 이런 좋은 글이 심봤다 ㅋ

그런데 제가 사용하고 있는 툴이 Flash Builder 4 Beta 라서 Flex Builder 3 와 하는 법이 같은지 한번 따라해 보기로 했습니다.

그럼 이제부터 Flash Builder 4 Beta 버젼에서 ANT를 사용하는 법을 알아보겠습니다.
(중간 중간 지돌스타님 블로그의 글을 인용했습니다.)

1. JDT (Eclipse Java Development Tools) 설치

ANT를 사용하기 위해서는 Flex Builder와 마찬가지로 JDT를 설치해야합니다.

우선 Flash Builder 4 Beta (이하 Flash Builder라고 하겠습니다.)를 실행합니다.



① Flash Builder의 상단 메뉴에서 Help → Software Updates → Find and Install... 메뉴를 선택합니다.




② Install/Updates 윈도우가 나타나면 "Search for new features to install" 선택한 후 Next 버튼을 누릅니다.




③ "The Eclipse Project Updates" 체크 후 Finish를 클릭합니다.



 
④  [Korea, Republic Of] 되어 있는 한국 미러 사이트 중에 아무거나 하나를 선택하신 후 Next 버튼을 누릅니다.



 
⑤ The Eclipse Project Updates → Eclipse SDK Eclipse 3.4.2 → Eclipse Java Development Tools 3.4.2. ... 를 체크 한 후 Next 버튼을 누릅니다.
( Eclipse Java Development Tools 3.4.2. ... 는 스크롤을 밑으로 좀 내리시다 보면 찾으실 수 있습니다. )



 
⑥ "I accept the terms in the license agreement"를 선택하여 license에 동의 하신후 Next 버튼을 누릅니다.



 
⑦ 설치 경로를 바꾸시려면 "Change Location ..." 버튼을 누른 후 원하시는 경로를 선택하시고 기본 설치 경로에 설치 하시려면 Finish 버튼을 누릅니다.



 
⑧ 설치 중 서명을 확인하는 창이 나오면 Install All을 눌러 설치를 계속 진행합니다.



 
⑨ 설치가 완료되면 Flash Builder를 다시 시작하겠냐는 창이 나타납니다. Yes를 눌러 프로그램을 재시작 합니다.



 
⑩ Flash Builder가 재시작 되면 상단 메뉴에서 Window → Other Views... 를 선택합니다.



 
⑪ Show View 윈도우에 Ant가 추가 된게 보이신다면 Ant를 선택하신 후 OK 버튼을 누릅니다.



 
⑫ Flash Builder 우측 하단에 ANT 창이 열립니다.


이상으로 JDT는 설치 완료~~!



ANT의 사용법은 다음에 리포팅 하겠습니다~;




저작자 표시 비영리
신고
Posted by 코멧'★

티스토리 툴바