HTML5의 Canvas이미지를 가져다가 안드로이드에서 Bitmap으로 사용할 수 있다. (어떤 경우에 있겠지?) 아래 코드는 그걸 실험해 보려고 만든 테스트 코드이다. 일단 HTML5의 Canvas를 사용해 그림을 그린후 canvas.toDataURL().toString()을 사용해 Base64 문자열을 뽑아낸다. 


<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // begin custom shape
        context.beginPath();
        context.moveTo(170, 80);
        context.bezierCurveTo(130, 100, 130, 150, 230, 150);
        context.bezierCurveTo(250, 180, 320, 180, 340, 150);
        context.bezierCurveTo(420, 150, 420, 120, 390, 100);
        context.bezierCurveTo(430, 40, 370, 30, 340, 50);
        context.bezierCurveTo(320, 5, 250, 20, 250, 50);
        context.bezierCurveTo(200, 5, 150, 20, 170, 80);

        // complete custom shape
        context.closePath();
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();
		
	document.getElementById("canvasData").innerHTML = canvas.toDataURL().toString();
		
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <div id="canvasData"></div>
  </body>
</html>


결과화면은 다음과 같다. 



base64 문자열을 복사해서 다음 안드로이드 코드에서 사용해본다.
package com.cookilab.base64bitmap;

import java.io.ByteArrayOutputStream;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.os.Bundle;
import android.util.Base64;
import android.view.View;

public class TestActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView( new TestView(this) );
    }
    protected class TestView extends View {
        public TestView(Context context) {
            super(context);
        }
        public String encodeTobase64(Bitmap image) {
            Bitmap immagex=image;
            ByteArrayOutputStream baos = new ByteArrayOutputStream();  
            immagex.compress(Bitmap.CompressFormat.JPEG, 100, baos);
            byte[] b = baos.toByteArray();
            String imageEncoded = Base64.encodeToString(b,Base64.DEFAULT);
            return imageEncoded;
        }
        public Bitmap decodeBase64(String input) {
            byte[] decodedByte = Base64.decode(input, 0);
            return BitmapFactory.decodeByteArray(decodedByte, 0, decodedByte.length); 
        }    
        public void onDraw(Canvas canvas){
            String base64 = "iVBORw0KGg............==";
            Bitmap bitmap = decodeBase64(base64);
            canvas.drawBitmap(bitmap, null, new Rect(0, 0, 300, 100), null);
        }
    }   
}




그래서 뭘 하고 싶은거냐?

자바스크립트와 안드로이드간 통신이 가능하므로 이미지도 전송할 수 있다는 것을 보여준 셈이다. 


끝 ^^


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

아이폰용도 나왔습니다. ^^ 

http://itunes.apple.com/app/id446340438
  



