3月22日の技術勉強会 - ActionScript3 / Flex / Apollo 勉強会

g:hatena:id:hatenatech

3月22日の技術勉強会 - ActionScript3 / Flex / Apollo 勉強会

3月22日に行われました技術発表会の内容を撮影した動画ファイル/資料を公開いたしました。内容は以下のとおりです。

テーマ ActionScript3 / Flex / Apollo 勉強会
発表者 d:id:secondlife

勉強会動画

音声

Download

ビデオiPod用動画

070322apollo-01.mp4

070322apollo-02.mp4

070322apollo-03.mp4

070322apollo-04.mp4

070322apollo-05.mp4

070322apollo-06.mp4

070322apollo-07.mp4

ActionScript3 / Flex / Apollo 勉強会

やっぱこれからは Flash Da Yo Ne!(flash厨期)

目的

  • ActionScript3 / Flex / Apollo ってなんなの？

flash 作ったりするやつだよね、というのはなんとなく解るけど、具体的にどんなことができるのか解らない LLer かつ Web アプリケーションエンジニアのための勉強会

俺歴史

昨年末

Adobe が Mozilla Foundation に AVM2 のソースコードを提供

わりと興味なくてスルー

最近

というわけで初めて約一ヶ月、解ったことを整理するというのもかねて勉強会

いまさら Flash を覚えるわけ

使い方を知ってないとアイディアが浮かばない(自分は…)。

でもべつに AS2 でできるよね。

あえて AS3 を覚える理由

AS2 と AS3 は割と違うので、いまから AS2 というのは…。

  • FlashPlayer9 スギョイ
    • AVM2 はえー(最大十倍速)
    • SSE などに特化した関数も(Flash Player8 から?)

SSE (Streaming SIMD Extensions : ストリーミング SIMD 拡張) を提供するプロセッサで実行するときに処理が高速化されるフィルタ仕様もあります。畳み込み操作が高速される基準は次のとおりです。

  • フィルタは 3 × 3 フィルタである必要があります。
  • フィルタ項はすべて -127 ～ +127 の整数である必要があります。
  • すべてのフィルタ項の合計の絶対値は 127 を超えられません。
  • いずれかのフィルタ項が負である場合、除数は 2.00001 ～ 256 である必要があります。
  • フィルタ項がすべて正である場合、除数は 1.1 ～ 256 である必要があります。
  • バイアスは整数である必要があります。

でもこれらはわりと AS2 でもがんばればどうにかなるじゃん？

AS2 だとどうがんばっても(たぶん)できないこと

ActionScript3 を書いてみて

初めに・よくある誤解

ActionScript3 と Flex2 の混同

ActionScript3 = Flex2 みたいに、ごちゃ混ぜにしてるのを見る

誤解の元

Flex2 SDK を使うと ActionScript3 を swf にコンパイルできる！

  • これは Flex2 SDK の一機能

Flex2 とは

じゃあ Flex2 って？

AdobeR Flex 2は、Adobe FlashRをベースにしたリッチインターネットアプリケーションのためのフレームワークです。Flex 2を利用すれば、あらゆるプラットフォームのユーザに対応できる、見ばえの良いスケーラブルなアプリケーションが効率良く開発できます。 http://www.adobe.com/jp/products/flex/

自分たちに嬉しいのは

コンポーネントのレイアウトは基本 mxml という xml に書くよ。css も書けるよ。

内部的には

AS3 事始め

ActionScript3 を始めたいけどどうすればいいの？

