Pixel3Dの座標⇒普通のxy座標

Pixel3Dの座標⇒普通のxy座標 - wonderfl build flash online

Pixel3Dの持つ3D座標を、通常の2次元座標に変換しています。

参考にしたのは、Papervision3Dのソースコードの1つである、「RenderPixels.as」というファイル。

このファイルで、Pixel3DをBitmapDataにプロットしていたので、その部分の計算を拝借。

割と簡単に出来ました。

マウスでクリックした座標とPixel3Dの座標を照らし合わせてPixel3Dにクリックイベントをつけたりすると面白いかもしれないですね。

BetweenAS3使ってみる。 フィルタ系の話。

BetweenAS3にやっと手を出してみました。

Tweenerと勝手が違って最初は微妙な感じでしたが、最近やっと慣れてきました。

で、使ってみて驚いたのはConvolutionFilterとかのTweenもできるってこと。

とりあえずやってみました。

エッジ検出→セピア→エンボスの流れでフィルターをやってみました。




たとえば、ConvolutionFIlter使ってエッジ検出する場合とかは以下みたいに書く。

// bmpはBitmap型

// convolutionFilterを使う場合は最初にこれをセットしておく
bmp.filters = [new ConvolutionFilter(3,3,[0,0,0,0,1,0,0,0,0])];

// tween
BetweenAS3.tween(bmp,
　　　　　　　　　　　{_convolutionFilter:{
　　　　　　　　　　　　　　　　matrixX:3,
　　　　　　　　　　　　　　　　matrixY:3,
　　　　　　　　　　　　　　　　matrix:[-1, -1, -1, -1, 8, -1, -1, -1, -1]}
　　　　　　　　　　　　},
　　　　　　　　　　　　null,
　　　　　　　　　　　　2.0,
　　　　　　　　　　　　Cubic.easeOut).play();

気づいたのは、colorMatrixFIlterとかは何も考えずにトゥイーン出来たんだけど、convolutionFilterのときは「bmp.filters = [new ConvolutionFilter(3,3,[0,0,0,0,1,0,0,0,0])];」みたいに最初にフィルターをセットしてあげないと動かなかった。

ここんとこはそういうものなのかな。

もう少し慣れるまで遊んでみます。

キラキラPixel3D！

キラキラPixel3D！ - wonderfl build flash online

きらきら～。

超久々にAS3でプログラミングしました。

やっぱ楽しい。

PV3Dはこれからどうなっていくのかなー。

SiONを使ってみる。 その6（音にエフェクトをかける）

大絶賛SiONで遊ばせてもらってます。

今回は、エフェクトを使ってみます。

SiONには、「SiEffect○○○」みたいな名前でたくさんの音用のエフェクトが用意されています。

今回は、前回のやつに「SiEffectStereoReverb」というエフェクトをかけてみました。

とりあえず、サンプル（注：音出ます！ ソースは右クリック）。

前回までかけてたフェードインアウトは外してあります。

響いたような感じでカッコよくなったと思います。





エフェクトの簡単な使い方。

// エフェクトの用意
var effect:SiEffectStereoReverb=new SiEffectStereoReverb();

// エフェクトの初期化
effect.initialize();

// ドライバのエフェクタの初期化
driver.effector.initialize();

// エフェクトを追加
driver.effector.connect(0, effect);

// 再生開始
driver.play(mainMelody, false);

これだけ。

手探りで作ってみたけど、エフェクトの使い方これであってんのかな。

SiONを使ってみる。 その5（カスタムフェードを使ってみる）

絶賛SiONで遊ばせてもらってます。

前回、フェードインフェードアウトをやってみたんですが、SiONにはフェードインなどの効果を自分で作れるfaderってのが入っています。

同梱されているサンプルソースにカスタムフェードのサンプルがあったので、参考にしながらやってみました。

とりあえず、サンプル（注：音出ます！ ソースは右クリック）。

前回とちょっと音も変えてあります。

基本はサンプルのをほぼ流用させてもらったわけですが・・。




今回は、ローパスフィルターを使ったフェードインアウトをやってます。

ローパスフィルターってのは要は低周波（低音）を通すフィルタです。

これを使って低音から徐々に音を通すようにすると、普通のフェードよりかっこいいのが出来ると。

カスタムフェードの使い方は、

// ローパスフィルターの用意
var lpf:SiCtrlFilterLowPass=new SiCtrlFilterLowPass();
// 初期化
lpf.initialize();

って、使いたいフィルタを初期化して（今回はサンプルと同じローパスフィルタを使ってます）、

// ドライバのエフェクタの初期化
driver.effector.initialize();
// 0番目のスロットに、フィルタを追加
driver.effector.connect(0, lpf);

ドライバにセットして、

// フェードの実行
// フェーダー中に実行する関数、フェードする範囲と、時間を設定。
// 「n * 44100 / 2048 」でn秒らしい（サンプルより）
fader.setFade(fadeLPF, 0, 1, 8 * 44100 / 2048);


// フェーダーから呼ばれる関数
private function fadeLPF(v:Number):void
{
   // フィルタの範囲を設定
   lpf.control(v, 0.5);
}

みたいにfaderを実行して終わり。

注意点としては、再生するときは「driver.play(mainMelody, false);」みたいに第２引数を設定してあげないといけない。

なんという簡単仕様。すごいなSiON。

ローパスフィルタのフェードアウトがすごくかっこよくてお気に入りです。

SiONを使ってみる。 その4（フェードインとフェードアウト）

絶賛SiONで遊ばせてもらってます。

今回は、音のフェードインとフェードアウトを行います。

前回のを改造。

とりあえず、サンプル（注：音出ます！ ソースは右クリック）。




方法は非常に簡単。

フェードインをしたい場合は、

// 7秒かけて、フェードイン
driver.fadeIn(7);

みたいに書くだけ。



フェードアウトは、フェードアウトしたいタイミングで、

// フェードアウトを実行する関数（7秒かけてフェードアウト）
private function onFadeOut():void
{
   if (!driver.fader.isActive) driver.fadeOut(7);
}

みたいな関数を実行すればいいだけ。

非常に簡単に出来てしまいます。

ただ、フェードアウトの時にちょっと注意。

フェードアウト終了時に音の再生を終了したい場合は、

// フェードアウトにあわせて音を止める
driver.autoStop=true;

として、autoStopプロパティを設定しておかないといけない。

これをしないとフェードアウト終了時にもとの音量に戻ってしまう。

これだけ気をつけないといけないかな。




ちなみに、今回は使ってないですが、「SiONEvent.FADE_PROGRESS」、「SiONEvent.FADE_IN_COMPLETE」、「SiONEvent.FADE_OUT_COMPLETE」のようにフェードインフェードアウトに合わせたイベントも用意されてました。

どんだけ至れり尽くせりなライブラリなんですか、SiONさん。

SiONを使ってみる。 その3（音色を変えてみる別バージョン）

絶賛SiONで遊ばせてもらってます。

前回、音色の変更をやってみたんですが、別な方法を見つけました。

というか、多分こっちの方が正規な方法の気がする。




方法としては、

// 音色を変更
var presetVoice:SiONPresetVoice=new SiONPresetVoice();
var voice:SiONVoice=presetVoice["valsound.piano3"];
driver.setVoice(0, voice);

みたいに、setVoiceで音色をセットする。

そのあとMMLのコマンドで、

var str:String="";
str+="%t0,1,1 t100 %6@0cdefedcr %6@0efgagfer %6@0crcrcrcr l8 %6@0ccddeeff l4 %6@0edc;";

みたいに、音を変更したい部分に「%6@0」を追加する。

@0の0が、setVoiceで指定した番号。だから、番号変えて色々な音をセットできる。

%6ってのはモジュール番号らしい。この部分だけよく分かっていない。後で調べる。

あとは、普通にplay()してあげれば音色の変わった音が出る。

sequenceOnメソッド使わなくても音色変更出来た。




一応サンプル（注：音出ます！ ソースは右クリック）。

前回のより何かテンポが遅くなった。

やっぱMMLをある程度理解しないといけないっぽいなぁ。



---------------------------------------------------------------------
（追記）

setVoiceの場所ですが、driverに対して行うのではなく、driver.compileメソッドから受け取ったSiONData型の変数に対して行った方がいいみたいです。

今回のサンプルでいうと、

「driver.setVoice(0, voice);」　　→     「mainMelody.setVoice(0, voice);」

にした方がいいかもってこと。

このほうが各SiONData型の変数に対して音色の設定ができるのかな。

SiONを使ってみる。 その2（音色を変えてみる）

絶賛SiONで遊ばせてもらってます。

今回は音色を変更してみました。

前回作ったやつの音をピアノに変更してみました。

こんな感じ（注：音出ます！ ソースは右クリック）。





SiONには、プリセットで色々な音色が入ってます。

音色の変更方法としては、

// compile() メソッドであらかじめ SiONData を作っておく
mainMelody=driver.compile(str);

// 音色を変更
var presetVoice:SiONPresetVoice = new SiONPresetVoice();
var voice:SiONVoice = presetVoice["valsound.piano3"];

// 再生開始
driver.play();
driver.sequenceOn(mainMelody, voice, 0,0,0);

みたいにプリセットの音を指定して、再生。

本来sequenceOnメソッドは、別に再生してあるMMLと連携しながら再生するためのものなんで、使いどころ間違ってるかもしれないけど。

とりあえず、ちゃんと音は変わってくれた。

プリセットはいろいろあって、この辺は検索すれば色々出てきそう。

SiONを使ってみる。

先日知った、SiONというライブラリを使ってみることにしました。

いわゆる、音を扱うライブラリで、MMLを利用した音楽再生などが出来ます。

ちなみに、自分はMMLというのも初めて知りました。

MMLとは、「Music Macro Language」の略で、コマンドの様に書いていってそれで音を作成します。

今回はとりあえず、MMLで「かえるの歌」でもやってみました。

こんな感じ（注：音出ます！ ソースは右クリック）。




基本的には、

var str:String="";
str+="%t0,1,1 t100 cdefedcr efgagfer crcrcrcr l8 ccddeeff l4 edc;";
str+="%t0,1,1 t100 rrrrrrrr cdefedcr efgagfer crcrcrcr l8 ccddeeff l4 edc;";
str+="%t0,1,1 t100 rrrrrrrr rrrrrrrr cdefedcr efgagfer crcrcrcr l8 ccddeeff l4 edc;";

みたいな感じでMMLのコマンドを文字列で書いていって、

// ドライバ
var driver:SiONDriver=new SiONDriver();

// MMLデータを保持
var mainMelody:SiONData;

// データをコンパイル
mainMelody=driver.compile(str);

// 再生
driver.play(mainMelody);

みたいな感じで再生する。

あっさり。

