7jigen labs

前にFlex 3.3で作ったものをSDKだけアップデートしようとして、適当にbuild.xmlのSDKのパスだけ変えたらruntime-shared-library-pathはrsl-urlが必要だ云々とのエラーがでた・・・

static-rslsをfalseにしてるので前はこんな感じに書いてたんだけど、

<runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/framework.swc" >
   <url rsl-url="path/framework_0000.swz"  />
   <url policy-file-url="path/crossdomain.xml" />
   <url rsl-url="path/framework_0000.swf"  />
   <url policy-file-url="path/crossdomain.xml" />
</runtime-shared-library-path>

どうやら仕様が変わったようで。ぐぐってもなんも見つからなかったので適当に変えてみた。
（いろいろやってみたけど省く）

どうやらこれがビンゴらしい。なぜならエラーでないし動く。

<runtime-shared-library-path path-element="${FLEX_HOME}/frameworks/libs/framework.swc" >
   <url rsl-url="path/framework_0000.swz" policy-file-url="path/crossdomain.xml" />
   <url rsl-url="path/framework_0000.swf"  policy-file-url="path/crossdomain.xml" />
</runtime-shared-library-path>

ポリシーファイルもframeworkもちゃんと読んでるっぽいから多分これでいいんだろう。
でもドキュメントがどこにあるのか分からないｗ

admin ActionScript3, Flex

今更ですが前作ったMathDisplayにルートの表示を追加しました。

( たまにレイアウトがずれるかも )

分数表示は<fract>から<frac>に変更しました。
ルートは<sqrt>です。

xml表示用サンプル

ダウンロード → packed_sample0_2.zip

admin ActionScript3, Flash, Flex

昔はcakeAMFphpってのがあったんですが、AMF3は使えないようなので、cakephpでAMF3が簡単に使えるオープンソースのプラグインをテキトーにいくつか調べてみました。

cakeswxphp

利点
・設置が簡単
・AMFPHP1.9と同じServiceBrowserが付いてるので使いやすい。
・携帯でもバイナリ通信できるswxもゲートウェイ変えるだけで同じコントローラを利用できて便利。

欠点
・webrootの中にゲートウェイとかブラウザとかを乱雑にぶち込むのはいかがなものか？別にいいけど。

インストール
ダウンロードしたzip内の各フォルダのデータをそのままcakeのappディレクトリの同名フォルダに突っ込むだけです。

ゲートウェイ：　[ cake root ]/amf.php

cakeAMF

利点
・return で値を返さずviewに値を渡すときと同じく$this->set()で値を渡す。（よくわかんないけどデバッグしやすそう＆XMLとかと共用で使えそう）
・アプリケーションのルートURLがゲートウェイのURLになってカコイイ。

欠点
・設置が面倒(index.phpの書き換えとかが必要
・AMFEXT（phpのエクステンション）が必須なので共用サーバ利用の貧乏人＝>俺みたいな人が使えない）
・超肝心要のFlexのRemoteObjectでの通信ができない（ひょっとしたらできるかもだけどNetConnectionのサンプルしかないしよくわからん。知ってる人いたらおしえてください。）

インストール
AMFEXTをextに入れてphp.iniにextension=php_amf.[拡張子]を追加（必須）
pluginsにcakeAMFをぶち込む（フォルダ名は”amf” )
app/webroot/index.phpの
$Dispatcher = new Dispatcher();って書いてあるところの
上の行に
App::import(‘Vendor’, ‘Amf.AmfDispatcher’);
を追加
コントローラに var $componets = array(“Amf.Amf”);
を追加。

ゲートウェイ：　[ cake root ]

cpAMF

利点
・設置が超簡単
・ServiceBrowserも使えるらしい。（うちの環境ではなぜかDebugモードにしても動かず？)
・cakeAMFphpのAMFPHP1.9版みたいな感じで使い易いです！

欠点
・Flex用サンプルのMATEなし版もあったらいいかなーって思った。←ゴメン。ちょと厳し過ぎた・・・
・なぜか使えるはずのServiceBrowserが動かない。（たぶんぼくちゃんだけ）

インストール
そのままpluginsフォルダに入れるだけ。

ゲートウェイ：　[ cake root ]/cpamf/gateway

て事で結論としては、phpならzendのMVC使ってzendAMF使いましょうって事で・・・違うか！！
てか実際にちゃんと構築してみないとどれがいいかわかりません。

AMFEXTはこちらからどうぞ。
phpのextディレクトリにぶち込んじゃってください！

他にもいいのがあったら教えてください。おながいします。

admin ActionScript3, Flash, Flex, php

PerspectiveProjectionでアホな事してはまってしまったので晒しときます。

マウスイベント（クリックとかロールオーバーとか）付きのSpriteをいくつか作って適当にばらばらに配置してメインになるSpriteにaddChildします。メインのSpriteを適当に3Dに回転させたりz方向に移動させたりします。で、そのメインのSpriteのPerspectiveProjectionをnewして適当にパラメータ変えます。するとマウスイベントが、あさっての方向からやってきてしまいます。ｶﾞーん。

