Flash 플랫폼으로 안드로이드 어플 만들어보기 - Wonderfl의 Flash2Android 소개

2011.01.08 23:11



2011년에 들어서 재미있는 사이트가 생겨났다. ActionScript 3.0 코드기반 SNS인 Wonderfl.net에서 만들어진 사이트로, 이 사이트를 통해 wonderfl에서 만들어지는 Flash 컨텐츠를 웹상에서 안드로이드 apk로 자동으로 변환해 다운로드 받을 수 있다.

Flash2Android : http://wonderfl.net/flash2android

단, 이 서비스는 2011년 1월 말까지만 할 예정인 것 같다. 그 이후는 어떻게 될지 잘 모르겠다.

위 사이트를 어떻게 활용할 수 있는지 궁금해하는 사람을 위해 짧은 동영상을 준비해 보았다.


 
코드 경로 : http://wonderfl.net/c/zPyr

위 동영상에서 보여주고 있는 과정을 성공적으로 수행하기 위해 아래 내용을 알고 있어야 하겠다.
1. 안드로이드 OS가 2.2 프로요 이상이어야 한다.
2. 안드로이드 폰에 Adobe AIR가 설치되어 있지 않는다면 중간에 설치과정이 필요하다.
3. 안드로이드 폰에서 설정 > 응용프로그램 > 알 수 없는 소스(시판되지 않은 응용프로그램 설치 허용)이 체크되어 있어야 한다.
4. wonderfl.net에서 Flash 컨텐츠를 apk로 변환할 수 있는 것은 자신이 직접 Fork(일종의 펌질)나 작성된 코드에 국한된다.

wonderfl.net에서 ActionScript 3.0이나 Flex 코드를 웹사이트를 통해 컴파일 할 수 있던 것은 Adobe에서 관련 컴파일러를 공개하기 때문에 가능하다. 안드로이드 컴파일러도 공개가 되어 있기 때문에 이 모든것이 가능한 것이라 생각하면 되겠다.

모든 Flash 어플은 모두 안드로이드 APK로 변환될 수 있다. 하지만 모두 정상동작하는 것은 아니다. 데스크톱 브라우져에서 돌아가는 플래시 중에는 키보드 입력으로 동작하는 것들이 꽤 있다. 이러한 것들은 안드로이드 폰에 설치한 후 실행이 된다 하더라도 동작을 시킬 수 없다. 또한 마우스 이벤트와 터치는 엄연히 다르며모바일은 제약된 사양을 가지므로 데스크탑만큼 좋은 퍼포먼스를 보여줄 수 없기 때문에 이에 대한 최적화 과정도 반드시 필요하다. 

wonderfl에서 작성했던 플래시 어플중 키보드로 동작되던 것을 터치이벤트 또는 가속센싱 이벤트를 통해 동작하도록 바꾼뒤 테스트를 해보았다.

아래 동영상은 ABC flyer라는 일본의 개발자가 올린 플래시 어플이다. 이 어플을 Fork한뒤 키보드 대신 가속도 센싱을 이용해 비행기를 조정하도록 수정해 보았다.


 
작성 코드 : http://wonderfl.net/c/eTHE

Flash Player 10.1, AIR 2.0 부터는 가속계를 사용할 수 있는 API인 flash.sensors.Accelermeter가 추가 되었기 때문에 이것이 가능한 것이다.

다음 동영상은 예전에 키보드 이벤트를 이용해 2D 상에서 비행기를 부드럽게 움직이는 방법을 모색하기 위해 만들었던 플래시 어플이다. 키보드 대신 멀티터치 이벤트를 이용해 적용해보았다.


 
멀티터치 적용전(키보드) 코드 : http://wonderfl.net/c/57qJ
멀티터치 적용후 코드  : http://goo.gl/x0KAW

Flash CS5 및 Flash Builder Burrito 에서 위 코드는 모두 테스트 해볼 수 있다.


정리하며
Flash가 장점인 것은 hika님의 말대로 배포라는 것에 동의한다. 설계, 기획, 제작과정을 보자면 C, C++, Java와 같은 보편적으로 널리 사용되는 언어로 개발하는 것과 비교할때 쉽다고 생각할 수 있지만 VM이라는 제약환경때문에 퍼포먼스를 올리기 위한 노력에 비하자면 오히려 더 어려운 경우도 발생한다. 하지만 배포만큼은 Flash를 따라올 수 있는 플랫폼이 아직 존재하지 않는다.

이 배포는 종전까지 웹과 데스크탑(AIR)로 국한되었지만 이제 다양한 디바이스들도 이에 포함되게 되었다. 이 글의 내용이 그러하듯이 말이다. 그렇다고 개발이 편해지는 것은 아니다. 지금까지 쌓아왔던 노력과 리소스는 분명 활용될 수 있지만 디바이스 마다 특색이 있어 접근 방법이 다르기 때문에 그에 대한 개발 비용은 여전히 존재한다. 

Flash는 앞으로 크로스 플랫폼 지원과 더불어 3D는 행보도 볼만할 것 같다. 차세대 Flash Player의 코드명 Molehill은 그 가능성을 보여주었다.

앞으로 Flash의 행보가 어떻게 될지 기대가 된다.


