Flex/AIR/AS3/Study2010.03.30 21:18
아무래도 놓치고 가는 부분이 많은 거 같아 처음부터 다시한번 훝을려고 생각하다가 회사분하고 같이 스터디를 추진하기로 했습니다. 혹시나 같이 하실분들 연락 주세요~
---------------------------------------------------------------------------------------------------------------------

직장인을 위한 플렉스 스터디를 추진하려고 합니다.
액션스크립트 3.0을 다뤄야 하니 신입분들도 참여는 가능하나 기본적인 개념은 아시는 분들이 참여했으면 좋겠습니다.
저희 스터디의 취지는 일방적인 강의형태보다는 서로가 하나의 책을 가지고 공부하는 개념입니다.
각자 정해진 프로젝트(숙제개념)을 하면서 차근차근 공부하는 형태가 될것 입니다.


기본 적인 개념은 저희가 가르쳐 드릴수가 있으나 나머지 모든것들은 스스로 공부하면서 터득하는 스터디이니..
스스로 얻으려는 노력이 없다면 참여하셔도 실망감이 클거라 생각이 됩니다.
스터디 장소는 저희 회사 회의실에서 진행할 생각이라 서울 근교에 계신 분들이 좋겠고
주말(토/일요일)을 활용할 것이며 "한 번 해볼까?"라고 생각하는 분이면 곤란하며 적극적으로 참여 가능한 분이면 좋겠습니다.
참여 가능한 분들은 일단 댓글 남겨주시고 개발 경험이나 실무 경험에 관련된 간단한 자기 소개와 연락처(이메일,메신져,연락처)가
담긴 이메일도 보내주세요. 그러면 검토 후에 답장 드리겠습니다.

 

참가자가 확정되면 구체적인 스터디 추진 방향을 결정하기 위한 가벼운 형식의 모임을 하겠습니다.
참가자 분들이 나름대로 자신의 업무에 바쁜 직장인들이 될 것이므로 수동적인 참여 보다는 능동적으로 참여했으면 하며
서로의 스캐쥴을 위해 시간 약속을 개념있게 지켜주시는 분들이길 바랍니다.
스터디 진행시 별도의 비용은 발생하지 않을 것이나 학습에 필요한 노트북이나 관련 책자 등은 스스로 준비하면 될 것입니다.

( 노트북은 있으시면 좋지만 없으셔도 무관합니다. )


본 스터디는 전문적인 강사가 일방적으로 강의 해주는 방식이 아니므로 주의해주시고 공통의 관심사에 대해 스터디도 하고
비슷한 일을 하는 분들이 정보 교환도 하며 필요하면 서로의 인맥도 되어줄 수 있는 뜻 있고 유익한 자리가 되도록 함께 했으면 합니다.
함께 하고 싶은 분은 지금 바로 이메일 주세요.

 

1. 장소는 하단 약도를 참고해주세요.

2. 교재는 "예제로 배우는 플렉스" 입니다. 차후 변동가능성이 있습니다.
3. 정원은 10명정도로 생각하고 있습니다.
4. 신청 메일은 gfhjvjhy@hanmail.net 이며 제목에 "플렉스 스터디 참가희망 - 홍길동" 으로 보내주세요.
5. 시간은 토/일 중 택으로 시간은 오전 10 또는 오후 4시정도로 생각중입니다.(시간 변동가능합니다.)
   소요시간은 2시간입니다.
6. 자기소개 예..
안녕하세요 전 집은 어디이며 현재 직장은 어디에서 무슨일을 하고 있는 경력 몇년차 홍길동입니다.
제가 플렉스를 배우고자 희망하는 이유는 무엇때문이며 장소는 종로를 희망하고 시간은 토요일 오전 10시로 희망합니다.
현재 3.0은 어느정도까지 할수있으며 플렉스는 현재 기초정도만 알고있습니다.
성별은 남이며 연락처는 010-123-4798 이며 이멜일과 메신져는 ....입니다.
관심분야는 에어와 플렉스와 자바와 디자인패턴입니다.

 

현재 예제로 배우는 플렉스 책을 기본으로 스터디를 진행할 생각입니다.
( 더 좋은 책이나 스터디 시작전까지 Flex4에 관한 책이 나오면 책이 변경 될 수도 있습니다.
알고 계신 책이나 추천하실 만한 책이 있다면 말씀해 주시면 의견을 수렴하여 반영하도록 하겠습니다.)

 

