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)


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
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)  



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)

+ Recent posts