참고글
Flash2Android : http://wonderfl.net/flash2android
Flex로 쉽게 모바일 어플을 만들자. - Adobe AIR Launchpad : http://blog.jidolstar.com/717
원더플(Wonderfl)을 이용해 ActionScript 3.0을 공부하자. - 자동 테스트 환경 구축 소개 : http://blog.jidolstar.com/669
플래시 빌더 5 프리뷰 설치해보기 : http://koko8829.tistory.com/934
안드로이드 2.2 프로요와 Flash Player 10.1의 만남 : http://blog.jidolstar.com/712
어도비, 모바일과 다양한 기기를 위한 에어 2.5 공개 : http://blog.jidolstar.com/716
차세대 Flash Player 3D API Molehill : http://blog.jidolstar.com/733
Flex Test Drive for Mobile - Build a mobile application in an hour : http://goo.gl/qm8PY
What's new in Flash Builder "Burrito" : http://goo.gl/Z4Baz
Introducing Adobe Flex SDK "Hero" : http://goo.gl/dYzbH
Mobile development using Adobe Flex SDK "Hero" and Flash Builder "Burrito" : http://goo.gl/5iiZM
Coding productivity enhancements in Flash Builder "Burrito" : http://goo.gl/bSb4r

글쓴이 : 지돌스타(http://blog.jidolstar.com/739)

Adobe AIR , , , , , ,

  1. Blog Icon
    KMK

    말씀을 듣고 더 찾아보았는데 혹시 eclipse에서 Air For Android Adobe Air를 안드로이드 어플리케이션(에뮬레이터)으로 사용하면 flex와 안드로이드 코드를 동시에 또는 한 화면안에서 사용할 수 있을까요? 아니면 flash코드를 강제로 어플리케이션 안에 추가하는건가요?

  2. 안드로이드로 Flash 컨텐츠를 직접 Embed하는 방법이야 있을 수 있겠으나 범용적으로 쓰이는 방법은 아직 없습니다. AIR로 만드시면 되는 문제인데, 굳이 Flash로 만들어야하는 이유라도 있나요? 아니면 처음부터 모두 안드로이드 기반으로 만드는게 속편할텐데 말이죠.

  3. Blog Icon
    KMK

    자세한 답변 감사합니다^^ 현재로써 최선의 방법은 역시나 웹뷰인것 같습니다..윈폼상에서도 Flash를 올리는 경우가 있기는 하지만 잘 사용하지 않으시는 방법이것 같다 접는것이 현명하겠네요ㅎ 지돌스타님 블로그에 자주들러 좋은 정보 많이 공유하겠습니다ㅎ

  4. Blog Icon
    KMK

    안녕하세요..지돌스타님^^ 자주 방문해서 많은 정보를 얻어가고 있습니다ㅎ
    저번에 질문드렸던거를 개발중에 있는데...
    FLEX SWF 파일을 모바일로 옮겨서 실행시키니까 보안에러라고 뜹니다.
    --error code--
    faultCode:Channel.Security.Error faultString:'
    Security error accessing url' faultDetail:'Destination: DefaultHTTP'
    crossdomain.xml 파일을 생성해서 해결하라고 하셔서 따라해보았는데도
    해결이 되지 않습니다. 파일 경로를 잘못 생성한 것일까요..?
    그리고, url경로로 하여서 웹뷰에 띄었을때 검은색화면으로 깜빡거립니다...원인이 무엇인지 잘 모르겠습니다.

  5. flash는 보안센드박스 안에 있는 컨텐츠만 접근이 가능합니다. local에서 실행할때는 원격자원 접근에 원천적으로 분리가 됩니다. 반면 웹상에서 실행되면 로컬자원 접근이 금지됩니다. 이것은 ajax도 마찬가지고요. 크로스 도메인 문제는 둘다 원격에 있을때이므로 이것과 다른 문제입니다.

  6. Blog Icon
    KMK

    네.... 그래서 url경로로 하여서 웹뷰에 띄어보았습니다. 그럴때 뜨기는 잘 뜨지만 원격서버에서 DB를 ACCESS해서그런지 너무 느리고 또 검은색화면으로 깜빡거립니다...원인이 무엇인지 잘 모르겠습니다.

  7. 결과물을 볼 수 없으니 뭐라고 답변드리기는 어려울 것 같네요. 꼭 원인을 알아내셔서 해결하시길 바래요 ^^

  8. Blog Icon
    KMK

    궁금한게 있어서 질문을 드리고자 리플을 남깁니다. 개발자님 블로그에 유용한 정보들이 많아서 혹시 제 궁금증을 풀어주실수 있지 않을까 해서요. APP에서 flash 또는 flex를 사용할 수 있는지요? flash나 flex가 웹뷰에서 보여지는 방식이 아니고 또 flash tool 자체로 어플을 만드는 것이 아니라.. app에서 flash로 만든 것을 추가시킬 수 있는지... 이게 가능하다면 어떤식으로 APP에 넣을 수 있는지 궁금합니다. 이에 대한 정보를 얻을 수 있을까요?

  9. 하실수 있습니다. 대신 App은 AIR로 만드셔야할것입니다. 왜냐하면 안드로이드기반 Webkit에서는 Flash Player를 구동시킬 수 없는 것으로 알고 있습니다.

  10. Blog Icon
    KMK

    그렇다면 swf파일을 소스 코드를 정적으로 작성하는 경우라고 보면 될까요? 아니면 플래쉬파일을 적용할 수 있는 api가 있다고 보면 되나요? 어떤식으로 적용을 해야 할지요..