[CS3] 패널 도킹 방지를 위한 팁

Programming/ActionScript 3.0 2007. 7. 29. 16:53
Flash CS3 뿐만이 아니라 adobe CS3 제품군들은 기본적으로 패널들을 특정 위치에 도킹할 수 있는 기능이 있어 사용자가 원하는 위치에 특정 패널을 도킹하여 사용할 수 있게 되었는데 가끔은 이런 기능이 필요 이상으로 적용되는 경우가 종종 있다.

이런 불필요한 도킹을 방지하기 위해서는 위치를 옮기고 싶은 패널을 드레그 할 때 Ctrl 키를 누른 상태에서 옮기면 어디에도 도킹하지 않고 자신이 원하는 곳에 올려놓을 수 있다.

간단하지만 플래시 툴을 편하게 다루기 위해서 아주 요긴한 사용법인데 이와 같은 정보는 쉽게 찾기 어려운 것 같다…

    

설정

트랙백

댓글

[FlashCS3] Transform Extension...

Programming/ActionScript 3.0 2007. 7. 25. 02:08

munegon라는 일본 ASer가 제공한 EachTransformer Extension...


이 Extension은 복수의 심볼에 대해서 좌표를 고정한 상태에서 각각의 오브젝트를 변형하는 확장 기능이다.


예를 들어서 기존의 Transform의 경우에는 복수의 오브젝트를 선택하여 사이즈를 줄일 경우에는 복수로 선택한 전체 사이즈를 기준으로 줄이기 때문에 각각의 오브젝트의 좌표가 이동하는 문제가 발생한다.


이로 인해서 수 많은 오브젝트들을 일괄적으로 사이즈만 줄일 경우에는 각각의 오브젝트들을 선택하여 줄여야 하는 번거로움이 있으나 이 확장 기능을 사용하면 복수의 오브젝트를 한꺼번에 선택하고 사이즈를 줄이더라도 기존에 위치하고 있던 좌표상에서 각각의 오브젝트의 기준점에서 사이즈를 변경하기 때문에 편리하다.


특히 텍스트 모션에서 각각의 글자에 대해서 일괄적으로 사이즈를 줄일 때 요긴하게 사용할 수 있을 듯 싶다.



* 이 확장기능은 FlashCS3 버전에서만 사용할 수 있다.

    

설정

트랙백

댓글

adobe CS3 신제품 발표회를 다녀와서...

Design/Etc 2007. 7. 11. 07:17

어제 CS3발표회를 다녀왔다. 전날 새벽에 잠을 못 잔 관계로 오후로 접어들면서 급격한 뇌 산소부족으로 인해 하품이 나고 눈이 슬슬 감겼다… 하루 일정에 13개나 되는 제품에 대한 설명을 하다 보니 다소 아쉬움이 있었다. 이제는 플래시만을 위한 conference가 아니라는 것이 가장 큰 아쉬움이긴 하지만…

한국 adobe 사장의 인사말로 시작을 했는데 예전의 macromedia 대표이사였던 이원진 사장의 카리스마가 옛 추억처럼 떠올랐다. 이원진 전 adobe사장은 현재 구글코리아의 사업 및 운영총괄 사장으로 있다. Vip참석자는 동시통역기를 나중에 준다고 하여 넋을 놓고 앉아 있다가 오전 한 섹션은 제대로 이해를 하지 못하고 지나갔다. Adobe 제품의 전반적인 통합 workflow에 관한 이야기였던 것 같다.

Adobe의 신제품 발표회였던 만큼 가장 비중을 둔 것은 포토샵CS3였다. 그만큼 좋은 기능들이 많이 포함되어 있었다. 사진을 취미로 하고 있는 나에게는 더없이 좋은 기능들이다. 예를 들면 피사체를 부분별로 찍은 복수의 사진들을 하나의 이미지 형태로 자동 배치하고 블랜드효과를 적용하여 하나의 이미지처럼 매끄럽게 처리하는 스크립트 기능은 놀랄만한 것이었다. 그리고 3D오브젝트를 포토샵에서 불러와서 맵핑을 하고 x,y,z 위치를 변경하여 화면에 배치할 수 있는 기능은 앞으로 웹디자이너들이 웹에서 3D를 활용할 수 있는 방법을 제시해줬다.

그리고 이미지의 특정한 부분의 실제 길이를 알려주고 면적을 구하는 것과 z값의 각도를 틀어서 맵핑을 할 수 있는 기능등과 같이 많은 기능들이 추가되었다. 그리고 포토샵에서 동영상을 편집 가능하게 된 것은 어도비에서 포토샵에 대한 욕심이 얼마나 많은 것인가를 단적으로 보여준다.

inDesign이라는 툴을 새롭게 소개하기도 했는데 개인적으로는 국내 웹디자인에서 큰 효력을 발휘할지는 의문이다. 어떻게 보면 포토샵과 드림위버의 필요한 기능들만을 가볍게 혼합해 놓은 것 같기도 하다. 몇가지 편리한 기능들을 볼 수는 있었지만 그 기능들을 사용하기 위해 또 다른 툴을 알아가기에는 국내 웹디자이너들에게는 무리가 있을 듯 싶다.

플래시의 경우, 통합 workflow의 이점이라고 한다면 psd파일이나 ai파일의 레이어 구조까지 그대로 플래시에서 불러와서 사용가능 하다는 것이다. ai파일의 경우 ai에서 심볼에 인스턴스 네임을 적용 하면 플래시에서 일러스트를 불러왔을 때 심볼의 인스턴스네임까지 가지고 올 수 있다. 하지만 플래시와 디자인을 구분하고 있는 지금의 시점에서 본다면 서로간에 업무협조가 제대로 이루어 질 수 있을지 의문이다. 일러스트의 백터 시스템 구조를 플래시CS3에서 그대로 사용하게 된 점은 Macromedia가 어도비라는 배를 탄 것이 잘한 것이라고 이야기하고 있는 듯 하다.

psd파일도 앞의 ai파일과 같이 레이어구조 그대로 가져와서 필요한 부분만을 체크하여 불러올 수 있고 텍스트의 경우도 비트맵 또는 수정 가능한 텍스트 형태로 불러올 수도 있다. 기존에는 png형태의 외부 파일로 저장을 하여 다시 import하던 방식에서 획기적으로 작업 효율성을 높인 부분이다.

그러나 포토샵 cs2 버전으로 제작된 psd이기 때문에 그러한지는 모르겠지만 이렇게 PSD파일을 플래시에서 직접 불어올 경우 비트맵 이미지의 경계선이 매끄럽지 못한 부분이 있어서 다시 외부 png파일로 저장을 하여 불러오는 경우가 있다. 그리고 포토샵에서 레이어이펙트를 적용했을 경우에도 투명png형태로 가지고 오는 것이 아니라 배경까지 포함하기 때문에 그림자에 멀티레이어이펙트를 적용했을 경우에도 다시 png파일로 저장해야 하는 문제가 있다.(여담이지만 제발 디자이너들은 그림자에 레이어이펙트를 적용하지 않았으면 좋겠다) 포토샵 cs3에서 제작된 파일의 경우도 이러한 문제가 있다면 다음 버전을 출시하기 전에 패치해야 할 부분이다.

이 밖에도 프리미어, 에프터이펙트등에 관한 설명을 들을 수 있었는데 짧은 시간 동안 설명이 이루어진 관계로 자세한 내용을 접할 수는 없었다. CS3의 제품에서 가장 중점은 둔 부분을 말한다면 “통합workflow”라는 말로 대신할 수 있을 듯싶다.

플래시 모임에서 만난 진우와 같이 앉아서 경청을 했는데 진우의 재미있는 입담 덕분에 즐겁게 들을 수 있었다. 피곤한 하루였지만 맛있는 호텔 점심식사도 하고 나름대로 즐거운 하루였다.

    