苦手だった音のプログラミングがあっさり出来てしまった。

しかも音との連携もあっさり出来る（noteOnが音のなり始め、noteOffが音のなり終わり。多分だけど。）。

SiON・・・恐るべし！



まだMMLのこととがよく分からないし、もうちょっと遊んでみよう。



------------------------------------------

（追記）

noteOnなどのイベントに関して、詳しい記事を見つけたので。

こちらの方がすごく詳しくかいてあって参考になります。

SiONをやってみよう・・・基本編2：イベント・トリガー - logicalyzeblog

外部のswfを読み込んでうんらた 2

外部swfローディングをまた。

ちょっくら基本の復習です。

とりあえず、こんな感じ（右クリックでソース）。



前作ったやつとの違いは、swfのローディング方法。

ProgressEventで指定した関数の中でローディングバーを書くんじゃなくて、ローディングバーでロード状況、フレームイベントでローディングバー描写みたいに分けてます。

前回のやつだと軽いファイルをロードする場合ローディングバーがほとんど見えなんですが、今回のだと軽いのでもちゃんとローディングバーを見せてくれます。




軽いファイルをロードするときに、ローディングバーが一瞬で消えちゃうのがなんかいやだったんで、ちょっと作り直してみました。

もっとスマートな方法を知りたい。

Externalinterfaceの練習 その2

「Externalinterface」の練習中。

JavaScriptからActionScriptを呼び出す場合、「ExternalInterface.addCallback」を利用します。




まず、ActionScriptでJavaScritから呼び出す関数を用意します。

public function setText(str:String="null"):void
{
   var t:TextField=new TextField();
   t.autoSize=TextFieldAutoSize.LEFT;
   t.defaultTextFormat=new TextFormat(null, 20, 0xffffff);
   t.text=str;
   addChild(t);
   t.y=40;
}

そして、これをJavaScriptで呼び出せるように登録します。

// JavaScriptから、setFuncという名前で呼び出せるようになる。
ExternalInterface.addCallback("sefFunc", setText);

JavaScript側からは、以下のようにして呼び出します。

<script type="text/javascript">
// SWFObjectでswf埋め込み
swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "swfobject/expressInstall.swf",{},{bgcolor:"#000000"});

// 埋め込まれたムービーを取ってくる関数
function getMovieName(movieName)
{
    if (navigator.appName.indexOf("Microsoft") != -1) {
       return window[movieName];
    }
    else {
        return document[movieName];
    }
}

// 呼び出したい場所に以下を記述する。引数も渡せる。
getMovieName("myContent").sefFunc("call from JS !");
</script>

これで、JavaScriptからActionScriptの関数を呼び出せるようになります。





超簡単なサンプはこちら。

サンプルの流れとしては、ASからJSの関数を呼び出し→その関数の中でJSからASの関数を呼び出し って感じ。

HTMLとasファイルのまとめたのはこちら。

Externalinterfaceの練習

「Externalinterface」とは、ActionScriptとJavaScript間で連携を行う際に利用します。

ActionScript側から、JavaScriptに記述してある関数を呼び出すには、「Externalinterface.call」を利用します。




まず、JavaScript側で関数を作成する。今回はブラウザ判定の関数を作りました。

<script type="text/javascript">
function getBrowserType()
{
    var isBrowser;
    if(navigator.userAgent.indexOf("MSIE") != -1) isBrowser = "IE";
    else if(navigator.userAgent.indexOf("Firefox") != -1) isBrowser = "FireFox"
    else isBrowser = "What is this browser !?";

    return isBrowser;
}
</script>

あとは、ActionScript側で呼び出して終わり。

//  関数名を指定して呼び出し
var type:String=ExternalInterface.call("getBrowserType");

呼び出しが失敗した場合はnullが帰ってきます。




ちなみに、引数を持って行くこともできます。

JavaScript側で引数を持って行く関数を作って。

<script type="text/javascript">
function calcSum(n1, n2, n3)
{
     return (n1 + n2 + n3);
}
</script>

ActionScript側で呼び出す場合に引数を渡します。複数渡したい場合は引数を複数書けばOK。

// 引数に1,2,3を指定。帰り値は6が帰ってくる。
var sum:int=ExternalInterface.call("calcSum", 1, 2, 3);

割と簡単に出来てしまった。

一応動作サンプル。

HTMLとasファイルをまとめたのはこっち（SWFObjectは同梱してません）。

SWFObjectで全画面表示swfの復習。

有名なSWFObjectの復習です。

いつもFlexBuilderでリリースしたものを使っているので、SWFObjectをしっかり使ったことがなかったもんで。





サイトからzipをDLして解凍すると、中には複数のファイルが入っています。

「expressInstall.swf」、「swfobject.js」の2つのファイルを使います。

同梱してある２つのhtmlファイル、「index.html」、「index_dynamic.html」ともSWFObjectの使い方のサンプルファイルで、2つのHTMLでそれぞれ別の記述方法で書いてあります。

自分は今回は、「index_dynamic.html」に記述してある方法を利用しました。

<script type="text/javascript">
  swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "swfobject/expressInstall.swf",{},{bgcolor:"#000000"});
</script>

サンプルの方法に、背景色の指定を加えました。

また、幅と高さを100%で全画面表示に。





ただ、このままだとIEではうまくいったのですが、FireFoxやOperaで正しく表示されませんでした。

解決方法は以下のサイトにありました。

nondelion.com - swfobject で flash を Window 内に全画面表示


ここにあった通り、以下のCSSを記述。

<style type="text/css">
<!--
     body
　　{
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
     }

     html, body {
         overflow: hidden;
     }
-->
</style>

一応、これでIE、FireFox、Operaでうまくいきました。



ちなみに、以下の記事を参考に、swfのキャッシュも防いでいます。

SWF ファイルのキャッシュを防ぐ方法




一応、動いているサンプル。

ちゃんと動作していると思います。




ちなみに、ローカルで動かない場合や、セキュリティサンドボックス侵害とかが出る場合は、SWFObjectに渡すパラメータをいじってやるとうまくそうな。

「allowScriptAccess」を「always」にするとローカルでうまくいくとかね。

パラメータの指定場所は、以下のサイトが詳しく書いてあります。

SwfObject - SWFObject(swfobject.js) 2.1についてメモ

メニューのサンプル

ランダムテキストを利用して簡単なメニューのサンプルです。

こんな感じ（右クリックでソース表示）。

何か作りたくなって作ってしまった。

本当にメニューだけ。

コンテンツないからクリックしても音がなるだけです。

ロールオーバーの動きには以下を参考にさせてもらいました。



trick7 - ロールオーバー効果へのこだわり



ランダムテキストは結構好き。

自分用のクラスを作って色々流用してます。





ランダムテキストのサンプルは以前にwonderflにも投稿しました。

久々に見てみたらフォークされてて今日作ったやつとだいたい同じ感じになってた。

こっちを先に見りゃよかった・・。

ランダムテキストのサンプル - wonderfl build flash online

wonderflに投稿してみました15 3Dでアトラクタっぽいの

PV3Dその10 3Dでアトラクタっぽいの - wonderfl build flash online

久々にwonderfl。

前からアトラクタやってみたかったんで、PV3Dと組み合わせて3Dアトラクタって感じのやつを。

クリックで再描写です。

見やすくて綺麗な時もあれば、見づらい時もあります。

いやーアトラクタっていいですよね。




ちなみに、パーティクルの管理は配列ではなくていテレータでやってます。

パーティクル祭りの復習もかねてます。

パーティクル祭りをいまさら復習しています。

Wonderflでちょっと前にあったパーティクル祭り。

今さら感がありまくりですが、勉強させてもらってます。

特に勉強させてもらったのはこの２つのコードです。


・forked from 10万個ぱーてぃくる - 軽く高速化 wonderfl build flash online


・swirl (10000 particles) wonderfl build flash online


配列ではなくて、イテレータでパーティクルを操作した方が高速になるんですか。

勉強になった。

一応、ソース見ながら自分でも作ってみました。

こんな感じ。

いやー、wonderflは本当に勉強になります。






ほとんどパクリなんでソース公開は自粛しとく・・・。

FLARToolkitで遊んでみる その5

絶賛FLARToolkitで遊ばせてもらってます。

遊んでいるうちに、なんかへんなの召喚してしまった。







BitmapFireEffect使いたくなっただけです。はい。

ソースとか画像をまとめたものはこちら。

マーカー等は、スタートガイドのものを使わせてもらってます。

FLARToolkitで遊んでみる その4

絶賛FLARToolkitで遊ばせてもらってます。

久々にサウンドスペクトラムをやってみまいた。

MP3はこちらのものを使わせて頂いています。










綺麗なような微妙なような・・。




以下、ソースです。

マーカー等は、スタートガイドのものを使わせてもらってます。

続きを読む "FLARToolkitで遊んでみる　その4"

FLARToolkitで遊んでみる その3

絶賛FLARToolkitで遊ばせてもらってます。

今回は、オリジナルのマーカーを作ってみました。

オリジナルのマーカー作成に関しては、下の記事を参考にさせてもらいました。



簡単！ FLARToolKitをはじめよう！ デベロッパーセンター



とりあえず、適当ですがオリジナルのマーカーを作成。

























参考記事に、マーカーを作るためのルールが書いてあります。

それに準ずれば基本的に大丈夫なようです。

作成したマーカーの画像からpatデータに変換するのは、太郎氏が制作されたARToolKit Marker Generator Onlineというのを利用します。

これで簡単にpatデータが作成できます。

あとはプログラムで読み込んで、はいおしまい的な感じです。

この前作ったやつを、オリジナルのマーカー使ってやりなおしてみました。

ちゃんと認識されてます。

よしよし。

FLARToolkitで遊んでみる その2

FLARToolKitで遊び中です。

以前saqoosha先生がやってた、Papervision3D で穴の中身だけレンダリングするってのをやってみたくて作ってみました。

それと、FLARToolKitを使ったAR系Flashの作り方も参考にさせていただきました。

とりあえず、動作例は下みたいな感じ。

今回は、FLARBaseNodeにaddChildせずに、sceneにすべてaddChildして計算をしています。




以下、ソースです。

マーカー等は、スタートガイドのものを使わせてもらってます。

続きを読む "FLARToolkitで遊んでみる　その2"

FLARToolkitで遊んでみる

ふとやりたくなったので、FLARToolkitをやってみることに。

スタートガイドにサンプルがあったので、それを見ながらいじっていく。

サンプルではソースコードが3つのクラスに分けてあったので、自分の理解のためにと、1つにまとめてみました。

で、サンプルではキューブだったので、今回はPixel3Dを表示してみました。

動作例は下みたいな感じに。






おお。

すっごい簡単に出来てしまった。

これはおもしろい。







