Home > Archives > 2009-05

2009-05

Cubeをあれこれ動かしてみる


ClockMaker Blog内のPapervision3Dチュートリアルが、終了しましたね。

Yasuさん、お疲れ様でした。そして、ありがとうございました。

今回も以下の記事を参考にさせて頂き、作ってみました。

動くCubeのデモを見る

Cameraの設定やステージをドラッグする等の処理は、PV3D Vol.05に。3Dオブジェクトをクリックする処理は、PV3D Vol.06に詳しく書かれていますので、そちらをお読みください。

で、自分でも(機能を)付け足してみようかな? ということで、以下を実装。

  1. Particleを矩形から円へ
  2. キーボードの矢印キーで、Cubeを動かす
  3. 3Dオブジェクトをクリックしたら、Cubeが拡大&縮小する

前回のエントリに、ソースを付け加えていった感じですので、Cubeの作成方法&画像の貼付け等は省略させて頂きます。

Particleの変更

連載記事の方では、Particleは矩形でした。

var particleMat:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1);

ParticleMaterialクラスを見てみると、三番目の引数を省略すると、初期値は0が適用されるようになっています。

0は矩形になります。

そこで、「形を変えてみるか!」ということで、三番目の引数を1に設定してみました。

var particleMat:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1, 1);

このように(1と)設定することで、矩形→円に変わってくれます。

キーボードでの操作

//KeyboardEvent.KEY_DOWNを受けての処理
switch (e.keyCode ) {
    case Keyboard.UP:
        cube.z -= 5;
        break;
    case Keyboard.DOWN:
        cube.z += 5;
        break;
    case Keyboard.LEFT:
        cube.x += 5;
        break;
    case Keyboard.RIGHT:
        cube.x -= 5;
        break;
    default:
}

ちょっと3D空間でCubeを動かしてみたかったので、こんなことをしてみました。

あまり意味はありません。

クリックしたら拡大&縮小

//flagを設定しておく
var flg:Boolean = true;

cube.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK,clickHandler);
	
//Cubeがクリックされた時
function clickHandler(e){
	if(flg == true){
		Tweener.addTween(cube,{scaleX:2,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleY:2,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleZ:2,time:1,transition:"easeInOutBounce"});
		mytxt.text = "でっかくなっちゃった!";
		flg = false;
	}else{
		Tweener.addTween(cube,{scaleX:1,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleY:1,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleZ:1,time:1,transition:"easeInOutBounce"});
		flg = true;
		mytxt.text = "";
	}
}

最初、拡大&縮小はこんなコードを書いてました。

import caurina.transitions.properties.DisplayShortcuts;

//TweenerのDisplayShortcutsを使えるようにしておく
DisplayShortcuts.init();
(略)
Tweener.addTween(cube,{_scale:2,time:1,transition:"easeInOutBounce"});

これでパブリッシュしてみると、z方向に拡大してくれませんでした。(そりゃ、そうだ!)

で、どうしたものかと…

とりあえず、「scaleX、scaleYがあるんだから、scaleZもいけるんじゃない?」と思い、試してみたら、上手くいってしまいまして…

で、何故上手くいったのか? をきちんと理解するため、親のクラスをどんどん遡っていくと…

DisplayObject3Dに_scaleX、_scaleY、_scaleZがありました!

こいつを継承してるから、上手くいったのねぇ…と納得。

ソースを書くだけでなく、継承元のクラスを見ていくときも(FlashIDEだと)辛いですねぇ…

FlashDevelopのありがたみを実感しました。

と、まぁ、PaperVision3Dに詳しくない僕でも、こんなものがサクッと作れるようになったのは、Yasuさんの連載記事のお陰です。

改めまして、ありがとうございました!

FlashDevelopをRC2からRC4へ


FlashDevelopをRC2からRC4へアップデートさせようと思ったら、(RC2をインストールしたまま、RC4をインストールしちゃえば問題ないはずだったんですが)何故だか会社のパソコンでは上手くいきませんでした。

ちなみに家のパソコンではきちんと出来ました。

インストールは無事終了して、コードを書いていたら、あれあれあれ。

Ctrl + Shift + 1が使えない…

イベントハンドラを作ろうとして、Ctrl + Shift + 1を押しても、何も起きない…

