image

자화 자찬

adoberia.co.kr 에서 하는 이벤트에 3루타로 당첨 되어 아이팟 터치를 받게 되었다.

다른 글 잘 쓰는 쟁쟁한 분들도 있는데 되었다니,

베타 및 트라이얼 버젼으로 몇 일 밤을 새웠는데 당첨되니 기분 무지 좋다. ^^

 

블로그 활성화와 이벤트를 겸해야 겠다고 생각해서 참가 했던 건데 결실이 생겼다.

예전에 봤던 로또보다 온라인 게임 보다 블로깅이 더 좋다[각주:1]는 글이 문득 생각난다.

티스토리 있을 때 보다 텍스트큐브 넘어 와서 방문자도 늘고 댓글도 달리는 것이 점차 내 블로그가 활성화 되고 있는 듯 하다.(혹시 텍스트큐브 초대장 필요한 분은 비밀글로 메일 남겨 주세요^^ 13장 남았음)

 

글 솜씨를 더 늘려야

아래 이벤트 관련 글을 보면 동영상으로 만들었는데 이유는 도통 글쓰기가 쉽지 않다는 거다.

내가 쓰고도 다시 보면 왠지 이상한 것 같고 어법도 친근감 없는 거 같고[각주:2]

그래서 글읽기 및 쓰기 공부를 좀 더 해야 하겠다. 기술문서 아닌 책을 본지가 꽤 된 거 같다.

 

이벤트 당첨글

Flash Builder4 Beta에서 Google Map 구현하기

코딩없는 플래쉬 디자이너 Adobe Flash Catalyst

Flex4 SDK 이전 버젼에서 마이그레이션하기

 

[당첨자 발표]플래시 플랫폼 툴 베타 버젼 리뷰

 

 

[각주]

  1. 아마 애드센스의 붐이 생겼을때 쯤 봤던 글로 기억을 한다. 애드센스를 달면서 블로깅을 하면 로또보다 확률이 높고 온라인게임보다 훨씬 중독성 있으면서도 유익하다는 내용이었던 듯 [본문으로]
  2. 이렇게 생각하는 이유는 댓글 들이 잘 안 달려서 혼자 생각한 이유 중 하나 [본문으로]

Google Map Flash에서 구현하기


이번 테스트의 주제 :  
    1. Illustrator 와 Flash Catalyst 와 Flash Builder4 Beta와의 협업 방법을 알아 본다.
    2. Goole Map 코드가 SDK3으로 되어 있으니 SDK4 용으로 마이그레이션 하기.

순서 :
    1. Adobe Illustrator 에서 디자인을 한다.
    2. Adobe Flash Catalyst 에서 ai 파일을 불러와 프로젝트 파일로 만든다.
    3. Flex Builder4 Beta에서 프로젝트 파일을 불러와 Google Map 코드를 추가 한다.

Flash4 Builder Beta에서 구현한 Google Map


Flash Builder4 Beta에서 Google Map 구현하기 동영상

(풀스크린 및 HD으로 보시면 텍스트가 잘 보입니다)



[관련글] 코딩없는 플래쉬 디자이너 Adobe Flash Catalyst

[관련글] Flex4 SDK 이전 버젼 에서 마이그레이션하기

Flex3 에서 Flex4 beta로 마이그레이션 할 때 어떤 것들이 필요할까?

    

http://www.adobe.com/devnet/flex/articles/flex3and4_differences_02.html

테마의 변경에 따른 마이그레이션 방법에 대해 둘러 보았습니다.

위의 글에는 네임스페이스에 의해 유형을 선택하도록 되어 있다고 나와 있습니다.

    

Adobe 사이트의 Flex3와 Flex4 builder beta 시험버젼을 설치 후 비교해 보았습니다.

디자인에서 버튼 하나를 올려놓고 비교를 해보면

Flex3 에서는 xmlns (XML NameSpace)가 http://www.adobe.com/2006/mxml 을 mx로 선언하여 사용합니다.

    

    

Flex4 에서는 네임스페이스를 새로운 spark를 s로 선언해서 기본 테마로 사용하고 이전 버젼인 halo는 mx로 사용하도록 설정 되어 있으므로 모양과 사이즈가 다르게 나올것이라고 합니다.

    