以下、ソースです。

とは言ってもスタートガイドとほとんど同じ感じだけど・・・。

マーカー等は、スタートガイドのものを使わせてもらってます。

続きを読む "FLARToolkitで遊んでみる"

そうめんをさわってみた その6

そうめん練習中。

今回は、FlickrAPIとPV3Dを使って以前作った作品をそうめんVerとして書きなおしてみました。

サンプルはこちらです（右クリックでソースが見れます）。




スレッドの流れは、

プログレスバー作成して、それのリサイズイベント用スレッド実行
↓
APIにアクセスして、XMLをロード
↓
XMLを解析して、画像をロード
↓
画像からPV3DのPlaneを作成。リサイズイベント用スレッドは割り込みで停止。
↓
Planeを出現
↓
Planeコントロール用スレッド実行

って感じです。






以前そうめんを使わずに作った時は、イベント系の処理がすごくめんどかった。

なので、そうめんを使ったことでaddEventListenerから解放されたのですごくいい感じにプログラムが組めました。

順序立てて考えができるので、デバッグとかもやりやすかたったし。

ただ、なんとなくソースコードが異様に長くなってしまうような感じがします。

こればっかりはうまく書いていくしかないっすかね。

そうめんをさわってみた その5

久々のそうめん。

今日はeventの練習です。

とりあえず、サンプルはこんな感じです（右クリックでソースが見れます）。

そうめんでは、MouseEvent.CLICKなどのイベントはaddEventListenerで受け取りません。

「event(target, "イベント名", function)」みたいに書くそうです。

これで、利用後のremoveEventListenerまでやってくれるとか。

便利です。




今回のサンプルは、「円を作成→円を回す。その中でMouseEvent.CLICKを監視→クリックされたらそれを真ん中に→またクリックされたら元に戻す」っていう流れをスレッドで作成しています。

個人的にはまだ書き方が分からない感じ。

円を動かす過程で、毎回eventを実行しているんですけど、これって毎フレームaddEventListerしている感じなんですかね。

なんか効率いい感じがしない・・・。

誰か正しい書き方教えてほしいです。




---------------------------------------

（追記）

イベントの話。

イベント監視用のスレッドを別に作ればいいんですよね。

こっちではそんな風に作ってみてます。

wonderflに投稿してみました14 & Papervision3Dをやってみた50

PV3Dその9 ほし - wonderfl build flash online

ほしです。

数式を使って簡単プログラム。

課題がうまくいかないから気分転換でやりました。

ああ課題よ早く終われ。

WonderflでAS3.0の復習 その3 BitmapDataとパーティクル

BitmapDataの復習。

下の2つを参考にしました。


・HANABI wonderfl build flash online

・燃えながら出てくる文字(修正版) wonderfl build flash online


とりあえず、こんなのとか、こんなの作ってみた。

パーティクルをやるときはパーティクルそれぞれをaddChildするのではなくて、BitmapDataにdrawすると速くなる。

Spriteとかを任意の場所にdrawするときは、

// pはSpriteとか。canvasはBitmapData。

var mat:Matrix=new Matrix;
mat.translate(p.x, p.y);
canvas.draw(p, mat, null, BlendMode.ADD);

みたいに、Matrixをつかって位置を調整する。




いやー最近のWonderflはすげーレベル高くて勉強になる。

外部のswfを読み込んでうんらた

外部のswfを読み込む方法の備忘録。

普通にLoaderで読み込む。

ただ、swfの中で定義されている関数とかを実行する場合はちょっとコツがいるらしい。

とりあえずサンプル。

右クリックでソースが見れます。

とりあえず、「swfをロード→addChild→swf内の関数で表示」って流れです。

Flexのポップアップの備忘録

Flexのポップアップの備忘録。

参考にさせていただいたサイトはこちら。

とりあえず、



・メインからポップアップへのデータ受け渡し

・ポップアップからメインへのデータ受け渡し



は覚えておきたい。

あと、色とかはsetStyleで設定する。

サンプルはこんな感じ。

右クリックでソース見れます。

wonderflに投稿してみました13 & Papervision3Dをやってみた49

PV3Dその8 Pixels使ってみる - wonderfl build flash online

久々にFlash。

AS3.0を打ってるとすごく癒されるこの頃。

Pixel3D使ってみました。

10000個くらい普通に表示できたのは驚きました。

ローテーションの角度を簡単に計算する場合は、「viewport.containerSprite.mouseX 」とかを利用すると簡単に計算できます。

お手軽。

海外への日本Flasher情報発信地 「JActionScripters」

twitterで、「海外向けに、みんなで英語のブログをやらない？」という発言から、わずか数日。

海外向けの日本Flasherブログが発足しました。



JActionScripters



日本の有名なFlasherの皆さんが参加されています。

記事はすべて英語。

海外への情報の発信地となる感じです。

さっそく投稿がどんどんされていて、すごく楽しいです。






ちなみに、このブログができる様子がずっとtwitterで行われていて、それを見ていて面白かった。

twitterも貴重な情報源になってきてる気がします。

そうめんをさわってみた その4

絶賛そうめん勉強中です。

そうめんでは、SerialExecutorやParallelExecutorを利用して複数のスレッドをまとめたとき、その進歩状況を獲得することが出来ます。

ロードのプログレスバーを作成する場合などで利用できます。

今回は、まず「画像を複数順々に読み込む→プログレスバーをフェードアウト→画像を順々に表示」ってスレッドを作成して実行します。

そんで、別に進歩状況を見るスレッドを作成して、それでプログレスバーを動かします。

っていうか、サンプルを改造したまんまです。

とりあえず、こんな感じのサンプルを作ってみました。





今日わかったことは、

・複数の進歩状況を見る場合は、MultiProgressってのを利用する。

・IProgressを継承したクラスには、percentっていうプロパティがあって、それで進歩状況を見ることができる。

って感じですか。




以下、ソースです。

画像は、こちらのものを利用しました。

続きを読む "そうめんをさわってみた その4"

そうめんをさわってみた その3

絶賛そうめん勉強中。

今回は、TweenerThreadってのを利用してみました。

Tweenerをスレッドとして利用できます。

サンプルとして、「shapeをフェードイン→右へ→左へ→右へ・・・」って流れを作りました。

こんな感じです。

Tweenerのスペシャルプロパティもちゃんと利用できました。





今回学んだことは、

・Tweenerを利用する場合は、TweenerThreadを利用する。

・TweenerThreadはスペシャルプロパティも利用可能。

ってこと。ただ、スペシャルプロパティを利用する場合は、ちゃんとColorShortcuts.init()とかで初期化してあげないといけないです。





以下、ソースです。

続きを読む "そうめんをさわってみた その3"

そうめんをさわってみた その2

そうめん練習中。

今回は画像を読み込んでみました。

今回の処理の流れは、「画像のデータが書かれているXMLを読み込む→XMLからデータを取り出して、画像を読み込む準備をする→画像が全部読み終わったら表示させる」 って感じです。

画像やXMLなどの外部ファイルを読み込んだりするスレッドは、URLLoaderThreadを利用します。

「画像を全部読みこむ」って処理は、ParallelExecutorってのを利用します。

これは、「登録された処理を同時開始して、全部終わったら次の処理へ進む」ってが出来ます。

同じようなので、SerialExecutorってのもあります。

これは、「登録された処理を順番に開始して、全部終わったら次の処理へ進む」ってをやります。

読み込み処理をまとめることができるのはすごいうれしいです。





今回覚えたことは、

・joinメソッドで、そのスレッドが終了するまで、その呼び出した側のスレッドを中断させる。

・処理をまとめるのはParallelExecutorとSerialExecutor。

・エラーハンドラはerror()で登録する。





今回はこんな感じ。

以下、ソースです。

画像とか全部まとめたのはこちらです。

続きを読む "そうめんをさわってみた その2"

そうめんをさわってみた その1

後輩と一緒にそうめん勉強中。

サンプルたくさんあったので、それを見ながら勉強中。

ものすごい基本中の基本をやってみました。

こんな感じです。

そうめんってのは、スレッド（処理の流れのこと）を扱うことができる、疑似スレッドライブラリです。

「こうやって、次にああやって、最後にこうする」みたいな、順序立てたプログラミングが簡単にできます。

Javaでスレッドをやったことのある人とかはとっつきやすいかも。

今回は、「円を書く→1秒停止→円の色を変える→1秒停止→円の色を変える→1秒停止→円を消す」ってのをスレッドで操作しています。

こういうのを何も使わずに書くと割りとめんどいのが、そうめん使うと簡単にできます。





今回覚えたこととしては、

・最初にライブラリの初期化を行う。初期化がすでに行われているかどうかは、Thread.isReadyで調べることが出来る。

・Threadクラスを継承したクラスを作成して、runメソッドをオーバーライドする。そんで、startメソッドでスレッド開始。

・nextで次に実行する関数を決定できる。

・次に実行するスレッドが指定されていない場合は、finalizeメソッドが実行される。これは、エラー処理後でも実行される。





とまあこんな感じ。

以下、ソースです。

続きを読む "そうめんをさわってみた その1"

ＡＩＲでのリサイズを禁止する

Adobe AIRで作成したアプリは、右下をマウスでドラッグして自由にリサイズができます。

これのリサイズ許可/禁止を自由に設定したい場合の話。

WindowedApplicationの「resizable」プロパティを利用してリサイズを禁止することができるんですが、これは途中で変更することができず、最初での決め打ちになります。

そこで、

private function init():void
{
    stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZING, onResizing);
}


private function onResizing(e:NativeWindowBoundsEvent):void
{
    e.preventDefault();
}

って書いて、イベントをキャンセルしちゃいます。

上のinit()関数はapplicationCompleteで実行させます。

Flex/AIRでstageにアクセスできるのは、applicationCompleteからです。

これでリサイズ不可に（マウスのリサイズが出来ないだけで、最大化などは可能です）。

またリサイズをやりたい場合は、removeEventListenerを利用してイベントを外します。

マウスでスクロールするメニュー

マウスの位置を利用して、メニューをスクロールするやつ。

こちらを参考にさせてもらいました。

こんな感じです。

割と簡単に実装できるもんですね。






ソースは右クリックから見れます。

wonderflに投稿してみました 13

ランダムテキストのサンプル - wonderfl build flash online

ランダムテキストです。

これ系はカッコよくて好きです。



最近は先輩に教わりながらCentOSでサーバー立ててます。

wonderflに投稿してみました 13

マウスから逃げる - wonderfl build flash online

雪が降る - wonderfl build flash online

なんとなく作った。

最近はFlexでHP何個か作ってます。

Progressionに手を出してみる

去年から流行しまくりのProgression。

今まではFlexメインでの開発だったんですが、手を出してみることにしました。

