3月22日の技術勉強会 - ActionScript3 / Flex / Apollo 勉強会
3月22日に行われました技術発表会の内容を撮影した動画ファイル/資料を公開いたしました。内容は以下のとおりです。
テーマ | ActionScript3 / Flex / Apollo 勉強会 |
---|---|
発表者 | d:id:secondlife |
勉強会動画
音声
ビデオiPod用動画
ActionScript3 / Flex / Apollo 勉強会
やっぱこれからは Flash Da Yo Ne!(flash厨期)
目的
flash 作ったりするやつだよね、というのはなんとなく解るけど、具体的にどんなことができるのか解らない LLer かつ Web アプリケーションエンジニアのための勉強会
- テクニカルな内容ではない
- ざっくり
俺歴史
昨年末
Adobe が Mozilla Foundation に AVM2 のソースコードを提供
わりと興味なくてスルー
- Tamarin については一般的な質問は
- が詳しいよ
最近
- ExternalInterface について調べる
- JavaScript と相互利用が可能なインターフェイスの定義
- Flex2 SDK (2006年6月?公開)を使うと ActionScript3 をコンパイルして swf にできることを知る!
- AS3 周りを追っていくとなにやら面白そう・次世代なかほりが…
- はまる!
というわけで初めて約一ヶ月、解ったことを整理するというのもかねて勉強会
いまさら Flash を覚えるわけ
- マルチメディアコンテンツのマッシュアップ
- XHR では無理なクロスドメインごえ
- ExternalInterface での JavaScript との連携
-
flex2
- 良質なコンポーネント群
- Apollo
使い方を知ってないとアイディアが浮かばない(自分は…)。
でもべつに AS2 でできるよね。
あえて AS3 を覚える理由
AS2 と AS3 は割と違うので、いまから AS2 というのは…。
SSE (Streaming SIMD Extensions : ストリーミング SIMD 拡張) を提供するプロセッサで実行するときに処理が高速化されるフィルタ仕様もあります。畳み込み操作が高速される基準は次のとおりです。
でもこれらはわりと AS2 でもがんばればどうにかなるじゃん?
AS2 だとどうがんばっても(たぶん)できないこと
ActionScript3 を書いてみて
- ES4 ベースだし JavaScript ぽいんじゃ
- どう見ても like Java です。本当にありがとうございました。
- 型指定とかめんどくさーい
- そんなひとのためのコンパイルオプション strict=false as3=false es=true
- でもそれなら as3 使う意味があまり…
初めに・よくある誤解
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/
自分たちに嬉しいのは
- 良くできた GUI コンポーネントが簡単に利用できる
- 他にもかゆいところに手が届くコンポーネント
- HistoryManager
- RemoteObject(Flex Data Service)
-
オフィシャル以外でも、定義されたコンポーネントが利用可能
- わりと海外では様々なコンポーネントを個人が開発している
コンポーネントのレイアウトは基本 mxml という xml に書くよ。css も書けるよ。
内部的には
- mxmlc(コンパイラ) が mxml などの情報から .as ファイルをジェネレート
- -keep オプションをつけるとコンパイラが生成した *.as ファイルが ./generated ディレクトリに保存されるよ
AS3 事始め
ActionScript3 を始めたいけどどうすればいいの?
インストロール(typo
ドキュメント
ローカルに落とそう
覚える順序
本気でやるなら
を最後まで続けると AS3 の基本はだいたい覚えられる。オススメ。下手にオフィシャル以外のドキュメントを読むと混乱しがちだよ。
ここまでの実際の習得コストは 40時間ぐらい?
その他よく参考にする情報源
- Adobe Labs
- osflash
開発環境
Flex2 Builder (高い)を使う場合
- Eclipce な IDE
Eclipce や統合開発環境スキー使ってください。裏側で自動コンパイルがうらやましかった(過去形)。
Flex2 Builder を使わない場合
-
vim の場合
- http://subtech.g.hatena.ne.jp/secondlife/20070208/1170941001
- で、as2 用の syntax highlight と mxml の syntax highlight とか
-
emacs の場合
- ^^;;;
mxmlc でのコマンドラインコンパイル
$ mxmlc Example.as
大きな問題点
-
コンパイルに死ぬほど時間がかかる
- HelloWorld でも数秒
- flex コンポーネントを使うと数十秒
- 値ちょっと変更しただけで wait..............
- LLer には耐えられない!
fcsh を使おう
- Flex Compiler Shell
コンパイル時にメモリ展開しておくことで、二回目からのコンパイルをちょっぱやに。便利!
しかしそれでも
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)
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
関係ないけど
3D
AVM2 が速いので Flash で 3D ぽい表現するライブラリもすごいよ
Papervision3D
channel3
つかいやすい!
Apollo
http://labs.adobe.com/technologies/apollo/
- HTML/Flash/JavaScript の連携が可能
- 特にWindow 枠がないアプリを超簡単に
- widget とか
- GUI なアプリを作るときは flex2 で
- windows/OSX を意識しないでアプリ作成が可能
- AS3/FlashPlayer の API が使える
hatena_logo3d も…
http://rails2u.com/misc/swf/HatenaLogo3d.air
超簡単に移植!
Apollo インストレーション
http://unknownplace.org/memo/2007/03/19#e001
Apollo SDK 展開して Flex2 SDK に上書きで OK
Apollo アプリを作るまで
ActionScript3 単体の場合
Shell.shell.addEventListener(InvokeEvent.INVOKE, onInvoke);
を追加
- InvokeEVENT.INVOKE が呼ばれたときに
NativeWindow (< DisplayObjectContainer) の子クラスを作成
- そこに sprite なり shape なりを追加して描画
コンパイル
adt でパッケージの作成
.air ファイルのインストール
.air ファイルの実体は ZIP ファイル。これを win/mac のアプリがおのおののプラットフォームの exe へとコンパイルする。
完了!
かんたん!(ちょっとうそ)
まとめ
ActionScript3 を覚えることで表現できる事は増えるよ!
はじめてみるのもいいかも