アレアレーなんだかやばいなー怖いな怖いなーなんて思っていたんですが、良く考えたらこれって仕様じゃん。だってパースペクティブかかった面回転させてんだもん（わらわら）。

[本日の教訓]
PerspectiveProjection使ったMC回さない。PerspectiveProjection使ったMC回さない。
大事な事なので2度言いました。

admin ActionScript3, Flash, Flex

Tweenerのパチもん？のTweensyってのを今更ながらお試し中です。
処理速度がTweenerより若干速い（軽い？）って噂です。

Tweenerだと↓みたいに書くのが、

1

Tweener.addTween( target, { param: 100 , time: 2 , onComplete:completeHandler , transition:easing } );

Tweensyだと

1
2

var tween:TweensyTimeline =Tweensy.to( target, { param:100} ,2 , easing  );
tween.onComplete = completeHandler;

みたいになります。Tweensyの方がパラメータ以外はコード補完が利くので使いやすそうっすね。

フィルターにも対応してて

1

Tweensy.to( new BlurFilter(), { blurX:10 , blurY:10 } , 1 , easing , 0 , target);

みたいに簡単にフィルターアニメーションもできるらしいです。
（　PixelBenderのシェーダーはまだ試してませんが・・　）

他にもマトリックスやサウンド制御用のクラスも用意されてます。

TweenerにあったMovieClipの_frameパラメータ制御する機能がないのかなあ？といろいろやってたら、どうやらcurrentFrameを使えばできるっぽいです。

1

Tweensy.to( target, { currentFrame:20} , 2 , easing   );

あとTweensyFXっていうパーティクル（とか）用のAPIもあります。

適当にEmittorのパラメータいじって遊べます。↓

admin ActionScript3, Flash, Flex

前回作った算数の式表示するやつをその辺にぺたぺた貼り付けられるようにしたものを作ったので使ってやってください。

コレ→ mathdisplay0_1.zip （9KBくらい）

<xml>A=<fract><n>x</n><d>y<sup>n</sup></d></fract></xml>

↑のxmlをflashvarsで渡すと↓のように表示されます。

一応flashvars で、xml以外にfontsize, fontcolor, t_right , t_leftってのが送れまして、t_right, t_leftってのは、tracking right とleftのことです。
fontcolorは’ff00cc’みたいにしてRGBで送ってあげてください。
くわしくはzipの中にswfobject用のサンプルのhtmlが入ってるんでそれ見てください。
xml作成は前に作ったコレ使うと作りやすいかもしれません。

なんかWP-SWFObjectだとflashvarsが一個しか送れなくってこのブログでは色変更サンプル表示できませんorz
ともったらデキタ！

※WP-SWFObjectのタグ書くときに&を使うと駄目みたいレス。&amp;と書いたらできますた。
var1=a&amp;var2=b みたいに書けばflashvarsいっぱい送れまっす。

WP-SWFObjectでの貼り付け方は↓みたいになります。

[SWF]url, 幅, 高さ, fontcolor=0066cc&amp;fontsize=30&amp;t_left=1&amp;t_right=1&amp;xml=<xml>XMLの内容</xml>[/SWF]

admin ActionScript3, Flash, Flex

text.engine系の勉強がてら算数の計算式表示ツールを作ってみたの。