本家サイトのドキュメントを丸パクリしながらサンプルを作ってみました。

FlexBuidlerでの開発方法が調べても出てこなかったので完全に自己流。



・新しいプロジェクトを作って、Preloader以外のswfを作って、リリース。

・Preloaderのプロジェクトを別に作って、最初に作ったswfをもってきて、リリースして公開。


みたいな流れ。

超力技です。

作ったサンプルはこんな感じです。

シーンが3つ作ってあって、ボタンで各シーンに移動します。

ソースは、メインシーンはこれで、プリローダーはこちらです。



まあJavaScript関係なにもしてないから当然の如くディープリンクなし。

やっぱCS3 + FDかな。

PV3DとBox2Dでドラッグしたり

暇を見て、PV3DとBox2Dの組み合わせを再び。

ドラッグ機能をつけました。

こんな感じです。




参考にさせてもらったPV3D + Box2Dでのドラッグのサンプルは、こちらのサイトや、先日clockmakerさんが公開したこちらです。

両方に共通しているのは、独自のイベントを作成して利用していることです（Pv3dArrayEvent だっけかな）。

今回は2つのサイトを参考に可能な限り簡単に書こうと思い、独自イベントを用いずに、1つのファイルにまとめて書きました。

全部で300行くらいです。

ソースは右クリックで見れます。

Box2Dのバージョンは2.0.1です。




本当はReflectionViewを利用したかったんですが、

ブラウザをリサイズするたびに鏡面が上下にずれまくって使い物にならなかったんでやめた。

私の利用方法が悪いんでしょうかね。

ここはちょっと調べる。







(追記)

ReflectionViewで鏡面がずれる結果が一応わかりました。

リサイズイベントでstageにアクセスしてるのが原因っぽい。

そこをコメントアウトしたらずれない様になった。

なんでこうなるのかは不明。

同じようなエラーのプログラムも見当たらないし。

あー何でだ。

大画面FLV + ドットパターン

詳しくはこちらで解説されています。




たまに見かける全画面にflv動画が流れているフルフラッシュのサイトをみかけます。

普通、flvを拡大すると画像が荒くて見てられないものですが、その上にドットのパターンを乗せると不思議とかっこよく見えてしまいます。

やり方は参考サイトのものをそのまま使わせてもらいます。

ドットのパターンを作成して、それを利用してbeginBitmapFillで塗ったものを上に乗せるだけ。

サンプルとして、こんなの作ってみました。

ボタンでドットの有無を選択。

ドットがないと見れるもんじゃない。

今回は、Spriteにパターンを描写してVideoDipsplayにaddChildしました。




簡単で効果的な手法だと思います。

勉強になった。

wonderflに投稿してみました 12

PV3Dその7　エフェクト - wonderfl build flash online

エフェクトをいじる。

マウスの場所によって色が変わるけど計算は適当だからあんまきれいじゃない。

ちょっと残念。

AVM2にAVM1のSWFをロード

タイトルの通りです。

後輩が、FlashCS3使ってswf読み込みたいんだけどエラー起こるから何とかしてってことで。

読み込もうとすると、「flash.display::AVM1Movieをflash.display.MovieClipに変換できない」ってエラーが起きます。

無理矢理読み込むには、ByteArrayで読み込んでヘッダを書き換えてやらないといけない。

めんどくさいので、Beinteractiveさんが公開しているForcibleLoaderってのを利用。

これを使うと簡単に読み込めます。

これで解決。




卒論発表終わりました。

何とかなったと思う。

wonderflに投稿してみました 11

光る玉 - wonderfl build flash online

BitmapDataでのエフェクトの練習。

卒論も何とかなりそうだし、基本をやり直そうと思いまして。

理想としては、カラフルなもやみたいな、雲みたいなのを作りたいんです。

カーブを描く動きは、Tweenerのスペシャルプロパティを利用しています。

wonderflに投稿してみました 10

PV3Dその6 Flexコンポーネントを無理矢理張り付ける - wonderfl build flash online

PV3DのCubeに、Flexコンポーネントを無理矢理貼り付けました。

コンポーネント自体は、黒いCanvasで隠してあります。

もっとスマートな隠し方ないですかね。

wonderflに投稿してみました 9

PV3Dその5 Planeを球体っぽく並べるのをPV3Dで。 - wonderfl build flash online

球体配置。

前、FP10で作ったのをPV3Dで作り直し。

wonderflに投稿してみました 8

PV3Dその4 前作ったらせん階段をPV3Dで。 - wonderfl build flash online

前作ったのをPV3Dで作り直す。

PV3Dは、カメラを動かすのが簡単。

wonderflに投稿してみました 7

PV3Dその3 - wonderfl build flash online

また投稿。

Vectorvision3DがPV3Dに統合された感じですか。

ただ、

・Word3D → Text3D

・VectorShapeMaterial → Letter3DMaterial　

という風に、多少名前が変わってるので注意。

そこ以外は同じです。

wonderflに投稿してみました 7

Papervision3Dが利用可能になったみたいなので。

とりあえず以前作ったのを投稿。

PV3Dその1 - wonderfl build flash online

PV3Dその2 - wonderfl build flash online

待ちに待ったPV3Dの利用可能のニュース。

面白い作品がどんどん投稿されるでしょう。

楽しみです。

wonderflに投稿してみました 6

階段を上るやつ2 - wonderfl build flash online

らせん階段を上ります。 - wonderfl build flash online

２つ投稿。

論文とりあえず形になりました。

wonderflに逃げまくってたから結構焦ってたんですけど、何とかなった。

いやーよかったー。

wonderflに投稿してみました 6

階段を上るやつ - wonderfl build flash online

以前、Papervision3Dでこいうのを作ったが、それをFP10の3Dを使って作りなおし。

最近はZソートの方法がいろいろ出てきているから、単純な3D表現なら簡単にできていいです。

これでCubeとかプリミティブが普通に実装されたら楽なんですけどね。

たぶんないと思いますけど。

wonderflに投稿してみました 5

メビウスの輪っぽいの - wonderfl build flash online

メビウスの輪。

前Papervision3Dで作ったやつをFP10の3D機能を利用して作成。

あー論文実験やり直しー。

wonderflに投稿してみました 4

Spriteを渦巻きみたいに並べる。 - wonderfl build flash online

またまた投稿。

今度は渦巻きです。

wonderflに投稿してみました 3

エッジ保存平均化（ちょっと重いです） - wonderfl build flash online

またwonderflに投稿してみました。

前作ったやつをFlickrと連動するようにしただけ。

画像を取ってきてkuwaharaっていう手法で画像処理を。

スペックによっては重いかも。




全国の卒論に追われている学生のみなさん。

一緒に頑張りましょう。

締め切りまであと少しです。

wonderflに投稿してみました 2

フラクタルです。 - wonderfl build flash online

調子にのってもう1本。

以前再帰の復習で作ったフラクタルです。

論文かけないです。

wonderflで現実逃避。

wonderflに投稿してみました。

Spriteを球状に配置するだけ - wonderfl build flash online

論文書くのに飽きたんで、ちょっとコードを書きました。

で、そのまま投稿してみた。

wonderflはとても勉強になります。

もっと勉強しよう。

3D表現

Papervision3DやFlashPlayer10の機能を使わないでの3D表現。

一応は3Dっぽく見えると思うんですが。

こんな感じです。

もっと勉強せんといかん。

ライブラリを利用せずにこういった表現が自由に出来るようになるといいよね。






以下、ソースです。

続きを読む "3D表現"

WonderflでAS3.0の勉強 その2

FlashPlayer10の、3Dの話です。

ちょっと前に、Zソートのライブラリを試しましたが、ライブラリを使わず、配列のソートを利用してZソートをしているのを見つけました。

こちらです。

参考に、自分もプログラムを組んでみました。

こんな感じ（要FlashPlayer10）にちゃんとソートできます。

というか簡単にZソートが出来てしまった。

いやー参考になった。

あと、FlashPlayer10の3Dは、消失点をしっかり定義してあげないと自分の思ったとおりに表示されないみたいです。

デフォルトだと左上が設定されているっぽいです多分。

ちゃんと設定したほうがいいですね。







以下、ソースです。

続きを読む "WonderflでAS3.0の勉強 その2"

FlexとBox2DFlashAS3 その3

ちょっと前の記事の更新。

以前は、「Flexではstageにアクセスしてはいけない」と訳のわからない思い込みをしていました。

なんじゃそりゃ。

Flexでは、stageはcreationCompleteの時点ではまだnullの状態で、ApplicationCompleteの段階でアクセスできるようになります。

これさえ守れば、FlexでもstageアクセスOK！。

こんな感じに、Box2DのInputも動きます。

ちょっと前は、これに気づかず焦りまくってました。







ソースは、右クリックからソースの表示でお願いします。

バージョンは2.0.1を利用しています。

WonderflでAS3.0の勉強

wonderflが大流行ですね。

ソースを見ることが出来るのがとても助かります。

ビジュアル面で強いプログラムが多いので、ソースを参考にしながらいろいろ勉強していこうと思います。

今回は、こちらのプログラムがとても綺麗だったので、参考にさせてもらいました。

こんな感じです。





以下、ソースです。

自分もアカウント作って、何か投稿してみるか。

続きを読む "WonderflでAS3.0の勉強"

マウスに連動して動かす 2

この間の記事をイージングっぽくしてみました。

こんな感じです。

こっちのほうがいいよね。

前回の記事の、フレームイベントの中身を、

rotate += (-viewport.containerSprite.mouseX/15 - rotate)*0.1;

って書き換えればイージングの完成。

rotateは外部変数で定義してください。

お手軽アニメーション。

マウスに連動して動かす

久々にPapervision3DでのFlashプログラム。

論文はなんとか今年中に終わりそうです。

さて、マウスに連動して円状に動くメニューみたいなやつ。

要はこんなやつです。

PV3Dの場合、最初に円状に配置してしまえば、フレームイベントでいちいち座標を再計算をすることなく、マウスに連動して回転させることができます。

iewport.containerSprite.mouseXでマウスの座標が原点を中心にして取ってこれるので、それを利用するだけです。

詳しくはソースのフレームイベントの部分を見てください。

ああ久々にFlash書いた。

Alchemyやりたい。







以下、ソースです。

続きを読む "マウスに連動して動かす"

ランダムテキスト その2

ランダムテキストの続編。

今度は横から１文字ずつ変わっていきます。

マトリッックスっぽい感じを出したかったので。

こんな感じです。






以下、ソースです。

続きを読む "ランダムテキスト その2"

ランダムテキスト

テキスト系のアクセントに何か欲しかったので。

ランダムテキストってやつです。

こんな感じです。

割ときれいに出来たと思います。







以下、ソースです。

