Adobe2009.11.18 02:44

Adobe AIR 2.0 Beta & Flash Player 10.1 Beta 발표



미국 시간으로 17일 드디어 기다리던 AIR 2.0 Beta 버젼과 Flash Player 10.1 Beta가 발표되었습니다.

현재 Adobe Lab에서 다운로드 가능합니다.

Download Adobe Flash Player 10.1 prerelease
Download AIR 2

변경된 자세한 사항은 릴리즈 노트를 참고하세요~

Flash Player 10.1 Release Notes
http://labs.adobe.com/technologies/flashplayer10/releasenotes.pdf

AIR 2 Release Notes
http://labs.adobe.com/wiki/index.php/AIR_2:Release_Notes

주요 변경사항
Flash Player 10.1

  • H.264 Video Hardware Acceleration Support
  • Support for new platforms (Windows 7 and Mac OS X 10.6 (“Snow Leopard”))
  • Designed for mobility
  • Mobile text input
  • Multi-touch and gestures
  • Accelerometer input
  • Screen orientation (mobile only)
  • Optimized SWF management for mobile (mobile only)
  • Sleep mode (mobile only)
  • Graphics hardware acceleration (mobile only)
  • H.264 video hardware decoding
  • Adaptive frame rate (mobile only)
 개발자 생산성 향상
  • Global error handler
  • Globalization support
  • Enhanced browser integration
  • Browser privacy mode (desktop only)
  • Out-of-memory management
  • Expanded options for high quality media delivery
  • Content protection (desktop only; output protection Windows only; requires Adobe Flash Access 2.0 SDK expected to be available the first half of 2010)
  • Peer-assisted networking (requires “Stratus” on Adobe Labs, http://labs.adobe.com/technologies/stratus/)
  • HTTP streaming
  • Stream reconnect (requires FMS 3.5.3 server, available November 2009)
  • Smart seek (Requires FMS 3.5.3 server, available November 2009)
  • Buffered stream catch-up
  • Dynamic Streaming enhancements (requires FMS 3.5.3 server, available November 2009)
  • Microphone access (desktop only)


AIR 2

  • Open documents with the user's default application
  • Microphone data access
  • Mass storage device detection
  • Updated WebKit version
  • Global Error Handling
  • New networking support
  • Packaging an AIR application in a native installer
  • Native process API
  • Database transaction savepoints
  • Screen reader support (Windows only)
  • Printing enhancements
  • Idle time-out settings for URL requests
  • Improved IPv6 support
  • Increased maximum size of NativeWindow
  • File promises (Win/Mac only)
  • Multi-touch events
  • IME API and IME text input enhancement
  • Native runtime install packages for Linux
저작자표시비영리

'Adobe' 카테고리의 다른 글

Adobe CS5 신제품 발표회  (0) 2010.04.14
재미있는 Flash Platform 탐구생활 제1화 당첨~ ^ㅡ^  (2) 2010.03.11
Adobe AIR 2.0 Beta & Flash Player 10.1 Beta 발표  (2) 2009.11.18
어도비-엔비디아, 플래시(Flash) 플레이어 GPU 가속 협력  (0) 2009.10.23
Adobe PhotoShop CS5  (2) 2009.10.15
어도비 플래시 플랫폼, PC -모바일 넘어 디지털 가전까지 전방위로 확장 [ 09.07.08 ]  (0) 2009.07.26
Posted by 코멧'★
TAG Adobe, Air 2.0, flash player 10.1, IT, 에어 2.0, 플래쉬
Trackback 1 Comment 2
Flex/AIR/AS3/Skin2009.11.10 04:11

Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기


오랫만에 글을 쓰는거 같네요;; 그동안 너무 바빠서 글을 쓸 정신이 없었습니다 ㅠ_ㅜ

지금도 일이 끝나지 않았지만 처음 블로그를 만들면서 가졌던 마음가짐을 버리지 않기 위해 짬을 내서 ^^;

(원래 계획은 하루 하나씩 글을 쓰자였는데 역시나 아직 블로그 초보라서 그런지 글 하나를 작성하는데 걸리는 시간이 보통 한시간이 넘어감에따라 하루에 하나의 글은 무리인거 같네요 흑... 언젠간 익숙해지겠죠 ㅋ

그럼 이번 글을 쓰게된 목적부터 알아보겠습니다.

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를 추가해 주고 다시 테스트 해보겠습니다.



투명효과 완성~ ^ㅡ^

잘 이해 안가시는 부분은 언제든 댓글을 달아주세요~~ ( 격려의 댓글도 환영해요~ ㅋ )
저작자표시비영리

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

Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기  (0) 2009.11.10
Flash Builder 4에서 Spark Skin 을 Illustrator(FXG)로 만들어 보자!  (3) 2009.10.30
Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!  (4) 2009.10.29
Flash CS4로 Flex Component Skin 제작하기  (0) 2009.10.27
Flash CS3로 Flex Component Skin 제작하기  (2) 2009.10.27
13 Excellent FREE Flex Skins  (0) 2009.10.27
Posted by 코멧'★
TAG Flash, flash builder, flex4, IT, Skin, wmode, 투명
Trackback 1 Comment 0
Flex/AIR/AS3/Skin2009.10.29 17:03

Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!


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"/>


생각보다 내용이 두서가 없는거 같네요 ㅜ_ㅜ;;

시간에 쫒기다 보니 끝부분으로 갈수록 대충 설명하는 경향이 ㅡ_ㅡㆀ 죄송 ㅜ_ㅜ

혹시나 궁금하신 점은 언제든 댓글 환영입니다~~

관련글
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS4로 Flex Component Skin 제작하기
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS3로 Flex Component Skin 제작하기
저작자표시비영리

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

Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기  (0) 2009.11.10
Flash Builder 4에서 Spark Skin 을 Illustrator(FXG)로 만들어 보자!  (3) 2009.10.30
Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!  (4) 2009.10.29
Flash CS4로 Flex Component Skin 제작하기  (0) 2009.10.27
Flash CS3로 Flex Component Skin 제작하기  (2) 2009.10.27
13 Excellent FREE Flex Skins  (0) 2009.10.27
Posted by 코멧'★
TAG Flash, flex4, IT, Skin
Trackback 0 Comment 4
Flex/AIR/AS3/3D2009.10.28 18:37

Flex 4 로 간단한 3D 구현하기

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 objects) here -->
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 코멧'★
TAG 3D, AS 3.0, Flash, flex, Flex 4, IT
Trackback 0 Comment 0
Flex/AIR/AS3/Skin2009.10.27 22:19

Flash CS4로 Flex Component Skin 제작하기




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 파일이 없으신 분들은 아래 파일을 다운받으시기 바랍니다.
Flex Skins.zip

그럼 다운 받으신 파일을
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

관련글 보기
2009/10/27 - [프로그래밍/Flex / ActionScript] - Flash CS3로 Flex Component Skin 제작하기



저작자표시비영리

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

Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기  (0) 2009.11.10
Flash Builder 4에서 Spark Skin 을 Illustrator(FXG)로 만들어 보자!  (3) 2009.10.30
Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!  (4) 2009.10.29
Flash CS4로 Flex Component Skin 제작하기  (0) 2009.10.27
Flash CS3로 Flex Component Skin 제작하기  (2) 2009.10.27
13 Excellent FREE Flex Skins  (0) 2009.10.27
Posted by 코멧'★
TAG Adobe, CS4, Flash, flex, IT, Skin, Templete
Trackback 1 Comment 0
Flex/AIR/AS3/Skin2009.10.27 20:06

Flash CS3로 Flex Component Skin 제작하기



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) <--- 귀찮으신 분들은 여기를 클릭


