Flex/AIR/AS3/Etc2010.04.28 00:17

Flex4에서 변경된 부분 중 하나인 Declarations 데크레이션? 디크레이션? 음;; 하여간 이놈이 처음 나왔을때 과연 이놈이 뭐하는 놈인가 무지하게 궁금했습니다;; 물론, 설명이 있긴했지만

<!-- Place non-visual elements (e.g., services, value objects) here -->

위 설명으로 보면 서비스들이랑 vo 같은 non-visual elements를 코딩하는 곳이라는 건 알겠는데 실제 프로젝트에서 서비스랑 vo를 보통 클래스로 빼서 쓰기 때문에 크게 사용할 일이 없지 않을까 하는 생각이 들었습니다. 뭐 effect나 그런것만 정의하면 되지 않을까하는 생각이었는데 오늘 Cairngorm 프레임워크를 사용하다가 재미있는 사실을 알았습니다. 물론, 이미 알고 계신분들도 많겠지만 전 나름대로 신선한 느낌이었습니다;; 저만 그럴지도;;

오늘 사용해 보고 사용자 콤포넌트를 만들때 속성을 바로 이곳에서 컨트롤할 수 있다는걸 깨달았습니다. 음... 쉽게 설명하기 위해 일단 예제를 하나 만들어 보겠습니다.

우선 간단한 버튼이 3개있는 콤포넌트를 만들어 보았습니다.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" width="248" height="64">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
  <fx:Boolean id="button1Visible">true</fx:Boolean>
  <fx:Boolean id="button2Visible">true</fx:Boolean>
  <fx:Boolean id="button3Visible">true</fx:Boolean>
  <fx:uint id="button1Color">#000000</fx:uint>
  <fx:uint id="button2Color">#000000</fx:uint>
  <fx:uint id="button3Color">#000000</fx:uint>
 </fx:Declarations>
 <s:Label x="10" y="10" text="Custom Component" fontWeight="bold"/>
 <s:Button x="10" y="30" label="버튼1" visible="{button1Visible}" color="{button1Color}"/>
 <s:Button x="88" y="30" label="버튼2" visible="{button2Visible}" color="{button2Color}"/>
 <s:Button x="166" y="30" label="버튼3" visible="{button3Visible}" color="{button3Color}"/>
</s:Group>




음... 참 간단한 콤포넌트입니다 ㅋ;;
위 콤포넌트 처럼 Declarations에 Boolean, uint 등의 변수를 Flex 태그로 만들 수가 있습니다.

위 예제만 보더라도 어느 정도 이해하실 분들도 있겠지만 이제 저걸 어떻게 사용할지 보도록하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:component="*" width="270" height="85">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <component:testComponent x="10" y="10"
        button1Color="#586421"
        button3Color="#A49F21"
        button2Visible="false">
 </component:testComponent>
</s:Application>




위 그림처럼 콤포넌트에서 만든 속성을 바로 사용할 수 있습니다.

이렇게 만들면 액션스크립트 없이도 간단한 속성은 바로 만들 수 있습니다. 나름 편리한것 같기도 ^^;


저작자 표시 비영리
신고
Posted by 코멧'★
Flex/AIR/AS3/Etc2010.04.13 22:38


플렉스 컴포넌트에서 열이아빠님이 올려놓으신 "플렉스 4 한글화 프로젝트" 글을 보고 공부도할겸 Flex4 문서 한글화 프로젝트에 참여하게 되었습니다 ^^; 영어나 일어를 잘하는편이 아니라서 제대로 번역이 될런지 걱정스럽긴 하지만 최대한 직역이 아닌 의역을 할려고 노력중입니다. ㅎㅎ

아직, 프로젝트에 참여 인원을 계속 모집하고 계신다니 관심 있으신분들은 얼렁얼렁 참여하세요~

현재 한 1/12 정도 작성이 되었다고 하지만 프로젝트 참여하시는 분들이 점점 늘어나는걸 보니 조만간 완성되지 않을까 싶네요 ^^;;

Flex4의 한글화 문서에 관한 정보를 원하시는 분들은 하단 링크를 참조하여주세요~


저작자 표시 비영리
신고
Posted by 코멧'★
Flex/AIR/AS3/Etc2010.01.14 20:38

Flex4 Spark Library 에서 Flash Parameter 값을 사용할때 Flex3에서 사용하던 방식과 약간의 차이가 있어 다소 혼란스러웠습니다.
Flex4에서는 Flex3에서와 같이 Application.application.parameters 로 Parameter 값을 받아 오는 것이 아니라 그냥 parameters로 받아 올 수 있습니다. 방식은 더 간편해 졌지만 Flex3에 익숙해져 있으시다면 다소 헷깔릴 수 있습니다.

Flex3
=>

private function getParameter():void
{
  var _parameters:Object = Application.application.parameters;

  if (_parameters.Parameter명)
  {
    trace(_parameters.Parameter명);
  }
}


Flex4 (Spark Library)
=>

private function getParameter():void
{
  var _parameters:Object = parameters;

  if (_parameters.Parameter명)
  {
    trace(_parameters.Parameter명);
  }
}


저작자 표시 비영리
신고
Posted by 코멧'★
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 코멧'★
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/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

티스토리 툴바