설정

트랙백

댓글

  • kabbala 2007.07.11 08:59 ADDR 수정/삭제 답글

    InDesgin 은 출판 편집용 도구입니다. 계보를 거슬러 올라가면 1985년에 나온 것이고요.

    • jasu 2007.07.11 09:36 신고 수정/삭제

      그렇군요..시연중 웹페이지 관련된 내용들로 이야기를 해서 새로나온 툴인줄 알고 있었네요...^^

  • about23 2007.07.11 11:43 ADDR 수정/삭제 답글

    안녕하세요
    종종 들르는 곳인데 인사도 못드렸네요 ㅎ;
    좋은 정보 많이 얻어갑니다...^^

    신제품 발표회 갔다오셨군요...저도 갔었는데...플래시에 관해서는 언급은 별로 없었지만

    포토샵과 프리미어 애펙의 관심이 장난 아니더군요...인디자인도...
    역시 이제는 영상과 전자출판이 대센가봅니다...ㅎㅎ

    • jasu 2007.07.11 20:46 신고 수정/삭제

      안녕하세요...^^
      메크로미디어를 어도비에서 인수하면서 툴은 좋아졌지만 플래시만의 잔치가 없어졌다는 것이 좀 아쉬움으로 남네요.. adobe와는 별도로 플래시와 플렉스 관련 세미나가 추진되었으면 좋겠다는 생각이 듭니다. 뭐..희망이겠죠...^^
      들려주셔서 감사합니다.^^

[AS3] URLLoader 클래스

Programming/ActionScript 3.0 2007. 7. 6. 06:32
URLLoader 클래스
외부로부터의 XML 데이터등을 읽어들일 때는 URLLoader 클래스를 사용할 수 있다.


URLRequest 클래스를 통한 데이터 송신
URLLoader를 사용해서 서버에 리퀘스트를 보내려면 우선 URLRequest 클래스의 인스턴스를 만든다. URLRequest의 오브젝트에는 리퀘스트 URL이나 헤더 정보 등을 지정할 수 있다.

아래 작성한 코드는 URLRequest 오브젝트를 인수로서 URLLoader의 load() 메소드를 호출한다.




var myReq:URLRequest = new URLRequest();
myReq.url = "foo.xml"; // constructor의 인수로도 지정 가능
var myLoader:URLLoader = new URLLoader();
myLoader.load(myReq);
HTTP 헤더에 정보를 추가하는 경우는 항목 마다 URLRequestHeader 클래스의 인스턴스를 작성하여 URLRequestHeader 오브젝트의 requestHeaders 속성(Array 형태)에 추가한다.
var myReq:URLRequest = new URLRequest("foo.xml");
var myRH:URLRequestHeader = new URLRequestHeader("pragma", "no-cache");
myReq.requestHeaders.push(myRH);
var myLoader:URLLoader = new URLLoader();
myLoader.load(myReq);

수신한 데이터의 처리
load()를 실행하고 나서 데이터의 읽기 처리가 끝날 때까지는 ActionScript로부터 읽어 들인 데이터에 액세스 할 수 없다. URLLoader는 수신 처리를 완료하면 complete 이벤트를 발생시키므로 complete 이벤트에 대한 이벤트 핸들러 내에서 데이터 조작을 실시해야 한다. 읽어들인 데이터는 URLLoader의 data 속성으로부터 액세스 할 수 있다.
myLoader.addEventListener(Event.COMPLETE, completeHandler);
myLoader.load(new URLRequest("foo.xml"));

private function completeHandler(event:Event):void {
trace(myLoader.data);
}

읽혀진 데이터는 DataFormat 클래스에 정의하고 있는 3종류의 포맷 형태를 갖는다. URLLoader 오브젝트의 dataFormat 속성을 보면 다음과 같다.

    * DataFormat.TEXT : String 형의 문자열
    * DataFormat.BINARY : ByteArray 형의 바이너리 데이터
    * DataFormat.VARIABLES : URL encode 된 폼 변수를 가진다 URLVariables 오브젝트

데이터의 송신
서버에 데이터를 송신할 때도 위와 같이 3종류의 포맷을 사용할 수 있다. 송신하는 데이터를 URLRequest 오브젝트의 data 속성에 세트 하면 리퀘스트시에 세트한 데이터가 보내진다.

아래의 예에서는 URLVariables 오브젝트를 POST 형태로 송신하고 있다. 이 경우 데이터는 x-www-form-urlencoded 포맷에 encode 되어 보내진다.

var myVars:URLVariables = new URLVariables();
myVars.userID = "guest";
myVars.password = "foo";
myReq.data = myVars;
myReq.url = "ww.sample.com/foo.jsp";
myReq.method = URLRequestMethod.POST;
myLoader.load(myReq);

송신 방법 (GET/POST)은 URLRequest 오브젝트의 method 속성에 URLRequestMethod 클래스에 정의된 값을 사용하여 지정한다. 디폴트는 GET다. POST하는 경우는 데이터의 MIME 타입을 URLRequest 오브젝트의 contentType 속성으로 설정할 수 있다. ByteArray 오브젝트를 송신하는 경우는 GET은 사용할 수 없다.

    

설정

트랙백

댓글

[AS3] Flash Player9의 새로운 풀 스크린 모드

Programming/ActionScript 3.0 2007. 7. 4. 23:31
Flash Player9 업데이트 3에서는 공개되는 하드웨어 기능을 이용한 풀 스크린 모드가 추가되었다.

하드웨어 스켈링의 사용법
Flash Player9 업데이트 3의 Stage 오브젝트에는 fullScreenSourceRect라고 하는 속성이 추가된다. 이 속성은 AS2와 AS3에서 모두 사용 가능하다. fullScreenSourceRect에 의해 지정된 영역은 하드웨어의 스켈링 기능에 의해 표현 되기 때문에 기존의 풀 스크린 모드보다 퍼포먼스와 화질 면에서 현격히 개선되고 있다.

아래 샘플은 Stage를 화면 전체에 넓히는 기능이다.




import flash.geom.*;
function goFullScreen()
{
Stage["fullScreenSourceRect"] = new Rectangle(0, 0, Stage.width, Stage.height);
Stage["displayState"] = "fullScreen";
}

비디오를 풀 스크린으로 표시하는 경우는 Rectangle 크기를 비디오의 오리지날의 크기로 한다.

AS3에서 Stage의 fullScreenSourceRect속성을 적용하려면 playerglobal.swc를 클래스패스영역에 포함 시켜야 한다. CS3 의 ActionScript 3.0/classes 폴더에 기존에 파일을 아래 파일로 바꿔주어야 한다. (playerglobal.swc파일을 첨부한다.)



비디오의 퀄리티와 용량에 따라 다르겠지만 대체적으로 fullScreenSourceRect속성을 사용하면 비디오를 풀스크린으로 표현했을 때의 CPU 점유율은 사용하지 않은 것 보다 대략 절반 정도로 떨어지고 화질 면에서도 개선된 점을 발견할 수 있다.

    

설정

트랙백