링크 : http://book.interpark.com/product/BookDisplay.do?_method=detail&sc.shopNo=0000400000&sc.prdNo=201468387&bookblockname=b_sch&booklinkname=bprd_title

 

 

스터디 장소 안내

 

 

강남역 5번 출구에서 TGI쪽 100m 지점 부띠크모나코

저작자 표시 비영리
신고

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

Flex Study 하실분들~ 같이 공부해요~  (0) 2010.03.30
Posted by 코멧'★
Flex/AIR/AS3/MVC2010.03.30 10:57




Cairngorm Framework에 대한 사용법을 동영상으로 설명되어 있는 블로그가 있어서 소개합니다..

Getting Started with Cairngorm – Part 1

Getting Started with Cairngorm – Part 2

Getting Started with Cairngorm – Part 3

Getting Started with Cairngorm – Part 4

Getting Started with Cairngorm – Part 5


Cairngorm Videos Available as FLV Downloads

Great Cairngorm Slides from 360Flex Europe

The Current State of Flex Frameworks

저작자 표시 비영리
신고

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

Pure MVC  (0) 2010.06.19
Cairngorm Framework  (0) 2010.06.19
Cairngorm Framework  (0) 2010.03.30
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/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/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/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 코멧'★
Flex/AIR/AS3/Error Code2009.08.31 17:08
warning: unable to bind to property 'isCheck' on class 'Object' (class is not an IEventDispatcher)
위 경고 메세지가 뜰 경우 대처 방법

Bind 된 데이타의 타입이 정확하지 않을 경우 Object 객체에 담아서 대입한다.

[출처] Tong - BlueSky_09님의 Flex/Flash/AIR/As통 http://tong.nate.com/lhs0806/40051251

혹시나 봤을지 모르겠지만, FLEX 실행시에 Debugger 를 걸던지 , flashlog.txt 파일에 떨어지는 저런 경고문구들을
본적이 있을것이다. 없으면...ㅠ_ㅠ 쥐쥐~~~ 
가장 대표적인 예로 저렇게 경고를 뜨게하려면 간단하다. 

===============================================================================
1. ActionScript 부분
=============================================================================== 

private function ResultHandler(event:ResultEvent):void{
    // 조회된 정보를 가져온후 DATA 를 핸들링한다.   
    orginalLists = new ArrayCollection();
    orginalLists = ArrayCollection(event.result);
   
    madeLists = new ArrayCollection();
   
    for(var i:uint = 0; i < orginalLists.length ; i++){
    madeLists.addItem({
      value1:  orginalLists.getItemAt(i).value1,   
      value2:  orginalLists.getItemAt(i).value2,
      value3:  orginalLists.getItemAt(i).value3,
      value4:  orginalLists.getItemAt(i).value4,
      value5:  orginalLists.getItemAt(i).value5,
      isCheck : new Boolean(false)   
    });
    }
  } 

===============================================================================
2. MXML 부분
===============================================================================

<mx:DataGridColumn headerText="FactoryName" dataField="value5">
  <mx:itemRenderer>
    <mx:Component>
      <mx:HBox width="100%" height="100%" backgroundAlpha="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:Script>
      <![CDATA[
     
      import mes.common.utils.ComponentUtils;     
      import mx.controls.ComboBox;
      import mx.events.CloseEvent;
      import mx.controls.Alert;

                         
      public function setComboIndex():void{         
        if(data != null){         
            combo1.selectedIndex = ComponentUtils.getComboIndex(combo1 , String(data.value5));
        }
      }     
      ]]>
      </mx:Script>
      <common:PlantComboBoxRenderer id= "combo1"  change="{data.value5 = combo1.selectedItem.data}">               
      </common:PlantComboBoxRenderer>
      </mx:HBox>
    </mx:Component>
    </mx:itemRenderer>
  </mx:DataGridColumn> 

============================================================================================= 

