작년 요맘때 삼성에서 T*Omnia 핸드폰을 출시 하였고 그때 당시 사내에서 모바일에 멀티 콘텐츠 브라우징 인터페이스를 Flash Lite로 개발하여 올려볼 일이 있었습니다.

그때 테스트 후에 재미삼아 Youtube 임베디드 플레이어 API를 이용해서 Youtube의 주요 카테고리(최신영상, 가장 많이 본 영상 등)를 볼 수 있는 모바일 애플리케이션을 Flash Lite을 이용해 만들어 봤습니다.

모바일 디바이스는 데스크탑 PC에 비해 그 사양이 매우 낮기 때문에 Flash Lite 3.1 플레이어 역시 기술 지원이 데스크탑에 비해 제한적입니다.  하지만 모바일 환경에서 Flash의 Rich UI를 제공할 수 있다는 것은 Flash Lite 의 큰 장점입니다.

최근 Adobe Max 에서 발표한 Flash 10.1에 대한 기대는 모바일 부분에서도 상당한 것으로 알고 있습니다.  일찍이 국외 스마트 폰에는 Flash 대응을 위해 많은 노력을 기울익 있습니다.
하지만 국내에서는 임베디드 시스템에 다이나믹한 UI를 제공하기 위한 수단으로만 사용될 뿐 개발자를 위한 환경에는 별 관심이 없어 보여 아쉬움이 남습니다.

서두가 길었습니다.

개발했었던 mtube 소개나 할까 시작한 글인데요 : )



개발에 필요한 요소
1. Youtube Embed Player API & Data API
2. ActionScript 2.0 on Flash CS4
3. Flash Lite 3.1
4. Adobe Mobile Packager

개발에 필요한 요소는 위의 4가지 입니다.  개발 후 Adobe Mobile Packager 을 이용해 패키징 하여 디바이스에 설치하여 사용할 수 있습니다.

Adobe Mobile Package Example from rhiokim on Vimeo.


Adobe Mobile Programming Example from rhiokim on Vimeo.



테스트 장비
5. Window Mobile 6.x
6. Samsung T*Omnia(SCH-M490)

최근 옴니아 2가 좀더 나은 스펙으로 출시 되었던데 그 폰에서는 원활이 구동되지 않을까 짐작해봅니다.  사실 이 mtube 애플리케이션은 옴니아에서 메모리 오류가 발생합니다. 