댓글

  • karaman 2007.07.25 10:08 ADDR 수정/삭제 답글

    좋은 정보 받아서 갑니다. 꼭 필요한 기능이었는데 도움이 돼었네요.
    혹시 풀화면 하였을때 esc키를 누르면 돌아갑니다... 라는 글자를 없애는 방법은 아시는지요?
    그리고 버튼을 클릭해야만 풀스크린이 돼는듯한데.
    버튼을 클릭하지 않고 하는방법은 없나요?

    • jasu 2007.07.25 11:41 신고 수정/삭제

      안녕하세요... Esc관련 안내 글은 컨트롤 할 수 있는 기능을 제공하고 있지 않은 듯 합니다. 그리고 풀스크린 모드는 사용자의 인터렉션에 의해서만 적용할 수 있습니다. 따라서 버튼을 클릭하지 않고 자동으로 풀스크린 모드로 적용할 수는 없습니다.

  • karaman 2007.07.26 03:30 ADDR 수정/삭제 답글

    답변 감사합니다. 우연치않게 들르게 돼어 좋은정보 많이 얻어 갑니다.
    제가 풀 스크린을 사용하면서 또 하나 문제 생긴것이 inputtext에 커서가 나타나지 않는 문제가 생기네요. 일반 플래쉬 플레이어로 풀스크린 가동시 상관없는데
    html을 사용하여 풀스크린 사용할땐 풀스크린상태에서inputtext에 커서가 나타나지 않네요 글자도 써지질 않구요 혹시 이부분에 대해 아시면 알려주세요 ^^ 풀스크린된다고 큰소리 쳐놨는데 이거참 난감합니다 ㅎㅎ

    • jasu 2007.07.26 03:39 신고 수정/삭제

      안녕하세요...^^; 풀스크린 모드에서는 키보드 이벤트는 발생하지 않습니다. 인터렉션은 오로지 마우스 이벤트만 가능하고 풀스크린으로 사용할 경우에 키보드 사용은 ESC키만 사용할 수 있습니다... 제 생각에는 풀스크린으로 하지 마시고 기존처럼 브라우저 팝업 전체 창으로 하시는 것이 좋을 것 같네요

  • chaospace 2007.08.21 11:59 ADDR 수정/삭제 답글

    fullScreenMode에 input텍스트가 안된다는 정보를 이렇게 얻어가네요..
    컥!이네요.. 이런 맹점이 있을 줄이야..
    좋은 정보감사합니다.!

    • jasu 2007.08.21 16:31 신고 수정/삭제

      ^^ 네... 헬프파일에 있는 내용인데 짮게 언급하고 있어서 지나치기 쉬운듯 싶네요...

  • 봉구 2007.09.22 14:14 ADDR 수정/삭제 답글

    소중한 정보 감사합니다....담아갈께요...

    • jasu 2007.09.24 22:23 신고 수정/삭제

      네...방문 감사합니다. 즐거운 추석 연휴 되세요...

  • 유니 2007.10.24 11:44 ADDR 수정/삭제 답글

    좋은 정보 감사합니다..^^
    그런데 swf 파일로 로컬에서는 잘되는데 익스플로어로는 안되네요..
    ㅡㅡ; 왜그런건가요?

    • jasu 2007.10.25 00:44 신고 수정/삭제

      안녕하세요...
      로컬에서는 풀스크린이 되는데 웹페이지에서는 되지 않는다는 말씀이신가요? 혹시 swf 임베드 처리 html코드상에서 allowFullScreen="true" 로 설정하셨는지 확인해 보세요 false일 경우에는 풀스크린 모드를 지원하지 못합니다.
      감사합니다.

  • beartyoon 2009.05.14 18:32 ADDR 수정/삭제 답글

    우선 좋은 정보 감사드립니다.
    제가 하드웨어 스케일링을 2.0버전으로 작업을 했는데요
    전체화면모드에서 esc를 누르고 일반화면으로 전환후에 다시 전체화면모드로 가려고
    버튼(전체화면버튼)을 클릭하면 바로 전체화면으로 변경이 되질않고 화면이 깜빡거립니다. 그상태에서 한번 더 클릭하면 전체화면이 되구요..
    혹시 버그인가요?
    3.0에서는 잘되는것 같은데요 ...
    답변 부탁드리겠습니다. (__)

    • jasu 2009.05.14 23:36 신고 수정/삭제

      안녕하세요
      아직 2.0에서 fullscreen mode 버그에 관련된 내용을 아는 부분이 없네요. 일단 여러가지 테스트가 필요할 듯 싶습니다. 브라우저별로(ie, 파폭) 테스트가 필요할 듯 싶고 브라우저에 영향 없이 같은 반응이 나타난다면 일단 플래시 내부에서 문제를 찾아보는 방향이 좋을 듯 싶습니다.

      증상으로 봐서는 fullscreen 모드에서 normal 모드로 변경한 후 다시 fullscreen모드로 변경할 때 특정 부분에서 발생한 error가 최종 Stage로 throw되면서 발생할 가능성이 있습니다. 모드 변경 기능부 스크립트에서 토글이 제대로 처리되고 있는지 확인이 필요할 것 같습니다.

      위 문제를 테스트 하기 위해서는 기존에 적용하려고 했던 파일에서 문제를 찾기 보다는 테스트를 위한 간단한 샘플을 만들고 테스트를 해보시는 것을 권합니다.

      그리고 증상이 발생하는 부분에서 어떤 error가 throw되고 있지는 않은지 확인하기 위해서는 플래시플레이어 디버깅 버전을 설치하시고 테스트 해보시는 것이 도움이 될 것 같네요

  • beartyoon 2009.05.15 18:22 ADDR 수정/삭제 답글

    방금 파이어폭스에서 테스트 해보니
    오류없이 작동을 하네요.
    음...

    그럼 플래시 문제는 아니라는 이야기네요
    쩝...
    해결책이 있을까요?

[AS3] 데이터형 기본

Programming/ActionScript 3.0 2007. 6. 27. 15:21

ActionScript 3.0에서는 사용할 수 있는 많은 데이터형이 있다. 이러한 데이터형에는 "단순한" 또는 "기본적인" 데이터형이라고 볼 수 있는 것이 있다.

    * String : 이름 또는 텍스트 형태의 문자
    * Numeric : ActionScript 3.0에는 수치 데이터형으로 3종류의 데이터형을 사용한다.
          o Number : 소수점이 있거나 없는 값을 포함한 모든 수치
          o int : 정수 (소수점이 없는 자연수)
          o uint : 부호 없는 정수. 즉 부의 수가 되지 않는 자연수
    * Boolean : 스위치의 on이나 off, 2개의 값이 동일한가 아닌가 등의 true 나 false의 값

단순한 데이터형은 1개의 정보를 나타낸다. 예를 들어 단일의 숫자 또는 텍스트의 1문장 등이지만 ActionScript에서 정의되는 데이터형의 대부분은 정리되고 그룹화된 세트값을 나타내기 위해 복잡한 데이터형으로서 기술할 수 있다. 예를 들어 데이터형 Date의 변수는 1개의 값, 즉 특정의 시점을 나타내지만 그 일자의 값은 실제로는 일, 월, 년, 시간, 분 , 초 등 복수의 값으로 나타내며 모두 개별의 수치를 갖는다. 이 때문에 일자는 단일의 값으로 해서 생각하지만 (Date 변수를 작성해 단일의 값으로 해서 처리할 수 있지만) 컴퓨터의 내부에서는 1개의 일자를 정의하는 복수 값으로부터 완성되는 그룹이라고 볼 수 있다.

프로그래머가 정의하는 데이터형 이외의 데이터형 대부분은 복잡한 데이터형이다. 복잡한 데이터형이라고 할 수 있는 것은 다음과 같다.

    * MovieClip : 무비 클립 심볼
    * TextField : 다이나믹 텍스트 필드 또는 텍스트 입력 필드
    * SimpleButton : 버튼 심볼
    * Date : 특정의 시점에 관한 정보 (일자와 시간)

데이터형과 같은 의미로 많이 사용되는 용어에 클래스와 오브젝트가 있다. 클래스는 단지 데이터형을 정의한 것이고 오브젝트는 클래스의 실제의 인스턴스다. MovieClip의 변수는 MovieClip 오브젝트로 기술할 수 있다.

    