xmlから特定のタグ拾って算数(もしてかして: 数学）の式が表示できます。
これ

上のフィールドにxml書くと算数の式になります。

っても分数とべき乗（？）しか今のところ対応してませーん＜

↓のテケトーなXMLをつっこむと、

<xml>A^m = πr²<fract><n>2x³ⁿ </n><d>4y </d></fract></xml>

こんな感じで表示されます。<fract>タグが分数表示用で、<sup>タグがn乗の表示用です。fractの中には適当な入れ子タグが２つ必要です。サンプルでは、<n>と<d>になってまっす。

地味っちゃあ地味ですがね。HTMLじゃ表示できないんで、小学校の算数の先生とか趣味のブログ書くときとか不便じゃありませんか？

text.engine( 何とお呼びすれば良いのか・・・）は、TextElement とGraphicElementとGroupElementがContentElementっていう抽象クラスからできてるみたいなんで、xml突っ込んでレイアウトしてContentElement返すDecoratorみたいな構造のパーサにしてみました。なので、

<sup>タグの中に<fract>タグ突っ込むと

こんなんなります・・・

あと普通に文字も打てますよ。

いろいろElementFormatとかのパラメータいじくれるようにしてみたんですが、あんまりいじくると表示がぐちゃぐちゃになります Of course!

ElementFormatは全体で共有して一部オーバーライドしてるだけなので一応パラメータ変更すると中まで反映されますねオモロー

admin ActionScript3, Flash, Flex

Pixel Benderを勉強中なので今回はPixel Bender関係です。はまるとやばそうです。
Pixel Bender で 「Hello World」という文字をシェーダーで作るのはきっと大変です。でも四角や三角より円が簡単に描けるようなので今回は[ 誰でも描けるマル講座 ]でアリマス。パティパティ

まずParameterってのを用意してやります。デフォルトのシェーダーを作って、
output pixel4 dst;　って書いてあるところの次ぐらいの行に以下を追加しませう。

1
2
3
4
5
6
7
8
9
10
11
12
13

parameter float2 center
<
minValue: float2(0);
maxValue: float2(1000);
defaultValue:float2(100);
>;
 
parameter float radius
<
minValue: float(0);
maxValue: float(1000);
defaultValue:float(10);
>;

centerが円を表示する位置です。x,y 座標のセットなのでfloat2になります。
radiusは円の半径です。これは一個でいいので普通にfloatになります。

evaluatePixelってところがピクセルごとの処理内容になるようです。
evaluatePixelは、以下のようになります。

1
2
3
4
5
6
7

void
evaluatePixel()
{
dst = sampleNearest(src,outCoord());
if( distance( outCoord() , center ) < radius )
dst.r *= 2.5;
}

はい、これでシェーダーをRunさせてみると赤い円ができましたね！簡単です。
distance()っていうのは、その名のとおり距離を計算してくれる便利な関数で、
ここでは、center とoutCoord の距離を計算しています。outCoord ()とは現在計算されているピクセルの位置っぽいです。で見ての通り、その距離が、半径より小さい場合は、出力画像(dst)のr(赤)の値に2.5掛けてもっと赤くしてます。
( 2.5って数字は超いい加減なので妥当かどうか疑わしいです。)
この部分の処理をいろいろ変えてやるだけで、結構いろんな事ができちゃうので、円を描くってのもなかなかあなどれねーってことです。

富士山ライブカメラ(三ッ峠山頂カメラ)

↑のフィルターはマル描いて処理を適当に変えただけです。
evaluatePixelの中身は、それぞれ下のような感じです。
(どれもテケトーな処理です）

[Filter2]

1
2
3
4

float2 coord = outCoord();
if( distance( coord , center ) < radius)
coord *= distance( coord , center ) /radius;
dst = sampleNearest(src,coord);

[Filter3]

1
2
3
4
5

float2 coord = outCoord();
float a = distance( center , coord ) ;
if( a < radius )
cd = mix( coord , center , a/radius );
dst = sampleNearest( src , coord );

[Filter4]

1
2

dst = sampleNearest(src,outCoord());
dst.rgb *= radius / distance( outCoord() , center );

他にもlength() とか dot() とかでも簡単に円が描けちゃいますよ。lengthを使った場合は、

1

if( radius > length( center - outCoord() ) )

とすると全く同じようにマルが描けます。。。。。。。。

admin Flash, Flex, Pixel Bender

ページカールっぽい感じにしてみました。

admin ActionScript2, ActionScript3, Flash, Flex, 未分類

drawTrianglesの各入力パラメータが何なのか分かり易いようにサンプルを作りましたん。

[以下誰でも書ける三角形講座です]

verticesの値に 0, 150を追加してみましょう。(vertexになってますが気にしない。）
[0,0,100,0,100,150, 0, 150] となります。そして「draw」をクリック！

はい丸いのが一個増えましたね。
verticesは、x,y,x,yという順序で各頂点の座標を入力していくようです。三角形を書くには３つの点が必要なのでx,yで計６つになりますね。四角形なら８つですね♪

では、面を張りましょう。indicesのところが、0,1,2となっていますが、
これは頂点0,1,2に三角形の面を書くという事のようですね。
新しくできた丸は、verticesの順番上、頂点3のようですので、これに面を張るには、0と2と3の頂点を結んであげましょう。
[0,1,2,0,2,3]となります。フムフム。

さて次にUV(uvtData)です。これは各頂点ごとに画像（以下、テクスチャ）の位置を設定する必要があります。めんどいですねー。なので、verticesとuvのlengthは常に同じになるんです。（サンプルは、lengthが違う場合は自動でuvがnullになる「仕様」となっております。アシカラズ。

頂点３は画像,もといテクスチャの左下にあたりますねん。uvは、テクスチャの最小値が0で最大値が1みたいなので、左側はx軸的には0だよね？で、下はy軸的には1っぽいんで、例えば0,1って入力してやるとビンゴ！なわけです。
[0,0,1,0,1,1,0,1]ってなります。

verticesの値に0, 120を追加して[0,0,100,0,100,150, 0, 120]にした場合は、120÷150 =0.8なのでuvは、0 , 0.8を追加するとゆがみなく表示します。

でスクリプトで書くと
public function drawTriangles(vertices:Vector., indices:Vector. = null, uvtData:Vector. = null, culling:String = "none"):void
なので、テクスチャつけると

1
2
3
4
5

graphics.beginBitmapFill( bitmapdata );
graphics.drawTriangles(Vector.<Number>([0,0,100,0,100,150]), 
Vector.<int>([0,1,2]), 
Vector.<Number>([0,0,1,0,1,1]));
graphics.endFill();

みたいになります。

おまけ(丸を引っ張ると動くっす）

admin ActionScript3, Flash, Flex 新規タグの追加