RandomTextってクラスを作って、それを利用するようにしています。

続きを読む "ランダムテキスト"

FlexにSpriteを追加

久々にプログラム。

後輩に聞かれたので。

自分が知っているFlexにSpriteを追加する方法は4通りあります。

// 方法1：SWFLoaderを利用する
var sp1:Sprite = new Sprite;
var loader:SWFLoader = new SWFLoader;
loader.source = sp1;
addChild(loader);


// 方法2：rawChildrenにaddChildする
var sp2:Sprite = new Sprite;
rawChildren.addChild(sp2);


// 方法3：Imageを利用する
<mx:Image id="myImage"/>
var sp3:Sprite = new Sprite;
myImage.addChild(sp3);


// 方法4：UIComponentを利用する
var sp4:Sprite = new Sprite;
drawCircle(sp4.graphics,0xffff00);
var ui:UIComponent = new UIComponent;
ui.addChild(sp4);
addChild(ui);

こんな感じですか。

他にどんな方法があるんでしょうか。

パーティクルの練習

こちらのサイトに、パーティクルのサンプルのソースコードがたくさんあったので。

ここにあるソースコードを全部読めば、パーティクルの基本的なものは一通りできるようになると思う。

自分も、いくつかサンプルをまねてみました。

こんなのとか、こんなのとか、こんなのとか。

パーティクルは、自由に使えるようになると楽しいですね。

自分のソースをまとめたものはこれ。

エッジ保存平均化

Kuwaharaというもので、こちらを参考にさせてもらいました。

元の画像はこんな感じ。


















これにフィルタをかけると、こんな感じになります。

けっこうきれいにできたんでよかった。

でもちょっと重いです。





以下、ソースです。

続きを読む "エッジ保存平均化"

FlexのCamera

急にカメラを使いたくなったんで。

少しやってみました。

こんな感じです。

本当は、絵画風のフィルターとかいろいろやってみたんですけど、毎フレームでの適用には重い。

残念。




こちらのサイトを参考にさせてもらいました。

・磨りガラスを表現する - NORISUKE WORKS

・Visual C++で画像処理ソフトを作ってみる

・Visual C++ 2005 Express Editionを用いた易しい画像処理（７）―― 画像の絵画調化（油絵化の場合）――

・2008-11-09 - flashrod AS3で画像処理入門(その4)

FlashPlayer10でZソート

FlashPlayerの3D表現は、Zソートがありません。

そういうガチの3D表現は他のライブラリで補おうという考えらしいですが。

Zソートのクラスを作った人がいます。

さっそく利用させてもらいました。

とりあえずサンプル（要FlashPlayer10）。

きれいにソートされています。

これはうれしい。

Flexでカスタムプリローダー

Flexでプリローダーをカスタマイズする手段の一つに、PreloaderDsiplayインターフェイスを利用する方法があります。

詳しくはこちらのサイトを。


・ひこにゃんが Flex アプリケーションにカスタム プリローダーをお勧めする3つの理由 - 親方、空から覚え書きが！


プログレスイベントを使ったことのある人ならば、簡単にオリジナルのプログレスバーが作成できます。

こんな感じです。

うん。いい感じ。

FlashPlayer10で音を作る

「ドレミファソラシド」を作ってます。

こちらを参考にしました。

画面をクリックすると音が変わります。

こんな感じになりました。

もう少し勉強が必要。

FlashPlayer10で音をいじる

FlashPlayer10では、音の動的生成ができます。

で、とりあえずいじってみようと。

こちらを参考にいろいろやってみました。

こんな感じです。

ローカルのMP3を取り込んで、そのピッチを変更しています。




--------------------------------------------------------
2007/10/30 ソース改造

ちょっと改造しました。
--------------------------------------------------------

FlashPlayer10で画像読み込みと保存

ローカルの画像を読み込んで、フィルタをかけて、保存。

こんな感じになりました（要FlashPlayer10）。

あんまり大きい画像を読み込まないようにしてください。

重いと固まるかも・・・。

フィルタは全部コンボリューションとカラーマトリックスで。

お手軽画像処理。

ローカルを通しての読み込みや保存が簡単に行えるのはうれしいです。



-----------------------------------------------------------
10/27  更新

ちょっと改造。大きな写真はリサイズして利用するようにしました。
-----------------------------------------------------------

FlashPlayer10でFileReference

そろそろFlashPlayer10も触ってみようと思う。

とりあえず1作目。

ローカルのMP3を読み込んでスペクトラム。

こんな感じになりました（要FlashPlayer10）。

ByteArrayからサウンドに変換するには、こちらを利用しています。

SoundクラスはByteArrayを読めないので、こんなのがあると便利です。






ソースは、右クリックの「ソースの表示」でお願いします。

FlexでHPみたいなの

Flexでなんか作ってみようと思いまして。

HPみたいなのを作ってみようと思い、その思いのままに作ってみる。

とりあえず最初の演出みたいなのを。

とりあえずvectorvisionを利用。

こちらや、こちらのサイトがカッコよすぎなんで、まんまパクリ。

友人に味気ないと言われたんで、Box2Dで周りに何かを散らしてる。

結果、ごちゃごちゃして見づらくなったような・・・。

こんな感じになりました。

メニュー画面に移行したあとは、まだ何も考えていないのでとりあえずな感じ。

このHPうまくいったら何かに使おう。







ソースはごちゃごちゃしてるんで、あとで公開します。

Box2Dのバージョンは2.0.1です。






------------------------------------------------------------------
2008/10/19  追記


かなり適当ですが、形にしたんでソースを公開します。

右クリックからソースの表示でお願いします。

適当に1つのファイルにまとめて書いたんで、かなり見にくいですが・・・。
------------------------------------------------------------------

Papervision3Dをやってみた48

vectorvisionでちょっと気になること。

イベント追加の話。

まずはマテリアルのinteractiveをtrueにします。

Word3D自体にイベントを追加しても何も起こらなかったので、lettersプロパティの中にあるDisplayObject3Dに対してイベントを追加する。

これなら動いた。

Tweenerで色もトゥイーンしたかったけどそれはできなかった。

残念。

とりあえず、こんな感じ。

文字をクリックすると、動きます。






以下、ソースです。

続きを読む "Papervision3Dをやってみた48"

FlexでDisplayShelf

これも有名だと思います。

DisplayShelfです。

こんなのが、簡単に作れてしまう。

すごい。

すごいの一言です。

SeletedIndexで選択された画像もとってこれるので、いろいろできそう。

FlexでFlexBook

割と有名だと思う、FlexBookを使ってみました。

基本的な使い方としては、こんな感じで、タグの中に表示したいものを書き込む簡単な方法や、こんな感じで、itemRendererとXMLListで制御する方法があります（右クリックからソースを見てみてください）。

かなり苦手な感じだったけど、やってみたら割と簡単だった。

ただ、プロパティの意味や、イベント関係がまだよくわかっていない。

サンプルソースがしっかりしているので、それを見ながらもう少し遊んでみます。

Tweenerで色をトゥイーン

Tweenerのスペシャルプロパティを利用して、色や明度を変更することができます。

こんな感じです。

緑 → 赤 → 黄色 → 元の色 → 明度変更 → 明度元に戻す        の順に変化します。

かなり便利。





Tweenerはいろいろなプロパティがあって、うまく使えばかなり便利。

参考になるサイトもいろいろあります。


・ Tweener のさらなる進化

・ Tweener拡張で、MovieClipをMatrixで超変形をできるようにした

・ Tweenerで色を変更する(_color)

・ Tweenerを使って画像の色を変化させるTips


うまく使いこなせるようになりたいもんです。






以下、ソースです。

続きを読む "Tweenerで色をトゥイーン"

FlexでGradientCanvas

GradientCanvasというものを見つけました。

こんな感じに簡単にグラデーションのついたパネルを作成できます。

ソースコードも見れるので、いろいろ参考になります。

前からこんなのが欲しかったので、見つけることができてよかったです。

FlexとBox2DFlashAS3 その2

久しぶりにBox2Dをいじる。

とりあえず、Flexと組み合わせて使えるようにする。


・ マウスでドラッグアンドドロップ

・ 壁は、画面と一緒にリサイズする

・ 円をクリックするとなんかイベント

・ 円が画面外に出ると作り直す


この4つを出来るようにしたい。

とりあえず、こんな感じになりました。





一番大変だったのはInputクラスの利用。

stageにアクセスするとエラーが起きてしまいました。

困っていたところ、きれいに拡張して利用しているサイトを発見。


Box2Dでサンプルアプリを作ってみました。（PHP,MySQL,Flexな日々＋イラストとか ）


まんま利用させてもらってます。

前々から困っていた部分だったので、解決してよかったです。




ソースは、右クリックの「ソースの表示」でお願いします。

バージョンは2.0.1です。




---------------------------------------------------------------

2009/1/3 追記

Flexでもちゃんとstage使えました。

こんな感じです。

---------------------------------------------------------------

Papervision3Dをやってみた47

球体配置の続き。

まだ挙動がかなりおかしいし、エラー処理もしてませんけど。

一応こんな感じかな。

画像はFlickrから取ってきてます。

あと、クリックすると、画像がピクセル等倍で表示されるはず。

カメラを動かすか画像を動かすか悩んだけど、画像のほうが楽です。

こんな感じです。








以下、ソースです。

(2009/3  ソース直しました。)

続きを読む "Papervision3Dをやってみた47"

Papervision3Dをやってみた46

前回の記事を改造。

結局、普通にサインコサインを利用して計算することにしました。

というわけで、サンプルはこちらです。

やっぱこっちのほうが好き。









以下、ソースです。

(2009/3  ソース直しました。)

続きを読む "Papervision3Dをやってみた46"

Papervision3Dをやってみた45

球体配置を少しいじる。

Tweenerでカメラを動かしてみた。

Planeをクリックしてみてください。

こんな感じになります。

rotationを計算してないからただ視点とカメラの位置がターゲットに寄るだけ。






ちなみに、planeの位置を獲得する場合は、シーン上の位置が欲しいのでsceneXプロパティなどを利用する。

あと、カメラの視点をTweenerで利用する場合は、targetプロパティのxyzを動かす。

ここらへんは覚えておくと便利です。






以下、ソースです。

(2009/3  ソース直しました。)

続きを読む "Papervision3Dをやってみた45"

Papervision3Dをやってみた44

ViewportLayerを利用すれば、フィルターを利用できます。

下のように利用できます。

var  p:Plane = new Plane(mat, 100, 100);
var vpl:ViewportLayer = p.createViewportLayer(viewport, true);
vpl.filters = [ new BlurFilter(4,4,1) ];

useOwnContainerを利用する方法もありますが、これだとイベントが使えなくなる（何故）。