설정

트랙백

댓글

[AS3] Matrix 오브젝트의 사용

Programming/ActionScript 3.0 2007. 6. 20. 04:01
Matrix 클래스는 좌표 공간의 사이에 포인트를 매핑 하는 방법을 결정하는 변환 행렬을 나타낸다. Matrix 오브젝트의 프롭퍼티를 설정하여 Matrix 오브젝트를 Transform 오브젝트의 matrix 프롭퍼티에 적용하고 그 Transform 오브젝트를 표시 오브젝트의 transform 프롭퍼티에 적용하는 것으로 표시 오브젝트에 대해서 다양한 그래픽 변환을 실행할 수 있다. 실현될 수 있는 변환 기능으로서는 평행이동 (x 위치 및 y 위치의 이동) , 회전, 확대•축소, 경사등이 있다.

Matrix 오브젝트의 정의
매트릭스는 프롭퍼티 (a ,b ,c ,d ,tx ,ty)를 조정해 직접 정의할 수도 있지만 createBox() 메소드를 사용해 정의하는 편이 간단하다. 이 메소드의 파라미터에서는 작성하는 매트릭스에서 정의하는 확대•축소, 회전, 평행이동의 효과를 직접 정의할 수 있다. 예를 들어 다음의 코드로 작성한 Matrix 오브젝트에는 수평 방향 2.0배 확대, 수직 방향 3.0배 확대, 45도의 회전, 오른쪽으로 10 피크셀의 이동, 및 아래에 20 피크셀의 이동의 효과가 있다.

var matrix:Matrix = new Matrix();
var scaleX:Number = 2.0;
var scaleY:Number = 3.0;
var rotation:Number = 2 * Math.PI * (45 / 360);
var tx:Number = 10;
var ty:Number = 20;
matrix.createBox(scaleX, scaleY, rotation, tx, ty);
또한 scale() ,rotate() ,translate() 의 각 메소드를 사용하면 Matrix 오브젝트로 설정한 확대•축소, 회전, 평행이동의 효과를 변경할 수 있다. 이러한 메소드로 지정한 값은 기존의 Matrix 오브젝트로 설정되어 있는 값과 합쳐진다. 예를 들어, 다음의 코드에서는 scale() (와)과 rotate()를 2 회 호출하고 있기 때문에 Matrix 오브젝트의 효과는 4 배의 확대와 60도의 회전이 된다.

var matrix:Matrix = new Matrix();
var rotation:Number = 2 * Math.PI * (30 / 360); // 30
var scaleFactor:Number = 2;
matrix.scale(scaleFactor, scaleFactor);
matrix.rotate(rotation);
matrix.scale(scaleX, scaleY);
matrix.rotate(rotation);
myDisplayObject.transform.matrix = matrix;
경사 변형을 Matrix 오브젝트에 적용하려면 b 프롭퍼티 또는 c 프롭퍼티를 조정한다. b 프롭퍼티를 조정하면 매트릭스가 수직 방향으로 경사하고 c 프롭퍼티를 조정하면 매트릭스가 수평 방향으로 경사한다. 다음의 코드는 myMatrix Matrix 오브젝트를 수직 방향으로 2배 경사한 것이다.

var skewMatrix:Matrix = new Matrix();
skewMatrix.b = Math.tan(2);
myMatrix.concat(skewMatrix);
Matrix 에 의한 변환은 표시 오브젝트의 transform 프롭퍼티에 적용할 수 있다. 예를 들어 다음의 코드에서는 myDisplayObject오브젝트에 매트릭스 변환을 적용하고 있다.

var matrix:Matrix = myDisplayObject.transform.matrix;
var scaleFactor:Number = 2;
var rotation:Number = 2 * Math.PI * (60 / 360); // 60
matrix.scale(scaleFactor, scaleFactor);
matrix.rotate(rotation);
myDisplayObject.transform.matrix = matrix;
첫 라인에서 myDisplayObject 표시 오브젝트가 사용하는 기존의 변환 매트릭스 (myDisplayObject 표시 오브젝트의 transformation, 프롭퍼티의 matrix 프롭퍼티) 를 Matrix 오브젝트로 설정한다. 이렇게 하는 것으로 표시 오브젝트의 위치, 확대율, 회전각을 근거로 한 Matrix 클래스 메소드의 실행에 의한 효과를 누적하여 적용할 수 있다.

메모 : flash.geometry 패키지에는 ColorTransform 클래스도 포함되어 있지만 이 클래스는 Transform 오브젝트의 colorTransform 프롭퍼티를 설정할 때에 사용하는 것이다. 기하학 변환에는 사용하지 않는다.


그라데이션에 관한 Matrix 오브젝트의 정의
셰이프로 사용하는 그라데이션을 정의하려면 flash.display.Graphics 클래스의 beginGradientFill() 및 lineGradientStyle() 메소드를 사용한다. 그라데이션을 정의할 때 이러한 메소드의 파라미터로 매트릭스를 지정한다.
위와 같은 목적으로 매트릭스를 작성하려면 createGradientBox() 메소드를 사용해 그라데이션 정의용의 장방형을 정의하는 것이 가장 간단한 방법이다. createGradientBox() 메소드로 지정하는 파라미터에서는 그라데이션의 확대•축소, 회전, 및 위치를 정의한다. 예를 들어 다음과 같은 성질을 가지는 그라데이션을 작성한다고 하면

•    GradientType.LINEAR
•    그린과 블루의 2 색,ratios 배열을 [0, 255] (으)로 설정
•    SpreadMethod.PAD
•    InterpolationMethod.LINEAR_RGB

다음의 예로 보이는 그라데이션은 createGradientBox() 메소드의 rotation 파라미터가 다르지만 그 외의 설정은 모두 같다.

사용자 삽입 이미지
width = 100;
height = 100;
rotation = 0;
tx = 0;
ty = 0;     



사용자 삽입 이미지
width = 100;
height = 100;
rotation = Math.PI/4; // 45
tx = 0;
ty = 0;     



사용자 삽입 이미지
width = 100;
height = 100;
rotation = Math.PI/2; // 90
tx = 0;
ty = 0;     


다음의 예로 보이는 그린 블루의 선상 그라데이션 효과는 createGradientBox() 메소드의 rotation ,tx ,ty 파라미터가 다르지만 그 외의 설정은 모두 같다.

사용자 삽입 이미지
width = 50;
height = 100;
rotation = 0;
tx = 0;
ty = 0;     



사용자 삽입 이미지
width = 50;
height = 100;
rotation = 0
tx = 50;
ty = 0;     



사용자 삽입 이미지
width = 100;
height = 50;
rotation = Math.PI/2; // 90
tx = 0;
ty = 0;     



사용자 삽입 이미지
width = 100;
height = 50;
rotation = Math.PI/2; // 90
tx = 0;
ty = 50;     



사용자 삽입 이미지
width = 50;
height = 100;
rotation = 0;
tx = 25;
ty = 0;     



다음의 코드는 마지막에 보이는 방사상 그라데이션을 생성한다.

import flash.display.Shape;
import flash.display.GradientType;
import flash.geom.Matrix;

var type:String = GradientType.RADIAL;
var colors:Array = [0x00FF00, 0x000088];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD;
var interp:String = InterpolationMethod.LINEAR_RGB;
var focalPtRatio:Number = 0;

var matrix:Matrix = new Matrix();
var boxWidth:Number = 50;
var boxHeight:Number = 100;
var boxRotation:Number = Math.PI/2; // 90
var tx:Number = 25;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

var square:Shape = new Shape;
square.graphics.beginGradientFill(type,
colors,
alphas,
ratios,
matrix,
spreadMethod,
interp,
focalPtRatio);
square.graphics.drawRect(0, 0, 100, 100);
addChild(square);