이전 버전 halo 테마와 호환되도록 컴파일 하고 싶으면 –compatibility-version=3.0으로 설정을 하거나 halo.swc 파일을 소스 폴더에 복사를 하고 아래 –theme 옵션을 추가 해도 됩니다.

(처음엔 그냥 –theme=halo.swc만 추가 해 컴파일하니 에러나서, 폴더에 halo.swc 파일을 복사해 넣으니 되네요^^;)

 

기존의 <mx:Script> 같은 경우 <fx:Script>로 사용하면 되는 군요..

 

    

아래는 라이브러리 비교 화면 입니다.

추가된 라이브러리들과 테마 관련sparkskins.swc 가 보이는 군요.

    

기존의 코드를 사용하려고 할 때 테마 변경에 따른 마이그레이션 방법에 대해 알아 보았습니다.

다음에는 Catalyst와의 협업 방법에 대해 글을 써볼까 합니다.

 

[관련글] 코딩없는 플래쉬 디자이너 Adobe Flash Catalyst

[관련글] Flash Builder4 Beta에서 Google Map 구현하기

코딩이 필요없는 Adobe Flash Catalyst 의 베타 버젼이 나왔습니다.
(아예 코드를 건드릴수도 없네요^^)

Flex SDK가 버젼 4 까지 나오면서 Flex Builder 가 Flash Builder 4로 명칭이 바뀌면서
이제 디자이너는 코딩에 신경쓰지 않고 기본적인 디자인을 할 수 있습니다.
코딩없이 간단히 만든 상호작용 Flash 예제


아래는 위의 Flash를 만든 과정을 동영상으로 만들어 보았습니다.
HD와 풀스크린으로 보면 텍스트가 잘 보입니다. ^^;


[관련글] Flash Builder4 Beta에서 Google Map 구현하기

'Flex' 카테고리의 다른 글

Flex4 SDK 이전버젼 에서 마이그레이션하기  (0) 2009.06.21
Flex Builder가 Flash Builder로 바뀌는군요.  (0) 2009.06.16
Flex 효과 예제  (2) 2009.05.19
Flex가 Flash 와 통합 되고 있습니다.

30일 테스트 가능한 베타 버젼을 다운 받을 수 있습니다.
http://labs.adobe.com/technologies/flashbuilder4/

베타 버젼을 가지고 또 뚝딱 거려 봐야 겠네요.. ㅎㅎ



'Flex' 카테고리의 다른 글

코딩없는 플래쉬 디자이너 Adobe Flash Catalyst  (7) 2009.06.18
Flex 효과 예제  (2) 2009.05.19
Flex 여러개의 object addChild  (0) 2008.08.01

'Flex' 카테고리의 다른 글

Flex Builder가 Flash Builder로 바뀌는군요.  (0) 2009.06.16
Flex 여러개의 object addChild  (0) 2008.08.01
Flex3 Beta 개발자 가이드  (0) 2007.10.12

targetContainer.removeAllChildren();

for(var i:int=0; i<count; i++) {
   var swfLoader:SWFLoader = new SWFLoader();
   targetContainer.addChild(swfLoader);
}

'Flex' 카테고리의 다른 글

Flex 효과 예제  (2) 2009.05.19
Flex3 Beta 개발자 가이드  (0) 2007.10.12
Flex3 데모 어플리케이션  (0) 2007.10.12

'Flex' 카테고리의 다른 글

Flex 여러개의 object addChild  (0) 2008.08.01
Flex3 데모 어플리케이션  (0) 2007.10.12
Flex2 php 멀티파일 업로드 예제  (0) 2007.06.23

Flex3 볼링셔츠 만들기 데모

image

클릭하면 새창 링크..

'Flex' 카테고리의 다른 글

Flex3 Beta 개발자 가이드  (0) 2007.10.12
Flex2 php 멀티파일 업로드 예제  (0) 2007.06.23
Flex events와 behaviors 사용하기  (0) 2007.05.20
Flex2 php 멀티 파일 업로드 예제

사용자 삽입 이미지
http://weblog.cahlan.com/files/file_uploads/FileUpload.html
 화면에서 마우스 오른쪽 버튼 누르면 소스를 볼수 있음.


테스트 결과 서버측에 PHP 파일을 만들고 
MXML 코드에서 아래 부분만 수정 해주면 바로 사용 가능함.
private const _strUploadDomain:String = "http://codycodingcowboy.cahlan.com/";
private const _strUploadScript:String = _strUploadDomain + "files/upload.php";
여러명이 접속 할때도 업로드 되는지 테스트 해보니 잘 됨.^^