var  p:Plane = new Plane(mat, 100, 100);
p.useOwnContainer = true;
p.filters = [ new BlurFilter(4,4,1) ];

手軽にフィルターが利用できるのは便利です。

こんな感じに。ViewportLayerを利用しています。









以下、ソースです。

続きを読む "Papervision3Dをやってみた44"

Papervision3Dをやってみた43

円配置。

各Planeに動いてほしかった。

これを作りたかったもんで。

こんな感じになりました。

簡易版って感じ。

もう少しいじりたい。







以下、ソースです。

(2009/3  ソース直しました。)

続きを読む "Papervision3Dをやってみた43"

アルファマスク

自分用の備忘録で。

マスクにBlurFilterやアルファ値の変更を適用したい場合。

マスクを適用する側と、マスクになる側の両方のcacheAsBitmapをtrueにしないといけない。

そうしないと全く適用されない。

設定をするとこんな感じできれいになる。

忘れてて焦った。





一応ソース。

続きを読む "アルファマスク"

Papervision3Dをやってみた42

FogMaterialってのがあります。

全体に霧がかかったようなかんじになります。

まだ使い方がよくわかりませんが、簡単に霧が表現できます。

こんな感じになります。








以下、ソースです。

続きを読む "Papervision3Dをやってみた42"

sketchbookを使ってみる。

sketchbookを使ってみました。

色々な図形が簡単に書けます。

星とか扇型とかサクサク。

こんな感じです。

HSVとRGBの変換関数なども用意されていて、便利。

Spriteがぐっと簡単に扱えていいです。







以下、ソースです。

続きを読む "sketchbookを使ってみる。"

Papervision3Dをやってみた41

vectorvisionってのがあるそうで。

ちょっくら使ってみました。

文字とか奇麗に利用できるのはうれしい。

svgファイルも使えるみたいだし。

同梱されているサンプルファイルがものすごくわかりやすい。

とりあえず、こんなの作ってみました。

サンプルをちょっとだけいじっただけです。

エフェクトを追加したのはこっち。

いや、いいですよこれ。







以下、ソースです。

続きを読む "Papervision3Dをやってみた41"

Papervision3Dをやってみた40

エフェクトとスペクトラムの組み合わせ。

思ったより重くない。

こんな感じです。

横に長いのを作っちゃったので、うまく表示されない場合は、最大表示にしてからリロードしてみてください。






以下、ソースです。

（2009/3 ソース直しました。）

続きを読む "Papervision3Dをやってみた40"

Papervision3Dをやってみた39

久しぶりにエフェクト。

BlendModeをADDにしたから、色の混ざったところが白くなってきれい。

こんな感じです。

しかし、最近エフェクトがすごく軽くなって、実用的になってきた。

エフェクトでなにか作ってみようか。






以下、ソースです。

続きを読む "Papervision3Dをやってみた39"

FlexでLive reflection

Live reflection component ってのを使ってみました。

鏡面反射が簡単にできます。

こんな感じ。

もう簡単すぎる。






ソースは、右クリックから「ソースの表示」でお願いします。

広告だらけで見づらいですが、ご勘弁を。

FlexでDistortionEffects

DistortionEffectsってのを使ってみました。

以前、先輩が使ってて面白そうだったんで。

いろんなエフェクトが入ってて面白い。

こんなのを作ってみました。

viewをクリックしてみてください。

うわ、簡単ですごいわこれ。







ソースは、右クリックから「ソースの表示」でお願いします。

広告だらけで見づらいですが、ご勘弁を。

FlexでFire

有名どころ、flexlibを使ってみました。

いろいろ入ってますが、Fireがお気に入り。

サンプルにもあるように、設定次第でいろいろ表現できる。

とりあえず、こんなの作ってみました。

本当に数行でできてしまう。すごいわ。







ソースは、右クリックから「ソースの表示」でお願いします。

広告だらけで見づらいですが、ご勘弁を。

FlexでPrimitive

Flexって、いろいろ外部ライブラリとかあるんです。

そんで、それらを少しずつ使ってみようと思いまして。

とりあえず、有名なPrimitive Explorerから。

ソースコードが公開されています。

とりあえず、こんな感じ。

ただ図形を描いただけ。

星とか、扇形とかが簡単に書けるのはうれしいです。






ソースは、右クリックから「ソースの表示」でお願いします。

広告だらけで見づらいですが、ご勘弁を。

Papervision3Dをやってみた38

collada形式のファイルを読み込む。

テクスチャとかいろいろあって、正直よくわからない。

まあ表示されているし大丈夫なのかな。

モデルのデータに関してはSketchupを利用。3Dギャラリーから探してきました。

kmzファイルで書き出して、「.kmz」を「.zip」にリネーム。

解凍すると、中に.daeファイルがあるんで、それを読み込みます。

とりあえず、こんな感じに。

本当にとりあえずな感じです。





テクスチャの画像は、MaterialListにして渡すので、Embedなりして読みこまなければいけません。

画像が大量にあってもです。

ああめんどい。

そう思っていたら、Embed Generatorなるものを発見。

おおこりゃ便利。

これで、大量のコードも簡単に書き出せます。

今回は画像が少なかったから手打ちだったけど、大量の画像を扱う場合は重宝しそうです。







以下、ソースです。

続きを読む "Papervision3Dをやってみた38"

扇形を書く

最近はめっきりFlashに触れられなかったので。

本当に久しぶりにActionScriptを。

扇形を書きたくなったので、挑戦。

まさに理想のソースがこちらにあったので、参考にさせてもらいました。

とゆーか、ほとんど流用させてもらいました。

よって今回はソースはなし。

サンプルはこちら。

ランダムな色で扇形を書くだけ。




扇形の書き方は、参考にさせていただいたこちらのサイトをご覧になったほうがよいかと。

非常に丁寧に説明されています。

いや、素晴らしい。

Papervision3Dをやってみた37

大量のsphere。

Flash CS3が利用できたので、円をswfで作成して、planeに貼り付けて、おしまい。

とりあえず1500個。

こんな感じです。

画像よりswfの方が軽くなるってどっかで聞いたことがあるようなないような。





以下、ソースです。

続きを読む "Papervision3Dをやってみた37"

Papervision3Dをやってみた36

遊びで、鏡面反射のメニューを。

こんな感じです。

鏡面反射で悩むのももうすぐ終わりそう。

ReflectionViewクラス登場です。








以下、ソースです。

続きを読む "Papervision3Dをやってみた36"

Papervision3Dをやってみた35

ReflectionViewってのが実装されたみたいですね。

こちらを参考にさせたもらいました。

サンプルはこちら。

Papervision3Dで手軽に鏡面反射ができるようになりそうです。






以下、ソースです。

続きを読む "Papervision3Dをやってみた35"

Papervision3Dをやってみた34

バージョンアップにともなって、多少エフェクトの書き方が変わったみたいなので。

以前作成したものを書き直し。

こんな感じです。

以前作ったエフェクト関係も全部書き直しました。









以下、ソースです。

続きを読む "Papervision3Dをやってみた34"

Papervision3Dをやってみた33

カメラとの距離によってぼやけたり。

こんな感じです。

参考にさせてもらったサイトはこちら。








以下、ソースです。

続きを読む "Papervision3Dをやってみた33"

Papervision3Dをやってみた32

鏡面反射とスペクトラムです。

この間の鏡面反射クラスをいじりました。

こんな感じです。

スペクトラムが再描写されると、ちゃんと鏡面も更新されてます。








以下、ソースです。

(2009/3 ソース直しました。)

続きを読む "Papervision3Dをやってみた32"

Papervision3Dをやってみた31

3Dでの鏡面反射の練習。

Planeなら簡単にできた。

結果はこんな感じ。

視点によって鏡面に見えたり見えなかったり・・・・。

微妙な感じがします。







以下、ソースです。

ReflectionPlaneってのが鏡面反射の付いたPlaneクラスです。

とは言っても、Planeを拡張したわけではなく、Plane2枚をDisplayObject3Dに入れただけです。

続きを読む "Papervision3Dをやってみた31"

FlexでHPを作る 2

前回の記事を手直し。

こんな感じです。

変更点は、

・FadeエフェクトをAnimatePropertyに変更（こっちのほうがいい感じに動いたから）。

・Galleryに、前作成したやつをのっける。

・各viewでのエフェクトを作成。

画像は相変わらずパワポ。

デザインの勉強したい。

とゆーかしよう。








ソースは、右クリックから「ソースの表示」でお願いします。

Papervision3DとTweenerが必要です。

FlexでHPを作る 1

FlexとかAS初めて少したったし。

FlexでHPを作ろうと思いまして。

こんな感じになりました。

初めてこういうの作りました。

画像はパワポで作ってます。

友達にヘボすぎるって言われました。

しかし晒す！






ソースは、右クリックから「ソースの表示」でお願いします。

BitmapDataで何か 2

直接BitmapDataの表示はしていませんが。

TextFieldをBitmapDataにdraw  →  BitmapDataから色を取ってきて、文字部分なら円を追加  みたいな感じです。

こんな感じです。

drawはなんでも描写できておもしろいです。







以下、ソースです。

続きを読む "BitmapDataで何か 2"

Papervision3Dをやってみた30

試験の面接も終わったんで、久々のプログラム。

鏡面反射をやりました。

今までやってた鏡面反射の手法だと、どうしても平面が必要になる。

3Dっぽく鏡面反射できないかなーって考えて。

こんな感じに。

BitmapDataを利用。

正直、全然鏡面に見えない・・。







以下、ソースです。

続きを読む "Papervision3Dをやってみた30"

スライドショー 2

スライドショーその2です。

Flickrから画像を取ってきて表示してます。

検索タグは今回は「cat」で固定です。

最初のローディングアニメのswfの作成方法はこの前の記事で。

こんな感じになりました。





以下、ソースです。

--------------------------------------
2008/7/10  一部修正
--------------------------------------

気分で作っていったんで、いつも以上にソースが見づらい・・・。

画像とか、全部まとめたのはこちら。

続きを読む "スライドショー 2"

スライドショー

Tweenerで、アルファ値を変えています。

こんな感じです。






以下、ソースです。

続きを読む "スライドショー"

Papervision3Dをやってみた29

パノラマです。

Flickrで写真を探してきました。

大きく写したかったので、でかい写真を選んだら重くなりました・・・。



シリンダーに画像を張り付けて、中にFreeCameraを置いて、おしまい。

こんな感じです。







以下、ソースです。

（注：最新のPapervision3DではFreeCamera3Dがありません。カメラの設定を変えて使ってください。）

続きを読む "Papervision3Dをやってみた29"

Box2DFlashAS3をやってみた 8

ジョイントでつないだだけです。

何かに使えないかなーって思って。

画像のBlendModeはBlendMode.LIGHTENで。