// 위와 같으나 package 형태의 클래스로 외부에 저장된 as 파일
package {
import flash.display.*;
import flash.geom.*;


public class RadialGradientExample extends Sprite {
public function RadialGradientExample() {
var type:String = GradientType.RADIAL;
var colors:Array = [0x00FF00, 0x000088];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD;
var interp:String = InterpolationMethod.LINEAR_RGB;
var focalPtRatio:Number = 0;

var matrix:Matrix = new Matrix();
var boxWidth:Number = 50;
var boxHeight:Number = 100;
var boxRotation:Number = Math.PI/2;// 90°
var tx:Number = 25;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

var square:Shape = new Shape;
square.graphics.beginGradientFill(type,
colors,
alphas,
ratios,
matrix,
spreadMethod,
interp,
focalPtRatio);
square.graphics.drawRect(0, 0, 100, 100);
addChild(square);
}
}}

    

설정

트랙백

댓글

[AS3] Rectangle 오브젝트의 사용

Programming/ActionScript 3.0 2007. 6. 20. 03:21
1. Rectangle 오브젝트의 개요
Rectangle 오브젝트는 장방형의 영역을 정의한다. Rectangle 오브젝트에는 위치 (좌상구석의 x 좌표와 y 좌표로 정의된다)와 프롭퍼티 width, height가 있다. Rectangle 오브젝트의 프롭퍼티를 지정하려면 다음과 같이 Rectangle 클래스의 인스턴스를 생성한다.
import flash.geom.Rectangle;
var rx:Number = 0;
var ry:Number = 0;
var rwidth:Number = 100;
var rheight:Number = 50;
var rect1:Rectangle = new Rectangle(rx, ry, rwidth, rheight);
2. Rectangle 오브젝트의 사이즈 변경과 이동
Rectangle 오브젝트의 사이즈 변경 및 이동하려면 다수의 방법이 있다. x 및 y 프롭퍼티를 변경하면 직접 Rectangle 오브젝트의 위치를 이동할 수 있다.

import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace (rect1) // (x=0, y=0, w=100, h=50)
rect1.x = 20;
rect1.y = 30;
trace (rect1); // (x=20, y=30, w=100, h=50)
다음코드에서 알 수 있듯이 left 또는 top 프롭퍼티를 변경하면 Rectangle 오브젝트의 위치를 이동해 left 및 top 각각의 값에 대응하는 x 및 y 프롭퍼티의 값이 변화한다. 단, Rectangle 오브젝트의 우측아래구석의 위치는 변화하지 않고 그 대신 장방형의 사이즈가 변화한다.

import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace (rect1) // (x=0, y=0, w=100, h=50)
rect1.left = 20;
rect1.top = 30;
trace (rect1); // (x=20, y=30, w=80, h=20)
다음의 예에서 알 수 있듯이 Rectangle 오브젝트의 bottom 또는 right 프롭퍼티를 변경하면 좌상구석의 위치는 변화하지 않고 장방형의 사이즈가 변화한다.

import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace (rect1) // (x=0, y=0, w=100, h=50)
rect1.right = 60;
rect1.bottom = 20;
trace (rect1); // (x=0, y=0, w=60, h=20)
아래 코드는 Rectangle 오브젝트의 offset() 메소드를 이용하여 위치를 이동하는 방법이다.

import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace (rect1) // (x=0, y=0, w=100, h=50)
rect1.offset(20, 30);
trace (rect1); // (x=20, y=30, w=100, h=50)
offsetPt() 메소드도 이와 같지만 파라미터로서 x 및 y 의 오프셋 값이 아니라 Point 오브젝트를 지정한다.
Rectangle 오브젝트의 inflate() 메소드에 dx 및 dy 의 2 개의 파라미터를 지정해 사이즈를 변경할 수도 있다. 장방형의 중심점을 기준으로 크기를 변화시킬 수 있다.

import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace (rect1) // (x=0, y=0, w=100, h=50)
rect1.inflate(6,4);
trace (rect1); // (x=-6, y=-4, w=112, h=58)
inflatePt() 메소드도 이와 같지만 파라미터로서 dx 및 dy 의 값이 아니라 Point 오브젝트를 지정한다.

3. 2 개의 Rectangle 오브젝트로부터 완성되는 결합 및 교차의 취득
2 개의 장방형을 맞춘 경계선에 의해서 형성되는 장방형 영역을 취득하려면 union() 메소드를 사용한다.

import flash.display.*;
import flash.geom.Rectangle;
var rect1:Rectangle = new Rectangle(0, 0, 100, 100);
trace(rect1); // (x=0, y=0, w=100, h=100)
var rect2:Rectangle = new Rectangle(120, 60, 100, 100);
trace(rect2); // (x=120, y=60, w=100, h=100)
trace(rect1.union(rect2)); // (x=0, y=0, w=220, h=160)
2 개의 장방형이 서로 겹치는 부분을 나타내는 장방형 영역을 취득하려면 intersection() 메소드를 사용한다.

import flash.display.*;
import flash.geom.Rectangle;
var rect1:Rectangle = new Rectangle(0, 0, 100, 100);
trace(rect1); // (x=0, y=0, w=100, h=100)
var rect2:Rectangle = new Rectangle(80, 60, 100, 100);
trace(rect2); // (x=120, y=60, w=100, h=100)
trace(rect1.intersection(rect2)); // (x=80, y=60, w=20, h=40)
2 개의 장방형서로 겹쳐지는 부분이 있는지를 조사하려면 intersects() 메소드를 사용한다. 또한, 표시 오브젝트가 스테이지상의 특정 영역내에 배치되어 있는지를 조사하는 경우에도 intersects() 메소드를 사용할 수 있다. 다음의 코드에서는 circle 오브젝트를 포함한 표시 오브젝트 컨테이너의 좌표 공간이 스테이지의 좌표 공간과 같다는 전제에서 intersects() 메소드를 사용하고, 표시 오브젝트 circle이 target1 및 target2의 Rectangle 오브젝트로 정의된 스테이지의 지정된 영역과 교차하고 있을지를 판단하는 방법을 나타내고 있다.

import flash.display.*;
import flash.geom.Rectangle;
var circle:Shape = new Shape();
circle.graphics.lineStyle(2, 0xFF0000);
circle.graphics.drawCircle(250, 250, 100);
addChild(circle);
var circleBounds:Rectangle = circle.getBounds(stage);
var target1:Rectangle = new Rectangle(0, 0, 100, 100);
trace(circleBounds.intersects(target1)); // false
var target2:Rectangle = new Rectangle(0, 0, 300, 300);
trace(circleBounds.intersects(target2)); // true
위와 같이 2 개의 표시 오브젝트의 경계를 나타내는 부분이 서로 겹치는지를 조사하는 경우에도 intersects() 메소드를 사용할 수 있다. 표시 오브젝트의 경계선내의 영역에 포함된 선의 굵기에 의해서 여분의 스페이스가 필요한 경우는 그 만큼을 포함한 영역을 취득하기 위해서 DisplayObject 클래스의 getRect() 메소드를 사용할 수 있다.

    

설정

트랙백

댓글

[AS3] Point 오브젝트의 사용

Programming/ActionScript 3.0 2007. 6. 20. 02:35
1. Point의 개요
Point 클래스는 기존 플래시8버전(ActionScript 2.0)부터 도입된 클래스이지만 ActionScript 3.0에서는 기존의 ActionScript 2.0보다 편리한 메소드와 속성을 가지고 있다. 기본적으로 Point 오브젝트는 1 페어의 좌표치로 나타내지는 직행 좌표상의 포인트를 정의한다. 2 차원의 좌표계에 대응하는 수평축 x 와 수직축 y 에 의해 1 개의 포인트를 표현한다.