(링크가 깨졌을 경우 아래 링크로 다운받으세요.)

Flex_Skins_12_05.mxp


를 다운 받으셨으면 이제 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
저작자표시비영리

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

Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기  (0) 2009.11.10
Flash Builder 4에서 Spark Skin 을 Illustrator(FXG)로 만들어 보자!  (3) 2009.10.30
Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!  (4) 2009.10.29
Flash CS4로 Flex Component Skin 제작하기  (0) 2009.10.27
Flash CS3로 Flex Component Skin 제작하기  (2) 2009.10.27
13 Excellent FREE Flex Skins  (0) 2009.10.27
Posted by 코멧'★
TAG cs3, Flash, flex, IT, Skin
Trackback 1 Comment 2
Flex/AIR/AS3/Skin2009.10.27 19:38

13 Excellent FREE Flex Skins

[출처] 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

저작자표시비영리

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

Flex 4.0 - Flash Builder에서 투명 배경의 플래쉬 만들기  (0) 2009.11.10
Flash Builder 4에서 Spark Skin 을 Illustrator(FXG)로 만들어 보자!  (3) 2009.10.30
Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!  (4) 2009.10.29
Flash CS4로 Flex Component Skin 제작하기  (0) 2009.10.27
Flash CS3로 Flex Component Skin 제작하기  (2) 2009.10.27
13 Excellent FREE Flex Skins  (0) 2009.10.27
Posted by 코멧'★
TAG flex, IT, Skin
Trackback 0 Comment 0
파일 구조2009.10.24 23:08