스타플(http://starpl.com)에서 친구들과 함께 하는 SNS형 다마고치 '스타펫' 어플을 출시했습니다. 

지금 바로! 안드로이드 마켓에서 다운로드 받을 수 있어요.(아이폰용도 조만간 오픈할 것입니다.)

스타펫받기 : https://market.android.com/details?id=com.starpl.android.starpet


 


귀여운 스타펫과 함께 보내신다면 여러분의 하루가 더 즐겁지 않을까요? ^^












*** [스타펫]으로 작성한 글/댓글은 스타플(starpl.com) 웹서비스에도 자동 업로드됩니다. 
PC에서 www.Starpl.com으로 접속하시면 더욱 다양한 기능의 스타플 서비스를 이용하실 수 있습니다.


*** 다양한 스타플 연동 어플리스트

(안드로이드)바른생활
(안드로이드)책을읽자!
- (안드로이드)아이돌배틀
- (안드로이드)자랑질

(아이폰)책을읽자!
(아이폰)바른생활
(아이폰)신조어능력시험
(아이폰)어플지름신
(아이폰)타임라인 
(아이폰)오픈배경화면

- (아이폰)자랑질 

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



Adobe AIR 2.7 버전이 정식 배포되었습니다. 개발자를 위한 SDK와 Runtime이 함께 배포되었습니다. Adobe AIR 2.7은 데스크탑 또는 모바일 환경 모두 동작하며 모바일의 경우 안드로이드 2.2 이상, BlackBerry Tablet OS, iOS 4.0 이상에서 동작합니다. 

현재 Flash Builder 4.5는 아직 Flex기반 iOS 어플 개발이 불가능하지만 Flash builder 4.5가 이번 달에 새로 배포되면 AIR 2.7이 같이 탑재되면서 Flex로 iOS 어플 개발이 가능하게 됩니다. 현재 Flash Builder 4.5에 AIR 2.7이 없어서 Flex로 iOS 개발을 막아놓았던 것 같네요.

iOS를 위한 AIR 어플은 CPU모드에서 4배이상 빠른 렌더링을 지원합니다. 기존에 Flex로 iOS기반 어플을 만들게 되면 퍼포먼스 문제가 있었는데 이 부분이 말끔하게 해결된 듯합니다. 다음 동영상을 보세요. 

Adobe AIR 2.7 : Faster app performance on iOS  http://goo.gl/VJxnR 

 iOS에서 디버깅 및 테스팅 환경이 많이 개선되었다고 합니다. 또한 Android기반에서 SD카드에 AIR 런타임을 설치할 수 있게 되었습니다. 

데스크탑환경에서 Media Measurement를 위한 통합기반이 지원됩니다. Adobe Flash Player 10.3에서 부터 지원되었으면 AIR 2.7에서도 이것을 지원합니다. 관련된 내용은 아래 링크를 참고하세요.

Measuring video consumption in Flash : http://goo.gl/wPcf0 

또한 Acoustic Echo Cancellation를 지원합니다. Flash Player 10.3에서도 지원하고 있습니다. 여기에 관련된 API가 도입됨에 따라 헤드셋없이도 애코조절이 훨씬 원할해집니다.

그리고 HTMLLoader에서 HTML 컨텐츠에 대한 로케이션 제어 권한이 훨씬 향상되었습니다. 과거에 이 부분때문에 고생한 적이 생각난다는..... 

다음 사이트들을 둘러보시면 AIR 2.7을 이해하는데 더욱 도움이 될 것입니다. 

Adobe AIR 2.7 Now Available : iOS apps 4x Faster! : http://goo.gl/5IEIz 
Adobe AIR 2.7 Developer Release Notes : http://kb2.adobe.com/cps/906/cpsid_90612.html 
Adobe AIR 공식페이지 : http://www.adobe.com/products/air/
Download Adobe AIR SDK : http://www.adobe.com/products/air/ 
Adobe Flash Builder : http://www.adobe.com/products/flash-builder.html

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


스타플(http://starpl.com) 에서 자랑질 어플을 출시했습니다. 

자랑하고 싶어서 입이 근질근질한 사람들을 위한 어플입니다. 간단한 회원가입 절차후 주어진 커뮤니티 내에서 자랑해 보세요. 같은 경험, 취미, 능력들을 가진사람들과 한공간에서 이야기 하는 재미가 솔솔합니다.

- 길거리에서 원빈을 봤다.
- 거리에서 만원 주었다.
- 여자친구 생겼다.
- 남자친구 생겼다.
- 선물을 받았다.
- 시험 100점 받았다.
- 여자친구가 미인이다.
- 로또에 당첨되었다.
- 첫키스해봤다.
- 등등.....

자랑거리 있다면 자랑질 어플을 통해 자랑해보세요.

안드로이드의 마켓, 아이폰의 앱스토어 에서 지금 다운로드를 할 수 있습니다.

아이폰 : http://itunes.apple.com/app/id437781691?mt=8
안드로이드 : https://market.android.com/details?id=com.starpl.android.jarang 

 







*** [자랑질]으로 작성한 글/댓글은 스타플(starpl.com) 웹서비스에도 자동 업로드됩니다. 
PC에서 www.Starpl.com으로 접속하시면 더욱 다양한 기능의 스타플 서비스를 이용하실 수 있습니다.


*** 다양한 스타플 연동 어플리스트

(안드로이드)바른생활
(안드로이드)책을읽자!
- (안드로이드)아이돌배틀
- (안드로이드)자랑질

(아이폰)책을읽자!
(아이폰)바른생활
(아이폰)신조어능력시험
(아이폰)어플지름신
(아이폰)타임라인 
(아이폰)오픈배경화면

- (아이폰)자랑질 

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


Adobe CS 5.5가 출시 되었습니다. 동시에 Flash Builder 4.5와 Flash Catalyst CS 5.5도 함께 출시되었습니다. 개인적으로는 Flash Builder 4.5를 많이 기다렸습니다. 

Flash Builder 4.5의 공식 홈페이지는 다음과 같습니다.

Adobe Flash Builder 4.5 : http://www.adobe.com/products/flash-builder.html 

개인적으로 보는 Flash Builder 4.5의 가장 큰 변화는 모바일, Flex 4.5, PHP 개발지원등이 아닌가 싶습니다. 
특별히 기존 beta버전으로 공개되었던 Burrito에서는 안드로이드 기기 컴파일만 지원했는데 이번에는 iOS 어플 개발도 지원해줍니다. Flash IDE를 잘 사용할 줄 모르는 저로서는 가장 기다렸던 기능중에 하나입니다. 

다운로드는 다음 링크에서 Try버전으로 다운받을 수 있습니다. 

Adobe Flash Builder 4.5 다운로드 : http://goo.gl/hDi55

아래 화면은 Flash Builder 4.5를 설치하는 중간 화면입니다. AIR For Apple iOS Support가 눈에 띕니다. 


Flash Builder 설치후 실행한다음 ActionScript Mobile AIR Project를 만들면 다음과 같은 Setting 화면을 볼 수 있습니다. 기존에는 Android 어플만 개발이 가능했으나 이제 1개의 프로젝트로 아이폰, 안드로이드 개발이 모두 가능해졌습니다. (참고 : Flex Mobile AIR Project 에서는 여전히 Android 기반으로밖에 지원하지 않는 것 같았습니다.)



처음 실행해보면 아래와 같은 설정화면이 나옵니다. 이 부분은 Flash Builder Burrito를 이용해 Android 개발을 해본 사람은 친숙한 화면입니다. Apple iOS가 Target platform으로 등록되어 있음을 주목하세요. (참고 - Flex로 쉽게 모바일 어플을 만들자. - Adobe AIR Launchpad)


이제.... Flash Builder 에서도 iOS, Android 어플 개발이 모두 가능해졌군요. 더불어 테스트 해볼 것이 많아졌습니다.

참고로 Adobe CS 5.5는 현재 Try버전으로 다운받아 설치해 볼 수 있습니다. 다음 링크를 참고하세요.

Download a free trial of Creative Suite 5.5 Master Collection 

위 링크에서 다운로드 받아 설치하고 있는 화면입니다. Adobe AIR를 이용해 설치하네요. 



Adobe Flash CS 5.5, Flash Builder 4.5, Flash Catalyst CS 5.5 에 대해서 더욱 자세히 알고 싶다면 다음 링크를 참고하면 좋겠습니다.

Adobe Flash Builder 4.5 : http://help.adobe.com/en_US/flashbuilder/using/index.html
Adobe Flash Professional CS 5.5 : http://help.adobe.com/ko_KR/flash/cs/using/index.html 
Adobe Flash Catalyst CS 5.5 : http://help.adobe.com/ko_KR/flashcatalyst/cs/using/index.html 


좀더 학습을 원하시면 다음 링크도 유용합니다.

Adobe Flex 4.5 문서 : http://help.adobe.com/en_US/flex/using/index.html
Adobe Flash Platform용 ActionScript 3.0 참조 설명서 : http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/index.html
Adobe AIR : http://help.adobe.com/ko_KR/air/build/index.html 
Adobe 개발자 센터 :  http://www.adobe.com/devnet.html 
Tour de Flex : http://www.adobe.com/devnet/flex/tourdeflex.html 
 
글쓴이 : 지돌스타(http://blog.jidolstar.com/765)  

회사에서 제작한 안드로이드용 무료 어플인 "책을읽자!"를 소개합니다. (아이폰용도 있습니다.)


★★★★★ 책을읽자! ★★★★★ 

책 읽는 습관을 길러주는 최고의 어플! 책을읽자!
 

■ 책 등록하기 ■

내가 지금 읽고 있는 책을 쉽고 간편하게 등록할 수 있습니다. 
네이버/구글/다음 등 다양한 도서DB를 검색하여 쉽게 나의 서재를 만들어보세요!


 나의 서재 ■

지금 내가 가진 책을 한눈에 볼 수 있으며, 얼마나 읽었는지 상태를 알려줍니다. 
게다가 같은 책을 읽고있는 다른 사람의 서재에서 쉽게 책을 등록 할 수도 있어요!


■ 북스토리 ■

같은 책을 보고 있는 사람들과 커뮤니티를 제공합니다. 
내가 보고 있는 책을 주제로 사람들과 이야기를 나눠보세요!


■ 북카페 ■

북스토리에서 오가는 책추천, 후기, 서평들을 모아모아 북카페가 만들어집니다. 
북카페에서 수많은 최신 도서 정보를 만나보세요!


■ 푸시알림 ■

읽다가 중단한 책, 아직 읽지 않은 책이 있으면 푸시 알림을 보내드립니다. 
책 읽는 습관을 길러주는 나의 독서 동반자, 책을읽자!
 

■ 다운로드 ■

http://goo.gl/GWaZI



아래주소는 아이폰용입니다.
http://goo.gl/9sxw0



■ 참고사항 ■

*** [책을읽자!]로 작성한 글/댓글은 스타플(starpl.com) 웹서비스에도 자동 업로드됩니다. 
PC에서 www.Starpl.com으로 접속하시면 더욱 다양한 기능의 스타플 서비스를 이용하실 수 있습니다.


*** 다양한 스타플 연동 어플리스트

(안드로이드)바른생활
- (안드로이드)책을읽자!

(아이폰)책을읽자!
(아이폰)바른생활
(아이폰)신조어능력시험
(아이폰)어플지름신
(아이폰)타임라인 
- (아이폰)오픈배경화면


■ 스크린샷 ■











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


 

아이폰/아이팟터치용에 이어 안드로이드용 '바른생활' 어플을 출시했습니다. ^^
광고 나갑니다. ㅋ


매번 계획만 하는 당신, 실천하게 만들어드립니다!

■ 체크캘린더 ■

매일매일 새해 계획의 성공/실패를 캘린더에 체크하세요!

체크캘린더를 보면서 하루하루 성취감을 느껴보세요.


■ 계획일지 ■

하루하루 계획에 대한 일지를 작성할 수 있습니다!

일지를 쓰면서 나의 계획에 대한 다짐을 곱씹어보세요.


■ 푸시알림 ■

매일 푸시알림으로 나의 계획을 상기시켜드립니다!

바른생활은 꾸준히 계획을 실천할 수 있도록 돕는 최고의 도우미랍니다.


■ 커뮤니티 ■

모든 일은 혼자하면 힘들고 포기하게됩니다. 하지만 우리에겐 동지가 있습니다!

계획 별로 커뮤니티를 지원하여 같은 계획을 가진 사용자와 만나세요.

서로 격려하고, 정보를 교류하면 모두가 승리할 수 있습니다!

[바른생활]어플로 실천하는 사람으로 다시 태어나세요!


■ 다운로드 ■

아래 주소에 접속하시면 '바른생활' 어플을 무료로 다운로드 받으실 수 있습니다.

다운로드 : http://goo.gl/Tx22D


■ 참고 ■ 

[바른생활]로 작성한 글/댓글은 스타플(starpl.com) 웹서비스에도 자동 업로드됩니다.
PC에서 www.Starpl.com으로 접속하시면 더욱 다양한 기능의 스타플 서비스를 이용하실 수 있습니다.

스타플 계정으로 연동되는 어플
- (아이폰)바른생활
- (아이폰)어플지름신
- (아이폰)타임라인 


■ 스크린샷 ■ 











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




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)

(2011.07.21)이 글은 조금 오래된 글로 약간 현시점과 다른 내용이 있을 수 있습니다. 현재 Flash Builder는 4.5.1 까지 공식 배포중입니다. Flex 4.5.1 SDK, AIR 2.7도 함께 배포중이므로 참고하세요. 



한동안 아이폰 개발로 Flash 관련된 일을 전혀 하지 못하다 보니 Flash를 주제로 다룬 여기 블로그도 많이 정체되어 있다는 느낌을 지울 수 없더군요. 그래서 시간내서 간단하게 하나 적어봅니다.


지난 몇일전에 미국에서 Adobe MAX가 열렸었죠. 바쁜 나머지 관심있게 지켜보지 못해 주요 주제가 무엇인지는 잘 모르겠지만 여기저기 들리는 것을 보면 결국 "모바일"인 것 같습니다. 이번에 Preview 버전으로 배포된 Flash Builder "Burrito", Flex SDK "Hero", Flash Catalyst "Panini" 모두 모바일 개발에 대한 내용이 추가되었습니다.

저는 이 글에서 Flash Builder를 이용해 Flex나 AIR 어플리케이션을 만들어본 경험이 있는 분들에게 모바일 개발을 아주 쉽게 할 수 있는 일종의 팁을 전달하고자 합니다. 먼저 Flash Builder "Burrito"에 대해서 잠깐 소개하고 Adobe AIR Launchpad를 이용해 어떻게 모바일 AIR 어플리케이션을 만들 수 있는지 소개합니다.


Flash Builder와 Mobile이 만나다. - Flash Builder "Burrito"

Flash Builder "Burrito"에는 Flex SDK "Hero"가 이미 내장되어 있기 때문에 따로 설치할 필요가 없습니다. 여러분은 아래 링크에서 Flash Builder "Burrito"를 다운로드 받을 수 있습니다. 단, Adobe 회원에 먼저 가입하셔야 합니다.

http://labs.adobe.com/technologies/flashbuilder_burrito/

설치는 기존 Flash Builder 4 와 거의 동일합니다. 기존에 설치된 Flash Builder와 별도의 위치에 설치되므로 안심하고 설치하시면 됩니다.

Flash Builder "Burrito"를 실행하시면 먼저 아래와 같은 Start Page가 눈에 띕니다. 이 화면만 보아도 알 수 있듯이 Mobile과 Desktop&Web이 나눠져 있습니다. 여기를 따라 가면 간단한 예제가 있으니 쉽게 따라하실 수 있습니다.



Flash Builder "Burrito"는 아래처럼 모바일 프로젝트를 만들 수 있습니다.


현재는 아래처럼 안드로이드 플렛폼만 지원하고 있습니다. 테스트는 데스크탑에서 가상의 장비를 선택해 시뮬레이션을 할 수 있으며 또한 장비가 있다면 직접 물려서 테스트 해볼 수도 있습니다.


개인적으로 안드로이드 폰(HTC Desire)를 소유하고 있어서 Mobile 버전으로 간단하게 만들어 디바이스 시뮬레이팅을 할 수 있었습니다. 인증서 발급이나 별도의 설정없이 너무 간단하게 만들 수 있어서 기존 Flex 개발자라면 안드로이드용 어플 개발을 쉽게 할 수 있게 되었습니다. 아래 사진이 바로 그 실행결과입니다.



배포도 상당히 간단해서 기존에 AIR 어플리케이션에서 배포버전을 배포하듯이 간단한 인증서 발급만으로 APK로 배포할 수 있습니다.


Adobe AIR Launchpad - AIR 프로젝트 자동화 생성기
Adobe AIR 라운치 패드가 새로 배포되었습니다. 이것은 금방 소개한 Flash Builder "Burrito"를 겨냥해서 제작되었습니다. 이 어플은 Flex개발자들이 데스크탑 및 모바일 AIR 어플을 만드는데 도움을 주기 위한 일정의 자동화 프로젝트 생성기입니다.
 
Flash Builder에서 AIR 프로젝트를 만드는 것은 매우 쉽습니다. 하지만 AIR의 전반적인 기능을 이해해야 제대로된 설정을 할 수 있고 각종 설정은 사실 손이 많이 가는 작업일 수 있습니다. 능숙한 개발자야 문제가 안되지만 초보개발자라면 가이드라인을 제시받고 싶어할 것입니다. 이때 아주 유용할 것 같습니다.

설치하기 위해 다음 링크로 가시면 됩니다.
http://labs.adobe.com/technologies/airlaunchpad/

아래는 실행 첫화면입니다. 프로젝트를 자동으로 생성시켜주기 위한 첫번째 단계로 만들 어플이 데스크탑인지 모바일용인지 선택합니다.

어짜피 데스크탑용이야 많이 해봤으므로 저는 모바일을 선택했습니다. 아래와 같은 화면이 나옵니다. 프로젝트를 생성하기 위해 총 4단계(Setting, Configuration, Samples, Generate)를 거칩니다. 아래 화면은 그중 첫번째 단계지요.

위 화면에서 볼 수 있듯이 어플의 기본 설정을 도와줍니다. Application Name에 어플 이름을 등록하고 버전정보, 풀스크린, 자동회전, 인터넷 엑세스, GPS 등 사용여부를 결정할 수 있고 Icons를 선택하면 사용할 아이콘을 미리 등록할 수 있도록 합니다. 일반 AIR 프로젝트에서는 XML을 직접 편집해야했는데 이런 것을 이용하면 많이 편하겠네요. Install Location은 안드로이드 프로요 버전의 경우 내장 또는 외장(SD카드) 중 둘중에 한곳에 설치할 수 있습니다. 이때 설치 위치를 결정해줍니다. 일반적으로 Auto를 선택하면 되겠네요.

다음으로 아래화면과 같이 Configuration으로 넘어갑니다.  여기서는 소스 코드상에서 각종 핸들링을 지원할 것이냐 결정해줍니다. 필요한 것을 선택하면 원하는 코드가 미리 들어가 있게 됩니다. 참고로 Splash Screen은 실행전에 보여지는 로딩화면으로 생각하시면 됩니다. 여기서 미리 설정할 수 있게 해주네요. 아주 편합니다.
 


이제 아래 화면에서 볼 수 있듯이 Sample로 넘어갑니다. 초보개발자들에게는 이것처럼 좋은게 없겠다는 생각도 듭니다. 아무래도 아무것도 없는 코드보다 샘플이 일단 들어가 주면 개발에 도움이 될 것이기 때문입니다.



마지막으로 Generate 단계입니다. 지금까지 설정한 것을 토대로 AIR 프로젝트를 생성해 줍니다. 먼저 File location에서 프로젝트를 생성할 경로를 설정해줍니다. 그 다음 Generate AIR Project가 활성화 됩니다. 이 버튼을 클릭하면 생성이 완료됩니다. 이때 자동으로 탐색창을 띄워줍니다.


이제 만들어진 프로젝트를 Flash Builder "Burrito"로 열어봅시다. Flash Builder를 실행한 뒤 아래 처럼 File > Import Flash Builder Project를 선택합니다.


아래와 같은 창이 뜨면 만들어진 프로젝트를 여러분의 워크스페이스에 올려놓을 수 있습니다. 창에서 Import Project 를 보면 File과 Project folder를 볼 수 있습니다. Adobe AIR LaunchPad는 프로젝트를 폴더와 압축파일로 두개 만들어주므로 이들중 아무거나 선택해서 프로젝트를 등록하면 별 무리가 없습니다.

여기서는 File을 통해 프로젝트를 임포트 해보지요.


아래처럼 만들어진 프로젝트 압축파일을 선택하면 그 아래에 Import Method가 나옵니다. 여기서 압축된 프로젝트를 어느 곳에 어떤 이름으로 프로젝트를 압축을 풀어 만들 것인가 결정할 수 있습니다. 저는 그냥 Finish 버튼을 눌러 프로젝트를 임포트 하겠습니다.


이제 Flash Builder 에서 해당 프로젝트를 아래 처럼 열람할 수 있게 되었습니다. Adobe AIR LaunchPad를 통해 설정한 대로 프로젝트 명은 TestAIR가 되었고 각종 Sample View가 이미 만들어져 있습니다.


TestAIR 메인 페이지를 열어보았습니다. 아래처럼 mxml 코드를 볼 수 있습니다. 기존 AIR와 달라진 점은 Application이 MobileApplication이라는 점입니다. 당연한 이야기 겠죠? 참고로 firstView가 views.TestAIRHome으로 설정되어 있습니다. 위 패키지에서 views에 들어간 mxml중에 가장 최상위 뷰를 TestAIRHome으로 선택한 다는 것을 의미합니다.

Adobe AIR LaunchPad 의 2번째 단계에서 각종 핸들러를 선택해서 만들어진 코드입니다. 간단하게 trace가 출력되록 되어 있으며 여러분은 필요하다면 이 부분을 수정해서 원하시는 기능을 만드시면 됩니다.

디자인 모드로 들어가 봤습니다. 아래 화면과 같이 모바일에 최적화된 화면을 보여줍니다. Flash builder에서 모바일 어플을 만들 수 있게 된 것이 흥미롭습니다.


위 프로젝트를 실행해보겠습니다. Ctrl+F11 을 누르거나 메뉴에서 Run > Run을 선택해 실행합니다. 그러면 아래와 같은 창이 나오는데 이 화면은 이 글의 초반부에도 보였던 창의 모습입니다. 실행하기 위해 어떤 플랫폼에서 그리고 어떤 디바이스에서 시뮬레이팅을 할 것인지 결정해주는 역할을 합니다. 이 설정화면은 나중에 Run > Run Configurations에서 바꿀 수 있습니다.



위 화면에서 보면 타겟 플랫폼은 안드로이드입니다. 아직까지는 이것밖에 없습니다. 왜냐하면 Flash Builder "Burrito"가 Preview 버전이니깐요. 앞으로 정식버전이 나오면 윈도우, 아이폰 등도 지원하길 희망합니다. ^^

Launch method를 보면 On desktop과 On device가 있습니다. On desktop은 말그대로 데스크탑에서 모바일 시뮬레이터를 띄워줘 테스트 하는 겁니다. 안드로이드를 보니 제가 가지고 있는 HTC Desire도 있어서 기뻤습니다. 반대로 On device는 실제 장비에 물려서 테스트 합니다. 이들 모두 별 설정없이 실행이 가능했습니다. 

이제 Run만 누르면 바로 실행됩니다. 아래는 On device에서 실행해본 것입니다. Adobe AIR LaunchPad를 이용해 등록했던 각종 뷰 종류를 리스트에서 볼 수 있습니다. 마우스로 드래그 하면 아래 있는 나머지 리스트도 볼 수 있습니다. 하지만 데스크탑에서 시뮬레이션 하는 것이므로 Accelerometer나 Multitouch, Gesture등을 수행해 볼 수 없었습니다. 대신 안드로이드 폰이 있는 분은 직접 테스트 해볼 수 있습니다.







저는 제 안드로이드 폰인 HTC Desire에 위 어플을 실행해보고자 합니다. 먼저 메뉴에서 Run > Run Configuration을 선택합니다. 아래 화면처럼 좌측 메뉴에 Mobile Application에서 TestAIR를 선택한뒤 좌측상단에 복사하기 버튼을 누릅니다. 그럼 1개가 더 생성됩니다. 새로 생성된 것은 Name을 TestAIR on Device로 하고 기존것은 TestAIR on Desktop으로 명명합니다. 그리고 새로 생성된 것의 Launch method는 On device를 선택합니다. 그리고 Run을 누르면 자신의 안드로이드 폰에 해당 어플이 실행됩니다.


하지만 여기서 안드로이드 폰이 개발폰이 되도록 먼저 설정해야합니다.
1. 자신의 안드로이드 폰의 홈화면에서 menu > 설정을 누릅니다. 그리고 응용프로그램 > 개발 화면에서 USB 디버깅이 선택되어 있어야 합니다.
2. 자신의 안드로이드 폰에 AIR 런타임이 설치 되어야 합니다. 설치가 안된 안드로이드 폰이면 설치되도록 유도하니 Market에 직접 찾지 않고도 자연스레 설치할 수 있을겁니다.

아래는 제 폰에서 실제로 실행해보는 화면입니다.





정리하며

여기서 설명하지 않은 개발 방법이나 배포 방법에 대한 간단한 가이드는 다음 링크를 참고하면 좋을 것 같습니다.
Flex Test Drive for Mobile - Build a mobile application in an hour 

2009년 미국에서 Adobe MAX 를 참가해 Flash Builder로 아이폰 어플리케이션을 만드는 데모를 본 적이 있습니다. 당시에는 꽤 흥미를 느꼈습니다. 금방이라도 아이폰 어플을 Flash로 개발할 수 있을 줄 알았습니다. 하지만 Apple정책이 변경되면서 퇴색되었죠. 그것도 Flash CS5 런칭 몇일전에 Apple의 이기적인(?) 정책 발표였습니다. 그 후 1년이 지나 안드로이드 플랫폼이 강세가 이어지며 Flash기술은 다시 이야기 거리가 되고 있습니다. Apple도 안드로이드의 강세 행보에 위협을 느껴서(?) 일부 정책 수정있기도 했죠. 어쨌든 Flash가 모바일 디바이스에 자리 잡으려면 아직 해결해야할 과제가 산적해 있지만 그래도 노력한 만큼 성과는 있을 것이라 생각합니다. 


관련글
Flex Test Drive for Mobile - Build a mobile application in an hour
What's new in Flash Builder "Burrito"
Introducing Adobe Flex SDK "Hero"
Mobile development using Adobe Flex SDK "Hero" and Flash Builder "Burrito"
Coding productivity enhancements in Flash Builder "Burrito"

스타플 모바일 웹사이트(http://m.starpl.com)에 이어 어플리케이션도 오픈했습니다.


아이폰, 아이팟터치, 안드로이드폰을 가지고 계신 분들은 스타플 모바일 어플리케이션을 설치하실 수 있습니다.

 

다음 링크에서 다운로드 받으세요.

- 아이폰/아이팟터치 사용자
  한국 : http://itunes.apple.com/kr/app/id396402081?mt=8
  미국 : http://itunes.apple.com/us/app/id396402081?mt=8


- 안드로이드폰(디자이어,넥서스원,겔럭시 S등) 사용자 
  http://www.cyrket.com/p/android/com.starpl.android/


자세한 설명 보기 : http://starpl.com/wecon/11357889


아이폰 스크린샷 






안드로이드 스크린 샷 




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

얼마전 hTC 디자이어 안드로이드 스마트폰을 구입했다. 스마트 폰에는 항상 관심이 많았으나 정작 구입하려고 하니 아이폰으로 할지 안드로이드로 할지 선택의 기로에 서게 되었다. 결국 안드로이드 선택... 왜냐하면 아이폰, 아이팟 터치 계열을 회사에서 너무도 많이 봤고 개발용으로는 하나 이미 장만한 터였다.



Flash 개발자로서 안드로이드 2.2 프로요에 관심을 안가질 수 없었다. 오픈 스크린 프로젝트(Open Screen Project)의 일환으로 만들어진 Flash Player 10.1이 안드로이드 2.2 프로요에 탑재되기 시작했기 때문이다. 본인이 구입한 hTC 디자이어 폰은 2.1이 설치되어 있었지만 hTC에서 2.2 업그레이드 버전을 내놓았기 때문에 어렵지 않게 설치할 수 있었다.

안드로이드 2.2 프로요에 탑재된 Flash Player 10.1을 테스트 하기 위해 필자가 만들었던 몇가지 Flash 애플리케이션에 접속해 보았다.

아래는 실험적으로 만들어본 3D 태양계 시뮬레이터를 Papervision3D로 만든 것이다. 아래 주소로 접속할 수 있다.  마우스 드래그로 회전이 되고 방향키로 확대/축소 할 수 있다.
http://weconize.com/~blackhole/planet3d (임시 링크이다)


 

Papervision3D는 Flash Player 10부터 지원하는 3D API를 전혀 사용하지 않았다. 그럼에도 불구하고 동작하는 것을 보면 신기하다. 3D API를 적극적으로 활용한 Away3DAlternativa 3D로 만들면 훨씬 부드러운 화면을 보여줄 수 있을 것이라 판단한다.

스타플(http://starpl.com/)의 별지도(http://starpl.com/map) 에 접속해보았다.


위 화면은 hTC 디자이어, 안드로이드 2.2 프로요에서 스타플 별지도에 접속해본 모습이다.



위 화면은 웹브라우져로 본 스타플 별지도와 hTC 디자이어로 본 별지도 모습을 비교해 보았다.


 

위 동영상에서 볼 수 있듯이 부자연스럽긴 하지만 Flash 로 만들어진 별지도가 잘 동작하고 있다. 단지 웹기반으로 만들어서 버튼이 너무 작아 누르기가 불편했으며 마우스 이벤트와 터치 이벤트는 명백히 다르기 때문에 동작에 무리가 빠른다. 이런 불편함을 해소하기 위해서는 모바일을 감안한 Flash 애플리케이션을 만들어야 함을 알 수 있다.

아래 화면은 2010 남아공 월드컵을 위해 만들었던 Flash 축구 게임이다. 실행이 잘된다. 또한 사운드도 잘나왔다. 하지만 마우스 이벤트 기반으로 만들었기 때문에 터치에 대응하지 않아 실제 게임은 불가능했다. 데스크탑에서 마우스 사용과 모바일에서 터치는 엄연히 다른 사용자 반응이므로 모바일에서도 동작시키려면 그에 맞게 개발해야함을 알 수 있다.

월드컵 게임 : http://weconize.com/~blackhole/worldcup (임시링크이다.)



필자 블로그(http://blog.jidolstar.com)에 Flex 시절부터 인연이 있으신 분들은 아마도 Flex 한글화 문서(http://flexdocs.kr)를 잘 알고 있을 것이다.  여기서 제공하는 3D 게시판(http://flexdocs.kr/board)도 동작시켜보았다.




위 동영상에서 볼 수 있듯이 Flex 애플리케이션도 문제없이 돌아간다. 단지 데스크탑용이기 때문에 모바일 용에도 대응할 수 있도록 만들어야 하는 문제는 있다.


마지막으로 유명한 Flash 3D 라이브러리인 Alternativa 3D 에서 제공하는 Demo를 보고자 한다.

접속 URL : http://blog.alternativaplatform.com/en/category/3d/

 

위 동영상에서는 블로그 위에 있는 Flash 컨텐츠를 바로 스마트폰에서 볼 수 있음을 알 수 있다. 중간에 Youtube 동영상도 잘 동작한다. 참고로 동영상에 게임은 Flash로 만든 온라인 탱크 게임이다. Flash의 멀티터치 API를 이용해 게임을 즐기는 것도 가능해 짐을 보여준다. 또한 Alternativa 3D 라이브러리를 이용해 제작된 3D Flash 데모를 보여준다. 모바일 수준에서 Flash가 이런 렌더링 능력을 보여준다는 것이 대단할 따름이다. 

 

오픈 스크린 프로젝트란?
오픈 스크린 프로젝트의 슬로건은 'Singular Experience, multiple Devices'이다. 간단히 말해 웹에서 플래시를 통해 얻었던 사용자 경험을 휴대폰, 텔레비전, 그리고 다양한 전자기기에서도 동일하게 느끼도록 한다. 그러기 위해 Adobe는 자신의 스펙 및 기술적 정보를 공유하고 관련 기기업체도 이에 맞게 지원하여 서로 윈윈(Win-win)하는 프로젝트이다. 이번 구글의 안드로이드 2.2 프로요에 Flash Player 10.1가 기본 탑재된 것은 바로 이 프로젝트의 성과물이라고 할 수 있다.



오픈 스크린 프로젝트 공식 홈페이지
미국 LA Adobe MAX 2009 - 오픈 스크린 프로젝트와 플래시 플랫폼 서비스에 대해
PC-모바일 넘어 디지털 가전까지 확장
어도비-엔비디아, 플래시 플레이어 GPU 가속 협력 발표
어도비의 야심작, 오픈 스크린 프로젝트
안드로이드에서 동작하는 Flash Player 10.1 영상

 

정리하며
어도비가 Flash를 다양한 디바이스에서 동작시키기 위해 오픈 스크린 프로젝트를 진행했고 이제 그 결과물을 우리는 하나씩 볼 수 있게 되었다. 

하지만 방금 보여줬던 몇가지 동영상을 보더라도 데스크탑에서 동작하는 Flash 애플리케이션은 모바일에서 사용하기에는 너무 불편한 것은 사실이다.  그래서 디바이스의 특징(가령 데스크탑과 모바일)에 따라 Flash Player 10.1에서 제공하는 터치 및 가속센싱과 같은 API를 활용하여 사용자 경험을 극대화 하기 위한 개발자의 노력이 필요하게 되었다. 그럼에도 불구하고 개발의 약간의 불편함을 제외하고는 기존에 만들어놓은 Flash 컨텐츠를 거의 그대로 사용할 수 있다는 점은 큰 장점이 아닐 수 없다.

Flash Player 10.1 부터 제공하는 새로운 기능은 다음 링크를 참고하면 되겠다.
http://www.adobe.com/products/flashplayer/features/


최근 Apple의 정책 변경에 따라 Flash, AIR를 이용한 앱 개발에 물꼬를 틀 것으로 보인다. Adobe 기술을 이용해 이제는 아이폰, 아이패드와 같은 장치에도 애플리케이션을 배포할 수 있게 된 것이다. 사용자는 기존 다양한 Flash 컨텐츠가 안드로이드 계열의 디바이스 뿐 아니라 iOS 기반에도 탑재가 가능해짐으로써 기존 Flash 컨텐츠를 경험할 수 있는 기회가 더욱 많아졌다.


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

이글은 Adobe RIA 공식 사이트에도 소개 되었습니다.
http://adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=546




오랜만에 오픈캐스트를 올렸습니다. 즉흥적으로 만든거지만 유용하리라고 생각합니다.

좋은 정보가 되길 바랍니다.

http://opencast.naver.com/FL188/18

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

+ Recent posts