http://weblog.cahlan.com/
위의 블로그에는 Flex에 관한 좋은 자료들이 많은것 같음. 

'Flex' 카테고리의 다른 글

Flex3 데모 어플리케이션  (0) 2007.10.12
Flex events와 behaviors 사용하기  (0) 2007.05.20
Flex 어플리케이션 보여주기  (0) 2007.05.20
events와 behaviors 사용하기    Using events and behaviors

이벤트가 발생하였을 때 콤포넌트 설정 수정하기
아래 코드는 버튼을 클릭하면 myPanel을 보이지 않게 작용합니다.
<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" x="122" y="24">

<mx:Button label="Close" right="30" bottom="40" click="myPanel.visible=false"/>

ActionScript 함수 사용하기
버튼이나 패널등에서 발생하는 이벤트를 <mx:Script>를 에서 ActionScript 로 처리 되는걸 보여줍니다

MXML에서 ActionScript 분리하기
아래 코드 처럼 as 파일로 분리 가능합니다.
<mx:Script source="myFunctions.as" />

행동과 변화에 따른 비주얼 상호작용 추가하기
<mx:Fade id="myFade"/>
<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" hideEffect="{myFade}" >
위의 코드는 Fade(흐릿해지는 효과) 를 Panel에 추가 한이군요.
visible 이벤트가 발생할 때 Panel이 흐릿해지면서 사라집니다.
 

'Flex' 카테고리의 다른 글

Flex2 php 멀티파일 업로드 예제  (0) 2007.06.23
Flex 어플리케이션 보여주기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 어플리케이션 보여주기     Laying out a Flex application
Flex에서는 Style 및 테마를 지정 할수 있습니다.

스타일과 테마를 이용한 비주얼 디자인
아래와 같이 지정하면 Hello 가 36px의 강조로 나타납니다.
<mx:Application ..... >
   <mx:Style>
    TextArea {
        font-size: 36px;
      font-weight: bold;

    } 
  </mx:Style>


  <mx:TextArea text="Hello" ..../>

css 파일로도 만들수 있습니다.
<mx:Style source="styles.css" />


'Flex' 카테고리의 다른 글

Flex events와 behaviors 사용하기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 데이타 연결  (0) 2007.05.18
Flesh Player 보안 처리 하는 방법

플래시 플레이어는 http://a.com 에서 다운한 swf 파일이라면 http://b.com 의 데이타를 원칙적으로 로드할수 없다고 하네요. 그것을 가능하게 해주는 것이 cross-domain 청책 파일이라고 합니다.

cross-domain 정책 파일들 사용하기
cross-domain 정책 파일은 간단한 XML 파일로 이루어져 있습니다.
이름은 crossdomain.xml 이며 서버의 root 에 위치 하면 됩니다.
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.yourdomain.com" />
</cross-domain-policy>
더 많은 정보는 http://www.adobe.com/go/tn_14213

remote date 접속 위해 proxy 셋팅하기
cross-domain이외의 다른 방법으로 proxy 셋팅 사용하여 실제 데이타 접속위치를 숨길수 있습니다.
<?php //프록시 예제 proxy.php
$dataURL = "http://www.macromedia.com/desdev/resources/macromedia_resources.xml";
//note that this will not follow redirects
readfile($dataURL);
?>

proxy를 사용하여 remote date 접속 개발을 위해 Flex 빌더 셋팅하기
project builder 및 launch configuration의 셋팅을 바꾼다.
1. 네비게이터의 project output 폴더의 path를 바꾼 뒤
2. launch configuration 의 아래 박스에 path 셋팅
    Run input box 에는 ex)http://localhost/myApp/myApp.html
    Debug input box 에는 ex)http://localhost/myApp/myApp-debug.html
                                      or http://localhost/myApp/myApp-debug.swf



'Flex' 카테고리의 다른 글

Flex 어플리케이션 보여주기  (0) 2007.05.20
Flex 데이타 연결  (0) 2007.05.18
Flex 어플리케이션 제작과 실행  (0) 2007.05.18
Flex 데이타 연결 방법은 아래와 같이 설명 되어 있습니다.

