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/Etc2009.11.17 02:20

요즘 블로그 하기가 힘든 관계로 간단한 포스팅 하나 하고 갑니다~ ㅎㅎ

Math.Random()은 0과 1사이의 더블형 난수를 발생시키는 함수입니다.

0 <= Math.Random() < 1

위에서 보시는바와 같이 0은 포함되지만 1은 포함되지 안습니다.

그럼 이걸 응용해서 어찌 랜덤색상을 구하게 만드는지 살펴 보겠습니다.

flex에서 사용되는 색상코드는 16진수 형태의 24비트 칼라 이기때문에 색상의 표현은

0xFFFFFF 을 10진수로 바꿔보면 16777215가 됩니다.

0xFFFFFF도 흰색이므로 색상에 포함시킨다고 하면 Math.Random() 함수에 16777216만 곱해주면 0과 16777216 사이의 랜덤 난수를 발생시킬 수 있습니다. 하지만 여기서 주의해야할 점은 Math.Random() 함수는 double형이기때문에 발생되는 난수를 정수형으로 바꿔줘야만 색상값으로 지정 할 수 있습니다. 이걸 actionscript 코드로 표현하면 아래와 같이 표현할 수 있습니다.

int(Math.Random() * 16777216)

위와 같은 형태로 랜덤한 색상을 생성할 수 있습니다.

그럼 응용 예제를 한번 만들어 보겠습니다.

package
{
	import flash.display.Sprite;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	
	import mx.events.*;
	
	public class randomTest extends Sprite
	{
		public function randomTest()
		{
			var timer:Timer = new Timer(100,0);
			timer.addEventListener(TimerEvent.TIMER, timerHandler);
			timer.start();
		}
		
		private function timerHandler(event:TimerEvent):void
		{
			createParticle();
		}
		
		public function createParticle():void
		{
			var color:uint;
			
			color = int(Math.random() * 16777215);
			var ball:Sprite = new Ball( Math.random()*6, color);
			ball.x = int(Math.random()*500);
			ball.y = int(Math.random()*500);
			addChild(ball);
		}
	}
}

import flash.display.*;
internal class Ball extends Sprite
{
	public function Ball( r:Number=4, c:uint =0x000000 )
	{
		graphics.beginFill( c);
		graphics.drawCircle( 0, 0, r );
		graphics.endFill();
	}
}

위와 같이 코드를 작성하고 실행하여 보겠습니다.


보시면 랜덤한 색상의 원이 0.1초 단위로 생성되는걸 확인하실 수 있습니다.

요즘 너무 바빠서 뭐라도 써야할꺼 같아서 구색맞추기용 글이었습니다 ㅋ ^^;;
저작자 표시 비영리
신고
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 코멧'★
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/3D2009.10.28 18:37
Flex4로 변화되면서 가장 큰 변화가 바로 spark library가 포함된 점입니다.

이 spark library를 통해 Flex4에서는 아주 간단하게 Rotate3D를 이용하여 3D 효과를 표현 할 수 있는데

Flex Examples 사이트에서 쉬운 예제가 있어서 소개해 드리겠습니다.

우선 어떤 효과인지 한번 보고 구현하는 방법에 대해 알아보겠습니다.