이유 인 즉, Youtube 임베디드 플레이어가 모바일 용이 아니다 보니 : (  메모리 점유율이 상당히 많더군요. 뿐만 아니라 동영상 또한 버퍼를 이용하므로 많은 메모리를 요구하게 됩니다.

mTube based on Flash Lite 3.1 from rhiokim on Vimeo.



첨부한 Youtube.metadata 와 Youtube_1.0.0_English (US).cab 파일을 폰에 저장하고 cab 파일을 설치하면 됩니다.  소스와 클래스 다이어그램을 첨부합니다.


개발 경험에 대한 정리도 할 겸 간단히 Flash를 이용한 Mobile 앱을 개발하고픈 개발자에게 도움이 될까 공유해 봅니다.  

Tip, JavaScript 나 ActionScript 나 그 표준(ECMA-262)이 같기 때문에 근본적인 원리를 알고 접근한다면 매우 쉽고 재미있는 기술입니다.

클래스 다이어그램
 

매우 단순한 구조로 되어있습니다.

Youtube Class는 main class로 Controller 담당하고
Embed Class는 Youtube 임베디드 플레이어 모델 담당, List Class는 Youtube XML Data 모델  담당,  Container는 동영상 클립들을 제어 관리 모델 역할을 합니다.


신고
Posted by Rhio.kim

예전에 JavaScript를 이용한 Local Shared Object 라이브러리를 블로그에 소개했었는데요.  
  1. SharedObject in Macromedia Flash
  2. Shared Object library - powerful browser cookie?

이는 일종의 브라우저 쿠키와 매우 유사하지만 그 기능은 좀더 강합니다. 하지만 Expire에 대한 메커니즘은 포함되어 있지 않습니다.

제가 개발했던 Shared Object 제어를 위한 JavaScript 라이브러리는 사용자 PC에 .so파일을 생성하여 Flash Movie에서 이 .so 파일에 데이터를 읽고 쓸 수 있는 방식이였습니다.  이로써 제한적인 쿠키의 제한적인 부분을 해소해 보고자 했었습니다.

하지만 Ajaxian.com 에 소개된 jsSO – Flash Shared Objects in JavaScript는 Adobe Systems의 FMS(Flash Media Server)와 같은 RTMP 프로토콜을 사용하는 서버(이하 RTMP 서버)를 통해서 하나의 공유 객체를 동일 Flash Movie를 사용하는 사용자들끼리 이 객체를 공유할 수 있게 됩니다.

간단히 아래의 구조를 갖습니다.  

 

RTMP 프로토콜은 아래 링크를 참고해주세요.
http://ko.wikipedia.org/wiki/리얼_타임_메시징_프로토콜 
http://www.adobe.com/aboutadobe/pressroom/pressreleases/200901/012009RTMP.html

실제 위의 web-user1 과 web-user2는 Shared Object 의 정보를 갖고 또한 실시간(real-time)으로 RTMP 서버에 의해서 각 유저들에게 공유 객체의 데이터를 보내게 됩니다.

jsSO 개발자도 JavaScript에서 게임과 채팅과 같은 애플리케이션을 개발해보고자 한듯 하네요.

Adobe의 FMS 3.5를 제외한  Red5Mammoth 의 경우에는 오픈 소스 프로젝트로 진행중입니다.
위 서버와 구조를 잘 활용한다면 매우 재미있는 서비스들을 많이 개발할 수 있을 것입니다.




위 소스는 사내에서 Red5 에 대한 분석자료를 만들면서 예시로 만들었던 라이브 스트리밍 혹은 퍼블리싱 되는(FLV, MP4, AVI, MP3) 스트리밍을 보는 예제 소스입니다.  혹 도움이 될까해서 올려봅니다.

jsSO - Flash Shared Objects in Javascript
Ajaxian.com : http://ajaxian.com/archives/jsso-flash-shared-objects-in-javascript
Red5 : http://osflash.org/red5
Mamoth : http://mammothserver.org/

신고
Posted by Rhio.kim
http://labs.adobe.com/technologies/distributableplayer/

그동안 Private Beta 테스트를 해온 Distributable Player Solution(이하 DP)이 정식 발표를 하였습니다.  여기에는 Adobe Mobile Packager 가 함께 포함됩니다.

이를 이용하면 데스크탑 Flash Application 모델을 그대로 모바일에 적용하여 수행할 수 있게 합니다.  당연 개발은 Flash Lite 3.1상에서 개발해야 겠죠.  Flash Lite 3.1 은 Flash 10에 비하면 지원여부가 매우 작지만 Flash의 주요 기술중 핵심 기술들은 대부분 구현이 가능합니다. Flash Application 개발자들에게는 더 없이 좋은 소식이 되겠네요.

Adobe Mobile Packager를 이용하여 .CAB 형태로 Package하여 Window Mobile 플랫폼에서 Standalone Application으로 동작할 수 있도록 합니다.  간단히 Package 테스트 및 환경 구축에 대한 내용은 아래의 내용에 추가했습니다.  또한 Adobe 에서도 ScreenCast가 있으니 함께 보시면 큰 도움이 되리라 봅니다.

Flash Lite DP 를 Window Mobile 6.x, 5.0의 Smart Phone 그리고 Symbian S60에서도 이용할 수 있게 되었습니다.  간단히 아래의 그림과 같은 방식(Workflow)으로 생성 및 배포, 실행할 수 있게 됩니다.
 
이미지 출처 : Adobe Lab


필요 요소
  개발 PC
    - Flash Professional CS3 or CS4, Device Central CS3 or more
    - MicroSoft ActiveSync

  Mobile Device(Flash Lite 3.1 Distributable Player) 
    http://labs.adobe.com/downloads/distributableplayer.html

    Download the Developer edition for Windows Mobile 5.0 Pocket PC (ZIP, 930 KB)
    Download the Developer edition for Windows Mobile 5.0 Smartphone (ZIP, 926 KB)
    Download the Developer edition for Windows Mobile 6 Professional (ZIP, 928 KB)
    Download the Developer edition for S60 devices (SIS, 675 KB)


Adobe Mobile Packager Test 내용

더보기



테스트 해보고 픈 마음에 만들어 놓았던 Image Viewer와 Video Player는 삼성 T*Omina(SCH-M490)에서는 돌아가질 않네요.
 
이제 iPhone용 Distributable Player만 발표 되면 되는 걸까요?  이것만 출시 된다면 다양한 플랫폼에 있어서 Flash의 입지는 좀더 강해지지 않을까 생각을 해봅니다.

참고자료
Adobe Video : http://tv.adobe.com/#pg+15313
PDF : http://labs.adobe.com/downloads/distributableplayer.html 
Flash Lite : http://www.adobe.com/products/flashlite/ 

신고
Posted by Rhio.kim

삼성 T*OMNIA(옴니아) Phone 에서 Flash Lite 3.1 개발을 위한 준비

사용자 삽입 이미지

모바일 시장이 꾀 빠르게 변화하고 다 각도로 생활에 자리를 잡아가는 것 같습니다.  최근 불경기임에도 불구하고 삼성에서는 모델명 SCH-M490의 T*Omnia Phone를 내놓았습니다.  그것도 100만원 정도의 부담을 주는 가격으로 또한 Apple에서는 iPhone와 기존에 iPod Touch 2세대를 내놓았고  iPhone 국내 출시도 머지 않았습니다.

두 기기 뿐만 아니라 Nokia 에서도 새로운 모델을 통해 웹 기반의 강력한 환경을 지원하기 위한 발전이 매우 빠르게 이뤄지고 있고 Google의 Android 플랫폼의 아고라 또한 내년 초에 그 모습을 드리운다고 하니…

과연 이런 변화가 웹의 생태에도 영향을 미치지 않을까 라는 생각을 요즘 들어 많이 하게 됩니다.  또 하나의 이유인 즉 저 역시 iPod Touch 2세대를 열심히 사용중인데 사용할수록 매우 강한 인상을 받습니다.  아침에 눈떠서 화장실에 갈 때도 자리에 누워서 잠을 자기 전까지 출근할 때나 자투리 시간이 남을 때면 핸드폰 보다 아이팟을 더 보게 됩니다.  이렇듯 생활에 필요한 하나의 큰 문화로 자리를 잡아간 다는 것.

아마도 또 다른 많은 기기들에 의해서 그렇게 생활의 주요 일부분을 의지하게 되지 않을까요?

또한 그것들의 기술에 대한 궁금증으로 사로잡혀 헤어나기가 쉽지 않습니다.  기기들의 안의 컨텐츠는 웹 기반의 매우 다양한 솔루션들을 제공합니다. 

이렇듯 자기의 생활의 Storage를 자그마한 기기에 담고 다니는 것입니다.
이것들의 또 하나의 강력한 기능은 당연 Data Portability 일 것입니다.  이젠 이 Data 가 Life 혹은 Human Memorize 되는 날이 머지 않은 듯 합니다.

서두가 길었던 것 같습니다.

T*Omnia와 Apple iPhone 에 대해서 벤치마킹하고 싶은 마음도 간절합니다.
허나 그것보다 기기 위에 올려질 개발자들의 산물에 일부분들이 어떻게 효율적으로 개발되어질 수 있는지 그러한 경험들을 공유 해보고자 합니다.


Flash Lite 3.1 에 대한 이해

참고 : http://www.adobe.com/products/flashlite/
Flash Lite 3.1은 Mobile Opera build 1957 버전에서 그나마 안정적으로 지원되고 Internet Explorer 브라우저에서는 아직까지 지원되지 않는 모습이다.

 

사용자 삽입 이미지


이는 Adobe 사의 Flash Lite의 Archtecture 입니다. Lite 2.1에 비해 변화한 모습입니다.
http://www.adobe.com/products/flashlite/version/ 이곳을 통해 버전별 비교 모습을 보시면 좋겠습니다. 

위 자료에 보면 MPEG-4 and other video formats 부분에 (On2, Sorensen, and support for H.264) 라는 Support 여부에 대한 언급이 있는데 몇번의 H.264(AVC/AVV) 인코딩 된 영상 파일에 대한 테스트를 해 보았지만 재생은 되지 않았다.  어떤 조건이 맞지 않았는지 자세히 찾아 보지는 않았습니다.

그리고 Flash 내에서 표현되는 컨텐츠 요소마다의 Sound 제어할 수는 없는 것 같습니다.  두개의 멀티미디어 콘텐츠를 재생하려 할때 각기 다른 볼륨 컨트롤이 지원되지 않습니다.  SoundTransform Class가 따로 존재하지 않더군요.


옴니아 환경 정보 확인 

SCH-M490 모델 Windows Mobile 6.1 플랫폼에 Internet Explorer 과 Opera Mobile 두 가지의 브라우저가 Embed 되어있습니다.  그나마 Flash Lite가 안정적으로 지원되는 Opera는 설정 부분에서 Flash 지원여부를 선택함에 따라서 Flash를 사용할 수 있게 됩니다.

옴니아 초기 Opera 버전은 따로 최적화 작업을 한 것인지 모르겠으나 build 15110 으로 되어있다.  1511 버전을 안정화 한게 아닌가 생각이 듭니다.

인터넷에 찾아보니 옴니아 추출 버전이라고 하여 build 1957이 공유 되어지고 있는 것은 확인하고 옴니아에 인스톨해서 사용해 보았지만 Flash Lite는 돌아가지 않았습니다.

추가적인 한가지 인터넷 상에 배포되어지고 있는 대부분의 Mobile Opera 버전을 다운로드 받아 옴니아에 설치해서 구동시켜 Flash Lite 3.1 환경 테스트를 해보았지만 어느 하나 정상적으로 표시되는 것은 보지 못했습니다.

그리고 옴니아 폰에서는 Flash Lite 3.1을 기본적으로 지원하지 않습니다.  이는 따로 배포하고 있는 Flash Lite 3.1 Plug-In을 설치하여야 가능합니다.  Window Mobile 6.1에 embed 된 Flash Lite의 버전은 잘 모르겠지만 Flash가 브라우저상에 렌더링 되지 않았습니다.


옴니아 폰 환경 설정

Flash Lite 3.1 Plug-In은 정확한 배포 버젼을 다운 받아 Mobile 기기에 인스톨을 해주면 됩니다.

Mobile Opera의 경우에는 초기 폰에 설치되어 있는 버전의 설정 > 고급설정 > 플래시 사용 에 체크를 해줌으로써 기본적인 Flash Lite 3.1 개발 환경은 갖춰지게 됩니다.


Flash CS4 개발 환경

Flash 개발 환경은 CS4 와 CS3 모든 버전에서 동일합니다.

기본적으로 Flash Project 생성시 publish setting 에서 Player version, ActionScript version을 설정해 주게 됩니다.  Player는 Flash Lite 3.0 혹은 Flash Lite 3.1로 설정하고 ActionScript 2.0 으로 설정을 하고 개발하면 됩니다.

사용자 삽입 이미지


초기 개발에는 Player version을 Flash Player 8으로 설정하고 개발하면 되고 디버깅시에만 Flash Lite 3.x에 맞추면 됩니다.

디버깅이라는 것은 Adobe Device Central 을 이용해서 실제 모바일 환경에서 테스팅 할 수 있는 에뮬레이터가 뜨는데 이는 Adobe 사에서 온라인을 통해서 최신의 Device Profile 들을 제공해줍니다.  하지만 SCH-M490 모델은 없다는 것

하지만 Adobe Device Central CS4 의 기본 Flash Lite 3.1 에뮬레이터를 제공하니 표준에서 개발하시면 별 무리 없이 지원이 됩니다.

사용자 삽입 이미지

Adobe Device Central CS4

사용자 삽입 이미지사용자 삽입 이미지
다양한 Device 환경을 제공


위에 간략히 소개한 것은 웹 기반의 Flash Lite 3.1의 환경을 위한 것이고 실제로 Standalone Application 개발을 위해서는 현재 Adobe AppZone 에서 Distribute your content 탭에 보면 private beta 로 서비스 중입니다.

이와 관련된 정보는 http://www.adobe.com/devnet/devices/ 에서 참고할 수 있습니다.

모바일 환경에서는 Flash Lite 뿐만 아닌 MS의 Silverlight Mobile 또한 발표된 바 모바일 어플리케이션의 주요 기술로 두 사의 경쟁이 어떨지 기대됩니다.

최근 Flash 환경에서 웹과 모바일의 간단한 UI 개발 기회가 있어 경험을 쌓게 되었는데 ActionScript 2.0의 모태는 ECMAS-262 Spec을 따르고 있어서인지 JavaScript와 매우 유사한 모습을 띄우고 있습니다.

그리고 ActionScript 3.0 부터는 ECMAS4 Spec을 따르고 있어서 객체지향 언어로서의 완벽한 모습을 갖추고 그래서 인지 적응하기도 매우 빨라 보입니다.  UX 분석을 통한 디자인, 설계는 쉽지 않은 과제인 것 같습니다.

정리할 내용도 많고 개발에 필요한 환경 그리고 설정들에 관해서 좀더 디테일한 정보를 공유하고 싶네요.

요 아래 Mashup Contest 홍보 포스팅도 몹시 간략히 했지만 올해 매쉬업 경진대회에서는 이런 Mobile분야로 서비스 할 수 있는 Mashup Application도 나오면 어떨까?  짧은 아이디어를 내봅니다.


개발 가이드 : http://help.adobe.com/ko_KR/FlashLite/2.0_FlashLiteDevGuide2/

신고
Posted by Rhio.kim
사용자 삽입 이미지


























Shared Object 에 대한 자료입니다.
몇일전에 이와 같은 게시물을 기재했었는데.. 요~ 밑에..
크로스 도메인에 대한 문제가 맞았던거 같습니다.

아주 간단하게 해결되었고 유용하게 사용될 수 있는 라이브러리로 만들었습니다.

PDF 내용으로 요약 정리하였습니다.
javascript library 와 swf 를 함께 첨부합니다.

사용법이나 궁금한 사항은 언제든지 메일이나 댓글을 통해서 날려주세요..


신고
Posted by Rhio.kim
SharedObject outline 입니다.  기술 관련 문서는 docx 파일을 참고하시면 됩니다.

FireFox 의 globalStorage 과 유사하게 구현했으며 차후 유연한 연동 및 extansion 을 위해서 비슷하게 구현합니다. [docx 파일 내용은 그림 아래 추가했습니다. 그리고 javascript 라이브러리는 추후 공개합니다. ]

Shared-Object 를 잘 활용하면 정말 파워풀(?)한 웹 기반 Application을 만들 수 있겠습니다.
Dojo Toolkit 에서도 localStorage 를 위해 Shared Object를 활용하고 있습니다. (Dojo.Storage)

사용자 삽입 이미지












Shared Object 란 무엇인가?

Shared Object Macromedia flash MX 의 새롭고 강력한 기능입니다. 

Shared Object 를 사용하는 방법은 많이 있고 이 문서는 여러분들에게 기초적인 개념들을 얻게 해줄 것입니다.

Shared Object의 다양한 사용 법은 유저의 점수, 좋아하는 색깔 혹은 마지막 방문했던 곳을 기억하는 것을 포함합니다. 아래의 예제는 사용자에 의해 입력된 이름이 저장되고 여러 번 방문했었던 사이트는 Shared Object의 기능을 사용하게 됩니다.

 

Shared Object 는 클라이언트에 저장된 데이터를 사용합니다. 이것은 데이터가 웹 브라우저를 통하여 생성되어진 쿠키와 유사한 방식으로 저장되어집니다.

 

생성된 그 데이터는 Shared Object에 의해 생성된 같은 도메인에서만 오직 읽을 수 있습니다.

 

이것은 한가지 방법입니다. Macromedia Flash Player 는 유저의 컴퓨터에 데이터를 쓸 수 있습니다.  그들이 정보를 제공하지 않는다면 Shared Object 는 사용자의 이메일 주소 혹은 다른 개인적인 정보를 기억할 수 없습니다.

보안을 위해서 http://download.macromedia.com/pub/flash/whitepapers/security.pdf 이 자료를 더 참조해야 합니다.

 

1.     Using Shared Objects
A. Shared Object
getLocal 메서드를 이용하여 Shared Object를 생성해라.  무비의 myLocalSO 변수를 설정하고 아래의 ActionScript “flashcookie”의 이름을 갖는 Shared Object를 할당한다.

//create the local Shared Object

myLocal_so = sharedobject.getLocal("flashcookie");

만약 “flashcookie” 라는 이름을 갖는 Shared Object가 미리 존재하지 않는다면 Macromedia Flash Player 는 그 이름을 갖는 Shared Object 를 생성할 것입니다.
B. localPath
라 불리는 선택적인 파라미터는 Shared Object 생성을 위해서 또한 설정할 수 있습니다.  localPath 파라미터는 Shared Object 가 사용자 컴퓨터에 저장될 장소를 지정할 수 있습니다.  이 경로는 SWF의 위치와 매치되거나 URL을 함께 포함되어 집니다.
 
그러므로 Movie http://www.mysite.com/movie/movies.swf 라는 localPath 파라미터를 설정했다면 사용자 컴퓨터에 http://www.mysite.com/movie/movies.swf, /, /movies 혹은 /movies/movies.swf 경로에 Shared Object 를 생성한다.

코드는 아래와 같이
myLocal_so = sharedobject.getLocal("flashcookie","/movies/mymovie.swf");

하나의 사이트에서 한 개 혹은 그 이상의 Shared Object를 사용할 때 유용합니다.
예를 들어 localPath 를 루트 레벨로 하여 생성된 Shared Object는 사이트 내의 모든 movie 에서 접근이 가능하게 됩니다. (localPath “/”로 설정한 경우) 그리고 다른 정보들은 각각의 movie 에서 저장한 Shared Object 에서만 접근만 허용합니다. localPath movie 에 지정하게 됩니다. (localPath /movies/mymovie.swf 로 설정한 경우)

2.  Shared Object의 값 설정
정보들은 Shared Object의 데이터 프로퍼티에 할당된 속성에 의해서 저장 되어집니다. 아래의 Movie의 텍스트 입력창에 입력된 사용자 이름은 Shared Object의 데이터 프로퍼티에 할당한 속성과 동일합니다. 아래와 같이 하면 됩니다.

/set the variable “name” equal to the text property
//of the textfield “username”
myLocal_so.data.name = username.text;

//increase the variable counter by one for each visit
myLocal_so.data.counter++;

데이터는 Movie Macromedia Flash Player에서 제거되어질 때 Shared Object에 써집니다. 데이터를 쓰기 위해서 바로 flush 메서드를 아래처럼 사용하면 됩니다.

myLocal_so.flush();

3.     Shared Object 의 값 반환
사용자가 페이지로 되돌아 왔을 때 Shared Object는 읽고 그 값을 표시한다.

userName.text = myLocal_so.data.name;
numVisits.text = “You have been here “ + myLocal_so.data.counter +”times.”


왜냐하면 myLocal_so = Shared Object.getLocal(“flashcookie”); 와 같이 Shared Object “flashcookie”는 이미 사용자 컴퓨터에 생성되어져 있기 때문에 사용자 이름과 방문횟수를 Shared Object에서 데이터를 얻을 수 있는 것입니다.


사용자 삽입 이미지

a.site.com 에서 생성된 데이터(Shared Object)를
b.site.com 에서 사용할 수 있는 방법이나 트릭을 아시는 분든 좀 알려주세요.


관련 정보
wikipedia : http://en.wikipedia.org/wiki/Local_Shared_Object




신고
Posted by Rhio.kim