生まれも育ちも北海道の僕ですが、「何でやねん!」って叫びたくなりました。

そのうちaddEventListener(って書いただけで、訳のわからないダイアログボックスが出てくるように…

こりゃ駄目だ…

RC2に戻して、Ctrl + Shift + 1を押すと、ちゃんと機能する…

twitterでつぶやいてみても、こんな現象に陥っているのは、僕だけみたい…

な~~~~~~~~~~~~~んで?

試しに(バックアップをきちんと取った上で)RC2をアンインストールして、消えずに残っていたFlashDevelop関連のファイルを全部消去して、RC3をインストールしてみると…

あら、ちゃんと機能した。

RC3をインストールしたまま、RC4にアップデートしてみても…

こちらも、ちゃんと機能した。

消えずに残っていたファイルが何か悪さをしていたのかも…

RC2をインストールしたままRC3or4にアップデートして、Ctrl + Shift + 1が効かなくなった場合は、RC2をアンインストールして一度綺麗な状態にしてから、RC3or4をインストールしてみると、上手くいくかと。

何とな~くでやってたPaperVision3D


今まで何とな~くでやっていたPaperVision3D。

前々から「それでは駄目だなぁ~」とは思っていたんですが、ズルズルとここまで来てしまいました。

ちゃんと勉強しよう! ということで、基本から勉強し直します。

で、何からやろうかなぁ…と思っていたら、ClockmakerのYasuさんが、『フレームアクションで覚えるPV3D』という連載をされているのを思い出し、そこから始めてみることに…

今回は、Vol.3のMaterialを理解するの記事を元に作ってみました。

BitmapAssetMaterialはYasuさんが記事にされていますので、僕はBitmapMaterialとBitmapFileMaterialで作ってみました。(ただテクスチャ貼って、グルグル回しただけですが…)

ソースはこんな感じです。(flaファイルの1フレーム目に書いてます)

// フレームアクションでPapervision3D
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*
import org.papervision3d.view.BasicView;
import org.papervision3d.materials.utils.MaterialsList;

// 3D表示用のインスタンスを作成
var world:BasicView = new BasicView();
addChild(world);
world.startRendering();

// 外部ファイルを読み込んで、オブジェクトに貼る
var material:BitmapFileMaterial = new BitmapFileMaterial('●●●●.jpg',true);
//Plane用
material.doubleSided = true;
//一応smoothを
material.smooth = true;

//Cube用(書き方はイロイロある)
var materials:MaterialsList = new MaterialsList();
materials.addMaterial(material,"all");

//Cubeの場合
//var obj:Cube = new Cube(materials,300,300,300);

//Planeの場合
//var obj:Plane= new Plane(material, 300, 300, 1, 1);

//Sphereの場合
//var obj:Sphere = new Sphere(material, 300,15,15)

//Coneの場合
//var obj:Cone= new Cone(material, 200, 300, 1, 1);

//Arrowの場合
//var obj:Arrow= new Arrow(material);

//Cylinderの場合
//var obj:Cylinder= new Cylinder(material, 300, 300,5,5);

//PaperPlaneの場合
var obj:PaperPlane= new PaperPlane(material, 3);

world.scene.addChild(obj);

// EnterFrameの際に呼び出す関数の設定
addEventListener(Event.ENTER_FRAME, loop);

// EnterFrameでのアニメーションを設定します
function loop(e:Event) {
	obj.rotationY += 1;
	obj.rotationX += 1;
}

BitmapMaterialの方は、上記のソースに画像を読み込んでBitmapDataに変換する処理を加えればOK。

ProgressionでAIRプロジェクトを書き出してみる


ProgressionでAIRを作ってみようかなぁ…と思って試してみたら、躓いたことがあったので、メモしておきます。

ちなみにですが、僕は未だにFlashCS3なので、CS4をお使いの方には、関係のない話になるかと思います。

Progressionのプロジェクトパネルから、AIR1.1を選択し、プロジェクトを書き出します。

プロジェクトパネルからAIRの書き出し

すると、プロジェクトは無事作成されるんですが、出力パネルにエラーが表示されます。

CastSpriteのエラーが表示される

CastSprite.asのNativeMenuが「型が見つからないか、コンパイル時定数ではない」と怒られます。

で、CastSprite.asや、その親のクラスの中身を見てみても、何も問題はなさそう…

何でエラーなの? と。

ググってみたら、NativeMenuはAIRのみに対応していて、FlashPlayerはサポートしていないなんて書かれてました。

NativeMenu オブジェクトまたは ContextMenu オブジェクトのいずれかを使用して、コンテキストメニューを設定します。Flash Player は ContextMenu クラスのみサポートしており、NativeMenu クラスはサポートしていません。(Adobe Flex3.2リファレンスより引用)

なるほどねぇ…

そんなこんなで、FlashIDEのプロパティパネルを見ていたら、気になることが…

プロファイルがデフォルト

プロファイルがデフォルトになっています。

もしかして、これが原因なんじゃないかと…

手動でプロファイルを変更

ならプロファイルを変更すればいいんじゃない? ということで、

プロファイルの変更

プロファイルの読み込み>読み込みを選択します。

AIR1.0を選択

上記の様に、プロファイルをデフォルトからAIR1.0に変更します。

プロファイルをAIRに変更

これでパブリッシュしてみたら、怒られることはなくなりました。

気にせずパブリッシュ

あれこれ試していたら、もっと簡単な方法がありました。

プロジェクトが作成され、出力パネルにエラーが表示されるところまでは一緒です。

プロファイルがデフォルト

プロファイルはデフォルトになっています。

で、ここで、エラーなんて気にせず、もう一度パブリッシュを行います。

すると何故だか、プロファイルがデフォルトからAIR1.0に自動的に切り替わります。

プロファイルをAIRに変更

加えて、先に出ていたCastSpriteのエラーも表示されなくなります。

何でプロファイルが自動的に切り替わるのかは、不明です。

手動でプロファイルを切り替えるよりは、こちらの方が簡単かと思います。

Flash CS4 + AIR1.5でプロジェクトの書き出しを行うと、このようなエラーは起きないみたいです。

多分、CS3だからでしょうか…

「CS4を買いなさい!」という無言のプレッシャー?

そんなの気にしません。まだまだCS3で頑張ります!

★追記

キャプチャのドキュメントクラスに「flabaka.Index」と書かれているものといないものがありますが、気にしないでください。

キャプチャをし忘れて、後からキャプチャをし直しただけですので…(その際、ドキュメントクラスの設定を忘れました)

MetaTagGeneratorを1.2にバージョンアップ


MetaTagGeneratorを1.2にバージョンアップしました。

MetaTagGenerator1.2

前回からの変更点はこんなところです。

  1. バージョンの記述
  2. 字数制限
  3. faviconの設定

バージョンの記述

バージョンがいくつか分からなかったので、現バージョンを表示するように変更しました。

字数制限

(SEO対策も兼ねて)descriptionとkeywordsに字数制限をしました。

keywordは(多くて)10個くらいで、descriptionは100字くらいがいいんじゃないの? みたいな説がありますので、それを参考に。

それ以上設定したいという場合は、(フィールドに値を入力→ドラッグ&ドロップorファイルを読み込んだ後で)テキストエリアを直接修正してもらえれば、100字以上の設定は可能です。

faviconの設定

あとfaviconもよく設定する項目だと思いましたので、設定をパネルから行えるようにしてみました。

デフォルトのパスは、/favicon.icoとなっています。(絶対パスなどに)変更したい場合は、適宜修正してください。

faviconのタイプですが、二通り選択可能です。

image/x-iconと設定する場合が多いかと思いますが、image/vnd.microsoft.iconも選べるようにしてあります。このあたりのことは、wikipediaのfaviconのページを参考にさせていただきました。

ちなみにですが、パスをデフォルトで、タイプをimage/x-iconにすると、こんな感じになります。

<title>●●●●</title>
<link rel=”stylesheet” type=”text/css” href=”contents/styles/progression.css” />
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />

こんな感じで、progressionのcssの設定の記述の下に、favicon(の記述)が挿入されます。

あとrobotの設定も出来るようにしようかなぁ…と思ったんですが、いろんなサイトのソースを見ていたら、(robotは)あまり設定されていないように思えたので、今回は見送りました。

robotの設定を可能にして! とか、他にもこの設定を出来たら便利なのに! などご意見がありましたら、コメントお願い致します。

Home > Archives > 2009-05

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top