아래는 위 플래쉬 예제의 소스입니다.
[출처] Flex Example
01 <?xml version="1.0" encoding="utf-8"?>
02 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
03                xmlns:s="library://ns.adobe.com/flex/spark" 
04                xmlns:mx="library://ns.adobe.com/flex/halo" width="360" height="300" backgroundColor="#000000">
05     <fx:Declarations>
06         <!-- Place non-visual elements (e.g., services, value objectshere -->
07         <s:Rotate3D id="rotate3DX"
08                     target="{image}"
09                     angleXFrom="0"
10                     angleXTo="360"
11                     duration="1000"
12                     autoCenterTransform="true" />
13         
14         <s:Rotate3D id="rotate3DY"
15                     target="{image}"
16                     angleYFrom="0"
17                     angleYTo="360"
18                     duration="1000"
19                     autoCenterTransform="true" />
20         
21         <s:Rotate3D id="rotate3DZ"
22                     target="{image}"
23                     angleZFrom="0"
24                     angleZTo="360"
25                     duration="1000"
26                     autoCenterTransform="true" />
27     </fx:Declarations>
28     
29     <mx:ApplicationControlBar width="100%" cornerRadius="0">
30         <s:Button id="buttonX"
31                   label="Rotate3D X-axis"
32                   click="rotate3DX.play();" />
33         <s:Button id="buttonY"
34                   label="Rotate3D Y-axis"
35                   click="rotate3DY.play();" />
36         <s:Button id="bButtonZ"
37                   label="Rotate3D Z-axis"
38                   click="rotate3DZ.play();" />
39     </mx:ApplicationControlBar>
40 
41     <s:BitmapImage id="image"
42                    source="@Embed('assets/3d.jpg')"
43                    resizeMode="scale"
44                    smooth="true"
45                    horizontalCenter="0"
46                    verticalCenter="0"
47                    width="100"
48                    height="100" />
49 
50 </s:Application>


ActionScript로 구현 하시려는 분은 다음 코드를 참고해주세요.
[출처] Flex Example
01 <?xml version="1.0" encoding="utf-8"?>
02 <!-- http://blog.flexexamples.com/2008/10/13/3d-rotating-objects-in-flex-using-the-fxrotate3d-effect-and-flash-player-10/ -->
03 <s:Application name="Spark_Rotate3D_test"
04         xmlns:fx="http://ns.adobe.com/mxml/2009"
05         xmlns:s="library://ns.adobe.com/flex/spark"
06         xmlns:mx="library://ns.adobe.com/flex/halo"
07         initialize="init();">
08     <s:layout>
09         <s:BasicLayout />
10     </s:layout>
11  
12     <fx:Script>
13         <![CDATA[
14             import mx.containers.ApplicationControlBar;
15             import spark.components.Button;
16             import spark.components.ResizeMode;
17             import spark.primitives.BitmapImage;
18             import spark.effects.Rotate3D;
19  
20             [Embed("assets/fx_appicon.jpg")]
21             private const FlexLogo:Class;
22  
23             private var rotate3DX:Rotate3D;
24             private var rotate3DY:Rotate3D;
25             private var rotate3DZ:Rotate3D;
26             private var image:BitmapImage;
27             private var buttonX:Button;
28             private var buttonY:Button;
29             private var buttonZ:Button;
30  
31             private function init():void {
32                 buttonX = new Button();
33                 buttonX.label = "Rotate3D X-axis";
34                 buttonX.addEventListener(MouseEvent.CLICK, buttonX_click);
35  
36                 buttonY = new Button();
37                 buttonY.label = "Rotate3D Y-axis";
38                 buttonY.addEventListener(MouseEvent.CLICK, buttonY_click);
39  
40                 buttonZ = new Button();
41                 buttonZ.label = "Rotate3D Z-axis";
42                 buttonZ.addEventListener(MouseEvent.CLICK, buttonZ_click);
43  
44                 var appControlBar:ApplicationControlBar = new ApplicationControlBar();
45                 appControlBar.percentWidth = 100;
46                 appControlBar.setStyle("cornerRadius"0);
47                 appControlBar.addElement(buttonX);
48                 appControlBar.addElement(buttonY);
49                 appControlBar.addElement(buttonZ);
50                 addElementAt(appControlBar, 0);
51  
52                 image = new BitmapImage();
53                 image.source = FlexLogo;
54                 image.smooth = true;
55                 image.resizeMode = ResizeMode.SCALE;
56                 image.width = 100;
57                 image.height = 100;
58                 image.horizontalCenter = 0;
59                 image.verticalCenter = 0;
60                 addElement(image);
61  
62                 rotate3DX = new Rotate3D(image);
63                 rotate3DX.angleXFrom = 0;
64                 rotate3DX.angleXTo = 360;
65                 rotate3DX.duration = 2000/* 2 seconds */
66                 rotate3DX.autoCenterTransform = true;
67  
68                 rotate3DY = new Rotate3D(image);
69                 rotate3DY.angleYFrom = 0;
70                 rotate3DY.angleYTo = 360;
71                 rotate3DY.duration = 2000/* 2 seconds */
72                 rotate3DY.autoCenterTransform = true;
73  
74                 rotate3DZ = new Rotate3D(image);
75                 rotate3DZ.angleZFrom = 0;
76                 rotate3DZ.angleZTo = 360;
77                 rotate3DZ.duration = 2000/* 2 seconds */
78                 rotate3DZ.autoCenterTransform = true;
79             }
80  
81             private function buttonX_click(evt:MouseEvent):void {
82                 rotate3DX.play();
83             }
84  
85             private function buttonY_click(evt:MouseEvent):void {
86                 rotate3DY.play();
87             }
88  
89             private function buttonZ_click(evt:MouseEvent):void {
90                 rotate3DZ.play();
91             }
92         ]]>
93     </fx:Script>
94  
95 </s:Application>

소스를 보시면 아시겠지만 구현하는게 매우 쉽게 이루어져 있는데 일반적인 effect를 사용하듯이 사용하시면
됩니다.

간단하게 프로퍼티에 대해 설명드리면

angleXFrom : X축의 시작 각도를 설정합니다. (Number 형태로 지정합니다.)
angleXTo : X축의 종료 각도를 설정합니다.
angleYFrom : Y축의 시작 각도를 설정합니다.
angleYTo : Y축의 종료 각도를 설정합니다.
angelZFrom : Z축의 시작 각도를 설정합니다.
angelZTo : Z축의 종료 각도를 설정합니다.

autoCenterTransfrom : true일 경우 회전축을 높이/2, 넓이/2 로 자동 설정합니다.
transformX : 효과의 중심이 되는 X 축을 설정합니다.
transformY : 효과의 중심이 되는 Y축을 설정합니다.
transformZ : 효과의 중심이 되는 Z축을 설정합니다.

duration : 효과 시간을 설정합니다. (1000 = 1초)
easer : easing을 설정합니다. (0.0 ~ 1.0)
filter : 추가 필터를 설정합니다.
startDelay : 효과 시작전 delay를 설정합니다. (1000 = 1초)
target : 효과 대상입니다. (Object 형태로 꼭 이미지가 아니여도 상관없습니다.)
targets : 효과 대상을 배열로 지정합니다. 효과를 적용할 대상들을 array 형태로 지정합니다.

정말로 3D 구현이 참 쉽습니다;; @.,@; 응용해서 참 여러가지를 만들 수 있을 것 같습니다.
점점 쉬워지는 flex 때문에 깊게 안들여다 보는 버릇이 생길까 살짝 두려워 진다는 ㅎㅎ;

[출처] Flex Example
저작자 표시 비영리
신고

'Flex/AIR/AS3 > 3D' 카테고리의 다른 글

Flex 4 로 간단한 3D 구현하기  (0) 2009.10.28
Posted by 코멧'★
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
Adobe2009.10.23 21:21



HP, 레노버, 삼성 등의 GPU 가속 넷북에 플래시 플레이어(Flash Player) 지원

2009년 10월 12일(월요일) - 비주얼 컴퓨팅 분야의 세계적인 선도 기업인 엔비디아(kr.nvidia.com, CEO 젠슨황)와 어도비 시스템즈(Adobe Systems)는 어도비 개발자 컨퍼런스인 어도비 맥스(MAX)에서 엔비디아 GPU가 탑재된 넷북, 스마트폰, 스마트북 등에서 풍성한 웹 컨텐츠를 즐길 수 있도록 하는 강력한 브라우징 환경을 제공할 것이라고 밝혔다.

양사는 ‘오픈 스크린 프로젝트(Open Screen Project)’를 통해, 다양한 모바일 인터넷 디바이스(MID)에서 플래시 플레이어(Flash Player) 10.1의 성능을 최적화하고 대폭 향상시키기 위한 GPU 가속에 대해 긴밀히 협력해 왔으며, 이번 협력으로 엔비디아 지포스(GeForce)®, 아이온(ION)™, 테그라(Tegra)™ 탑재 제품 사용자들은 훌루(Hulu.com), 유튜브(Youtube.com) 등 인기 웹사이트에서 HD, SD 동영상 등 플래시 플랫폼으로 구현된 다양한 컨텐츠를 더욱 매끄럽게 감상할 수 있게 되었다.

어도비 플래시 플레이어 10.1은 엔비디아 GPU 가속 활용을 통해 전력 소모를 큰 폭으로 감소시키고, 다양한 어플리케이션, 인터액티브 컨텐츠 및 HD 동영상 재생이 가능한 웹 브라우징 환경을 MID에서 실현하여 주목 받고 있다.

향후 HP, 레노버(Lenovo), 삼성, 에이서(Acer), 아수스(Asus) 등에서 플래시 플레이어 10.1을 위한 신제품이 출시될 예정이며, 해당 제품 사용자들은 연내에 플래시 플레이어 10.1 베타 버전을 다운받을 수 있게 될 것으로 기대된다.

엔비디아 댄 비볼리(Dan Vivoli) 상임부사장은 “주머니에 넣고 다닐 수 있는 초소형 모바일 기기, 커피숍에서 쉽게 사용할 수 있는 넷북 등 소비자들은 언제 어디서나 편리하게 인터넷 환경을 누리기 원한다”며 “엔비디아는 이와 같은 환경을 실현하기 위해 어도비와 긴밀하게 협력하고 있다”고 말했다.

어도비 플랫폼 사업부 데이비드 와드와니(David Wadhwani) 부사장은 “가장 혁신적이며 풍부한 컨텐츠를 가진 웹사이트들이 어도비 플래시 기술을 기반으로 하고 있다”며 “어도비와 엔비디아는 그래픽 프로세서 성능을 활용하여 포괄적 영역의 모바일 기기에 획기적인 웹 경험을 제공할 수 있게 되었고, PC의 강력함을 사용자의 주머니 속으로 가져다 주는 데 한 발 다가서게 되었다”고 밝혔다.

엔비디아 아이온 기반 넷탑 및 넷북인 HP 미니(Mini) 311, 레노버 아이디어패드(IdeaPad) S12, 삼성 N510, 에이서 어스파이어레보(AspireRevo), 아수스 이박스(eeeBox) EB1012 등은, 플래시 플레이어 10.1을 통해 GPU 가속 동영상 디코딩을 활용하여, 고사양 PC에서 누릴 수 있었던 매끄러운 플래시 기반 동영상 경험을 제공하게 된다. 또한, 올해 말부터 출시 예정인 테그라 프로세서 기반 스마트폰과 스마트북은 벡터 그래픽과 비디오 가속을 통해 풍부한 기능의 풀 스크린 인터넷 비디오 및 애니메이션을 가능하게 해 줄 전망이다.

HP 퍼스널 시스템 그룹의 케빈 프로스트(Kevin Frost) 노트북 마케팅 부문 부사장은 “엔비디아와 어도비의 협력으로 소비자에게 우수한 HD 동영상 경험을 제공할 수 있게 되어 기쁘게 생각한다”며 “최근 공개된 HP 미니(Mini) 311은 플래시 플레이어 10.1을 사용하여 탁월한 HD 동영상을 지원한다”고 말했다.

중국 최대 온라인 동영상 웹사이트인 유쿠(Youku.com)의 엘른 주(Allen Zhu) 부사장은 “새로운 어도비 플래시 플레이어 10.1는 최초로 엔비디아 GPU 기반의 비디오 디코딩을 가능하게 하여 우리 웹사이트가 호스트하는 수많은 HD 동영상의 비디오 재생 속도를 대폭 향상시킬 수 있게 되었다”며 “사용자들에게 매끄럽고 끊김 없는 HD 동영상 재생 경험을 제공할 수 있게 되어 기대가 크다”고 말했다.

레노버의 스티븐 디프랑코(Stephen DiFranco) 북미지역 소비자 및 채널 파트너 담당 부사장은 “플래시 플레이어 10.1 최신 버전은 엔비디아 아이온 그래픽을 탑재한 레노버 아이디어센터(IdeaCentre) Q110 넷탑과 아이디어패드(IdeaPad) S12 넷북이 매끄러운 풀 스크린 HD, SD 동영상을 제공하도록 지원할 것”이라며 “엔비디아 GPU 가속 기술은 레노버 넷북 및 소형 데스크톱 PC에서 언제 어디서나 최고의 엔터테인먼트 경험을 누릴 수 있도록 인터넷 환경을 향상시켜 주게 된다”고 말했다.

엔비디아 젠슨황 공동설립자 겸 CEO와 어도비의 협력 방안 논의는 http://tv.adobe.com/watch/open-screen-project/nvidia-ceo-on-flash에서 동영상으로 볼 수 있다.

어도비시스템즈에 대하여
어도비시스템즈는 시간, 장소, 매체에 구애 받지 않고 아이디어와 정보를 생성하고 전달할 수 있는 방식을 혁신한다. 한국어도비에 대한 보다 자세한 정보는 www.adobe.com/kr를 통해 확인할 수 있다.

엔비디아(NVIDIA)에 대하여
엔비디아(Nasdaq: NVDA)는 1999년 GPU(Graphic Processing Unit, 그래픽 프로세싱 유닛)를 최초로 창안, 컴퓨터 그래픽의 힘을 세계에 일깨운 바 있는 비주얼 컴퓨팅 분야의 세계적인 선도 기업이다. 이후 지속적으로 휴대용 미디어 플레이어에서 노트북, 워크스테이션에 이르기까지 환상적인 인터랙티브 그래픽을 제공하여 비주얼 컴퓨팅의 새로운 기준을 제시해 왔다. 엔비디아의 프로그래머블 GPU 분야에 대한 전문성은, 슈퍼컴퓨팅 비용을 낮추고 더 많은 사람들이 이를 활용할 수 있도록 하는 병렬 프로세싱 분야를 이끌고 있다. 美 포츈(Fortune)紙는 2년 연속으로 엔비디아를 반도체 업계에서 가장 혁신적인 기업으로 선정하기도 했다. 보다 자세한 내용은 엔비디아 홈페이지(kr.nvidia.com)에서 확인할 수 있다.




[출처] http://kr.nvidia.com/object/io_1255325201321.html

저작자 표시 비영리
신고
Posted by 코멧'★
TAG abobe, Flash, GPU, IT, Nvidia

티스토리 툴바