[k]id » 2009 » 5月 

2009年5月7日

papervision3D 2.X EX.05 Planeにクリックしたら「ニュル」っと滑らかに動かすTweener

前回の「クリックしたら移動」を滑らかに動かしてみたいと思います

今回滑らか動作を実現する為に使用するのはTweener
数多くの方がTweenerに関しては説明をされているので、今回はさらっと、、、、

このTweenerはAS3などでモーションなどを滑らかにするために使用できるLibで
たとえばpapervision3Dでは

Tweener.addTween(対象, {x:X軸の場所, y:Y軸の場所, z:Z軸の場所, time:時間で動かすか});

みたいな感じで「ニュル」っと感を実装できるLibです。

さて、では具体的には
Tweenerでtweener_1_31_74_as3.zipをダウンロードし(09.05.03現在)PV3DのLibraryを格納している[org]フォルダと同じとこに[caurina]を配置で準備完了!
(難しい事は考えないようにしましょう)

それで
前回のファイルに追加する項目はimportにとりあえず先程のクラスを追加
import caurina.transitions.Tweener;

さらに
クリックしたときのイベント
planeA.x = Math.random() * 200-100;

Tweener.addTween(planeA, {x:Math.random() * 200-100, y:planeA.y, z:planeA.z, time:1});
に変更するだけ

This movie requires Flash Player 9.0.0

サンプル


ソースは↓です。

(続きを読む…)

2009年5月6日

papervision3D 2.X EX.04 Planeにクリックしたら動くようにしてみる

前回に続きまして、せっかくオブジェクトを描画できたので、せっかくなので
クリックしたら動くようにしてみたいと思います。

結構これがややこしくて追加する項目が結構あります。
具体的には
インポートではクリックによるインタラクティブな動作を有効にするための
InteractiveScene3DEventのクラスをインポート

//クリックイベントを有効
import org.papervision3d.events.InteractiveScene3DEvent;

そんで
クリックする場所を決めるため(AS2.0の時のMuvieClipみたいなものかな)
マテリアルに対して「ここを押したら動いてください」的な感じで
//マテリアルに対してクリックイベントを有効にするためにinteractiveをtrueに
pMat.interactive=true;

それでクリックしたらどう動くかをfunctionで定義
private function onClickHandler(e:Event) {
	//まずplaneAを親から引き継ぎ
	var planeA:Plane=Plane(e.target);
	//クリックされたらランダムに移動してくださいな
	planeA.x = Math.random() * 200-100;
}

ここではじめてイベントを記述できるわけで
//クリックイベントを追加
planeA.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onClickHandler);

って感じで各部位に追加する要素を追加すると
以下のように(赤い面を)クリックするとオブジェクトが
ランダムに動くクリックイベントを指定できるわけです。


This movie requires Flash Player 9.0.0

サンプル


ソースは↓です。

(続きを読む…)

2009年5月5日

Papervision3D 2.X EX.03 Planeに色をつけてみる

前回のPlaneに色をつけてみました。

変更内容はpMatにaddMaterialを追加

pMat.addMaterial(new ColorMaterial(0x003300));

サンプルは以下

This movie requires Flash Player 9.0.0

サンプル

ソースは↓です。

(続きを読む…)

2009年5月4日

Papervision3D 2.X EX.02 Planeオブジェクトを描画

第二回目 ベタにPlaneオブジェクトを描画してみます。
import項目とPlaneオブジェクトを追加しました。

前回から追加された項目は

//インポート項目に
//Plane オブジェクトのクラスを追加
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.special.CompositeMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.ColorMaterial;
さらに
//------------------------------------------------------------
//                                    Plane オブジェクトを追加

//↓pMatというマテリアルを定義(マテリアルはテクスチャみたいなもんかな)
var pMat:CompositeMaterial = new CompositeMaterial();
//↓pMatにワイヤーフレームの要素を追加
pMat.addMaterial(new WireframeMaterial(0x000000));
//↓新たにplaneBという名前でplaneを定義して
//new Plane(pMat, 100, 100, 6, 6);
//new Plane(マテリアルを設定 , 縦 , 横 , 横の分解数, 縦の分解数)
//という感じでPlaneを設定
var planeA:Plane = new Plane(pMat, 100, 100, 6, 6);
//ここでlines3Dに追加する
lines3D.addChild(planeA);


↓こんな感じになります。
サンプル

あれ?
Plane裏が描画されないってことで
マテリアルの定義にdoubleSided = true;を追加
doubleのSidedをtrueだから裏も追加って事か!
pMat.doubleSided = true;
ということで
こんな感じになりました。
This movie requires Flash Player 9.0.0

サンプル

ソースは↓です。

(続きを読む…)

2009年5月3日

WordPressでSWFファイルを貼付ける時の方法

WordPressでSWFファイルを貼付ける時の方法は
皆さん悩まれているのではないでしょうか。

今まで私も直接タグを打っていたのですが、
やはり面倒になったのでプラグインを導入する事にしました。

採用させていただいたのは、
blog.alumican.netさんのWP-Al-SWFObjectです。

導入方法は
1、ダウンロードしたwp-al-swfobjectをFTPでプラグインフォルダにアップロード
2、管理画面>プラグインで有効に
3、SWFを貼付けたい場所に所定のタグを挿入

[embedSWF]swfへのパス[/embedSWF]

他にも
[embedSWF]
swf, width, height, align, version, expressInstall, flashvars, params, attributes
[/embedSWF]
のような豊富なオプションがあるようで結構実用的ですね。

使用させていただきます。

Filed under: WordPress Tips
タグ: ,

Page 5 of 6123456