Movatterモバイル変換

[0]ホーム
URL:

Search

Hatena Developer Blog

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

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勉強会

やっぱこれからはFlashDa 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 (StreamingSIMDExtensions :ストリーミング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 って？

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

自分たちに嬉しいのは

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

内部的には

AS3 事始め

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

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

本気でやるなら

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

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

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

開発環境

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

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

Flex2Builder を使わない場合

俺たちゃオールドタイプ

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

大きな問題点

fcsh を使おう

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

しかしそれでも

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

めんどい！

そんなときの fcwrap

fcsh wrapper の fcwrap を使うと

インストール方法

svn co svn://rubyforge.org/var/svn/hotchpotch/fcwrap fcwrapcd fcwraprake 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

ActionMessage 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'classImageSaveServicedefsavePng(png)    image = png.pack('c*')    name =Digest::SHA1.hexdigest(image) +'.png'    open(RAILS_ROOT +'/public/images/' + name,'w') {|f| f.puts image }'/images/' + nameendend
RTMP

RealTimeMessage 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 を覚えることで表現できる事は増えるよ！

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

ツイート

引用をストックしました

引用するにはまずログインしてください

引用をストックできませんでした。再度お試しください

限定公開記事のため引用できません。

読者です読者をやめる読者になる読者になる
[8]ページ先頭
©2009-2025 Movatter.jp