インストロール(typo
ドキュメント
ローカルに落とそう
覚える順序

本気でやるなら

を最後まで続けると AS3 の基本はだいたい覚えられる。オススメ。下手にオフィシャル以外のドキュメントを読むと混乱しがちだよ。

ここまでの実際の習得コストは 40時間ぐらい？

その他よく参考にする情報源

開発環境

Flex2 Builder (高い)を使う場合
  • Eclipce な IDE

Eclipce や統合開発環境スキー使ってください。裏側で自動コンパイルがうらやましかった(過去形)。

Flex2 Builder を使わない場合

俺たちゃオールドタイプ

mxmlc でのコマンドラインコンパイル
$ mxmlc Example.as

大きな問題点

fcsh を使おう

コンパイル時にメモリ展開しておくことで、二回目からのコンパイルをちょっぱやに。便利！

しかしそれでも

swf ができあがるまでに手動ですること

めんどい！

そんなときの fcwrap

fcsh wrapper の fcwrap を使うと

インストール方法

svn co svn://rubyforge.org/var/svn/hotchpotch/fcwrap fcwrap
cd fcwrap
rake install_gem

Linux/OSX なら動くよ。win はこの方法だとうまく入らないらしい。

より詳しく(?)は Shibuya.es で。

debug

log.as を使うと、Object#inspect みたいにでき、かつ console.log に出力できて便利！

http://subtech.g.hatena.ne.jp/secondlife/20070219/1171872801

サーバサイドとの連携

連携方法いろいろ

get/post

普通の方法

Socket/XMLSocket

コネクションつなぎっぱであれこれ。

comet っぽいことも簡単に。

AMF0/3

Action Message Format

RemoteObject (Flex Data Service)

AS からリモートオブジェクトを叩けるよ。

Rails での実装もあるよ。

これで ruby 側のインスタンスのメソッドが簡単に呼び出せる！ベンリング！！！

例: 絵を描いてサーバサイドに保存

Paint.mxml


  
    
      
        
            
        
        
            
              
                
                
              
              
                
                
              
              
                
              
              
                
              
            
        
      
    


import flash.events.*;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import mx.rpc.remoting.RemoteObject;
import mx.rpc.events.ResultEvent;
import com.adobe.images.PNGEncoder;

private var _click:Boolean = false;

private function init():void {
    canvas.parent.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
    canvas.parent.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
    canvas.parent.addEventListener(MouseEvent.MOUSE_UP, upHandler);
}

private function moveHandler(e:MouseEvent):void {
    if(_click) {
        var p:Point = new Point(e.stageX, e.stageY);
        p = canvas.globalToLocal(p);
        canvas.graphics.lineTo(p.x, p.y);
    }
}

private function downHandler(e:MouseEvent):void {
    _click = true;
    canvas.graphics.lineStyle(lineWidth.value, lineColor.selectedColor, lineAlpha.value, true);
    var p:Point = new Point(e.stageX, e.stageY);
    p = canvas.globalToLocal(p);
    canvas.graphics.moveTo(p.x, p.y);
}

private function upHandler(e:MouseEvent):void {
    _click = false;
}

private function saveImage():void {
    var b:BitmapData = new BitmapData(canvas.width, canvas.height);
    b.draw(IBitmapDrawable(canvas));
    var png:ByteArray = PNGEncoder.encode(b);

    // リモートオブジェクトの呼び出し処理
    var remoteObject:RemoteObject = new RemoteObject();
    remoteObject.destination = 'ImageSaveService';
    remoteObject.addEventListener(ResultEvent.RESULT, openImage);
    remoteObject.savePng(png);
}

private function openImage(e:ResultEvent):void {
    var req:URLRequest = new URLRequest(String(e.result));
    navigateToURL(req, '_blank');
}

require 'digest/sha1'

class ImageSaveService
  def savePng(png)
    image = png.pack('c*')
    name = Digest::SHA1.hexdigest(image) + '.png'
    open(RAILS_ROOT + '/public/images/' + name, 'w') {|f| f.puts image }
    '/images/' + name
  end
end
RTMP

Real Time Message Protocol

関係ないけど

3D

AVM2 が速いので Flash で 3D ぽい表現するライブラリもすごいよ

Papervision3D
channel3

つかいやすい！

Apollo

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

Adobe のデスクトップRIAランタイムエンジン

hatena_logo3d も…

http://rails2u.com/misc/swf/HatenaLogo3d.air

超簡単に移植！

Apollo インストレーション

http://unknownplace.org/memo/2007/03/19#e001

Apollo SDK 展開して Flex2 SDK に上書きで OK

Apollo アプリを作るまで

もちろん Flex-Builder を使わない方法

ActionScript3 単体の場合
Shell.shell.addEventListener(InvokeEvent.INVOKE, onInvoke);

を追加

  • InvokeEVENT.INVOKE が呼ばれたときに

NativeWindow (< DisplayObjectContainer) の子クラスを作成

  • そこに sprite なり shape なりを追加して描画
コンパイル

amxmlc で swf ファイルを生成

adt でパッケージの作成

XML の情報から .air ファイルを作る。

.air ファイルのインストール

.air ファイルの実体は ZIP ファイル。これを win/mac のアプリがおのおののプラットフォームの exe へとコンパイルする。

完了！

かんたん！（ちょっとうそ）

まとめ

ActionScript3 を覚えることで表現できる事は増えるよ！

はじめてみるのもいいかも