'Flex/AIR/AS3'에 해당되는 글 67건

  1. 2009.12.07 event.keyCode list
  2. 2009.11.27 [ActionScript 3.0] 데이터 타입
  3. 2009.11.17 Math.Random()으로 랜덤 색상 구하기 (2)
  4. 2009.11.10 Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기
  5. 2009.11.05 BetweenAS3 Tweener
  6. 2009.11.05 [ActionScript] [TypeError] TypeError : Error #1000
  7. 2009.10.30 Flash Builder 4에서 Spark Skin 을 Illustrator(FXG)로 만들어 보자! (3)
  8. 2009.10.29 Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자! (4)
  9. 2009.10.28 Flex 4 로 간단한 3D 구현하기
  10. 2009.10.27 Flash CS4로 Flex Component Skin 제작하기
  11. 2009.10.27 Flash CS3로 Flex Component Skin 제작하기 (2)
  12. 2009.10.27 13 Excellent FREE Flex Skins
  13. 2009.10.21 Flash Builder Beta 에서 ANT로 ASDoc 문서 만들기
  14. 2009.10.16 Flash Builder 4 Beta에서 ANT 사용하기
  15. 2009.10.15 [ASDoc] Error : could not find JRE (1)
  16. 2009.10.15 Flex SDK 코딩 규약 가이드 (파일구성, 코딩 서식, ASDoc)
  17. 2009.10.15 Flex SDK 코딩 규약 가이드 (언어사용법)
  18. 2009.10.14 Flex SDK 코딩 규약 가이드 (네이밍)
  19. 2009.10.11 [AIR] AIR에서 BMP 파일을 읽어서 표현하기
  20. 2009.10.09 [AIR] System File Tree (2)
  21. 2009.10.03 [ActionScript][TypeError] TypeError : Error #1034
  22. 2009.10.03 [ActionScript][TypeError] TypeError : Error #1088
  23. 2009.10.03 [ActionScript][TypeError] TypeError : Error #1085
  24. 2009.10.03 [ActionScript][TypeError] TypeError : Error #1095
  25. 2009.10.03 [ActionScript][TypeError] TypeError : Error #1010
  26. 2009.09.04 TweenMax 사용하기
  27. 2009.09.02 부드러운 움직임 공식 / 탄성 공식
  28. 2009.09.02 연속되는 변수명 간단하게 정의하기
  29. 2009.08.31 [EXIF] EXIF 정보 가져오기 / 썸네일 만들기
  30. 2009.08.31 [Mouse] Drag Select 드래그하여 선택하기