Point 오브젝트를 정의할 때는 다음과 같이 x 프롭퍼티와 y 프롭퍼티를 설정한다.

import flash.geom.*;
var pt1:Point = new Point(10, 20);
// x == 10; y == 20
var pt2:Point = new Point();
pt2.x = 10;
pt2.y = 20;
2. 포인트간의 거리의 취득
Point 클래스의 distance() 메소드를 사용하면 같은 좌표 공간내에 있는 2 개의 포인트 사이의 거리를 조사할 수 있다. 예를 들어 다음의 코드에서는 같은 표시 오브젝트 컨테이너내에 있는 2개의 표시 오브젝트 circle1 와 circle2가 가지는 기준점간의 거리를 취득한다.

import flash.geom.*;
var pt1:Point = new Point(circle1.x, circle1.y);
var pt2:Point = new Point(circle2.x, circle2.y);
var distance:Number = Point.distance(pt1, pt2);
3. 좌표 공간의 변환
2 개의 표시 오브젝트가 각각 다른 표시 오브젝트 컨테이너내에 있는 경우는 각각의 속하는 좌표 구간이 차이가 날 가능성이 있다. DisplayObject 클래스의 localToGlobal() 메소드를 사용하면 그러한 좌표를 공통의 글로벌인 좌표 공간 (스테이지 좌표)로 변환할 수 있다. 예를 들어 다음의 코드에서는 다른 표시 오브젝트 컨테이너내에 있는 2개의 표시 오브젝트 circle1 와 circle2가 가지는 기준점간의 거리를 측정한다.

import flash.geom.*;
var pt1:Point = new Point(circle1.x, circle1.y);
pt1 = circle1.localToGlobal(pt1);
var pt2:Point = new Point(circle1.x, circle1.y);
pt2 = circle2.localToGlobal(pt2);
var distance:Number = Point.distance(pt1, pt2);
다음과 같이 target이라는 표시 오브젝트의 기준점과 스테이지상에 있는 특정의 포인트와의 거리를 조사하는 경우는 DisplayObject 클래스의 localToGlobal() 메소드를 다음과 같이 사용한다.
import flash.geom.*;
var stageCenter:Point = new Point();
stageCenter.x = this.stage.stageWidth / 2;
stageCenter.y = this.stage.stageHeight / 2;
var targetCenter:Point = new Point(target.x, target.y);
targetCenter = target.localToGlobal(targetCenter);
var distance:Number = Point.distance(stageCenter, targetCenter);
4. 각도와 거리의 지정에 의한 표시 오브젝트의 이동
이동거리와 각도를 지정해 오브젝트를 이동하려면 Point 클래스의 polar() 메소드를 사용한다. 예를 들어 다음의 코드에서는 myDisplayObject 오브젝트를 60도의 방향으로 100 픽셀만큼 이동합니다.

import flash.geom.*;
var distance:Number = 100;
var angle:Number = 2 * Math.PI * (60 / 360);
var translatePoint:Point = Point.polar(distance, angle);
myDisplayObject.x += translatePoint.x;
myDisplayObject.y += translatePoint.y;

    

설정

트랙백

댓글

  • 해피포터 2008.11.22 14:55 ADDR 수정/삭제 답글

    좋은 정보 감사합니다~ 좀 어렵네요 ㅎㅎ

  • 어두운 밤 2011.01.29 09:39 ADDR 수정/삭제 답글

    바탕이 어두워서 뭔 글씨인지 알아보기 힘들다는~
    글씨도 좀 바탕과 많이 대비되는 색으로 교체되었으면 합니다.
    일례로 흰색 바탕에 검은 색 글씨면 좋겠네요.

[AS3] 파일 내에 복수 클래스

Programming/ActionScript 3.0 2007. 6. 15. 04:11
ActionScript 2.0에서는 클래스 파일을 작성하는 경우 클래스와 같은 이름의 파일을 만들게 된다.  예를 들어 Rec이라는 클래스가 있을 때 클래스의 원시 코드는 "Rec.as" 와 같은 파일명으로 저장이 되어야 한다. "Rec.as" 파일에 존재할 수 있는 클래스는 Rec클래스만 가능한 일이었다.

하지만 ActionScript 3.0 에서는 1개의 파일 내에 복수의 클래스를 저장할 수 있도록 설계되었다. Flash 9 alpha 버전에서는 package{} 내에서도 internal class로 여러 개의 클래스가 package내에서 사용가능하도록 하였으나 CS3로 만들면서 이러한 기능은 제외되었다. 하지만 package 외에는 여러개의 클래스를 정의할 수가 있도록 되어 있다. 1 개의 원시 소스 파일에 복수의 클래스를 보존하는 것이 편리할 수도 있지만 남용하면 OOP형태의 언어에서 바람직하지 않은 문제를 양산할 우려가 있다. 문제는 다음과 같은 경우이다.

1.    복수의 클래스가 1 개의 소스파일에 보존되고 있는 경우, 각각의 클래스를 재이용하는 것이 곤란하게 된다.

2.    파일명과 클래스명이 대응하고 있지 않는 경우, 특정의 클래스의 원시 소스코드를 찾아내는 것이 곤란하다.

이러한 문제점으로 인하여 Adobe에서는 각각 하나의 클래스는 하나의 원시소스파일로 저장하는 것을 권장하고 있다. Alpha 버전에서 package 내에서 복수 클래스를 정의할 수 있었던 것을 제외시킨 이유 또한 이러한 문제점 때문일 것이라는 생각이다.

다시 생각해보면 기존 ActionScript 2.0에서 디렉토리 형태로만 패키지 영역을 정의했던 것을 벗어나 package에서 명시적으로 패키지 영역을 정의하고 그 영역 안에서 복수의 클래스를 정의할 수 있도록 하는 방향으로 검토하였으나 위와 같은 두가지 문제로 인하여 언어적 비판을 벗어나기 위해 CS3 제품에서 package 내 복수 클래스 정의 부분을 제외한 것이 아닌가 생각된다. 개념적 접근에서 실의[實義]를 추구했다고 보여진다.

    

설정

트랙백

댓글

어도비, 모바일 개발용 디바이스 센트럴 발표

Miscellaneous/Etc 2007. 4. 3. 22:02
사용자 삽입 이미지
이번 주에 CS3 릴리스와 관련된 기사거리가 너무 많은 이유로 어도비의 디바이스 센트럴(Device Central) 발표를 놓칠 뻔 했다. 디바이스 센트럴은 보다 자연스러운 모바일 개발 프로세스를 목표로 한 애플리케이션 및 소셜 커뮤니티이다.

그 동안 모바일 애플리케이션을 개발하는 것은 매우 어려운 일이었다. 휴대폰 종류와 화면 크기가 매우 다양하기 때문에 사용자 인터페이스를 구성하는 것도 만만치 않았고 컴퓨팅 성능이 각양각색인 장치들을 개발하는 것도 쉬운 일이 아니었다.

그 동안 장치용 애플리케이션을 만드는 방법으로 플래시 라이트(Flash Lite)가 많은 인기를 끌었다. 하지만 디바이스 센트럴의 목표는 디자이너와 개발자들이 CS3 툴을 사용하여 멋진 모바일용 콘텐츠를 훨씬 더 쉽게 만들 수 있게 하는 것이다.

어도비 디바이스 센트럴은 플래시(Flash), 드림위버(Dreamweaver), 포토샵(Photoshop), 일러스트레이터(Illustrator) 및 기타 제품들을 포함하여 어도비의 많은 주력 제품들과 연계하여 판매된다.