1. XML 데이타를 만들고
2. <mx:HTTPService 로 연결하고
3. 데이타 컨트롤로 데이타를 묶기
4. 런타임 실행시 로딩하기


데이타 만들기
Generating the data
Flex 는 HTTPService 컴포넌트를 활용하여 XML 데이타로 서버와 통신을 합니다.
기본적으로 로컬이나 서버에 XML 파일이 있으면 되는것 같습니다.
도움말의 http://www.adobe.com/go/flex2_and_php는 Flex2와 PHP를 통합하는 방법을 설명해 놓았군요.

데이타 소스와 연결
HTTPService 컴포넌트 사용방법
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:HTTPService 
id="productsRequest"
url="http://www.somesite.com/products.php" />
...

데이타 컨트롤로 데이타 보여주기

<mx:DataGrid x="20" y="80" id="productGrid" width="400"
dataProvider="{productRequest.lastResult.products.items}"
>
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" />
<mx:DataGridColumn headerText="Price" dataField="price" />
</mx:columns>
</mx:DataGrid>
데이타 소스의 id인 productsRequest가 dataProvider에서 사용됩니다.

런타임 실행시 로딩하기
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="productsRequest.send()"
>
버튼에서 로딩하려면 아래처럼
<mx:Button x="50" y="8" label="Get Data" click="productsRequest.send();" />

아주 기본적인 데이타 연결 방법에 대해서 설명되어 있습니다.
Flex 작업하는 방법 How Flex Works  부분을 끝내고 자세히 공부해야겠습니다.


'Flex' 카테고리의 다른 글

Flex 어플리케이션 보여주기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 어플리케이션 제작과 실행  (0) 2007.05.18
오늘은 Flex 데모 버젼 설치 후 도움말에서 가장 처음 볼수 있는 어플리케이션 제작과 실행 부분을 봤습니다.
제가 필요로 하는 부분은 컴포넌트 제작이지만 기초부터 튼튼히 해 나갈 생각으로 정리를 좀 하려구요.
얼마나 발전해 나가는지 지켜 봐주시면 감사하겠습니다. ^^ (누가 봐줄지.. ㅋ)

Flex 어플리케이션 제작 프로세스

1. 미리 정해진 컴포넌트를 가지고 어플리케이션을 선언
2. 컴포넌트의 위치를 디자인
3. 스타일과 테마를 활용하여 비주얼을 꾸밈
4. dymanic behavior(동적 행동) 를 추가
5. 데이타 서비스를 필요로하면 선언하고 연결
6. Flash Player에서 실행되도록 SWF 파일로 빌드

Flex 어플리케이션의 구성요소


 Flex framework    버튼, 박스등의 콤포넌트를 포함하고 있는 저장소
 MXML                전체적인 모양을 디자인도 하고 내부에 액션스크립트도 넣음.
 ActionScript3.0    플렉스의 행동을 정해주는 코드
 CSS                   스타일 시트
 Graphic assets    그래픽 재료들
 Data                   데이타

Flex 어플리케이션 컴파일과 배치도
사용자 삽입 이미지
그림을 뚫어져라 쳐다보니 디자인 -> 클래스 연동 컴파일 -> 실행 으로 이루어져 있군요.
플래시의 디자인 위주의 개발과는 다른 코드위주의 개발 환경입니다.
Action Script와 MXML, CSS를 활용하고, 플래시에서와 같이 jpg, swf, gif를 포함 할수 있다고 되어 있습니다.

액션 스크립트는 자바와 아주 유사한 형태로 되어 있어 자바를 아시는 분은 좀더 접근하기 쉬울것 같습니다.

모든것의 시작은 MXML로
MXML로 아래와 같이 코딩을 하면 Panel위에 TextArea와 Button이 올라간 어플리케이션이 만들어 집니다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel>
<mx:TextArea text="Say hello to Flex!" />
<mx:Button label="Close" />
</mx:Panel>
</mx:Application>
사용자 삽입 이미지

이번은 기본적인 제작 방법과 구성에 대해서 공부해 보았습니다.
다음에는 데이타 연결 개요에 대해 공부해 볼것입니다.
(나름 정리가 되는것 같긴한데 글쓰는게 쉬운게 아니군요 ^^;)

'Flex' 카테고리의 다른 글

Flex 어플리케이션 보여주기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 데이타 연결  (0) 2007.05.18

+ Recent posts