こんな感じです。




以下、ソースです。

バージョンは2.0.0です。

続きを読む "Box2DFlashAS3をやってみた 8"

BitmapDataで何か

RGBで分けてゆっくりと重ねる。

こんな感じになりました。

BlendMode.SCREENで重ねてください。






以下、ソースです。

続きを読む "BitmapDataで何か"

今まで作ったのをいろいろ組み合わせてみる

今まで結構いろいろ作ってきたんで、組み合わせてなにかできないかと考えたもんで。

こんなの作ってみました。

やっぱり、Tweenerは便利です。アニメーションみたいな動きが簡単に出来るし。

最初の文字の動きはBox2D。

あとはPv3DとTweenerで動かしています。









以下、ソースです。

Box2Dのバージョンは2.0.0です。

Tweener、PV3D、Box2Dを利用して、がりがり書いていったんで、やたら長いですが・・・。

あと、ソースと使用した画像のセットはこちら。

（2008/12 なんか急に文字が全部現れる前に落ちるようになってしまった・・・。）

続きを読む "今まで作ったのをいろいろ組み合わせてみる"

Box2DFlashAS3をやってみた 7

文字を落としてばらばらにします。

こんな感じです。

文字部分をSpriteで作成したので大変でした。

ソースもほとんどが文字部分の作成になってます。

もっとスマートなやり方があると思うんですが・・・。







以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3  ソース直しました。)

続きを読む "Box2DFlashAS3をやってみた 7"

三角形の自由変形

三角形の自由変形です。

こんな感じです。

こちらのサイトがすごく参考になりました。

特に行列の作成の方法。すごいです。





以下、ソースです。

続きを読む "三角形の自由変形"

FlexとPV3D その4 を手直し

この前作ったプログラムを手直しです。

みなさん情報提供ありがとうございました。

とりあえず、as3flickrlibは使うのをやめて、自分でXMLを解析していく方向に。

なんかこっちのほうが簡単だったかも・・・。

こんな感じになりました。

日本語は対応していないので注意してください。

あと、写真が球体を作成するのに足りない場合は、アラートが出ます。

たぶんうまく動くと思うんですが・・・。






ソースは右クリックから見れます。

（2009/3 ソース直しました）

平行四辺形の練習

Matrixを利用すると、色々と変形ができます。

今回は平行四辺形の練習。

こんな感じです。

ドラッグがうまくいってないのは気のせいです。





以下、ソースです。

続きを読む "平行四辺形の練習"

Papervision3Dをやってみた28

数式を利用して図形を作成。

色々作ってみました。

こんなのとか、こんなのとか、あと、こんなの。

全部数式を利用して書きます。





今回は数式だけ。プログラムに利用してみてください。

forループでまわして、x、y、z座標を計算していきます。

最初のは、

var a:int=100;

for(var i:Number = 0 ; i<= 2*Math.PI ; i += 0.1){
     for(var j:Number=-0.4 ; j<=0.4 ; j+=0.1){
              x = a*(Math.cos(i) + j*Math.cos(i/2)*Math.cos(i));
              y = a*(Math.sin(i) + j*Math.cos(i/2)*Math.sin(i));
              z = a*j*Math.sin(i/2);
          }
   }

次のは、

var p:int=3;
var q:int=7;

for(var i:Number=-50*Math.PI ; i<= 50*Math.PI ; i += 0.1){
             x = Math.cos(i)*70;
             y = i;
             z = Math.sin(i)*70;

}

最後のは、

var p:int=3;
var q:int=7;
var a:int=50;

for(var i:Number=0 ; i<= 6*Math.PI ; i += 0.04){
             x = (2+Math.cos(q/p*i))*Math.cos(i)*a;
             y = Math.sin(q/p*i)*a;
             z = (2+Math.cos(q/p*i))*Math.sin(i)*a;
}

数式って、便利です。

FlexとPV3D その4

as3flickrlibってのを使って、Flickrから画像を取ってきて、球体に並べる。





こんな感じになります。





































なぜかネットにあげるとうまく動かないので、今回はサンプルはなし。

ちゃんとローカルでは動くのに。

おかしい・・・。










以下、ソースです。

続きを読む "FlexとPV3D その4"

Papervision3Dをやってみた27

前回の記事を改造。

こんな感じです。

直した部分は、座標を決めるところを

xxx = a*i*Math.sin(m*i)*Math.cos(n*i);
yyy = a*i*Math.sin(m*i)*Math.sin(n*i);
zzz = a*i*Math.cos(m*i);

と直して、あとで線が消えていく部分を追加。

dtime = dtime / 4;
for(var i:Number = 0 ; i<= 12*Math.PI ; i += 0.03){
    var ll:Lines3D = rootNode.getChildByName("line"+i.toString()) as Lines3D;
    Tweener.addTween(ll, {scale:0, time:2, delay:dtime, onComplete: function():void
                    {
                       rootNode.removeChild(ll);
                    }});
    dtime += 0.04;
}

Papervision3Dをやってみた26

こちらの記事より。

確かに楽に出来ました。

こんな感じです。

PV3Dは変に座標で悩まなくてもいいのが楽です。








以下、ソースです。

（2009/3 ソース直しました。）

続きを読む "Papervision3Dをやってみた26"

今日気になった記事 2

3D系の記事。やっぱり疑似3Dで行かないと、sphere4000個とかは厳しそう・・・。

・ ActionScriptによるWebの3Dグラフィックス再入門

・ AS3.0 で 3D プログラミングを１から勉強する (1)

・ 【ＣＧ教科書】

・ 2D感覚で3D処理するActionScriptクラスライブラリ （FIVe3D)

３Dの素材。PV3Dで利用できそうなのがちらほら。

・ メタセコ素材！

・ 3D MATERIAL

花火みたいなやつ

この記事のプログラムが個人的にものすごくツボにはまったので、ソースを見ながら何をしているのかを頑張って考える。

なんとか出来ました。

こんな感じになりました。

さくーしゃさん凄い。





このプログラムのポイントは、Bitmapのブレンドです。

何もしていない画像と、４分の1をにした画像を拡大してぼやかした画像をBlendMode.ADDで重ねることで各点が絶妙に綺麗に輝く感じになります。

拡大しただけだとぼやけすぎて汚いし、最初から大きいサイズで描写すると輝くわけもなくただの粒になります。

2つの画像を重ね、BlendMode.ADDに設定することで、綺麗に輝くわけです。

これには本当に感動しました。

画素の動きはパーティクルと同じ。

文字に降り積もるのは、黒地に白い文字を書いた画像を別に用意して、その画像を読み取り、白か黒かで落ちる速度を計算しているわけです。

まあ詳しくはソースを見てください。







以下、ソースです。

続きを読む "花火みたいなやつ"

今日気になった記事

・ Creating A Downloader For YouTube with Flex/Air

   YouTubeのダウンローダー。



・ [ActionScript3.0] Sprite/MovieClipとかをランダムに動かす(徘徊させる)

  ランダムに動かす。



・ 扇型を描く

　最後のサンプルがいい。



・ Transition Types (Tweener Documentation)

  Tweenerのtransitionのいろいろ。



・ FuseKitのCustomEasingToolをTweenerで使う (Saqoosha.net)

  自由なアニメーションを。





これからはこんな感じで、気になった記事を忘れないようにブログに載せていくことにします。

決してプログラムを組むのがめんどくさくなったわけではないので。

フラクタル

フラクタルです。

再帰を利用して描写するあれです。

こんな感じです。

おお綺麗だ。







以下、ソースです。

続きを読む "フラクタル"

Box2DとPV3Dを合わせる

タイトル通りです。

こんな感じです。

Box2Dのワールドを作成して、その座標をPV3Dに反映させているだけ。

PV3Dは、オブジェクトがぴったり合わさるとレンダリングがうまくいかない気がします。







以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

続きを読む "Box2DとPV3Dを合わせる"

FlexとPV3D その3

また遊びです。

ロボットアームです。

こんな感じです。

関節の計算とかめんどくさかったので、関節の曲がりには制限をかけました。

だからあまり曲がりません。






ソースは右クリックから見れます。

（2009/3 ソース書き直しました。）

Papervision3Dをやってみた25

今回は、プログラムはないです。

自分用の備忘録です。

分かり辛いかもしれませんが勘弁。






Planeの頂点制御を前にやったんですが、Cubeでも頂点制御できるだろうと思い、試してみました。

頂点のアクセスには、下のようにfor-each文でアクセスしていきます。

for each(var obj:Vertex3D in myCube.geometry.vertices)
   { 
   }

Cubeは6つの面を持ちますが、for-each文で回すと、front、back、left、right、top, bottomの順にアクセスしていきます。

各面とも、前回と同様に左下からアクセスして右上まで回ります。

しかも、各面で頂点の数が違います。

たとえば、各面の分割数を4-4-4にしたとします。下の様に定義したってこと。

var cube:myCube = new Cube(matlist, 100, 100, 100, 4, 4, 4);

// matlistは自分で定義したMaterialsList

まず、frontにアクセス。

ここは普通に5×5の25個の頂点があります。

backも同じ。

次にleftとrightにアクセス。

ここで注意。leftとrightは両端の2列がfront, backとかぶっています。

この2列はfront, backのものとして定義され、left, rightの頂点にはなりません。

よって、left, rightは真ん中の3列が頂点となり、頂点の数は5×3で15個。

最後に、topとbottom。

これは周りの辺にある頂点がすべて他の面とかぶっているんで、他の面のものとして定義されます。

よって、topとbottomの頂点は３×3の9個となります。




要は、かぶっている頂点は先にアクセスする面のものってこと。

rightとfrontでかぶっている頂点があったら、その頂点はfrontのものってことです。




で、これを使って何をするか。

・・・・・何をしましょうかね。

パーティクル

以前挑戦して挫折したので、再挑戦。

こんな感じになりました。マウスを動かしてみてください。

本を読みながらなんとか完成。








以下、ソースです。

今回は、メインのクラスとパーティクルを生成するクラスに分けています。

続きを読む "パーティクル"

Papervision3Dをやってみた24

前に作成した階段を昇るCubeを改造。

らせん階段を上ります。

こんな感じです。

この前同様、参考にしたサイトはこちら。

Cubeの動きと階段の配置を合わせるのが大変でした。

最初のほうはまだ計算ミスっているっぽい。

なんか重なってしまいます。

あとで手直しでも。







以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた24"

鏡面反射と波紋

鏡面反射と波紋を組み合わせました。

こんな感じです。

鏡面反射は以前作成したものを流用。

波紋の作成はこちらを参考にさせていただきました。








以下、ソースです。

続きを読む "鏡面反射と波紋"

FlexとPV3D その2

ちょっとした遊びで作りました。

こんな感じです。