그 모든 제품들에는 특정한 작업에 초점을 맞추어 각각 다른 버전의 디바이스 센트럴이 제공된다. 예를 들어, 플래시와 함께 판매되는 디바이스 센트럴 버전은 사용자 인터페이스를 만들고 싶어 하는 플래시 디자이너들을 겨냥한 것이다.

드림위버와 함께 판매되는 버전은 멋진 모바일 웹 환경을 만드는데 초점을 맞추고 있다. 포토샵에 초점을 맞춘 디바이스 센트럴을 이용하면 프로토타입을 빠르고 쉽게 만들 수 있다.

이 모든 툴은 함께 사용할 수 있으므로 포토샵에서 하던 일을 빠르고 쉽게 처리하여 플래시에 넣을 수 있으므로, CS3 제품군에서, 그리고 디바이스 센트럴 자체 내에서 일관성 있는 환경을 사용할 수 있다.

따라서 이 제품을 사용하는 디자이너들과 설계자들은 다채로운 모바일 애플리케이션을 만드는 방식에 있어 유연성을 즐길 수 있다.



워크플로를 제외하고 디바이스 센트럴은 개별적인 장치에 관한 풍부한 정보도 제공한다. 여러 가지 면에서, 이것은 시중에 나와 있는 휴대폰, 그리고 각 휴대폰의 규격과 기능에 대해 모든 것을 알려주는 백과사전이다.

개발자들과 설계자들은 디바이스 센트럴의 데이터베이스를 사용하여 기능에 따라 목표로 삼을 휴대폰을 구상할 수 있다. 개발 대상이 될 특정한 화면 크기와 같은 요소를 선택하면, 그 요소가 적용되는 모든 휴대폰이 나타난다.

이것을 이용하면 개발자들이 장치들을 신속하게 결합하여 특정한 요소에 맞추어 콘텐츠를 극대화할 수 있다.

디바이스 센트럴은 콘텐츠를 테스트하는 면에서도 상당한 발전을 하였다. 그것은 백과사전 내의 모든 장치들에 대해 완벽한 에뮬레이션을 제공하며, 테스터들이 배터리 전력, 신호 강도, 시스템 시간 등과 같은 요소들을 수정할 수 있다.

모바일 인터페이스에는 이런 요소들이 점점 더 많이 포함될 것이다. 날이 저물면 배경이 점점 어두워진다든지, 배터리 전력이 줄어들면 실제로 인터페이스의 일부가 흐려진다던지 하는 기능도 적용할 수 있다.

따라서 모바일 환경이 훨씬 더 다채로워지며, 개발자들이 그것을 테스트할 수 있다는 것이 중요하다. 디바이스 센트럴을 사용하면, 장치를 완벽하게 제어할 수 있으며 인터페이스와 콘텐츠가 정확하게 기능을 수행하고 있는지 확인할 수 있다.



장치의 수가 증가하고, 모바일 콘텐츠가 브랜드나 개개인이 사용자들에게 도달하는데 중요한 수단이 되면서, 모바일 세계에 맞게 디자인하는 것은 매우 수지 맞는 일이 되었다. 디바이스 센트럴은 그렇게 하는데 도움이 되는 멋진 프로그램이며 CS3의 숨겨진 보석 중 하나이다.

크리에이티브 제품군에 속한 다른 제품들과 마찬가지로, 디바이스 센트럴은 사람들이 멋진 환경을 만드는데 정말 도움이 되지만, 이번에는 모바일 세계에 도움을 준다. 필자의 디바이스 센트럴 갤러리에서는 새로운 프로그램을 캡처한 몇 가지 화면을 볼 수 있다.


출처 :  Ryan Stewart ( ZDNet )

    

설정

트랙백

댓글

어도비 25년 역사상 가장 방대한 SW제품군 발표