=> 스크립트 소스부분을 보면 RemoteObject 의 결과 이벤트로서 호출되는 함수란것을 알수있다(?) 
    머 중요한건 아니고, 암튼 잘 보면 result 의 사이즈 만큼 for 문을 돌면서, 새로운 배열에 
    Dynamic 하게 객체를 생성해서 새로운 ArrayCollection 을 만들고 있다. 아래처럼.... 

    for(var i:uint = 0; i < orginalLists.length ; i++){
    madeLists.addItem({
      value1:  orginalLists.getItemAt(i).value1,   
      value2:  orginalLists.getItemAt(i).value2,
      value3:  orginalLists.getItemAt(i).value3,
      value4:  orginalLists.getItemAt(i).value4,
      value5:  orginalLists.getItemAt(i).value5,
      isCheck : new Boolean(false)   
    }); 

    그리고, madeLists 녀석은 [Bindable] 메타 테그로 선언되어져서 MXML 부분에 DataGrid 의 dataProvider 로 
    바인딩 되어있다.(소스의 전체를 긁어다 놓은것이 아니므로 말로써 이해하기 바람~~) 
    다음으로, MXML 부분을 보면, DataGrid 안에 한 칼럼에 ComboBox 를 넣기 위해 itemRenderer 를 사용하여 , 
    inLine 스크립트를 구현하였다. 

    실제 저 소스가 돌아가는 원리를 순서로 표현하면, 

    1. 인라인으로 구현된 ComboBox  가 초기화 되면서, DB 접속을 한다. 
    2. 받아온 결과로 ComboBox 의 dataProvider 에 데이터를 바인딩한다. 
    3. CallBack 함수로 구현된 부모클래스의 setComboIndex() 를 호출한다. 
        - ComboBox 에서 호출하는 상세부분은 위 소스에는 없다. 
    4. ActionScript 부분에서 DataGrid 에 바인딩 해준 값을 가져다가 ComboBox 에 존재하는지 검사한다. 
    5. ComboBox 에 해당 데이터가 있으면 ComboBox 의 selectedIndex 를 선택되어있게 한다. 

-> 즉, DataGrid 안에 ComboBox 를 넣고, 그 초기값을 셋팅하기 위한 삽질이다. (물론 더 좋은 방법도 많으리라 생각한다.) 
그런데, 문제는 저렇게 바인딩 하고 실행하면 아마 위 제목에 뿌려진 경고가 좍좍좍 뿌려질것이다.
이유인즉..(검색과 삽질....)
우리가

 for(var i:uint = 0; i < orginalLists.length ; i++){
    madeLists.addItem({
      value1:  orginalLists.getItemAt(i).value1,   
      value2:  orginalLists.getItemAt(i).value2,
      value3:  orginalLists.getItemAt(i).value3,
      value4:  orginalLists.getItemAt(i).value4,
      value5:  orginalLists.getItemAt(i).value5,
      isCheck : new Boolean(false)   
    }); 

이렇게 집어넣은것이 문제인것이다. DataGrid 에서 바인딩을 해야 하는데, 실제 Object 의 성향을 알지 못한다는것이다.
머 깊게 들어가봐야 머리만 복잡하고, FLEX 접고 싶어질 뿐이라 해결책만 간단하게 설명하자면.......
윗 부분을

for(var i:uint = 0; i < orginalLists.length ; i++){ 
      var objectProxy:ObjectProxy = new ObjectProxy();
      objectProxy.value1 = orginalLists.getItemAt(i).value1;
      objectProxy.value2 = orginalLists.getItemAt(i).value2;
      objectProxy.value3 = orginalLists.getItemAt(i).value3;
      objectProxy.value4 = orginalLists.getItemAt(i).value4;
      objectProxy.value5 = orginalLists.getItemAt(i).value5;
      objectProxy.isCheck = "N"; 

      madeLists.addItem(objectProxy);


이런식으로 바꾸면 만사 OK 라는 것이다. 즉, 바인딩 되는 Object 대해서는 저렇게 선언이 되어져야만
ObjectProxy 라는 녀석이 그 객체를 Tracking 하면서 속성값의 변경이라던가를 감시하는것 같다.
사실 저렇게 안해도 아무 문제는 없다.(구현상)
그런데 깔끔해진 로그 파일을 보면 감탄하리라 생각된다. 앞으로도 저렇게 쓰는 습관을 들이는것이 좋을듯 하다. 

두서가 쓸데없이 길었지만 예제를 보다 적나라하게 설명하고자 나름 길게 삽질 했으니 이해바란다.~
모두 수고~
저작자 표시 비영리 변경 금지
신고
Posted by 코멧'★

티스토리 툴바