[BMP] BMP 파일의 구조


BMP 파일의 이미지 파일 중 가장 기본적인 파일 형태입니다.

BMP 파일의 특징은 압축이 되어 있지 않아 이미지를 읽어 들이는데에 별도의 연산이 필요하지 않기 때문에 JPG나 GIF 형태의 포멧보다 처리속도가 상당히 빠르며 이미지 파일 포멧 중 가장 화질이 좋은 반면 압축처리를 하지 않음으로써 파일의 용량이 큰 단점을 가지고 있습니다.

1. BMP 파일의 종류
DDB (Device Dependent Bitmap) : 장치에 종속적인 비트맵.
컴퓨터 시스템의 디스플레이 장치가 가지고 있는 부가적인 정보를 이용하여 출력합니다.

장점 : 디스플레이의 정보를 이용함으로 출력 속도가 빠릅니다.
단점 : 다른 종류의 디스플레이 장치에서는 제대로 표현되지 않을 수 있습니다.

DIB (Device Independent Bitmap) : 장치에 독립적인 비트맵.
디바이스(장치)가 가지고 있는 정보를 이용하지 않고 파일 자체적으로 Bitmap을 출력하기 위한 모든 정보를 가지고 있습니다.

장점 : Bitmap을 출력하기 위한 모든 정보를 가지고 있어서 어떠한 디스플레이 장치에서도 동일한 이미지를 표현할 수 있습니다.
단점 : DDB 방식보다 출력속도가 느립니다.

위와 같이 BMP에는 두가지 종류가 존재합니다. 우리가 흔히 보는 bmp 확장자를 가지고 있는 이미지 파일은 DIB 방식으로 저장된 Bitmap 데이타이고 이 파일을 읽어들여 출력하기 위해서 재정의된 형태가 DDB 입니다. 물론, bmp확장자를 가진 파일이 꼭 DIB방식으로 저장된 파일이라고는 할 수 없지만 다양한 시스템에서 사용하기 위하여 현재 bmp 파일로 저장 되어지는 형태는 거의 DIB라고 생각하시면 됩니다.

2. BMP 파일의 구조
 파일 정보 (Bitmap File Header)
 이미지 정보 (Bitmap Info Header)
 색상 테이블 (Pallette)
 이미지의 실제 데이타

파일 정보 (Bitmap File Header)

