'투명'에 해당되는 글 1건

  1. 2009.11.10 Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기
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 코멧'★

티스토리 툴바