Take a webcam snapshot in Flex 2.0

출처 : http://blog.newmovieclip.com/2006/05/26/take-a-webcam-snapshot-in-flex-20-beta-3/

The bitmapdata class is also represent in Flex offcourse but finally I had the time to test a few things. In this little article I want to show you how you can easily capture a snapshot from a webcam in Flex 2.0. Because I want to do some more experiments later on I created an actionscript component that immediately embed the webcam image in a Panel. So we need to extend the Panel class to make our custumized WebcamPanel class. This sound difficult but it really isn’t. Let’s go ahead !
First make a new Flex project by choosing File > new > Flex Project. Give your project the name you like eg WebcamTutorial.

Next we are going to build our custom WebcamPanel component. Make some new “actionscript class” in your project by choosing File > new >actionscript class. As package we choose myComponents and we call our class WebcamPanel. As superclass we choose mx.containers.Panel.
We want to have all the functionality from our parent class so in the constructor of our WebcamPanel class we call the super() method.

As you see in the constructor we also calling another method called insertWebcamVideo(). These method looks like this:

The first thing we do in the insertWebcamVideo method is declaring a variable videoHolder of the UIComponent type. We must do this to avoid getting errors when adding this as a child to our Panel. I tried casting to an UIComponent also but this way seems to be the only working. The next step is to put our camera stream into a Video object by using the attachCamera method. Next we want to make this all visible (= put it in the DisplayList) by using the addChild method. This way we first put our video object in the videoHolder and last but not least we put our videoHolder in the Panel which we are inheriting from. In the example code above we also changed the y value of our videoHolder to make it look a bit better in the Panel.

Ok, now we have following actionscript class:

Next step in our webcam project is to use our actionscript component in a mxml application.

Choose FILE > new > MXML application. Give it eg the name “MainApplication”.

Your MainApplication.mxml looks like this:


You can see we are now using the default adobe namespace defined by mx prefix.
But we also want to use our own namespace where our components are defined. Change the application opening tag so it looks like this:

As you can see we can now reference all our own components in the package myComponents with a prefix “MyComp”.
This is really cool ! So lets implement our component in our application and skin our panel (YEAH, skinning is sooo damn easy in Flex !) Type following code right under your opening tag:
This is the code that places our own WebcamPanel on the screen. You see we use our own MyComp namespace to reference our component. Next we want to place a normal Panel where we are going to place the snapshot later on :
We also place a button instance on the screen by writing following code:

As you can see at then end of last code we call a function takeSnapshot() when a user click on the button. So next we have to do is writing that function that will do the snapshot job. We write this function in actionscript between tags. These tags are placed directly under your application tag. As mxml files are based on the XML standard we have to use a CDATA section wherein we write our actionscript code. So the start situation is like this :
< ![CDATA[ //write code here ]]>
Place following code between your CDATA section:

As you can see in the function takeSnapshot we use the same technics as in the beginning of this article. We start by declaring a Bitmapdata object with width 320px and height 240 px. We put the bitmapdata in a real Bitmap object. Normally we should try now to add this Bitmap as a child to the Panel pnlSnapshot but also here it is not possible to add it directly because of type problems. So we use a snahshotHolder to store our bitmap. That snapshotHolder can easily be added to our pnlSnapshot as a child. After or before (you can choose) we did that we can call the draw() method of the BitmapData class to put the captured data in our bitmapData object (snapshot) and the job is done !

I hope you liked this tutorial and feel free to give some feedback

AdobeMaxK1-3D-immersive

Flash Low-Level 3D API : Molehill 에 대해..

작년 Adobe MAX 2010에서 선보였던 Flash기반 3D API, Codename ‘Molehill’ 에 대해 포스팅 하려고 합니다.
참고사이트 : http://labs.adobe.com/technologies/flash/molehill/

Flash Player 10.2 까지 플래시플랫폼에서 지원하는 3D기능들은 전부 Software Rendering방식으로 구현됩니다. 이는 CPU에 치중된 방식이기 때문에, CPU점유율이 많이 올라가며 좋지않은 퍼포먼스를 보입니다. 그렇기에 Molehill에서 강조했던 가장 큰 기능인 CPU가 아닌 GPU Hardware Accelating 은 차원이 다른 퍼포먼스를 보여줄수 있다는 강점이 있습니다.

주요 특징으로는,
1. z-buffering
2. stencil color buffer
3. vertex shader

이들은 Flash Platform최초로 GPU를 이용한 3D구현하는 공식API라는 점에서 의미가 있습니다.
Windows에서는 DirectX기반으로,  Mac,Linux에서는 OpenGL 1.3, 모바일에서는 OpenGL ES기반으로 작동된답니다. 이도저도 아닌 플랫폼에서는 기존처럼 소프트웨어렌더방식이구요.

아래에는 이를 활용하여 제작된 3D게임들 영상입니다. 퍼포먼스를 확인해보세요~ 깜짝 놀랍니다 ㅋ

MAX Racer – 3D Flash Game with P2P Multiplayer from Tom Krcha on Vimeo.

[하단의 이미지와 링크들은 지돌스타님 블로그에서 발췌했답니다]

Adobe Labs – 3D APIs for Adobe Flash Player and Adobe AIR
Adobe MAX 2010에서 소개된 차세대 GPU 가속 Flash API – Molehill
Molehill Flash Player 3D APIs 소개
Flash Player 3D APIs 간단한 소개글 – 잼있음
[동영상][at MAX 2010] GPU Acceleration on Adobe AIR “Molehill” – 우야꼬 군이 직접 미국에 MAX 행사에가서 찍은 영상입니다.
[동영상][at MAX 2010] Alternativa 3D in Adobe MAX 2010 – 우야꼬 군이 직접 미국에서 Molehill을 체험했군요.
[동영상] Adobe MAX 2010 – Alternativa 3D 시연 – 땡굴이 님께서 Alternativa의 시연모습을 동영상으로 담았습니다.
Molehill Programming Tutorial
ActionScript의 언어 순위는 몇 위일까?

1055354877

iOS Packager를 사용하여, iPhone/iPad어플 개발하기 #1

오랜만에 포스팅을 하네요.

Apple에서 iOS 4.0을 출시하면서, 앱스토어 정책을 변경하여,
플래시 혹은 ThirdParty Tool을 사용하여 iOS Application개발이 가능해진 사실은 많은분들이 알고계실겁니다.
사실 플래시를 사용하게 해주고 싶어서라기보다는, Quake Engine for iOS 같은 훌륭한 게임엔진들의 사용을
가능하게 해주려고 하다보니 덩달아서 Adobe FlashPlatform이 덕을 본게 아닌가 생각됩니다.

일단 Mobile Device (Touch기반) 과 PC와의 가장 큰 차이점은 Input장치에 있습니다.
키보드,마우스를 사용하느냐 아니면 손가락을 사용하여 터치스크린을 제어하느냐 이 부분이 사용자들이
가장크게 느끼는 차이점일 것이며, 개발자입장에서는 기존에 고려하지 않았던(고려할필요가 없었을수도 있죠)
Device의 CPU, RAM사용량의 최적화가 많은 걸림돌이 될것입니다.

가장 좋은 퍼포먼스를 보여주기 위해서는, 권장하는 언어를 사용하여 Native로 제작하는 것이 가장 좋겠습니다만,
간단하게 손쉽고 빠르게 프로토타입정도 수준의 Application을 제작할때는 Flash/AIR 만한 툴도 없다고 생각합니다.
(물론 제가 익숙해서 이게 편한거겠지만요 ^^)

현재 Adobe에서 제공하는 레퍼런스는 상당히 내용면에서 빈약하다고 할수밖에 없습니다.
http://help.adobe.com/en_US/as3/iphone/index.html
위의 주소에서 간단한 Description을 확인하실수 있습니다.

아이폰 어플을 제작할때는 퍼포먼스를 극대화 할수있는 모든방법을 총동원해야 할것 같습니다.
(사실 Web-Application, RIA등을 작업할때는 귀찮아서 신경안썼던 방법까지두요)

아이폰어플개발을 하며 가장 크게 문제가 되었던 부분들에 대해서 앞으로 여러차례에 나눠서 포스팅을 하려고 합니다.
1. Tweener
2. Touch, Gesture, SupportedGesture
3. BitmapCaching (cacheAsBitmap, cacheAsBitmapMatrix)
4. EventListener의 선언시점
5. NativeCommand, ExternalInterface등의 Mobile에서만 존재하는 특수기능들

아직까지 geoLocation을 사용하여 활용해보진 않아서, 이런 부분들도 나중에 추가할생각입니다~
아이패드어플 Prototype 작업하면서 얻을수 있는 팁들은 전부 포스팅할까합니다.
자료를 찾아보려고 했는데 정말 없더라구요. 저라도 써보려구요 ㅎㅎ

PS> 트위터를 통해서 비트맵캐싱에 대해 조언해주신 세계의끝님, 우야꼬님 감사합니다.

1235749692

AlivePDF 0.1.5 RC : PDF Generator in Actionscript 3.0

Actionscript Open-Source PDF Library를 소개합니다.
Client-Side에서 PDF파일을 생성해주는 오픈소스 라이브러리입니다.

현재 0.1.5 RC 버젼까지 공개되어있습니다.

AlivePDF 사이트 바로가기
Tutorial 사이트 바로가기

AIR 혹은 FLEX Application에서 사용한 데모를 보실수도 있습니다.

Pradeek’s Weblog : How to create a PDF file with FLEX/AIR
위의 블로그를 보시면 어떤식으로 PDF를 생성하는지 예제를 볼수 있습니다.

MarinesPaper(가칭)을 개발완료할 시점에서 Output설정부분을 작업할때,
이 부분의 사용법 혹은 예제를 설명하도록 하겠습니다 ^^

ActionscriptIcon_400

Rotate the BitmapData in Actionscript 3.0 (비트맵 회전하기)

Matrix클래스를 사용해서 BitmapData를 변형하는 방법입니다.
다음은 BitmapData를 회전하는 방법입니다.

Bitmap.rotation 으로 회전이 가능하나, 회전된 값으로는 저장이 안되있는거 같더군요.

위의 방식으로 회전이 가능합니다~^^

1066953191

[MarinesPaper] 스캔이미지 자동보정 프로그램

오랜만에 글을 쓰네요.
iPad구입후 집에 책들을 전부스캔뜨느라고 정신이 없어서^^

스캔을 뜨다보니 스캔뜨는것보다 후보정이 더 큰일이라는걸 깨달았습니다. ㅠㅠ

ePub제작프로그램들을 검색하다가 발견한 프로그램입니다.

사용자 삽입 이미지

바로가기 : Comic4Portable v0.7

노움워리어님이 정말 편하게 잘 만들어주셨습니다.
댓글들을 보시면 알겠지만, 정말 많은분들의 의견을 수렴해주고 계시더라구요 ㅎ

위의 프로그램을 쓰면서, 딱 한가지 기능이 더 있으면 좋겠다 싶어서 한번 만들어보려고 합니다.
모 대단한건 아니지만, 개발진행과정을 블로그에 써보려고 합니다.
(사실 요즘 블로그를 자꾸 안쓰게 되서말이죠 하하, FLEX 4.0 나왔는데 공부도 좀 할겸)

개발언어 :  Actionscript 3.0, Flex 4.0 SDK, Adobe AIR 2.0

위의 프로그램과 기능은 비슷하겠지만, 추가적으로 Deskewing(Auto-Straightening) 기능을 추가할 예정입니다.
Thread를 쓸수 없는게 좀 퍼포먼스상 단점이 될거 같긴합니다만, AIR특성상 맥에서도 사용가능하니,
그거로 만족하려구요.
지원가능한 Output포맷에 대해서도 좀 쳐다봐야겠습니다.
이미지가 아니라 ePub, PDF 파일을 생성하는건 안해봐서 말이죠 ^^


[그림-1] 기본적인 이미지 프로세싱 절차

UI구현에 있어서, 욕심을 좀 부리고 싶으나 그건 차차 업데이트 하면서 진행하기로 하고..
일단 기능구현먼저 빨리 해봐야겠어요. 짬짬이~ ㅎ

1051197280

Adobe AIR 2.5 SDK for Android


Adobe® AIR® – Android Developer Prerelease : Register Now

https://prerelease.adobe.com/callout/default.html?callid={AEF64EB4-A977-4317-909A-14AD8014BA21}
사용자 삽입 이미지
Adobe에서 공개한 AIR for Android SDK 2.5 입니다.
http://labs.adobe.com/technologies/air2/android/

현재 prerelease버젼으로 Eclair/Froyo에서 동작가능하며, Release버젼에서는 Froyo만 정식지원할거라고 합니다.
작업툴은 2010년 하반기쯤 출시될 예정인데, 현재 prerelease는 Flash CS5의 extension형태로 제작이 가능합니다.
아직 Flex4 Framework은 모바일기기용으로 최적화되어 있지않고, ActionScript Project로 AIR프로젝트로 제작가능합니다.
ADT CommandLine툴을 사용하면 되고 이는 포럼을 통해 문서를 제공하고 있습니다.
조만간 나올 Flex Mobile Framework이 기대되네요.

기존의 Flash Lite와는 달리 ActionScript 3.0만을 지원하며, Runtime과 SDK를 해당 플랫폼에 맞게 다운로드 받아서
개발이 가능합니다.

“It took about four days for us to make the AIR Android version, and 1/2 of those days were spent getting up to speed with the Android tools.

“Code reuse? You bet. Both the desktop and mobile clients use the same interfaces and api calls to interact with server-side infrastructure (which includes our web services platform and our FMS 3.5 servers).

“Two different clients and one server interface; we love AIR!”

– Bruce Hopkins, chief architect for BlogRadio




이를 사용해서 개발하는 방법에 대해서는 다음포스팅에 적어보도록 할께요~ ^^

download.blog

Adobe FLEX 4 문서 한글화작업~

드디어 내일 Adobe CS5 버젼이 출시합니다.

모 이래저래 말도 많을것 같습니다만, (Apple의 Native Compiler 에 대한 Reject정책은 정말.. 할말 없군요)
애플을 사랑하면서 Adobe를 함께 사랑하는 한 노동자로써.. 평화의 분위기를 바래봅니다…

사용자 삽입 이미지
(링크 : http://www.adobe.com/kr/products/creativesuite/mastercollection/ )
이번 CS5패키지에 FlashBuilder4도 포함되어있습니다 (MasterCollection, Web Premium only)

문제는 IDE나 문서가 한글화가 안되어있다는거!!

열이아빠님의 미투데이의 글을 보고 저도 한글화작업에 참여하기로 했습니다.
현재 Adobe Flex4 문서는 영문버젼 외에 한글문서가 아직 없어서, Volunteer모집을 하시길래~
조금이나마 도움이 될까해서 참가신청을 했답니다.
맨날 다른분들이 해주신거만 보고 도움받고 그러다가 미력한 힘이나마 보탤수 있을거 같아서~

플렉스문서도구 – 한글
http://sites.google.com/site/koreanflexdoc/

사용자 삽입 이미지

문서 작업이 참여하고자 하시는 분은 아래 링크를 참고해주세요.
http://sites.google.com/site/koreanflexdoc/volunteer

flashplayer

페이지안의 특정컨텐츠가 브라우저화면에 노출될 경우, 재생되는 영상플레이어

HTML상에 정의되어야할 Javascript함수입니다.

이는 “jquery-1.3.2.min.js”파일을 import하여 사용하는 것을 전제로 합니다.

HTML상에서 Object Embed태그

플래시 내부의 클래스정의

ExternalInterface가 가능한 시점, 그리고 HTML내부의 js파일이 로드과 완료되어서 준비가 되었는지, 플래시파일이 초기화가 되어서
Javascript에서 플래시내부함수를 호출할때 그 이벤트를 받아들일 준비가 되었는지,
여러가지 상황을 체크해서 통신을 하도록 해주는 것이 좋습니다.
그렇지 않으면 항상 객체의 함수가 정의되어있지않다는둥, null객체라는둥 수많은 js에러메세지를 경험하실수 있을겁니다.

사용자 삽입 이미지사용자 삽입 이미지
이러한 에러들이 발생하는 모든 이유는 서로의 객체가 준비되지 않았는데, CallBack명령들이 실행되서입니다.
HTML페이지 내에서는 현재 페이지가 로드가 완료된 시점에서 브라우저scroll이벤트를 발생하고, 플래시객체에
접근하는 것이 좋습니다. (좋은것이 아니라 반드시 그렇게 해야합니다 ^^)
그 시점을 찾아주는 것이 jQuery에서  $(“document”).ready 부분입니다.
브라우저의 스크롤로 인한 페이지의 scrollTop값의 변화값은 HTML상에서 처리해야할 부분입니다.
그러나 영상재생을 켜고,끄는 부분은 플래시가 내부적으로 처리해야할 부분이지요.
Javascript와 플래시간의 함수호출방법에 대해 간단하게 알아보겠습니다.
<플래시에서 Javascript함수호출>
이는 간단하게 플래시에서 ExternalInterface를 사용하면 됩니다.
<Javascript에서 플래시의 함수호출>
Javascript에서 플래시내부의 함수에 접근을 하기 위해서는, 플래시에서 미리 정의가 필요합니다.
ExternalInterface.addCallBack 메서드를 사용하며, 쌍방간의 사용할 ID를 정의합니다.
큰 그림은 이렇게 됩니다. 혹시 질문이 있는분은 댓글부탁드립니다.