typedef struct tagBITMAPFILEHEADER {
   WORD bfType; // 파일의 타입 (Bitmap 파일은 반드시 0x42, 0x4D 'BM' 이라고 되어 있어야 함)
   DWORD bfSize; // 파일의 크기 (Byte)
   WORD bfReserved1; // 예약된 값 Reserved (예비값으로 사용되진 않는다. 0x00)
   WORD bfReserved2; // 예약된 값 Reserved (예비값으로 사용되진 않는다. 0x00)
   DWORD bgOffBits; // 실제 이미지 데이타의 offset (파일 정보, 이미지 정보, 색상 테이블 구조체의 크기를 더한 값)
} BITMAPFILEHEADER

 Offset
 Offset  Description
 0x00  파일의 타입 (Bitmap 파일은 반드시 0x42, 0x4D 'BM' 이라고 되어 있어야 함)
 0x02  파일의 크기 (Byte)
 0x06  예약된 값 Reserved (예비값으로 사용되진 않는다. 0x00)
 0x08  예약된 값 Reserved (예비값으로 사용되진 않는다. 0x00)
 0x0A  실제 이미지 데이타의 offset (파일 정보, 이미지 정보, 색상 테이블 구조체의 크기를 더한 값)
(Type : WORD - 2byte, DWORD - 4byte)

이미지 정보 (Bitmap Info Header)

typedef struct tagBITMAPINFOHEADER {
   DWORD biSize; // 이 구조체의 크기
   LONG biWidth; // 비트맵의 가로 픽셀 수 (넓이)
   LONG biHeight; // 비트맵의 세로 픽셀 수 (높이)
   WORD biPlanes; // 비트맵의 플래인 수 (반드시 1로 고정되어야 한다.)
   WORD biBitCount; // 한 픽셀이 가지는 색의 수를 비트로 나타냄 (2의 제곱승으로 표현 - 1이면 흑백(2^1), 4이면 16색(2^4) ... )
   DWORD biCompression; // 압축방식 (BI_RGB : 압축x, BI_RLE4 : 4bit 압축, BI_RLE8 : 8bit 압축)
   DWORD biSizeImage; // 이미지의 크기 (byte)
   LONG biXPelsPerMeter; // 가로 해상도 (미터당 가로 픽셀)
   LONG biYPelsPerMeter; // 세로 해상도 (미터당 세로 픽셀)
   DWORD biClrUsed; // 비트맵에 사용된 색상 수 (0일 경우 모든 색상을 다 사용한다는 의미)
   DWORD biClrImportant; // 비트맵 출력시 필수적인 색상 수 (0일 경우 모든 색상을 다 사용한다는 의미)
} BITMAPINFOHEADER;

 Offset 
0x0E  이미지 정보(Bitmap Info Header)의 크기
0x12  비트맵의 가록 픽셀 수 (넓이)
0x16  비트맵의 세로 픽셀 수 (높이)
0x1A  비트맵의 플래인 수 (반드시 1로 고정되어야 한다.)
0x1C  한 픽셀이 가지는 색의 수를 비트로 나타냄 (2의 제곱승으로 표현 - 1이면 흑백(2^1), 4이면 16색(2^4) ... )
0x1E  압축방식 (BI_RGB : 압축x, BI_RLE4 : 4bit 압축, BI_RLE8 : 8bit 압축) BI_RGB(압축x)일 경우 이 값은 0
0x22  이미지의 크기 (byte)
0x26  가로 해상도 (미터당 가로 픽셀) 거의 사용되지 않음
0x2A  세로 해상도 (미터당 세로 픽셀) 거의 사용되지 않음
0x2E  비트맵에 사용된 색상 수 (0일 경우 모든 색상을 다 사용한다는 의미)
0x32  비트맵 출력시 필수적인 색상 수 (0일 경우 모든 색상을 다 사용한다는 의미)
0x36  비트맵 데이타