適当にいじってみてください。

こちらのサイトにあった関数を使って色々遊んでみました。

やっぱり数学って大事です。








ソースは右クリックから見れます。

（2009/3 ソース書き直しました。）

Papervision3Dをやってみた23

頂点制御です。

こんな感じです。





Planeを生成するとき、第４、第５引数の分割数によって、頂点の数が決まります。

注意するのは、分割数と頂点の数は違うということです。

例えば、横の分割数を４、縦の分割数を3にした場合、横に並ぶ頂点の数は5で縦に並ぶ頂点の数は4になります。

下の図のような感じ。























赤が横の頂点。緑が縦の頂点です。






今回は頂点をfor-each文で回していますが、アクセスする順番は、左下から始まって、上までアクセス、終わったら次の行に移動。

こんな感じで最後までアクセスしていきます。






分かりづらい説明ですみません。

何かの参考になればと。

以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた23"

Papervision3Dをやってみた22

Cubeが階段を上ります。

こんな感じです。






プログラムで面白い動きを作成する場合、数学の知識は不可欠です。

そんなことを考えていた矢先、友人がとても面白いものを教えてくれました。

いや、面白い。

たった一つの関数で階段の動きを表せるなんて。

星型の関数なんかも乗っています。

とても参考になるサイトです。

PV3Dではこういった関数を利用するのが簡単だと思うので、色々調べてみようと思います。







以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた22"

Papervision3Dをやってみた21

平面でサインカーブ。

そんだけ。

数学って大事です。

最近それを実感します。






以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた21"

Papervision3Dをやってみた20

PV3Dで、大量のSphereを生成すると、もの凄く重くなります。

そういう場合、平面に円の画像を貼り付けて、常にカメラの方向を向くように設定します。

これによって、平面がSphereに見えるようになり、大量のSphereが生成できるわけです。



・・・とまあそう考えて実験してみました。

こんな感じです。

カメラが円運動しています。

結果として、Sphereに見えなくもないと思います。

ただ、端のほうが歪んだりしているので、まだ色々設定しなければいけないみたいです。

あと、画像もちゃんと作ったほうがいいみたいです。

とりあえず、これで大量のSphereを利用できそう。








以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた20"

Papervision3Dをやってみた19

またエフェクト。

こんな感じです。

なんかライトみたいにりました。

エフェクトは資料が少ないですが面白いです。

頑張ってBitmapFireEffect使えるようになりたい。







以下、ソースです。

（2009/3 エフェクトの利用方法が変わったので、書きなおしました。）

続きを読む "Papervision3Dをやってみた19"

パーリンノイズとマスクで湯気

湯気です。

こちらのサイトが非常に参考になりました。

パーリンノイズは、単体よりも、他のものと組み合わせることで効果が発揮されると思います。

サンプルはこちらです。






以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "パーリンノイズとマスクで湯気"

リリースビルドの書き出し

  今日、先輩に、「お前のプログラムは重い」と指摘され、「ちゃんとリリースビルドを書き出しているのか？」と聞かれました。

リリースビルドの書き出しを行うと、最適化されたプログラムが作成されます。

自分は、これを知らなかったので、今までずっとデバックモードでの書き出しを行っていました。

どうりで重いわけだ。

今までのプログラムは全てリリースビルドで書き出したものに置き換えました。

これでだいぶ軽くなりました。






リリースビルドの書き出し方について。





1.「プロジェクト」→「リリースビルドの書き出し」をクリックする。
























2. 設定。終わったら終了ボタンを押す。

















































3.「bin-release」というフォルダが作成される（最適化された実行ファイルはこのフォルダの中）。

パーリンノイズとフィルタで水面

水面を表現。

パーリンノイズだとよくある手法みたいです。

こんな感じです。

パーリンノイズを生成し、DisplacementMapFilterを利用して水面を表現しています。









以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "パーリンノイズとフィルタで水面"

Papervision3Dをやってみた18

ちょっと前に作った球体をクラスにしてみました。

こんな感じになる。

クラスを作る練習。




こちらです：planeSphere.as

（注意：Papervision3DとTweenerを利用しています）





使い方としては、

var ps:planeSphere = new planeSphere(250, 40, 40);            // 半径、planeの幅と高さ
this.rootNode.addChild(ps);

ってな感じで初期化して、

ps.makeSphere();

みたいに実行すれば球体が生成されます。

「ps.x = 100」　とか、「ps.rotationY = 20」 みたいなのも出来ます。





自分でクラス作れるようなると便利ですよね。

Papervision3Dをやってみた17

エフェクトを利用しています。

ちょっと前に作ったやつです。

こちらのサイトを参考にさせてもらいました。

こんな感じです。マウスの位置によってCubuが回転します。あと色も変わります。







以下、ソースです。

（2009/3 エフェクトの方法が変わったので書き換えました。）

続きを読む "Papervision3Dをやってみた17"

FlexとBox2DFlashAS3

Panelが跳ねるだけです。

こんな感じです。

Panelの座標とBox2Dの箱の座標を合わせているだけです。

Panelの回転はRotateを利用しています。






ソースは右クリックから見れます。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

Box2DFlashAS3をやってみた 6

ぼかしています。

こんな感じです。

こちらのサイトを参考にさせてもらいました。

BitmapDataのdraw()を利用して描写して、それにフィルターをかけています。

もうちょっときれいにしたいです。













以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

続きを読む "Box2DFlashAS3をやってみた 6"

Box2DFlashAS3をやってみた 5

ちょっとしたゲームでも。

こんな感じです。

シーソーは矢印のキーで操作できます。

回転している円は壁とジョイントでつないで回転用のプロパティをtrueにしています。

ゴールの箱と落ちてくる円の衝突を判定してゴールかどうか調べています。

衝突判定に関してはこちらが非常に参考になりました。







以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

続きを読む "Box2DFlashAS3をやってみた 5"

Box2DFlashAS3をやってみた 4

Jointというものを使ってみました。

オブジェクト同志をつなげたりするためのものです。

今までやっていたマウスでのドラッグも、実際はオブジェクトとカーソルの位置をジョイントしてマウスで引っ張っている感じです。

Jointには色々な種類があります。

今回はb2RevoluteJointというものを使用しました。

こんな感じです。

床をワールドとジョイントしています。





床の動きは見えないオブジェクトで制限しています。

デバッグで表示させるとこんな感じ。

























緑の四角形が床の動きを制限しています。








以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

続きを読む "Box2DFlashAS3をやってみた 4"

Papervision3Dをやってみた16

久々のオーディオスペクトラムです。

こんな感じになりました。

最初はエフェクトかけていたんですが、重すぎてやめました。








以下、ソースです。

（2009/3 ソース書き直しました。なんか鏡面がずれるようになった。）

続きを読む "Papervision3Dをやってみた16"

Box2DFlashAS3をやってみた 3

なんとなく作成。

こんな感じになりました。

クリックしてみてください。

のちのちこれに車でも走らせてみようかと思います。







多角形を作成するときの注意。

各頂点は、左下を最初に設定して、時計回りに設定していく。

壁を作ってる最中に、これではまりました。

最初、囲めればいいやと思って適当に頂点を設定していたら、表示されるのに玉が認識しないという事態に。

あせりました。







以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

続きを読む "Box2DFlashAS3をやってみた 3"

Box2DFlashAS3をやってみた 2

前回の記事を書き換えました。

こんな感じです。

画面をクリックしてみてください。

円は、色、大きさ、重さがランダムで決まります。








以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

続きを読む "Box2DFlashAS3をやってみた 2"

Box2DFlashAS3をやってみた

Box2DFlashAS3をやってみました。

AS用の物理エンジンです。

付属のサンプルといろいろなサイトを見ながらとりあえずのプログラミング。

memo.at sonicというサイトが非常に参考になりました。

で、サンプル。

とりあえず、こんな感じに。

マウスドラッグなどの関数はサンプルにのっていたので流用（TestBedフォルダの中のソース）。

実際の描写方法が分からず、とても苦労しました。

たまに重なってしまったりと、まだよく分かっていない部分がありますが。

まあ何とかなったと思います。






以下、ソースです。

バージョンは2.0.0を利用しています。

（2009/3 ソース書き直しました。）

続きを読む "Box2DFlashAS3をやってみた"

Papervision3Dをやってみた15

鏡面反射です。

前に作成したものとは手法が違います。

参考にさせていただいたサイトはこちら。

今回は、ViewportをBitmapDataのdrawメソッドを利用して描写してます。

サンプルはこちら。

planeをクリックすると、その位置まで球体が動きます。

注意点としては、planeを両面表示にしない（plane.material.doubleSided = true を書かない）ことです。

両面表示にすると、カメラの前にplaneが壁として現われて、オブジェクトが移りません。

また、何もしないと、縦方向（z軸方向）の動きが逆に表示されるので、matrixを適用して上下を反転させています。

いろいろなサイトを見てまわりましたが、前回の手法より今回の手法のほうが多く使われている気がします。





以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた15"

Papervision3Dをやってみた14

以前作った、Planeで球体を作るプログラムをちょっと改良しました。

平面の縦と横の長さと、球体の半径を設定すれば、あとは自動で球体を作成してくれます。

サンプルはこちらです。





以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた14"

Papervision3Dをやってみた13

3Dの世界での鏡面反射です。

基本的な考え方としては、「カメラとビューポートをもうひとつ作成して、その画像を平面に表示させる」という方法になります。

こんな感じです。

平面にはフィルタをかけて、少しぼやけた感じに。





以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた13"

Papervision3Dをやってみた12

この間作った球体を作り直しました。

こんな感じです。前より細かくなった感じ。

球の半径や、平面の１辺の長さを自由に変更することができます。

それに対応して、球体を作るだけの面が自動で生成されます。

これは作っててかなり楽しかったです。






以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた12"

FlexとPV3D

FlexのコンポーネントをPV3Dに配置してます。

こんな感じです。

思ったより簡単に出来ました。





ソースは、右クリックから見れます。

（2009/3 ソース書き直しました。）

ノイズ

画像にノイズを混ぜました。

そんだけです。

ちょっとした気分転換。






以下、ソースです。

（2009/3 ソース書き直しました。）

続きを読む "ノイズ"

Papervision3Dをやってみた11

Planeを球体に並べています。

サンプルはこちらです。

planeのどれかをクリックしてみてください。

球体に並べる方法ですが、for文で回してやればあっさりできます。

結構簡単でした。




以下がソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた11"

Papervision3Dをやってみた10

画像の特定領域をBitmapDataにコピーして、こんなものを作ってみました。

クリックしてみてください。

特定領域のコピーですが、今回はUV座標を利用してみました。





以下ソースです。

（2009/3 ソース書き直しました。）

続きを読む "Papervision3Dをやってみた10"