Flex/AIR/AS3/Etc2009.12.07 21:03

Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
Alphabetic keys
A to Z
97/65 to 122/90 ASCII code of uppercase version of the letter
65 to 90
Space 32 32 32 32 32
Enter 13 13 13 13 13
Tab 9 9 9 9 9
Esc 27 27 27 27 27
Backspace 8 8 8 8 8
Modifier Keys
Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
Shift - 16 16 16 16 Linux Opera < 9.0: 0
Control - 17 17 17 17 Linux Opera < 9.0: 0
Mac Opera: 0
Alt - 18 18 18 18 Linux Opera < 9.0: 0
Caps Lock - 20 20 20 20 Linux Opera: 0
Num Lock - 144 144 144 144 Linux Opera < 9.50: 0
Win Opera < 9.00: 0
Keyboard Number Keys
Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
1 ! 49/33 49 49 49 49/33 Mac Gecko < 1.8: 49/0
2 @ 50/64 50 50 50 50/64 Mac Gecko < 1.9: 50/0
3 # 51/35 51 51 51 51/35 Mac Gecko < 1.9: 51/0
4 $ 52/36 52 52 52 52/36 Mac Gecko < 1.9: 52/0
5 % 53/37 53 53 53 53/37 Mac Gecko < 1.9: 53/0
6 ^ 54/94 54 54 54 54/94 Mac Gecko < 1.9: 54/0
7 & 55/38 55 55 55 55/38 Mac Gecko < 1.9: 55/0
8 * 56/42 56 56 56 56/42 Mac Gecko < 1.9: 56/0
9 ( 57/40 57 57 57 57/40 Mac Gecko < 1.9: 57/0
0 ) 48/41 48 48 48 48/41 Mac Gecko < 1.9: 48/0
Symbol Keys
Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
; : 59/58 59 186 59 59/58 Mac Gecko: 186/0
= + 61/43 61 187 61 61/43 Mac Gecko 1.9: 187/107
Mac Gecko < 1.9: 187/0
, < 44/60 188 188 44 44/60 Mac Gecko: 188/0
- _ 45/95 109 189 45 45/95 Mac Gecko 1.9: 109/0
Mac Gecko < 1.9: 0
. > 46/62 190 190 46 46/62 Mac Gecko: 190/0
/ ? 47/63 191 191 47 47/63 Mac Gecko: 191/0
` ~ 96/126 192 192 96 96/126 Mac Gecko: 126/0
[ { 91/123 219 219 91 91/123
\ | 92/124 220 220 92 92/124 Mac Gecko: 92/0
] } 93/125 221 221 93 93/125
' " 39/34 222 222 39 39/34
Arrow Keys
Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
left-arrow - 37 37 37 37
up-arrow - 38 38 38 38
right-arrow - 39 39 39 39
down-arrow - 40 40 40 40
Special Keys
Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
Insert - 45 45 45 45 Konqueror: 0
Opera < 9.0: 0
Delete - 46 46 46 46 Konqueror: 127
Opera < 9.0: 0
Home - 36 36 36 36 Opera < 9.0: 0
End - 35 35 35 35 Opera < 9.0: 0
Page Up - 33 33 33 33
Page Down - 34 34 34 34
Function Keys
F1 to F12
- 112 to 123 112 to 123 112 to 123 112 to 123
Keypad Keys
If Num Lock is on, unshifted/shifted values are returned as shown below. If Num Lock is off, Linux browsers reverse the shifted/unshifted values, while Windows browsers always return the shifted value. None of my Macintoshs have a keypad, so I don't know what they do.
Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
. Del 46/- 110/46 110/46 78/46 78/46 Opera < 9.0: 78/0
0 Ins 48/- 96/45 96/45 48/45 48/45 Opera < 9.0: 48/0
1 End 49/- 97/35 97/35 49/35 49/35 Opera < 9.0: 49/0
2 down-arrow 50/- 98/40 98/40 50/40 50/40
3 Pg Dn 51/- 99/34 99/34 51/34 51/34
4 left-arrow 52/- 100/37 100/37 52/37 52/37
5 53/- 101/12 101/12 53/12 53/12 Linux Opera: 53/0
6 right-arrow 54/- 102/39 102/39 54/39 54/39
7 Home 55/- 103/36 103/36 55/36 55/36 Opera < 9.0: 55/0
8 up-arrow 56/- 104/38 104/38 56/38 56/38
9 Pg Up 57/- 105/33 105/33 57/33 57/33
+ 43 107 107 43 43
- 45 109 109 45 45
* 42 106 106 42 42
/ 47 111 111 47 47
Keypad Enter 13 13 13 13 13
Branded Keys
Key ASCII Mozilla keycodes IE keycodes Opera keycodes pseudo ASCII codes exceptions
Left Apple Command - 224 ? 17 ? Safari ≥ 3.1: 91
Right Apple Command - 224 ? 17 ? Safari ≥ 3.1: 93
Left Windows Start - 91 91 219 0 Linux Gecko: 0
Right Windows Start - 92 92 220 0 Linux Gecko: 0
Windows Menu - 93 93 0 0

[출처] http://unixpapa.com/js/key.html
저작자 표시 비영리
신고
Posted by 코멧'★
Flex/AIR/AS3/Etc2009.11.27 07:33

1. 데이터 타입의 종류

- 프리미티브 유형 (원시 데이터)
  • Boolean : true / false
  • int : 32비트의 정수, -2,147,483,648 ~ 2,147,483,647 까지의 정수 범위를 갖습니다.
  • uint : 부호없는 32비트의 정수, 0 ~ 4,294,967,295 까지의 정수 범위를 갖습니다. (음이 아닌 정수를 사용할때에는 uint 데이터 타입을 사용하는 것이 좋습니다.
  • Number : 정수, 부호없는 정수, 부동 소수점 숫자 등을 나타낼 수 있습니다. (모든 숫자유형의 데이터)
  • String : 16비티의 문자열, 문자열은 내부적으로 UTF-16 포맷을 사용하여 유니코드 문자로 저장됩니다.
  • Null : Null은 null 값만 포함되며 복합 유형의 모든 클래스와 String 데이터 타입의 기본값입니다.
  • void :  undefined값만 포함되며 데이터 타입이 지정되지 않은 변수에만 지정할 수 있습니다.

 

- 복합 유형
  • Object, Array, Date, Error, Function, RegExp, XML 및 XMLList 등등

 

보다 자세한 데이터 유형에 대한 설명

더보기


2. 데이터 타입의 초기값

데이터 타입 기본값
Boolean false
int 0
uint 0
Number NaN (Not a Number)
String null
void (선언되지 않은 데이터 타입) undefined
기타 복합유형 및 사용자 정의 클래스 null


3. 데이터 타입 확인

- typeof 연산자
 typeof 연산자는 변수의 데이터 타입을 지정하는 문자열을 반환합니다. 결과는 boolean, function, number, object, string, xml 이렇게 6개의 문자열 값으로 제한됩니다.

- describeType() 함수
 xml 형식으로 객체에 대한 정보를 반환합니다.

- is 연산자
 변수 또는 표현식이 지정된 데이터 유형의 멤버인지 여부를 테스트할 수 있습니다. is 연산자는 정확한 상속 계층 구조를 검사하며 객체가 특정 클래스의 인스턴스인지 뿐만 아니라 객체가 특정 인터페이스를 구현하는 클래스의 인스턴스인지 여부를 확인하는 데 사용됩니다. (맞으면 true 틀리면 false)

var mySprite:Sprite = new Sprite();
trace(mySprite is Sprite); // true
trace(mySprite is DisplayObject);// true
trace(mySprite is IEventDispatcher); // true

4. 데이터 타입 변환

- 문자타입 변환
  • String() 함수 이용 : String(변수 또는 값);
  • 빈 문자열과 결합하여 변환 : str = "" + 12;
  • toString() 메서드 이용 : 변수 또는 값.toString();

 

- 숫자타입 변환
  • Number() / int() / uint() 함수 이용 : Number(변수 또는 값);
  • ParseInt() 및 ParseFloat() 전역 함수 이용 (변환할 수 없는 경우 NaN 반환)

 

- 클래스타입 변환
  • 클래스명() : MovieClip(object) ...
  • as 연산자 이용 : target as MovieClip ...
저작자 표시 비영리
신고
Posted by 코멧'★
TAG 기초, 타입
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/Tweener2009.11.05 17:46
   Tweener를 사용할 일이 생겨서 TweenMax 말고 좀 더 괜찮은 tweener가 있는지 살펴보다가
지돌스타님 블로그에 소개된 BetweenAS3 라는 Tweener를 알게 되었습니다.

잠깐 둘러 보았는데도 정말 TweenMax 보다 속도면에서 월등한면을 보이더군요 @,.@ 오오~~

아직 사용은 안해봤지만  사용하기전 내용정리 차원에서 정리를 ~


 공식 사이트 : http://www.libspark.org/wiki/BetweenAS3/en
 개발자 : Yoshihiro Shindo
 개발자 블로그 : http://www.be-interactive.org/
 SVN : http://www.libspark.org/svn/as3/BetweenAS3/tags/alpha-r3022/  (BetweenAS3 Alpha r3022)
 download as ZIP or SWC : http://www.libspark.org/svn/as3/BetweenAS3/tags/alpha-r3022/release/
 Tutorial : http://wonderfl.net/tag/BetweenAS3Tutorial

사용법 및 데모는 공식사이트에 가시면 자세히 보실 수 있습니다.

저도 사용해 보고 차후 사용팁과 후기를 다시 정리하겠습니다.

퍼포먼스 비교 테스트 
http://www.be-interactive.org/works/20090911/Particle/index.html
http://www.be-interactive.org/works/20090428/Particle/index.html

[출처] http://blog.jidolstar.com/587
저작자 표시 비영리
신고

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

BetweenAS3 Tweener  (0) 2009.11.05
TweenMax 사용하기  (0) 2009.09.04
부드러운 움직임 공식 / 탄성 공식  (0) 2009.09.02
Posted by 코멧'★
Flex/AIR/AS3/Error Code2009.11.05 15:20
[TypeError] TypeError : Error #1000 시스템의 메모리가 부족합니다.

Flash Player에서 코드를 컴파일하기 위해 시스템의 가용 메모리보다 많은 메모리가 필요합니다. 시스템에서 실행되는 응용 프로그램 또는 프로세스 중 일부를 닫습니다.


저작자 표시 비영리
신고
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
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
Flex/AIR/AS3/ANT2009.10.21 13:07
이번에는 Flash Builder Beta 2 에서 ANT로 ASDoc 문서를 만드는 법에 대해 알아보겠습니다.
원래는 월요일날 올릴 생각이었는데 개인적인 사정으로 시골을 다녀오는 바람에 블로그에 소홀해 졌었네요 ㅜ_ㅜ

우선 Flash Builder에 ANT가 설치 되어 있지 않다면 아래 글을 참고하셔서 ANT를 설치 해주시기 바랍니다~.

2009/10/16 - [프로그래밍/Flex / ActionScript] - Flash Builder 4 Beta에서 ANT 사용하기

지돌스타님의 블로그를 대부분 인용 ㅡ_ㅡ; 했습니다. 죄송 ;;; ㅎㅎ

원본글 보기 - http://blog.jidolstar.com/505

ANT로 ASDoc 문서를 만들기 위해서는 xml 파일을 만들어야 합니다.

라이브러리 프로젝트 부분에 build 폴더를 만든 후 build.properties 파일과 build.xml 파일을 생성합니다.


build.properties
#-------------------------------------------------------------------------------
# Properties
#-------------------------------------------------------------------------------

flex4sdk.dir = C:/Program Files/Adobe/Adobe Flash Builder Beta 2/sdks/4.0.0
flex4sdk.bin.dir = ${flex4sdk.dir}/bin
flex4sdk.air.dir = ${flex4sdk.dir}/frameworks/libs/air

asdoc.exe = ${flex4sdk.bin.dir}/asdoc.exe

src.dir = ${basedir}/src
docs.dir = ${basedir}/docs

flex4sdk.dir - flex sdk가 설치된 경로를 적어줍니다.
flex4sdk.bin.dir - flex sdk의 bin 폴더의 경로를 적어줍니다.  (ANT의 환경 변수는 ${변수명} 으로 사용할 수 있습니다.)
flex4sdk.air.dir - air 라이브러리가 있는 경로를 적어줍니다.

asdoc.exe - asdoc 실행파일의 경로를 적어줍니다.

src.dir - 소스 파일의 경로를 적어줍니다. ( ${basedir}은 build.xml 파일에 basedir에 설정된 경로를 의미합니다. )
docs.dir - ASDoc 문서를 생성할 경로를 적어줍니다.

(태그 안의 파라메타를 제외하고 태그명은 전부 소문자로 해주세요. 소문자로 적었는데도 자꾸 대문자로 변경이 되버리네요;;)
build.xml


    
    
    
    	
    
    
    
    	
    
    
        
        
    
    	
    
    
        
            
            
            
            
            
            
        
    

    
    
        
        	
        	
        	
            
            
        	
            
        
    


<project name="asdoc" basedir="../">

build 폴더를 안에 build.properties 파일과 build.xml파일을 만들었다면 basedir을 ../로 지정합니다.

<property file="./build/build.properties" />

환경 설정 파일의 경로를 적어줍니다. ( basedir 이 "../" 이므로 ./build/build.properties 라고 적어줍니다. )

<property name="window_title" value="Comet's library API Document"/>
<property name="main_title" value="Comet's library"/>
<property name="footer" value="2009 Comet @ All right reserved."/>

window_title과 main_title, footer 속성을 따로 xml에서 지정해 주는 이유는 build.properties 파일에 설정할 경우
한글이 제대로 나오지 않는 문제가 있어 build.xml 문서에서 따로 지정하여 줍니다. 만약 영문으로만 적을 경우
build.properties 파일에
window_title = Comet's library API Document
이런식으로 적어주면 build.xml에서 따로 설정하실 필요가 없습니다.

<!-- docs 폴더 삭제 후 다시 생성 -->
    <target name="asdoc_clean">
        <delete dir="${docs.dir}" failOnError="false" includeEmptyDirs="true"/>
        <mkdir dir="${docs.dir}"/>
    </target>

docs 폴더를 삭제 후 다시 생성하는 이유는 기존에 만들어진 ASDoc 문서의 파일들이 남아있을 경우 새롭게 작성된 liberary와 내용이 다를 수 있기 때문에 폴더 전체를 삭제 후 다시 생성하게 작성합니다.

<!-- flex용 ASDoc 만들기 -->
    <target name="create_asdoc_flex" depends="asdoc_clean">
        <exec executable="${asdoc.exe}" failOnError="true">
            <arg line='-doc-sources "${src.dir}"'/>
            <arg line='-source-path "${src.dir}"'/>
            <arg line='-window-title "${window_title}"'/>
            <arg line='-main-title "${main_title}"'/>
            <arg line='-footer "${footer}"'/>
            <arg line='-output "${docs.dir}"'/>
        </exec>
    </target>

    <!-- AIR용 ASDoc 만들기 -->
    <target name="create_asdoc_air" depends="asdoc_clean">
        <exec executable="${asdoc.exe}" failOnError="true">
            <arg line='-doc-sources "${src.dir}"'/>
            <arg line='-source-path "${src.dir}"'/>
            <arg line='-window-title "${window_title}"'/>
            <arg line='-main-title "${main_title}"'/>
            <arg line='-footer "${footer}"'/>
            <arg line='-output "${docs.dir}"'/>
            <arg line='-library-path+="${flex4sdk.air.dir}"'/>
        </exec>
    </target>

Flex 와 AIR 용을 따로 만드는 이유는 AIR API는 AIR 라이브러리를 포함시켜 주어야 하기때문입니다.
AIR 와 Flex의 차이점은 <arg line='-library-path+="${flex4sdk.air.dir}"'/> 차이입니다.

이렇게 만들었다면 아래 그림과 같이 build.xml 파일을 Ant 창으로 드래그합니다.


정상적으로 완료 되었다면 Ant 창에 다음 그림과 같이 나타납니다.


위 그림과 같이 나왔다면 asdoc 옆의 화살표를 클릭하여 노드를 펼칩니다.


이제 ASDoc 문서를 만들 패키지 또는 클래스가 Flex 냐 AIR냐에 따라 create_asdoc_flex 나 create_asdoc_air를 더블클릭 하시면
Consol 창에 다음 그림과 같이 나타나면 ASDoc 문서가 build.properties에서 지정한 docs.dir 폴더에 생성됩니다.


( Console 창의 우측 상단 빨간색 네모가 회색으로 바끼면 ASDoc 문서 생성이 완료된 것입니다.)

ASDoc 문서가 생성이 되었다면 이제 docs 폴더로 가셔서 index.html 파일을 더블 클릭하시면 생성된 ASDoc 파일을 보실 수 있습니다.




완성~~

관련글
저작자 표시 비영리
신고
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 코멧'★
Flex/AIR/AS3/Error Code2009.10.15 23:19
Error: could not find JRE
Error: could not find Java 2 Runtime Environment.

Flex를 하다보니 만들어 놓은 콤포넌트를 문서화하고 싶은 욕심이 생겼습니다.
그래서 ASDoc을 만드는 법을 찾아보니 Flex SDK 폴더에 Bin폴더에 가면 ASDoc으로 만들어주는 배치파일이 있다길래
한번 실행시켜 보았습니다.

자 ASDoc야 너의 정보를 보여다오~

> asdoc -help



어... 어라 이게 아닌데;;

이건 뭔 에러다냐;; 음.. JRE랑 Java 2 Runtime Environment 를 찾지 못했다고? Flex 깔면 저절로 깔리는거 아니었어? 음..;;; 아닌가 보군; 쿨럭 그럼 JRE를 설치하면 되나?

이런 관계로 검색사이트에서 JRE를 검색하여 JAVA 런타임 JAVA 런타임"Java Runtime Environment (JRE)(자바런타임)" v6 Update 16 (Windows)을 다운 받아서 설치해 보았습니다.

네이버 자료실 - http://file.naver.com/pc/view.html?fnum=228680&cat=30




자 이제 다시한번 실행해 보겠습니다.

> asdoc -help



아 이제 제대로 잘 나오네요~

이상 ASDoc

Error: could not find JRE
Error: could not find Java 2 Runtime Environment.

에러 대처법이었습니다;
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Etc2009.10.15 22:27
이글은 널곰님의 블로그에 올라와 있는걸 제가 코딩할때 참고하기 위해 제 나름데로 정리한 내용입니다.
원본글을 보시려면 널곰님 블로그에 방문해 주세요.

[출처] - http://blog.naver.com/surfwon/30066624470
[영문 원본] - http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

3. 파일 구성 (File Organization)

저작권 표기


프레임워크의 모든 .as 파일의 상단에 저작권 표기를 포함합니다. 아래의 예는 2008년 오픈 소스 저작권 정보의 서식을 나타냅니다.

////////////////////////////////////////////////////////////////////////////////
//
//  ADOBE SYSTEMS INCORPORATED
//  Copyright 2008 Adobe Systems Incorporated
//  All Rights Reserved.
//
//  NOTICE: Adobe permits you to use, modify, and distribute this file
//  in accordance with the terms of the license agreement accompanying it.
//
////////////////////////////////////////////////////////////////////////////////


폭이 80 문자인 점에 주의해 주세요.


package문


후일 발표 예정


import문

 
후일 발표 예정


use namespace문

 
후일 발표 예정


클래스 메타데이타 (Class metadata)

 
클래스의 메타데이타는 섹션으로 분류하며, Events, Styles, Effects, Excluded APIs, Other Metadata의 순서로 기술합니다.

각 섹션의 전에는 2차 섹션 헤더를 배치합니다. 2차 섹션 헤더의 폭은 40문자. 그리고, "//"라고 섹션명의 사이에는 스페이스가 2개 들어가 있는 것에 주의해 주세요.

각 섹션내에서는 메타데이타의 name="..."의 부분을 기준에 알파벳순서에 늘어놓습니다. Other Metadata(그 외의 메타데이타)섹션에서는 메타데이타의 태그 이름을 기준에 알파벳 순서에 늘어놓습니다.

//--------------------------------------
//  Events
//--------------------------------------
/
**
*  ASDoc comment.
*/
[Event

/**
*  ASDoc comment.
*/
[Event

//--------------------------------------
//  Styles
//--------------------------------------

/**
*  ASDoc comment.
*/
[Style

/**
*  ASDoc comment.
*/
[Style]

//--------------------------------------
//  Effects
//--------------------------------------

/**
*  ASDoc comment.
*/
[Effect

/**
*  ASDoc comment.
*/
[Effect]

//--------------------------------------
//  Excluded APIs
//--------------------------------------

[Exclude(name=&quot;horizontalAlign&quot;, kind=&quot;style&quot;)]
[Exclude(name=&quot;verticalAlign&quot;, kind=&quot;style&quot;)]

//--------------------------------------
//  Other metadata
//--------------------------------------

[DefaultBindingProperty(source=&quot;text&quot;, destination=&quot;text&quot;)]
[IconFile(&quot;Text.png&quot;)]


클래스 선언

 
후일 발표 예정


Version.as 대한 include문

 
클래스에는 상대 패스를 사용하고, core/Version.as를 인클루드 하도록 합니다. 이 파일에는 static const VERSION:String의 선언이 포함되어 있습니다.

include "../core/Version.as";


Implementation notes

 
후일 발표 예정


클래스 초기화 (Class intialization)

 
후일 발표 예정


클래스 상수 (Class constant)

 
정적 상수(static const) 선언을 여기에 배치합니다.

ActionScript 3 는 Array형 또는 Object형의 상수를 허가하지 않습니다. 이런한 케이스에서는 static const는 아니고 static var를 상수처럼 선언합니다. 다만 이 경우 개념상은 상수이기 위하여 이 섹션에 기술하도록 합니다.


클래스 믹스 인 (Class mix-ins)

 
메소드로서 선언되는 것이 아니라 믹스-인 되는 함수(Function) 형태의 정적 변수(static variable)는 모두 선언하도록 합니다.


클래스 자원 (Class resources)

 
후일 발표 예정


클래스 프라퍼티 (Class properties)

 
static getter 및 static setter는 여기서 선언하도록 합니다. 이러한 선언은 프라퍼티명을 기준을 알파벳순서로 늘어놓습니다. 각 프라퍼티간에는 프라퍼티명이 들어간 이차적인 separator를 배치합니다. getter를 기술하고 나서 setter를 기술하도록 합니다.


클래스 메소드

 
static function 선언을 여기에 배치합니다.



생성자 (Constructor)

 
후일 발표 예정


오버라이드 (overridden Propertirs)

 
non-static getter 및 setter의 오버라이드(override)를 여기에 배치합니다. 이러한 선언은 프라퍼티명 기준을 알파벳 순서데로 늘어놓습니다. 각 프라퍼티간에는 파라퍼티명이 들어간 이차적인 separator를 배치합니다. getter를 기술하고 나서 setter를 기술하도록 합니다.


프라퍼티 (Properties)

  
새로운 비 static의 getter 및 setter를 여기에 배치합니다. 이러한 선언은 프라퍼티명을 기준으로 알파벳순서로 늘어놓습니다. 각 프라퍼티간에는 파라퍼티명이 들어간 이차적인 separator를 배치합니다. getter를 기술하고 나서 setter를 기술하도록 합니다.


오버라이드 (override) 된 메소드(Overridden Methods)

  
비 static 함수의 오버라이드(override)를 여기에 배치합니다.



메소드 (Methods)

  
새로운 비 static 함수를 여기에 배치합니다.


 오버라이드 (override) 된 이벤트 핸들러 (Overridden event handlers)

 
이벤트 핸들러의 오버라이드(override)를 여기에 배치합니다.


이벤트 핸들러 (Event handlers)


새로운 이벤트 핸들러를 여기에 배치합니다.


패키지 외의 헬퍼 클래스 (Out-of-package helper classes)

  
후일 발표 예정


종합

저작권 표기
package문
import문
use namespace문
클래스 메타데이타 (Class metadata)
클래스 선언
Version.as 대한 include 문
Implementation notes
클래스 초기화 (Class initialization)
클래스 상수 (Class constant)
클래스 믹스 인 (Class mix-ins)
클래스 자원 (Class resources)
클래스 변수 (Class variables)
클래스 프라퍼티 (Class properties)
클래스 메소드
생성자 (Constructor)
변수(Variables)
오버라이드 (override)된 프라퍼티 (Overridden Properties)
프라퍼티 (Properties)
오버라이드 (override)된 메소드 (Overridden Methods)
메소드 (Methods)
오버라이드 (override)된 이벤트 핸들러 (Overridden event handlers)
이벤트 핸들러 (Event handlers)
패키지 외의 헬퍼 클래스 (Out-of-package helper classes)


4. 기술 서식 (Formatting)


행 너비 (Line width)


코드는 한 라인에 문자는 80 글자로 합니다. 이렇게 했을때 아래와 같은 이득이 따릅니다.
  • 개발자가 작은 화면을 사용하고 있는 경우, 긴 행을 읽을 때에 수평 스크롤 할 필요가 없습니다.
  • 비교 유틸리티를 사용할 때, 파일의 두 개 버전을 옆으로 늘여 놓아 나타낼 수 있습니다.
  • 프로젝터를 사용해 그룹에 프리젠테이션 할 때, 스크롤 아닌 font size를 크게 하는 것으로 대응할 수 있습니다.
  • 인쇄시 짤리거나 쓸데 없는 개행 없이 원시 코드를 인쇄할 수 있습니다.

들여쓰기 (Indentation)

 
스페이스 4문자의 들여쓰기로 사용합니다. 텍스트 문자 폅집기의 설정을 조정하여 탭은 아이고 스페이스가 삽입되도록 합니다. 이 규칙을 지키는 것으로, 다른 인덴트 설정이 이용된 프로그램(8 문자 들여쓰기인 메모장등)에서도 코드의 자체를 어지럽히는 일 없이 표시할 수 있게 됩니다.



섹션 구분자 (Section separators, 단락 구분)

 
클래스내의 주요 섹션 구분자는 다음과 같이 합니다.

    //--------------------------------------------------------------------------
    //
    //  Overridden methods
    //
    //--------------------------------------------------------------------------

구분자 자체를 4 컬럼부터 80컬럼까지 늘리고, 텍스트는 8문자까지 들여쓰기 합니다.

클래스내의 2차 섹션 구분자(프라퍼티간 등)는 다음의 체재로 합니다.

    //----------------------------------
    //  visible
    //----------------------------------


구분자 자체를 4문자로부터 40문자까지 늘려 텍스트를 8문자까지 들여쓰기 합니다.

구분자의 앞뒤 공백 행은 각각 1행씩 배치합니다.


선언의 분리

 
상수, 변수 및 함수 선언 사이에는 세로 방향의 구분자로서 공백행을 1행씩 배치합니다.

/**
*  @private
*  Holds something.
*/
var a:Number;

/**
*  @private
*/
var b:Number


메타데이타 (MetaData)

 
후일 발표 예정

올바른 예

Inspectable[a="1", b="2"]

나쁜 예

Inspectable[a=1 b=2]


배열 인덱스 (Array indexing)

 
좌측의 [ 묶음의 직후 및 우측의 ] 의 직전에는 스페이스가 들어갈 수 없습니다.

올바른 예

a[0]

나쁜 예

a[ 0 ]


, 콤마 (Commas)

 
콤마의 뒤에는 스페이스를 한 개 기입합니다. 이 규칙은 일련의 파라메터, Array 리터럴 및 Object 리터럴에 적용됩니다.


Array 리터럴 (Array literals)

 
좌측의 [ 묶음의 직후에 스페이스를 1개, 우측의 ] 묶음의 직전에도 스페이스를 1개, 그리고 각 콤마의 직후(직전이 아닙니다)에 스페이스 1개를 각각 배치합니다.

올바른 예

[ 1, 2, 3 ]

나쁜 예

[1, 2, 3]
 
[1,2,3]

공 배열 (empty array)는 특수한 케이스입니다.

올바른 예

[]

나쁜 예

[ ]

복수의 행이 필요한 긴 배열의 초기화시에는 정렬된 [] 묶음을 사용합니다.

static var numberNames:Array /* of String */ =
[
    "zero",
    "one",
    "two",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine"
];


Object 리터럴(Object literals)

 
좌측의 { 괄호의 직후에 스페이스를 1개, 우측의 { 괄호의 직전에도 스페이스를 1개, 그리고 프라퍼티명과 그 값을 나누는 : 콜론의 직후에 스페이스를 1개 배치하도록 합니다.

올바른 예

{ a: 1, b: 2, c: 3 }

나쁜 예

{a: 1, b: 2, c: 3}

{a:1, b:2, c:3}

{a:1,b:2,c:3}

빈 오브젝트(empty object)는 예외입니다.

올바른 예

{}

나쁜 예

{ }

복수의 행이 필요한 긴 오브젝트의 초기화시에는 정렬된 {} 괄호를 사용합니다.

private static var TextStyleMap:Object =
{
    color: true,
    fontFamily: true,
    fontSize: true,
    fontStyle: true,
    fontWeight: true,
    leading: true,
    marginLeft: true,
    marginRight: true,
    textAlign: true,
    textDecoration: true,
    textIndent: true
};


함수 리터럴 (Function literals)

 
후일 발표 예정

var f:Function;

f = function():void
{
    doSomething();
};


형태 선언

 
변수, 인수 또는 함수와 이러한 형태의 사이에 있는 콜론의 직전 밑 직후에는 스페이스를 들어갈 수 있습니다.

올바른 예

var n:Number;

나쁜 예

var n : Number;

var n: Number;

다른 올바른 예

function f(n:Number):void

나쁜 예

function f(n : Number) : void

function f(n: Number): void


연산자와 대입

 
대입 연산자의 전후에는 스페이스를 1개 넣습니다.

올바른 예

a = 1;

나쁜 예

a=1;

Infix 연산자의 전후에는  스페이스를 1개 넣습니다.

올바른 예

a + b * c

나쁜 예

a+b*c

비교 연산자의 전후에는 스페이스를 1개 넣습니다.

올바른 예

a == b

나쁜 예

a==b

Prefix연산자와 그 작용 대상의 사이에는 스페이스가 들어갈 수 없습니다.

올바른 예

!o

나쁜 예

! o

Postfix 연산자와 그 작용 대상의 사이에는 스페이스가 들어갈 수 없습니다.

올바른 예

i++

나쁜 예

i ++


스테이트먼트(Statement)

 
모든 스테이트먼트에 breakpoint를 설치할 수 있도록, 각 스테이트먼트를 새로운 행으로 개시하도록(듯이) 합니다.

올바른 예

a = 1;
b = 2;
c = 3;

나쁜 예

a = 1; b = 2; c = 3;

스테이트먼트 블록의 괄호를 정렬하도록 합니다.

올바른 예

function f():void
{
    var n:int = numChildren;
    for (var i:int = 0; i < n; i++)
    {
        if ()
        {
            x = horizontalGap * i;
            y = verticalGap * i;
        }
    }
}

나쁜 예

function f():void {
    var n:int = numChildren;
    for (var i:int = 0; i < n; i++) {
        if () {
            x = horizontalGap * i;
            y = verticalGap * i;
        }
    }
}


정수 및 변수의 선언

 
후일 발표 예정


함수의 선언


후일 발표 예정

올바른 예

f(a, b)

나쁜 예

f(a,b)

f( a, b )

파라메터를 열거할 때에 행의 즉시가 발생하는 경우, 좌측의 괄호와 정렬하듯이 즉시 후의 행을 들여쓰기 합니다. 스페이스에 여유가 있는 경우는 복수의 파라메터를 1행에 기술하고 그 외의 경우에는 1행에 대해 1개의 파라메터를 기술합니다. 1개의 파라메터마저 기술하는 스페이스가 없는 경우는, 2행째에 최초의 파라메터를 배치하여 다음 행의 인덴트를 함수명보다 전의 위치까지 이동합니다.

public function foo(parameter1:Number, parameter2:String,
                    parameter3:Boolean):void

public function foo(parameter1:Number,
  parameter2:String,
                    parameter3:Boolean):void

public function aVeryLongFunctionName(
    parameter1:Number, parameter2:String,
    parameter3:Boolean):void


함수의 호출 (Function Calls)


후일 발표 예정

올바른 예

f(a, b)

나쁜 예

f(a,b)

f( a, b )


if 문


if키워드와 좌측의 괄호의 사이에는 스페이스를 1개 넣습니다. 좌측의 괄호의 직후, 및 우측의 괄호의 직전에는 스페이스가 들어갈 수 없습니다.

올바른 예

if (a < b)

나쁜 예

if(a < b)

if( a < b )

if ( a < b )


for 문


for 키워드와 좌측의 괄호의 사이에는 스페이스를 1개 넣습니다. 좌측의 괄호의 직후 및 우측의 괄호의 직전에는 스페이스가 들어갈 수 없습니다.

올바른 예

for (var i:int = 0; i < n; i++)

나쁜 예

for(var i:int = 0; i < n; i++)

for( var i:int = 0; i < n; i++ )

for ( var i:int = 0; i < n; i++ )

 for 구로 다음 행으로 내려 써야 할 경우가 발생할 때에는, 좌측의 괄호와 정렬하듯이 다음 행을 들여쓰기 합니다.

for (var aLongLoopVariableName:int = aLongInitialExpression;
     aLongLoopVariableName < aLongUpperLimit;
     aLongLoopVariableName++)


switch문


switch 키워드와 좌측의 괄호의 사이에는 스페이스를 1개 넣습니다. 좌측의 괄호의 직후, 및 우측의 괄호의 직전에는 스페이스가 들어갈 수 없습니다.

올바른 예

switch (n)

나쁜 예

switch(n)

switch( n )

switch ( n )

Follow the switch keyword with a single space before the left parenthesis. Don't put any spaces after the left parenthesis or before the right parenthesis.

올바른 예

switch (n)
{
    case 1:
    {
        a = foo();
        break;
    }

    case 2:
    {   a = bar();
        break;
    }

    default:
    {
        a = blech();
        break;
    }
}

나쁜 예

switch(n)

switch( n )

switch ( n )


class 선언 및 interface 선언


괄호를 항상 대응 시키도록 합니다.

단독의 행의 주위에 괄호는 불필요합니다.

1행에 대해 1개의 스테이트먼트를 기술합니다.



5. ASDoc


프라퍼티에 대한 코멘트를 붙여라


프라퍼티에 있는 한벌의 get/set 함수 가운데, 최초의 것에만 코멘트를 붙이도록 합니다. 프라퍼티의 정의 방법 밑 코멘트 기술 체재는 이하와 같습니다.

/**
*  @private
*  The backing variable for the property.
*/
private var _someProp:Foo;

/**
*  Place all comments for the property with the getter which is defined first.
*  Comments should cover both get and set behavior as appropriate.
*/
public function get someProp():Foo
{
  ...
}

/**
*  @private
*/
public function set someProp(value:Foo):void
{
  ...
}

ASDoc의 코멘트는 메타데이타 태그 뿐만이 아니라, 클래스내의 다른 생성자에도 적용됩니다. 코멘트가 대상이 되는 모두에 있어서 적절하도록 주의해 주세요. 프라퍼티를 Bindable로서 태그화하는 경우는, 프라퍼티 코멘트를 get 함수보다 전 한편 Bindable 메타데이타 태그보다 뒤의 위치에 배치합니다.

올바른 예

[Bindable("somePropChanged")]

/**
*  Comments for someProp
*/
public function get someProp():Foo

나쁜 예

/**
* Comments for someProp
*/
[Bindable("somePropChanged")]

public function get someProp():Foo

저작자 표시 비영리
신고
Posted by 코멧'★
Flex/AIR/AS3/Etc2009.10.15 03:21

이글은 널곰님의 블로그에 올라와 있는걸 제가 코딩할때 참고하기 위해 제 나름데로 정리한 내용입니다.
원본글을 보시려면 널곰님 블로그에 방문해 주세요.

[출처] - http://blog.naver.com/surfwon/30049410362
[영문 원본] - http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

2. 언어사용법 (Language Uasge)

컴파일 옵션 (Compilation options)

컴파일 옵션은 -strict와 -show-actionscript-warnings는 on으로 해둡니다.
(flex-config.xml 파일에 기본값들이 설정되어 있습니다.)


프라퍼티-기반 API (roperty-based APIs)

프라퍼티-기반API가 메소드-기반API 보다 유리합니다. (MXML 프로그래밍에서 보다 적합하기에)


타입 (데이터형) 선언 (Type declarations)

모든 상수(constrant), 변수(vqriable), 함수 파라메터(argment), 반환값(return value)에는 타입 선언 해야 합니다. 비록 "타입 없음(no Type)"일 셩우에도 *라고 선언해 둡니다.

올바른 예

var value:*;


나쁜 예

var value;

타입은 가능한 엄밀하게 지정
루프의 인덱스 번호는 Number형이 아닌 int형으로 (ex. for(var i:int=0; i < n; i++))
다른 예로서 mouseDownHandler의 인수는 event:Event 보다는 event:MiuseEvent로 선언
음의 수가 되지 않는 경우에도 integers(정수)형의 int를 사용
unit는 RGB의 색지정, 비트 마스크, 그 외 수치가 아닌 값(non-numeric)만 사용합니다.

값이 undefined 이 될 수 있는 경우에만 타입 지정 *를 사용하도록 합니다. 대부분의 경에에서는 * 보다는 Object를 사용하도록 하여 “object doesn't exist(오브젝트가 존재하지 않음)”하는 경우 null을 사용합니다.

Array선언시 배열형을 나타낸다.

올바른 예

var a:Array /* of String */ = []

나쁜 예

var a:Array = []

다른 올바른 예

function f(a:Array/* of Number */):Array /* of Object */
{
...

}

나쁜 예

function f(a:Array):Array


리터럴 (Literals)


undefined

가능한 사용은 삼가합시다.


int와 unit 리터럴

정수형(int)에는 소수점을 사용하지 않도록 합니다.

올바른 예

2

나쁜 예

2.

16진수에는 소문자 x와 대문자 A-Z를 사용합니다.

올바른 예

0xFEDCBA

나쁜 예

0Xfedcba

RGB 값은 항상 6자리의 16진수로 기술합니다.

올바른 예

private const BLACK:uint = 0x000000;

나쁜 예

private const BLACK:uint = 0;

인덱스에서 사용시 -1 값은 "no index"를 의미합니다.


Number 리터럴 (Number literals)

Number형을 사용할때는 명시적으로 소수점을 씁니다. 0의 경우에도 소수점을 지정하도록 합니다.

올바른 예

alphaFrom = 0.0;
alphaTo= 1.0;

나쁜 예

alphaFrom = 0;
alphaTo= 1;

그러나, 픽셀 좌표에서는 이를 하지 마십시오. (약간에 모순이 존재)

나쁜 예

var xOffset:Number = 3;

나쁜 예

var xOffset:Number = 3.0;

지수를 표기할 때는 E가 아닌 소문자 e로 합니다.

올바른 예

1.0e12

나쁜 예

1.0E12

Number 값이 지정되지 않음(not set)의 기본 값은 NaN입니다.


String 리터럴 (String literals)

문자열을 (') 따옴표나 (") 겹따옴표를 사용하여 묶습니다. 만약 문자열에 (")문자가 포함될 경우 문자열로 하려면 다음과 같이 합니다.

올바른 예

"What's up, \"Big Boy\"?"

나쁜 예

'What\'s up, "Big Boy"?'

Use \u, not \U, for unicode escape sequences.


Array 리터럴 (Array literals)

new Array() 보다는 Array 리터럴을 사용합니다.

올바른 예

[]

나쁜 예

new Array()

다른 올바른 예

[1, 2, 3]

나쁜 예

new Array(1, 2, 3)

Array constructor (new Array()) 는 요소수를 특정해 생성할 때에만 사용하도록 합니다.
ex) new Array(3) 이것은 [undefined, undefined, undefined] 하는 의미로, [3] 과 다른 것에 주의해 주세요.


Object 리터럴 (Object literals)
new Object() 보다는 Object 리터럴을 사용합니다.

올바른예

{}

나쁜 예

new Object()

다른 올바른 예

o = {a:1, b:2, c:3};

나쁜 예

o = new Object();
o.a = 1;
o.b = 2;
o.c = 3;

다른 올바른 예

o = {}
o.a = 1;
o.b = 2;
o.c = 3;


Function 리터럴 (Function literals)

익명의 함수(anonymous functions) 정의를 위한 function 리터럴 사용을 피해야 합니다. 대신에 클래스 메소드나 패키지 함수를 사용합니다. function 표기에는 반드시 리턴값 타입을 선언하고, function 블록 안의 문자의 마지막은 세미콜론(;)으로 끝냅시다.

올바른 예

function(i:int):void { doIt(i - 1); doIt(i + 1); }

나쁜 예

function(i:int) { doIt(i - 1); doIt(i + 1) }


RegExp 리터럴 (RegExp literals)

String을 사용하여 RegExp 인스턴스를 생성하는 것보다 리터럴 표기를 사용합니다.

올바른 예

var pattern:RegExp = /\d+/g;

나쁜 예

var pattern:RegExp = new RegExp("\\d+","g");


XML and XMLList literals

String으로 XML 인스턴스를 생성하는 것보다, 다음과 같이 리터럴 표기를 사용합니다.

올바른 예

var node:XML = <name first="jane" last="Doe"/>;

나쁜 예

vat node:XML = new XML("<name first=\"jane\" last=\"Doe\"/>");

XML의 속성(attribute)값에는 '(single-quotes) 보다는 "(double-quotes)를 사용합니다.

올바른 예

var node:XML = <name first="jane" last="Doe"/>;

나쁜 예

var node:XML = <name first='jane' last='Doe'/>;


Class 리터럴
같은 이름을 가진 클래스를 두 개를 임포트 할 경우 이를 명확히 하고자 할 경우 완전히 갖춘 클래스 리터럴을 사용합니다.

올바른 예

import mx.controls.Button;

var b:Button = new Button();

나쁜 예

import mx.controls.Button;

var b:Button = new mx.controls.Button();

예외의 경우 (같은 이름을 가진 두개의 클래스를 임포트 할 경우 완전한 클래스 리터럴을 사용)

import mx.controls.Button
import my.controls.Button

vat b:Button = new mx.controls.Button();


표현식 (Expressions)


() 소괄호(Parentheses)

+, -, *, /, &&, ||, <, <=, >, >=, ==, and != 와 같은 일반 연산자를 사용할 때에는 불필요한 소괄호를 사용하지 않도록 합니다.

올바른 예

var e:Number = a * b / (c + d);

나쁜 예

var e:Number = (a * b) / (c + d);

다른 올바른 예

var e:Boolean  = a && b || c == d;

나쁜 예

var e:Boolean = ((a && b) || (c == d));

다른 연산자에 대한 우선순위 규칙은 꼭 기억하고, 그러할 경우 괄호는 더 도움이 될 수 있습니다.


Coercion

Boolean값을 true나 false와 비교하는 불필요한 것은 하지 마십시오. 둘 중의 한 값(true 또는 false) 밖에 되지 않기 때문입니다.

올바른 예

if (flag)

나쁜 예

if (flag == true)

올바른 예

var flag:Boolean = a && b;

나쁜 예

var flag:Boolean = (a && b) != false;

int, uint, Number, String을 비교할 때는 명시적으로 Boolean을 비교하도록 합니다.

올바른 예

if (n != 0)

나쁜 예

if (n)

올바른 예

if (s != null && s != "")

나쁜 예

if (s)

오브젝트 참조의 판정은 묵시적으로 Boolean 비교하도록 합니다.

올바른 예

if (child)

나쁜 예

if (child != null)

올바른 예

if (!child)

나쁜 예

if (child == null)

Prefer the use of a cast to the use of the as operator. Use the as operator only if the coercion might fail and you want the expression to evaluate to null instead of throwing an exception.

올바른 예

IUIComponent(child).document

나쁜 예

(child as IUIComponent).document


Comparison

자연스럽게 읽을 수 있는 차례로 비교문을 씁니다.

올바른 예

if (n == 3) // "만약 n 이 3 이면"

나쁜 예

if (3 == n) // "만약 3 이 n 이면"


++와 -- 연산자

In cases where the postfix and prefix forms are equivalent, use the postfix form. Use the prefix form only when you need to use the value before it is incremented.
(접두사 형태(++i)나 접미사 형태(i++)중 아무거나 사용해도 상관없다면 접미사 형태를 사용해라. 접미사 형태는 오직 값이 먼저 증가될 필요가 있을 경우에만 사용해라.)

올바른 예

for (var i:int = 0; i < n; i++)

나쁜 예

for (var i:int = 0; i < n; ++i)


3항 연산자

단순한 if/else 기술 (특히 null 체크)시에는, 3항 연산자를 사용합니다.

올바른 예

return item ? item.label : null;

나쁜 예

if (!item)
return null;
return item.label;

그렇지만, 중첩되는 복잡한 if/else 논리때는 3항 연산자는 사용하지 않도록 합니다.

올바른 예

if (a < b)
return -1;
else if (a > b)
return 1;
return 0;

나쁜 예

return a < b ? -1 : (a > b ? 1 : 0);


new 연산자

constructor에 인수를 건네주지 않는 경우에서도 class 선언의 뒤에는 ()를 씁니다.

올바른 예

var b:Button = new Button();

나쁜 예

var b:Button = new Button();


명령문(Statements)

명령문은 세미콜론으로 끝냅니다. ActionScript 3의 세미콜론 옵션 기능(optional-semicolon)에 의지하지 않도록 합니다.

올바른 예

a = 1;
b = 2;
c = 3;

나쁜 예

a = 1
b = 2
c = 3


include 선언문

#include 는 아니고 include 라고 씁니다. 또, 다른 명령문과 같게 마지막에 세미콜론을 씁니다.

올바른 예

include "../core/ComponentVerison.as";

나쁜 예

#include "../core/ComponentVersion.as"

절대 경로가 아니고 상대 경로로 지정합니다.


import 선언문

클래스나 인터페이스나 패키지 레벨의 함수를 임포트 할 때는 *(와일드 카드 지정)가 아닌 제대로 지정하여 임포트 합니다.

올바른 예

import mx.controls.Button;
import flash.utils.getTimer;

나쁜 예

import mx.core.*;


use namespace 선언

use namespace의 사용은 피하는 대신 :: 문장구조법을 사용합니다.
Avoid them; use :: syntax instead on each reference to something in a non-open namespace.

올바른 예

import mx.core.mx_internal;

// Later, in some method...
mx_internal::doSomething();

나쁜 예

import mx.core.mx_internal;
use namespace mx_internal;

// Later, in some method...
doSomething();


if 문

if/else문 내의 명령이 한 개 밖에 없는 경우는 {} 블록으로 둘러싸지 않도록 합니다.

올바른 예

if (flag)
doThing1();

나쁜 예

if (flag)
{
doThing1();
}

다른 예

if (flag)
doThing1();
else
doThing2();

나쁜 예

if (flag)
{
doThing1();
}
else
{
doThing2();
}

다만, 명령문이 여러개 있는 요소가 있다면 모두 {}로 둘러 싸도록 합니다.

올바른 예

if (flag)
{
doThing1();
}
else
{
doThing2();
doThing3();
}

나쁜 예

if (flag)
doThing1();
else
{
doThing2();
doThing3();
}

When doing multiple error checks, use sequential if statements that test for failure and return early. The successful execution flow is then down the page, with the succesful return at the end of the method. Do not use nested tests for success, which make the execution flow drift across the page.

올바른 예

if (!condition1)
    return false;
...
if (!condition2)
    return false;
...
if (!condition2)
    return false;
...
return true;

나쁜 예

if (condition1)
{
    ...
    if (condition2)
    {
        ...
        if (condition3)
        {
            ...
            return true;
        }
    }
}
return false;


for문

for 루프내의 명령이 1개 밖에 없어도, 항상 {}로 둘러 싸도록 합니다.

올바른 예

for (var i:int = 0; i < 3; i++)
{
   doSomething(i);
}

나쁜 예

for (var i:int = 0; i < 3; i++)
    doSomething(i);

for 루프의 상한값을 로컬 변수로서 사전에 보관 유지하게 합니다. 이것에 의해서 루프가 돌 때마다 변수의 평가를 다시 하지 않게 할 수 있습니다. (물론 비교 평가는 반복 실행되지 않으면)

올바른 예

var n:int = a.length;
for (var i:int = 0; i < n; i++)
{
    ...
}

나쁜 예

for (var i:int = 0; i < a.length; i++)
{
    ...
}

그것(인덱스변수)이 다른곳에서 사용되지 않는한 for 문장의 ()안에서는 var 선언합니다.

올바른 예

for (var i:int = 0; i < 3; i++)

나쁜 예

var i:int;
for (i = 0; i < 3; i++)
{
   ...
}


while 문

while 루프는 비록 내용이 1행이었다고 해도 {}블록으로 둘러싸도록 합니다.

올바른 예

while (i < n)
{
   doSomething(i);
}

나쁜 예

while (i < n)
    doSomething(i);


do문

do 루프는 비록 내용이 1행이었다고 해도 {}블록으로 둘러 싸도록 합니다.

올바른 예

do
{
   doSomething(i);
}
while (i < n);

나쁜 예

do
    doSomething(i);
while (i < n);


switch 문

case clause (와)과 default clause (은)는 모두 블록으로 둘러 싸도록 합니다. 각 블록내에 break 혹은 return 을 기술 하도록 합니다. 리턴을 사용할 때는 return 후에 break (을)를 두지 않도록 합니다.
Make the body of each case clause, and of the default clause, be a block. Put the break or return statement within the block, not after it. If you are returning, don't put a break after the return. Treat the default clause similarly to the case clauses; break or return from it rather than falling through the bottom of the switch.

올바른 예

switch (n)
{
    case 0:
    {
        foo();
        break;
    }

    case 1:
    {
        bar();
        return;
    }

    case 2:
    {
        baz();
        return;
    }

    default:
    {
        blech();
        break;
    }
}

나쁜 예

switch (n)
{
    case 0:
        foo();
        break;

    case 1:
    {
        bar();
    }
    break;

    case 2:
        baz();
        return;
        break;

    default:
        blech();
}


return 문

return을 사용하는 경우는 불필요하게 ()괄호호 둘러싸지 않게 해주세요.

올바른 예

return n + 1;

나쁜 예

return (n + 1);

메소드의 도중에 리턴하는 것은 OK입니다.



Declarations


1행의 명령문 아에서 복수의 정수나 변수를 선언하지 않도록 합니다.

올바른 예

var a:int = 1;
var b:int = 2;

나쁜 예

var a:int = 1, b:int = 2


override 키워드

액세스 접근제한자의 앞에 쓰도록 합니다.

올바른 예

override protected method measure():void

나쁜 예

protected override method measure():void


접근 제한자 (Access specifiers)

지정할 수 있는 개소에서는 반드시 액세스 지정자를 기술하도록 합니다. 아무것도 기술하지 않았던 때에는 접근 제한자 internal 취급이 됩니다만, 이보완 기능에는 의지하지 않도록 합니다.

API를 public이나 protected로 할 때는, 정말로 그렇게 해야 하는가를 잘 생각합니다.
Before making an API public or protected, think hard about whether it is really needs to be. Public and protected APIs must be documented. They must also be supported for several releases before being formally deprecated


static 키워드

접근 제한자의 뒤에 쓰도록 합니다.

올바른 예

public static const MOVE:String = &quot;move&quot;

나쁜 예

static public const MOVE:String = &quot;move&quot;;


final 키워드

액세스 지정자의 뒤에 쓰도록 합니다.

올바른 예

public final class BoxDirection

나쁜 예

final public class BoxDirection

Declare all “enum classes” to be final.
Also declare “base” properties and methods (those starting with $) to be final.


상수 (Constants)

상수는 모두 static으로 합니다. 인스턴스화했더니 어차피 같은 값이 들어오니까.

올바른 예

public static const ALL:String = "all";

나쁜 예

public const ALL:String = "all";


변수 (Variables)

변수에 초기치를 갖게해 두고 싶을 때는, constructor 내가 아니고, 선언시에 해 두도록 하겠습니다.

올바른 예

private var counter:int = 1;

나쁜 예

private var counter:int;
...
public function MyClass()
{
    super();
    ...
    counter = 1;
}


로컬 변수 (Local Variables)

로컬 변수는 사용하기 직전에 선언하도록 합니다. 함수의 첫머리에서 정리해 선언해 두는 것은 그만둡시다.

올바른 예

private function f(i:int, j:int):int
{
    var a:int = g(i - 1) + g(i + 1);
    var b:int = g(a - 1) + g(a + 1);
    var c:int  = g(b - 1) + g(b + 1);

    return (a * b * c) / (a + b + c);
}

나쁜 예

private function f(i:int, j:int):int
{
    var a:int;
    var b:int;
    var c:int;

    a = g(i - 1) + g(i + 1);
    b = g(a - 1) + g(a + 1);
    c = g(b - 1) + g(b + 1);

    return (a * b * c) / (a + b + c);
}

동명의 로컬 변수의 선언은 한 함수내에 대해 1개입니다. 그렇다고 하는 것도 ActionScript 3 그럼 블록내의 로컬 스코프는 없기 때문입니다. (?)
Declare local variables only one per function. ActionScript 3 doesn't have block-scoped locals.

올바른 예

var a:int;
if (flag)
{
    a = 1;
    ...
}
else
{
    a = 2;
    ...
}

나쁜 예

var a:int;
if (flag)
{
    a = 1;
    ...
}
else
{
    a = 2;
    ...
}

다른 올바른 예

var i:int;
for (i = 0; i &lt; n; i++)
{
    ...
}

for (i = 0; i &lt; n; i++)
{
    ...
}

나쁜 예

for (var i:int = 0; i &lt; n; i++)
{
    ...
}

for (var i:int = 0; i &lt; n; i++)
{
    ...
}


클래스 (Classes)

Object 형태를 확장시킨 클래스의 경우는, extends Object의 기술은 생략 할 수 있습니다.

클래스 내에 "bare statements" 만이 loadResources(). 등의 정적 클래스 초기화 메소드의 호출이 되도록 합니다.


생성자 (Constructors)

클래스에 인스턴스 멤버가 있는 경우는 생성자(constructor)를 기술하고, 비록 다른 용도가 없다고 해도 명시적으로 super()를 호출하도록 합니다.
생성자 함수에 인수를 건네주어 인스턴스 변수를 설정하는 경우는, 인스턴스 변수와 같은 이름을 붙여 사용합니다.

올바른 예

public function MyClass(foo:int, bar:int)
{
    this.foo = foo;
    this.bar = bar;
}

나쁜 예

public function MyClass(fooVal:int, barVal:int)
{
    foo = fooVal;
    bar = barVal;
}

생성자 내에서 인스턴스 변수의 값을 설정하는 것이 아니라, 인스턴스 변수의 선언시에 끝마쳐 두도록 하겠습니다. 예외로서 상속된 인스턴스 변수를 리셋하고 싶을 때는 생성자(constructor) 내에서 설정해도 좋습니다.


인터페이스 (Interfaces)

TBD (To Be Determined : '차후 결정될 예정, 아직 미정'이라는 뜻입니다.)


네임스페이스 (Namespaces)

TBD


프롭퍼티 포함 (Implementing properties)

TBD


메타데이타 (Metadata)

TBD


패키지 (Packages)


패키지 문 안에 한개 public API (일반적으로 클래스, 경우에 따라서는 네임스페이스)만을 배치합니다.

Helper classes

bare statements
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Etc2009.10.14 22:29

이글은 널곰님의 블로그에 올라와 있는걸 제가 코딩할때 참고하기 위해 제 나름데로 정리한 내용입니다.
원본글을 보시려면 널곰님 블로그에 방문해 주세요.

[출처] - http://blog.naver.com/surfwon/30049410362
[영문 원본] - http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

1. 명명규칙 (Naming)

약어 (Abbreviations)

일반적으로 약어 사용은 피합시다. ex) calcOptVal() ---> calculateOptimalValue()

관례화 되어 있는 약어
  • acc - accessibility(접근성) ex) ButtonAccImpl
  • auto - automatic(자동적) ex) autoLayout
  • eval - evaluate(계산) ex) EvalBindingResponder
  • impl - implementation(이행) ex) ButtonAccImpl
  • info - information(정보) ex) GridRowInfo
  • num - number(숫자) ex) numChildren
  • min - minimum(최소) ex) minWidth
  • max - maximum(최대) ex) maxHeight
  • nav - navigation, ex) NavBar
  • regexp - regular expression(정규식) ex) RegExpValidator
  • util - utility ex) StringUtil

두문자어 (Acronyms)

AIR, CSS, HLOC, IME, MX, MXML, RPC, RSL, SWF, UI, UID, URL, WSDL, XML ...
두문자어는 전부 대문자이거나 전부 소문자로만 사용
(두문자어가 소문자로 표기하는 경우 : 두문자어의 명칭 그 자체를 식별자(인스턴스명)로서 사용할 때와 식별자(Indetifier: ID명)의 선두 문자에 사용할 때에 한정)
ex) CSSStyleDeclaration, IUID, uid, IIME, and imeMode


단어간 경계 (Word boundaries) 연결

InterCaps(CamelCase)방식 - ex) LayoutManager, measuredWidth
언더스코어(밑줄)방식 - ex) object_proxy

(? 어떨때 어떤걸 쓰라는지는 안나와있다;; 계속 읽다보면 나오려나;;)

타입을 특정하기 쉬운 명명법(Type-specifying names)
타입을 쉽게 알 수 있도록 명명하되 타입의 약어를 나타내는 접미어 사용은 하지말자
ex) border_mc (X), button:Button = New Button(); (O)


패키지명 (Package names)

선두문자를 소문자로 시작하고 그 이후는 인터캡스 방식으로 명명
패키지는 비슷한 기능끼리 정리하여 그(기능의) 복수형으로 이름 붙이도록 합시다.
ex) charts, collections, controls, effects, events, formatters, managers, ,,,

패키지명에는 그 기능(concept)을 나타내는 동명사를 사용하는 것이 일반적입니다.
ex) binding, loffing, messaging, printing
혹은 "기능을 나타내는 명사"로 하도록 합니다.
ex) accessibility, core, graphics, rpc


파일명 (File names)

API을 Import를 위해, 반드시 파일명은 공개 API 클래스명과 같은 이름으로 합니다. 그러나 include일 경우는 이 규칙을 따를 필요가 없습니다.

[Style(...)] 메타 데이타에 대한 인클루드 파일의 이름은 대문자로 시작하기 바랍니다. 그 다음은 인터캡스 방식으로 하되 후미 단어는 "Styles"를 사용합니다.
ex) BorderStyles.as, ModalTransparencyStyles.as
(이미지등의) 어셋(assets) 파일명은 선두 문자는 소문자로 하고 단어와 단어의 사이는 언더스코어(_)로 연결합니다.
ex) icon_align_left.png


네이스페이스명 (Namespace names)

선두 문자는 소문자로 단어와 단어의 사이는 언더스코어(밑줄)로 연결합니다.
ex) mx_internal, object_proxy


인터페이스명 (Interface names)

선두 문자에 "I"를 나머지는 인터캡스방식으로 명명합니다.
ex) IList, IFocusManager, IUID


클래스명 (Class names)

선두 문자를 대문자로 시작한 이후는 인터캡스 방식으로 명명합니다.
ex) Button, FocusManager, UIComponent

Event 클래스의 하위 클래스(subClass)는 FooBarEvent하는 식으로 명명합니다.
Error 클래스의 하위 클래스는 FppBarError 식으로 명명합니다.
EffectInstance 클래스의 하위 클래스는 effect FooBar FooBarInstance로 조합합니다.
Formatter 클래스의 하위 클래스는 FooBarFomatter식으로 명명합니다.
Validator 클래스의 하위 클래스는 FooBarValidator 식으로 명명합니다.
skinning 클래스 : FooBarBackground, FoobarBorder, FooBarSkin, FooBarIcon, FooBarIndicator, FooBarSeparator, FooBarCursor, etc.
utility 클래스 : FooBarUtil (FooBarUtils는 안됨. 패키지는 복수형, 클래스는 단수형으로)
일반 기본 클래스명 FooBarBase: ComboBase, DateBase, DataGridBase, ListBase.


이벤트명 (Event names)

선두 문자를 소문자로 시작한 이후는 인터캡스 방식으로 명명합니다.
ex) move, creationComplete


스타일명 (Style names)

선두 문자를 소문자로 시작한 이후는 인터캡스 방식으로 명명합니다.
ex) color, fontSize


문자열 프라퍼티에 대한 나열값 (Enumerated values for String properties)

선두 문자를 소문자로 시작한 이후는 인터캡스 방식으로 명명합니다.
ex) "auto",  "filesOnly"


상수명 (Constant names)

모두 대문자로 사용하고 단어와 단어의 사이는 언더스코어(_)로 연결합니다.
ex) OFF, DEFAULT_WIDTH

상수(Constant)에 문자열(String 형태)를 지정할 때는 식별자명도 그 무자열에 대응시킵니다.

public static const FOO_BAR:String = "fooBar";


프라퍼티 [변수 및 getter/setter]명 (Property[variable and getter/setter] names)

선두 문자를 소문자로 시작한 이후는 인터캡스 방식으로 명명합니다.

루프 인덱스에 대해 i를 사용하고, 상한값에는 n을 사용합니다. 루프 안에 루프의 인덱스는 j, 상한값에는 m을 사용합니다.

for (var i:int = 0; i < n; i++)
{
for (var j:int = 0; j < m; j++)
{
...
}
}

for-in 루프의 변수는 p("property"의미)를 사용

for (var p:String in o)
{
...
}

getter/setter를 오버라이드하고 기본 getter/setter를 계속 사용하고 싶으면, 기본명 앞에 '$'를 붙인다. 이 getter/setter는 final로 지정되고 더 이상 supergetter/setter에 아무짓도 안하게 된다.

mx_internal final function get $numChildren():int
{
return super.numChildren;
}


스토리지 변수명 (Storage variable names)

getter/setter foo 에 대한 스토리지 변수는 _foo 로 명명 합니다.


메소드명 (Methid names)

선두 문자를 소문자로 시작한 이후는 인터캡스(카멜게이스) 방식으로 명명합니다.
ex) measure(), updateDisplayList()

메소드명은 항상 동사로 합니다.

일반적으로 파라메타가 없는 메소드는 getFooBar()나 setFooBar()의 이름을 사용하는 것이 아니라, 대신에 getter/setter로서 기술합니다. 하지만 getFooBar() 가 많은 처리를 필요로 하는 "무거운" 메소드인 경우에는 특징이 분명히 나타나도록 getter() 보단 대신에 findFooBar(), calculateFooBar(), detemineFooBar(), 등 과 같은 이름을 사용하는 것이 좋습니다.

클래스 메소드를 오버라이드(override)하고 베이스 메소드를 노출하고 싶은 경우는 베이스 명의 머리에 '$'가 붙은 같은 이름의 메소드를 기술합니다. 이 경우 해당 메소드에는 'final'을 표시 하여 슈퍼 메소드의 호출하여 이외의 기능을 포함하지 않게 합니다.
(대체 뭔말인지 ㅜ_ㅜ)

mx_internal final function $addChild(child:DisplayObject):DisplayObject
{
return super.addChild(child);
}


이벤트 핸들러명 (Event handler names)

이벤트 핸들러는 그 이벤트 타입 명칭에 "Handler"를 붙인 이름으로 합니다.
ex) mouseDownHandler()

이벤트 핸들러가 하위 컴포넌트에 이벤트를 디스패치(dispatch)하는 경우(this는 예외), 하위 컴포넌트 이름을 앞에, 핸들러 이름을 뒤에 적어주고 언더스코어(_)로 구분하여 연결 짓는다.
ex) textInput_focusInHandler()


파라미터[인수]명 (Argument names)

setter의 파라미터에는 value (을)를 사용합니다.

올바른 예

public function set label(value:String):void

나쁜 예

public function set label(lab:String):void

다른 좋은 예

public function set label(labelValue:String):void

다른 예

public function set label(val:String):void

이벤트 핸들러의 인수에는 (e, evt, eventObj는 아님) event를 사용하도록 합니다.

protected function mouseDownHandler(event:Event):void


리소스번들명 (Resource bundle names)

만약 리소스번들이 특별한 패키지를 포함하고 있다면 그 패키지와 같은 이름을 번들 이름으로 명명합니다.
ex) controls, {formatters}}, validators


리소스키명 (Resource key names)

선두 문자를 소문자로 시작한 이후는 인터캡스 방식으로 명명합니다.
ex)pm, dayNamesShort


그밖에 명명법 (Miscellaneous nomenclature)


"object"는 막연한 (vague) 뜻이므로 피합니다.

"item"은 data item이지 DisplayObject는 아닙니다.

"renderer"는 data item을 표시하는 DisplyObject입니다.

"type"은 ActionScript3의 자료형입니다. 그러니 "kind"같은 비슷한 단어를 사용합니다.
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/AIR2009.10.11 17:26

[출처] - 오창훈님 블로그 (http://lovedev.tistory.com/)
http://lovedev.tistory.com/trackback/498

요즘 한참 파일을 바이트 단위로 읽어서 표현하는 방법에 대해 공부하던 중 오창훈님의 블로그에 올라와 있는 글을 보고
발견한 내용입니다.

BMP 파일을 읽는 예제
package
{
	import flash.filesystem.File;
	import flash.filesystem.FileStream;
	import flash.filesystem.FileMode;

	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.utils.Endian;

	import flash.geom.Rectangle;

	[SWF(width='550', height='400', backgroundColor='#FFFFFF', frameRate='12')]
	public class BMPViewer extends Sprite
	{
		private static const MAGIC_NUMBER:String = "BM";
		private static const BMP_DATA_OFFSET_POSITION:int = 0xA;
		private static const WIDTH_POSITION:int = 0x12;
		private static const HEIGHT_POSITION:int = 0x16;

		public function BMPViewer()
		{
			loadBMP();
			super();
		}

		/*
			Loads and reads a 24 Bit bitmap file.
			
			Based on BMP info from:
			http://en.wikipedia.org/wiki/BMP%5Ffile%5Fformat
		*/
		private function loadBMP():void
		{
			//Load BMP. This requires AIR.
			//Use FileReference.browse for
			//Flash Player
			var bmpFile:File = new File("app:/image.bmp");
			var fs:FileStream = new FileStream();

			//BMP files are Little Endian, which means their
			//least significant byte is first (right to left)
			fs.endian = Endian.LITTLE_ENDIAN;

			//open the file in READ mode
			fs.open(bmpFile, FileMode.READ);

			//check the first two bytes to make sure
			//it is a valid BMP file
			if(fs.readUTFBytes(2) != MAGIC_NUMBER)
			{
				trace("FAIL : NOT A BMP FILE");

				//not a BMP file, close steam
				//and exit
				fs.close();
				return;
			}

			//note, we could also grab the length from the 
			//header and make sure the file was the correct
			//length

			//change the cursors position to the point
			//in the header that contains the value / offset
			//of where the actual bitmap data begins
			//read in the 4 Bytes that contain the value
			fs.position = BMP_DATA_OFFSET_POSITION;
			var dataPosition:int = fs.readInt();

			//set cursor position to where the BMP
			//width is stored
			fs.position = WIDTH_POSITION;

			//read in the 4 Bytes that contain the width
			var bmpWidth:int = fs.readInt();

			//read in the 4 Bytes that contain the height
			var bmpHeight:int = fs.readInt();

			//set cursor to where the BMP pixel data begins
			fs.position = dataPosition;

			var row:int = 0;
			var column:int = 0;

			//every row length in a BMP file must bee a multiple
			//of 4 (see the spec). So, we need to determine how much
			//padding we need to add at the end of each line. 
			var padding:int = (bmpWidth % 4);

			//create a fixed length Vector to store the pixel
			//values as we read them.
			var pixels:Vector. = new Vector.(bmpWidth * bmpHeight, true);

			//loop through data (rows and columns)
			//note that data stored in BMP is backwards to Flash and is
			//stored from bottom row up, not top row down.
			//So we have to loop backwards
			var counter:int = 0;
			for(var i:int = bmpHeight; i > 0; i--)
			{
				for(var k:int = 0; k < bmpWidth; k++)
				{

					var position:int = ((i - 1) * bmpWidth) + k;
					/*
						This is the original code that I had which works fine
						but is not as effecient as what I have now.
						
						Basically, Pixels are stored within 3 sucessive Bytes
						in a BMP file, with one Byte each for Blue, Green and
						Red values (in that order).
						
						So, this reads the Bytes for each pixel, one at a time
						and then combines them into a single value which is
						the combined RGB pixel value.
						
						I left the code as I think it make it a little easier to
						understand what is going on, as well as how some of these
						calls can be optimized.
					*/

					/*
					var blue:int = fs.readUnsignedByte();
					var green:int = fs.readUnsignedByte();
					var red:int = fs.readUnsignedByte();
					
					pixels[position] = (red << 16 ^ green << 8 ^ blue);
					*/

					/*
						Here is the final code which is more efficient, as it only
						needs to make 2 read calls in order to get the values.
						
						Thanks to Thibault Imbert (bytearray.org) for pointing out
						and helping me understand the optimization.
					*/

					//bytes in file are in Blue, Green, Red order
					//int is 32 bits (8 bytes). So, we store the first two bytes of the pixel
					// (which contain the Red value), and
					//then shift everything over 1 byte (8bits) to make room for
					//the green and blue values (remember the file is little endian), which we
					// then write into the int in the right position
					//The final value has the colors in the correct order (Red, Green, Blue)

					var pixelValue:uint = fs.readUnsignedByte() | fs.readUnsignedShort() << 8;
					pixels[position] = pixelValue;
				}

				//we are at the end of the row, so now we have to move the cursor
				//forward so it ends on a multiple of 4
				if(padding)
				{
					fs.position += padding;
				}
			}

			//done reading file, close stream.
			fs.close();

			//create a Rectangle with width / height of Bitmap
			var rect:Rectangle = new Rectangle(0, 0, bmpWidth, bmpHeight);

			//create the BitmapData object to hold hold the BMP data.
			//we do a red fill here so it is easier to see if we have any errors
			//in our code
			var bmpData:BitmapData = new BitmapData(bmpWidth, bmpHeight, false, 0xFF0000);

			//copy the BMP pixel data into the BitmapData
			bmpData.setVector(rect, pixels);

			//create a new Bitmap instance using the BitmapData
			var bitmap:Bitmap = new Bitmap(bmpData);
			bitmap.x = 10;
			bitmap.y = 10;

			//add Bitmap to the display list
			addChild(bitmap);
		}
	}
}

역시 그래픽 파일의 특성상 LITTLE_ENDIAN으로 바이트를 읽어들입니다. JPEG 같은 경우에는 BIG_ENDIAN이라 한참 헷갈렸던 적이 있었던 기억이 나네요 ^^;

참고 : http://www.mikechambers.com/blog/2009/09/17/parsing-and-displaying-bmp-files-via-actionscript/
예제 다운로드 : http://www.mikechambers.com/blog/files/examples/BMPViewer.zip

오창훈님 블로그에 bmd.setVector (rect, pixels); setVector는 bmd.setPixel보다 빠른 퍼포먼스를 낸다고 조언을 해주셨네요 ^^;
전 setVector 보다 setPixel이 더 퍼포먼스가 좋다고 생각하고 있었는데 역시나 아직 갈길이 멉니다 ㅜ_ㅜ

현재 파일들 구조들에 대해 공부하고 있는데 최종 목표는 flex에서 각 파일 포멧들 간의 변경과 그래픽 파일들로 플래쉬 또는 동영상 파일로 컨버트 할 수 있는 프로그램을 만들려고 하는데 파일들 구조가 생각보다 쉽지 않네요 ㅜ_ㅜ 언제나 완성할 수 있을지 걱정입니다 ㅜ_ㅜ
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
TAG AIR, bmp
Flex/AIR/AS3/AIR2009.10.09 14:27


제작툴 : Adobe Flash Builder 4
사용언어 : ActionScript 3.0 & AIR 1.5

미해결 문제
  * 1. USB나 기타 저장장치 자동 인식
  * 2. 스타일 적용
  * 3. 폴더 복사, 이동, 삭제
  * 4. 오른쪽 마우스 버튼 메뉴
  * 5. 로컬 디스크 새로 읽어올시 프로그램 어는 문제 미해결;

작동원리
  * Tree 콤포넌트 확장
  * Renderer 사용
  * 비동기식 폴더내역 검색과 동기식 Local Disk 검색
  * 폴더 아이콘, 선택되었을때 Dot border, Dot line 이미지로 구현
  * 혹시나 모를 다국어 버젼을 위한 내 컴퓨터/로컬 디스크 부분 한글은 public 으로 선언
     - 원본 폴더명을 전부 쓰려고 하였으나 내 컴퓨터/로컬 디스크는 Window OS만 사용하므로 배제
  * Node 간 높이 간격 18px (변경시 코드의 수정과 이미지 수정이 불가피)
  * Font Size 12px (변경시 코드의 수정과 이미지 수정이 불가피)

저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Error Code2009.10.03 15:19
[TypeError] TypeError : Error #1034 유형 강제 변환에 실패했습니다. ⓖ을(를) ⓖ(으)로 변환할 수 없습니다.

캐스팅 실패 (ex:DisplayObject(), as DisplayObject)

클래스 상속관계 일때 캐스팅이 가능, 전혀다른 타입의 변수를 캐스팅하고 있다면 수정한다
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Error Code2009.10.03 15:18
[TypeError] TypeError : Error #1088 루트 요소 다음에 나오는 문서 내의 태그는 올바른 형식이어야 합니다.

xml 형식이 올바르지 않음

xml 문서 전체 검토(상단에 오류가능성)

(EUC-KR일때 플래시가 4000자 이상 못받기때문에 Stream방식으로 데이터를 받거나, UTF-8로 변경해주어야한다.)
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Error Code2009.10.03 15:17
[TypeError] TypeError : Error #1085 요소 유형 ⓖ은(는) 일치하는 끝 태그 (으)로 끝나야 합니다.

xml의 시작태그와 마감태그 불일치

xml 검사(작은따옴표, 따옴표, [], <>등이 문제일수 있음

(EUC-KR일때 플래시가 4000자 이상 못받기때문에 Stream방식으로 데이터를 받거나, UTF-8로 변경해주어야한다.)
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Error Code2009.10.03 15:14
[TypeError] TypeError : Error #1095 XML 파서 실패: 속성이 종결되지 않았습니다.

XML(String)에서 String이 완벽한 XML문장이 아님

XML이 EUC-KR일때 자주 발생 = UTF-8로 고치거나 데이터를 Stream 방식으로 받아야한다

(EUC-KR일때 플래시가 4000자 이상 못받기때문에 Stream방식으로 데이터를 받거나, UTF-8로 변경해주어야한다)
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Error Code2009.10.03 15:08
[TypeError] TypeError : Error #1010  정의되지 않은 용어이며 속성이 없습니다.

선언되지 않은 변수, Object 접근

오타여부 의심, 인스턴스 지정여부, 객체단계확인

해당 에러는 정의되지 않은 대상을 참조하거나 사용할때 나타나는 에러입니다.

보통 변수명의 오타로 인하여 발생할 경우가 많으니 변수명에 오타가 있는지 확인하시거나

정의하지 않은 변수나 객체를 사용하는 부분이 있는지 살펴보시면 됩니다.
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Tweener2009.09.04 00:17
TweenMax 는 ActionScript에서 사용되는 Tweener의 기능을 좀더 사용하기 편하고 다양한 효과를 나타낼 수 있게 만든 Tweener입니다. Adobe 사에서 만든 것이 아니라 greensock 이라는 곳에서 만든 tweener인데 사용하기도 편하고 다양한 효과를 나타낼 수 있는 장점이 있습니다.

TweenMax 다운받기 - http://blog.greensock.com/tweenmaxas3/

미리보기


저작자 표시 비영리 변경 금지
신고

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

BetweenAS3 Tweener  (0) 2009.11.05
TweenMax 사용하기  (0) 2009.09.04
부드러운 움직임 공식 / 탄성 공식  (0) 2009.09.02
Posted by 코멧'★
Flex/AIR/AS3/Tweener2009.09.02 18:00
1. 부드러운 움직임

이동될 위치 = 현재 위치 + (목표 위치 - 현재 위치) * 속도

2. 탄성 효과

이동 거리 = (목표 위치 - 현재 위치) * 속도 + (이동거리 * 탄성계수)
이동될 위치 = 현재위치 + 이동 거리


※ 속도는 0부터 1사이의 소숫점으로 표현 ( 0 < 속도 < 1)

예제)
package {
	import flash.display.MovieClip;
	import flash.events.*;

	public class MenuAction extends MovieClip {
		private var _mouseXpos:Number;
		private var _oriXpos:Number;
		private var _oriWidth:Number;
		private var _oriHeight:Number;
		private var _targetXpos:Number;
		private var _targetWidth:Number;
		private var _targetHeight:Number;
		
		private var _speed:Number = .9;
		private var _damp:Number = .4;
		
		private var _disXpos:Number = 0;
		private var _disWidth:Number = 0;
		private var _disHeight:Number = 0;
		
		public function MenuAction():void {
			_oriXpos = _targetXpos = x;
			_oriWidth = _targetWidth = width;
			_oriHeight = _targetHeight = height;
			addEventListener(Event.ENTER_FRAME,onEnterFrame);
		}
		
		public function set mouseXpos(value:Number):void {
			_mouseXpos = value;
			
			if (value > x) {
				_targetXpos = _oriXpos-20;
			} else if (value < x) {
				_targetXpos = _oriXpos+20;
			} else {
				_targetWidth = _oriWidth * 1.6;
				_targetHeight = _oriHeight * 1.6;
			}
		}
		
		public function mouseOut():void {
			_targetXpos = _oriXpos;
			_targetWidth = _oriWidth;
			_targetHeight = _oriHeight;
		}
		
		private function onEnterFrame(e:Event):void {
			_disXpos = (_targetXpos-x) * _speed + (_disXpos*_damp);
			_disWidth = (_targetWidth-width) * _speed;
			_disHeight = (_targetHeight-height) * _speed;
			
			x = x + _disXpos;
			width = width + _disWidth;
			height = height + _disHeight;
		}
	}
}
저작자 표시 비영리 변경 금지
신고

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

BetweenAS3 Tweener  (0) 2009.11.05
TweenMax 사용하기  (0) 2009.09.04
부드러운 움직임 공식 / 탄성 공식  (0) 2009.09.02
Posted by 코멧'★
Flex/AIR/AS3/Etc2009.09.02 17:50

menu0.addEventListener(MouseEvent.ROLL_OVER, mouseOverEvt);
menu1.addEventListener(MouseEvent.ROLL_OVER, mouseOverEvt);
menu2.addEventListener(MouseEvent.ROLL_OVER, mouseOverEvt);
menu3.addEventListener(MouseEvent.ROLL_OVER, mouseOverEvt);
menu4.addEventListener(MouseEvent.ROLL_OVER, mouseOverEvt);

위와 같은 코딩을 해야할 경우
for (var i:int = 0;i < 5; i++) {
	var mc:MovieClip = this["menu"+i] as MovieClip;
	mc.addEventListener(MouseEvent.ROLL_OVER, mouseOverEvt);
}

와 같이 간단히 표현 할 수 있다.
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★

[출처]  http://code.shichiseki.jp/as3/ExifInfo/

상단 출처 링크에 가셔서 라이브러리를 다운받으셔서 사용하셔야 합니다.

import jp.shichiseki.exif.*; 

var loader:ExifLoader = new ExifLoader(); 

private function loadImage():void { 
  loader.addEventListener(Event.COMPLETE, onComplete); 
  loader.load(new URLRequest("http://www.example.com/sample.jpg")); 
} 

private function onComplete(e:Event):void { 
  if (loader.exif.ifds.primary) 
    displayIFD(loader.exif.ifds.primary); 
  if (loader.exif.ifds.exif) 
    displayIFD(loader.exif.ifds.exif); 
  if (loader.exif.ifds.gps) 
    displayIFD(loader.exif.ifds.gps); 
  if (loader.exif.ifds.interoperability) 
    displayIFD(loader.exif.ifds.interoperability); 
  if (loader.exif.ifds.thumbnail) 
    displayIFD(loader.exif.ifds.thumbnail); 
} 

private function displayIFD(ifd:IFD):void { 
  trace(" --- " + ifd.level + " --- "); 
  for (var entry:String in ifd) { 
    trace(entry + ": " + ifd[entry]); 
  } 
} 

썸네일 만들기 
import jp.shichiseki.exif.*; 

var loader:ExifLoader = new ExifLoader(); 

private function loadImage():void { 
  loader.addEventListener(Event.COMPLETE, onComplete); 
  loader.load(new URLRequest("http://www.example.com/sample.jpg")); 
} 

private function onComplete(e:Event):void { 
  // display image 
  addChild(loader); 
  // display thumbnail image 
  var thumbLoader:Loader = new Loader(); 
  thumbLoader.loadBytes(loader.exif.thumbnailData); 
  addChild(thumbLoader); 
} 
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★
Flex/AIR/AS3/Etc2009.08.31 17:11


[출처] http://flex4.tistory.com/


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

티스토리 툴바