색상 테이블 (0x36)

사용하는 경우도 있고 사용하지 않는 경우도 있다.
사용할 경우 첫번째 색상의 BGR, 두번째 색상의 BGR 순으로 테이블이 생성 됩니다.

저작자표시비영리

'파일 구조' 카테고리의 다른 글

[BMP] BMP 파일의 구조  (0) 2009.10.24
[JPEG] JPEG의 파일구조  (0) 2009.10.10
[JPEG] JPEG 개요  (0) 2009.10.09
Posted by 코멧'★
TAG bmp, File, IT, 이미지, 파일, 파일구조, 헤더, 확장자
Trackback 0 Comment 0
Adobe2009.10.23 21:21

어도비-엔비디아, 플래시(Flash) 플레이어 GPU 가속 협력



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

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

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

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

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

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

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

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

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

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

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

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

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

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




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

저작자표시비영리

'Adobe' 카테고리의 다른 글

Adobe CS5 신제품 발표회  (0) 2010.04.14
재미있는 Flash Platform 탐구생활 제1화 당첨~ ^ㅡ^  (2) 2010.03.11
Adobe AIR 2.0 Beta & Flash Player 10.1 Beta 발표  (2) 2009.11.18
어도비-엔비디아, 플래시(Flash) 플레이어 GPU 가속 협력  (0) 2009.10.23
Adobe PhotoShop CS5  (2) 2009.10.15
어도비 플래시 플랫폼, PC -모바일 넘어 디지털 가전까지 전방위로 확장 [ 09.07.08 ]  (0) 2009.07.26
Posted by 코멧'★
TAG abobe, Flash, GPU, IT, Nvidia
Trackback 0 Comment 0
Pixel Bender2009.10.22 17:23

Pixel Bender 기초강좌 및 관련 사이트 모음

About Pixel bender : http://babogomdori.textcube.com/58

Pixel bender Tutorial #1 : http://www.diebuster.com/?p=751
Pixel bender Tutorial #2 : http://www.diebuster.com/?p=759
Pixel bender Tutorial #3 : http://www.diebuster.com/?p=770
Pixel bender Tutorial #4 : http://www.diebuster.com/?p=947

Pixel bender Tutorial : http://wonderfl.net/tag/PixelBenderTutorial

이미지 프로세싱 알고리즘 : http://www.ph.tn.tudelft.nl/Courses/FIP/noframes/fip-Contents.html

Pixel bender 개발자 안내서 번역본 (1/2) : http://codeonwort.tistory.com/entry/픽셀-벤더-개발자-안내서-12
Pixel bender 개발자 안내서 번역본 (2/2) : http://codeonwort.tistory.com/entry/픽셀-벤더-개발자-안내서-22

pixel bender (1) - grayScale에 대해서 : http://cafe.naver.com/uiaa/87
pixel bender (2) : http://cafe.naver.com/uiaa/100
pixel bender (3) - 연습문제 : http://cafe.naver.com/uiaa/128
pixel bender (4) - 윤곽검출 : http://cafe.naver.com/uiaa/143

Pixel Bender Exchange : http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26&loc=en_us

Pixel bender Example : http://www.anttikupila.com/flash/pixel-bender-levels-example/

Ryan Phelan (Pixel Bender category) : http://www.rphelan.com/category/pixel-bender/
저작자표시비영리

'Pixel Bender' 카테고리의 다른 글

Pixel Bender 기초강좌 및 관련 사이트 모음  (0) 2009.10.22
Posted by 코멧'★
TAG IT, pixel bender, 픽셀벤더
Trackback 0 Comment 0
Flex/AIR/AS3/ANT2009.10.21 13:07

Flash Builder Beta 에서 ANT로 ASDoc 문서 만들기

이번에는 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 파일을 보실 수 있습니다.




완성~~