Miscellaneous/Etc 2007. 3. 30. 01:31
어도비시스템즈(http://www.adobe.com)는 모든 크리에이티브 영역에서 활용되는 업계 표준 디자인 및 개발 통합 솔루션인 ‘어도비 크리에이티브 스위트 3(Adobe Creative Suite 3, 이하 어도비 CS 3)’ 제품군을 출시한다고 밝혔다.

이번 어도비 CS 3는 어도비와 매크로미디어의 합병으로 인한 최초의 기술 통합으로 인쇄, 웹, 모바일, 인터랙티브, 영상 등 모든 크리에이티브의 영역에 걸쳐 디자이너 및 개발자에게 혁신적인 솔루션을 제공한다.

발표되는 이번 신제품은 ▲어도비 CS 3 디자인 프리미엄 에디션 및 스탠다드 에디션 ▲어도비 CS 3 웹 프리미엄 에디션 및 스탠다드 에디션 ▲어도비 CS 3 프로덕션 프리미엄 에디션 ▲ 어도비 CS 마스터 콜렉션 등 총 6개 에디션으로 이루어져 있다.

어도비 CS 3 디자인 프리미엄 에디션 및 스탠다드 에디션
인쇄, 웹, 인터랙티브 및 모바일 디자인 등 크리에이티브 작업을 위한 필수적인 툴 킷이다. 페이지 레이아웃, 이미지 편집, 일러스트레이션, PDF 워크플로우가 모두 통합되어 출판, 웹사이트, 풍부한 사용자 경험 및 모바일 컨텐츠를 하나의 환경에서 효율적으로 작업할 수 있다.

기존의 CS2 버전에서는 오프라인 컨텐츠 제작에 초점되어 있는 반면, 새로운CS3버전에서는 매크로미디어의 플래시, 드림위버가 추가로 통합됨으로써 오프라인 컨텐츠를 온라인으로 쉽게 퍼블리싱할 수 있게 되었다. 이로써 CS3 디자인 프리미엄 에디션은 크로스 미디어 디자인 전문가를 위한 완벽한 솔루션으로, 기존 출판 및 디자인 프로세스에 대변화를 가져올 것으로 예상된다.

어도비 CS3 디자인 프리미엄 에디션에는 어도비 인디자인 CS3, 어도비 포토샵 CS3 익스텐디드, 어도비 일러스트레이터 CS3, 어도비 플래시 CS3 프로페셔널, 어도비 드림위버 CS3가 포함되며, 추가적으로 어도비 애크로뱃 8 프로페셔널이 포함된다.

새롭게 강화된 인디자인 CS3은 반복적인 레이아웃 작업을 쉽고 빠르게 처리할 수 있도록 도와 주며, 일러스트레이터의 라이브컬러 기능은 디자이너들이 빠르고 직관적으로 색을 배합하고 저장하고 다양한 실험을 할 수 있게 한다. 이 외에도 포토샵 CS 3 익스텐디드를 통해 이미지 영역 선택, 이미지 합성, 필터 적용 등의 일상적인 이미지 편집 작업이 더 빠르고 유연하게 진행될 수 있게 된다. 또한 플래시 CS3 프로페셔널과 통합되어 디자이너와 개발자들이 포토샵과 일러스트레이터에서 작업한 파일을 그대로 플래시로 보낼 수 있게 되어 작업 시간을 크게 단축할 수 있게 된다. 이 외에도 드림위버 CS3를 통해 디자이너들이 포토샵 파일을 웹 레이아웃에 복사해서 붙일 때 웹을 자동적으로 최적화해 준다.

어도비의 존 로이아코노(John Loiacono) 크리에이티브 솔루션 수석 부사장은 “디자인 전문가들은 어도비와 매크로미디어 툴의 새로운 차원의 통합을 경험하게 될 것"이라며 “플래시와 드림위버의 추가로 오늘날 크리에이티브의 중심이 되는 인터랙티브한 디자인 영역으로 확대될 수 있는 계기를 마련함과 동시에 혁신적으로 변화된 디자인 환경을 제공하게 될 것이다”고 밝혔다.

어도비 CS 3 웹 프리미엄 에디션 및 스탠다드 에디션
웹 디자이너 및 웹 개발자들이 손쉽게 웹사이트와 애플리케이션, 게임, 프레젠테이션, 모바일 컨텐츠 등을 디자인하고, 개발하고, 관리할 수 있게 해준다. 특히, 인터랙티브한 웹을 개발하고 디자인하고자 하는 개발자 및 디자이너를 위한 최적의 툴이다.

어도비 CS 3 웹 프리미엄 에디션에는 어도비 드림위버 CS3, 어도비 플래시 CS3 프로페셔널, 어도비 파이어웍스 CS3, 어도비 컨트리뷰트 CS3와 함께 어도비 포토샵 CS3 익스텐디드, 어도비 일러스트레이터 CS3, 어도비 애크로뱃 8 프로페셔널 등이 포함되어 있다.

웹 전문가들은 포토샵과 일러스트레이터 파일을 바로 플래시 및 파이어웍스에서 사용할 수 있게 되었다. 이에 따라 웹 페이지 관리가 편해지며, 웹 페이지의 이미지를 일관되게 유지하기가 더욱 쉬워진다. 또한 파이어웍스 CS3의 새로운 계층구조화 기능을 통해 복잡한 웹 페이지 모델을 바로 만들 수 있으며, 하나의 PNG 파일로 저장할 수 있다.

어도비 CS3 웹 에디션은 모든 웹 브라우저, 운영체제, 모바일 기기 등을 통해 일관된 경험을 할 수 있게 해준다. 드림위버 CS3는 Ajax를 위한 Spary 프레임워크를 통합해 RIA 구현을 더욱 쉽게 해 준다. 새로운 CSS 레이아웃은 사용화된 웹 브라우저 호환성 체크를 가능하게 하고 다양한 웹 브라우저를 통해 CSS기반 웹사이트를 테스팅할 수 있게 한다.

어도비의 존 로이아코노 부사장은 "어도비 CS3 웹 에디션은 웹 상에서의 크리에이티브한 비전 실현을 위해 디자이너와 개발자의 모든 작업 영역에서 활용할 수 있는 필수적인 솔루션을 제공한다" 라며 "드림위버, 플래시, 파이어웍스, 컨트리뷰트에 포토샵, 일러스트레이터와 같은 주요 디자인 툴을 통합하여 웹 디자인 및 개발을 놀라울 정도로 단순화할 수 있다" 라고 밝혔다.

어도비 CS 3 프로덕션 프리미엄 에디션
영상 전문가와 리치 미디어 전문가를 위한 포스트 프로덕션 솔루션이다. 영상, 방송, 웹, DVD, 모바일 디바이스 등을 위한 혁신적인 결과물을 창조하고 전달할 수 있도록 통합된 작업 환경을 제공한다. 프로덕션 프리미엄 에디션은 전체 캡쳐에서부터 포스트 프로덕션 워크플로우 전반에 필요한 모든 애플리케이션을 통합한 것으로, 작업 시간을 대폭 줄여준다.

어도비 CS 3 프로덕션 프리미엄 에디션에는 어도비 애프터 이펙트 CS3 프로페셔널, 어도비 프리미어 프로 CS3, 어도비 앙코르 CS3, 어도비 포토샵 CS3 익스텐디드, 어도비 일러스트레이터 CS3, 어도비 플래시 CS3 프로페셔널, 어도비 사운드부스 CS3등이 포함된다.

어도비 프리미어 프로 CS3는 ‘타임 리매핑’이라는 신기능을 통해 슬로 모션을 향상시키고, 다양한 속도 효과를 제공한다. 애프터 이펙트 CS3는 ‘쉐이프 레이어’ 기능을 통해 벡터 쉐이프를 그리고 애니메이션할 수 있게 해 주고, ‘퍼핏’ 기능을 통해 2D 이미지들을 움직이게 한다.

또한, 브레인스토밍 툴을 통해 애니메이션에 변화를 조금씩 주도록 생성하고 미리 볼 수 있게 한다. 오디오 기능은 어도비 사운드부스 CS3를 통해 전문가 수준의 사운드트랙을 개발할 수 있다. 어도비 플래시 CS3 프로페셔널을 통해서 애프터 이펙트 및 앙코르에서 웹을 통해 작업을 바로 보여줄 수 있다.

그리고 ‘다이나믹 링크’를 통해 프리미어 프로 CS3, 애프터 이펙트 CS3, 앙코르 DVD CS3에서 작업한 미디어를 서로 교환할 때에 렌더링을 하지 않아도 되게 되었다. 또한 이번 CS3 프로덕션 프리미엄은 어도비 온로케이션 CS3는 바로 디스크로 녹음이 가능하며 모니터링 기능을 제공한다. 이는 현장에서 고화질의 촬영을 하는데 큰 도움을 줄 것이다. 또한, 프리미어 프로 CS3는 HD, SD, HDV 형식을 모두 지원한다. 이 외에도 어도비 미디어 엔코더를 통해 모바일폰, 디바이스, 아이팟 등의 다양한 기기에서 촬영한 비디오를 송출 할 수 있다.

어도비의 존 로이아코노 부사장은 “어도비 CS 3 프로덕션 프리미엄의 타겟 시장인 비디오 편집 시장이 점차 확대되어 가고 있다”며 “특히, 인터넷을 통해 대량의 비디오 유통이 이루어지면서 플래시 기술이 표준으로 자리 잡아 가고 있다. 이는 TV의 온라인 방송이나 유투브(YouTube), 마이스페이스(MySpace)로 입증되고 있다. 어도비의 프로덕션 에디션은 최첨단 비디오 및 리치 미디어 작업을 위해 최적의 솔루션이 될 것이다.”고 밝혔다.

이 제품은 중순경 발표 예정이다.

어도비 CS 마스터 콜렉션
총 12개의 개별 애플리케이션을 하나로 통합한 콜렉션이다. 프린트, 웹, 모바일, 비디오, 필름 등 모든 미디어를 통해 디자인 및 개발 작업을 할 수 있도록 해준다.

어도비의 최고 경영자인 브루스 치즌(Bruce Chizen)은 “어도비와 매크로미디어의 강력한 기술을 통합한 이번 신제품은 디자이너와 개발자 사이의 간격을 메워주는 작업 효율성을 극대화 하는데 중점을 두었다”며 “새로운 워크플로우를 통해 더욱 풍부한 컨텐트 개발과 효율적인 협업이 가능해질 것”이라고 밝혔다.

한편 어도비 CS 3 제품군에 있는 12개의 소프트웨어는 개별적으로도 구매 가능하다. 환경으로는 파워PC, 인텔 기반 맥킨토시 등에서 모두 사용 가능하며, 마이크로소프트 윈도우 XP, 윈도우 비스타를 지원한다. 특히 고객들은 인텔 기반의 매킨토시 시스템 및 최신 윈도우 하드웨어에서 CS 3의 한층 향상된 성능 및 속도를 체험할 수 있다.

발표하는 이 시점 이후, 이전 버전(Creative Suite2와 Studio8 및 관련 단품)을 구매하는 고객에 한해 한정 기간 동안 무상 업그레이드 혜택을 제공한다. 특히 기존에는 포함되어 있지 않은 제품들이 추가적으로 제공되어 한층 업그레이드된 경험을 누릴 수 있다. 자세한 내용은 고객지원센터(563-2555)로 문의하면 된다.

한편, 어도비 CS 3의 한글판은 올해 중순경 출시 예정이다.

출처 : 김효정 기자   ( ZDNet Korea )
    

설정

트랙백

댓글