관련글
2009/10/15 - [프로그래밍/Error Code] - [ASDoc] Error : could not find JRE
2009/10/16 - [프로그래밍/Flex / ActionScript] - Flash Builder 4 Beta에서 ANT 사용하기
저작자표시비영리

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

Flash Builder Beta 에서 ANT로 ASDoc 문서 만들기  (0) 2009.10.21
Flash Builder 4 Beta에서 ANT 사용하기  (0) 2009.10.16
Posted by 코멧'★
TAG Adobe, AIR, ant, asdoc, Flash Builder 4 Beta 2, flex, IT, 문서화
Trackback 0 Comment 0
Flex/AIR/AS3/ANT2009.10.16 02:58

Flash Builder 4 Beta에서 ANT 사용하기


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의 사용법은 다음에 리포팅 하겠습니다~;

2009/10/15 - [프로그래밍/Error Code] - [ASDoc] Error : could not find JRE



저작자표시비영리

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

Flash Builder Beta 에서 ANT로 ASDoc 문서 만들기  (0) 2009.10.21
Flash Builder 4 Beta에서 ANT 사용하기  (0) 2009.10.16
Posted by 코멧'★
TAG ant, flash builder, Flash Builder 4 Beta, flex, IT, JDT
Trackback 2 Comment 0
Adobe2009.10.15 23:22

Adobe PhotoShop CS5

지금까지 알려진 Adobe PhotoShop CS5의 기능들을 모아봤습니다.

우선 내부 테스트용으로 만들어진듯한 Photoshop의 모습입니다. 아마도 CS5 버젼의 구동 모습이 되지 않을까 생각되는 화면입니다. CS4 화면도 세련되고 깔끔했지만 CS5의 구동 모습도 상당히 깔끔하네요.



다음으로 Adobe PhotoShop CS5의 Patchmatch 기능에 대한 동영상입니다.
구현 알고리즘과 Patchmatch 기술을 보여 주는데요 정말 놀라울 따름입니다;;;

사진 합성과 복원을 엄청나게 빠르고 아주 간단히 클릭 몇번만으로 끝내버리네요. 정말 놀랍다라는 말뿐이 안나오는 동영상입니다
@,.@; 저런걸 상상하고 구현해낸다는것 자체가 정말 충격이네요;;



다음은 PatchMatch의 기술문서입니다.

Adobe Photoshop CS5 - PatchMatch - http://www.cs5.org



다음으로 새로운 형태의 3D 브러쉬 기능입니다. 이것 또한 놀랍다라는 말뿐이;;; 정말이지 실제로 붓을 이용해서 그림을 그리는 듯한 느낌이네요; 또한 2분 35초 정도 되는 곳을 보시면 2D 이미지에 본을 심는 장면이 보입니다. 아마 보시면 기절하실듯한 기능입니다; ㅋ



아직 빙산의 일각만 공개된거겠지만 정말이지 놀랍네요 단 두가지 기능만으로 그래픽툴의 새로운 혁신이 되지 않을까 싶습니다;;
앞으로 더 많은 기능들이 공개될텐데 무지무지 기대되네요 @,.@
저작자표시비영리변경금지

'Adobe' 카테고리의 다른 글

Adobe CS5 신제품 발표회  (0) 2010.04.14
재미있는 Flash Platform 탐구생활 제1화 당첨~ ^ㅡ^  (2) 2010.03.11
Adobe AIR 2.0 Beta & Flash Player 10.1 Beta 발표  (2) 2009.11.18
어도비-엔비디아, 플래시(Flash) 플레이어 GPU 가속 협력  (0) 2009.10.23
Adobe PhotoShop CS5  (2) 2009.10.15
어도비 플래시 플랫폼, PC -모바일 넘어 디지털 가전까지 전방위로 확장 [ 09.07.08 ]  (0) 2009.07.26
Posted by 코멧'★
TAG CS5, IT, Photoshop, 포토샵
Trackback 0 Comment 2