カタン: 2009年2月アーカイブ

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。


今回はマウスイベントの利用とカメラの移動の二つを使って
「マウスが乗っているときには拡大、マウスが乗っていないときには縮小」
するというFlashを制作してみました。
コード上にて今回の要点となる部分をまず記述させていただきます。

マウスイベントの設定

マウスイベント関連でポイントになる箇所はコード上の以下の部分です。

18行目:
import org.papervision3d.events.InteractiveScene3DEvent;

InteractiveScene3DEventというクラスにマウスイベントが定義されていますのでインポートします。


45行目:
viewport = new Viewport3D(550 , 400, false, true);

マウスイベント操作のために四つ目の引数(interactive)をtrueにします。
参考までに、一つ目の引数が横幅(viewportWidth)、二つ目の引数が縦幅(viewportHeight)、三つ目の引数がステージのサイズ変更時にサイズ変更するか(autoScaleToStage)を意味しています。


58行目:
sphere_bfm.interactive = true;

図形に貼り付けた画像(BitmapFileMaterialのインスタンス)のinteractiveをtrueにします。
マウスイベントを許可するためです。


62行目・63行目:
sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OVER , onOver);
sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OUT , onOut);

マウスイベントの定義です。
ここではマウスのOVERとOUTを定義しています。
onOverとonOutがイベント時に呼び出すメソッド名です。

カメラの移動

物体の拡大と縮小を表現するために、物体そのものの大きさを変えることは一つの手です。 しかし、せっかく3Dを扱っているのですから、今回はカメラの移動による拡大と縮小の表現を行ってみます。

カメラ移動関連では以下のメソッドを使用しています。
これらのメソッドはDisplayObject3Dから継承しているものなので、カメラ以外でも使用します。

  • moveForward 向き合っているオブジェクトの方向へと指定した距離だけ移動します。
  • moveBackward 向き合っているオブジェクトと反対方向へと指定した距離だけ移動します。
  • distanceTo
    引数として与えたオブジェクトとの距離を返します。

結果(オブジェクトにマウスカーソルを乗せてみてください)

ソース

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。


次回は一つの物体の複数角度からの同時表示について学習する予定です。

同時に複数方向からの表示‐Papervision3Dのお勉強(6)‐へ。
マウス位置に合わせての画像回転‐Papervision3Dのお勉強(4)‐へ。

メモリ購入

| カテゴリ:Web・IT

春ぐらいに新しいPCを買おうかなと、昨年からぼんやり計画しています。
現在のメイン機がWindowsXPのデスクトップなので、外に持ち運ぶことができるノートパソコンを。

ノートパソコンも使い慣れているWindowsにしようかなと思っていました。
でも、クロスブラウザチェック(ブラウザ毎の表示・動作確認)のこともあるしMacにしようかなと考えるようになりました。

現在持っているデスクトップマシンは3年前ぐらい?に買ったものです。
もしもWindowsのノートを購入するならデスクトップはあまり使わなくなったのかもしれませんが、Macのノートを買う以上、まだましばらく現役で使いそうな感じです。

ということで、メモリを購入しました。
現在の512M→2Gへ拡張です。

これまでずっと、512MのメモリでFlashCS3を使ってきました。
FlashCS3のメモリに対する最低要件は512M、推奨要件は1Gです。
ActionScript中心で絵をそれほど描きはしないので、512Mでも作業に支障をきたすほどのことはなかったですが、もう少し遅延なく動くとありがたいなとは思っていました。

メモリは価格.com経由でお店を見つけました。
いまさらわたしが薦める必要もないぐらい有名ですが、本当に便利なサイトです。

パソコンもパワーアップしたし、ばりばり行動するぞっと。

二月になると思うこと

| カテゴリ:とりま

いつも二月になると考えるのが「今年ももう一ヵ月過ぎたんだな」ということ。

特に深い意味なくぼんやりと考えるときがあれば、ネガティブな気持ちで考えるときもあるし、穏やかに過ごせている日常に感謝しながらだったりもする。

今年も二月になり「今年ももう一ヵ月過ぎたんだな」と考えた。
ただ、なんだかこれまでとは違う。
一ヶ月が過ぎたという事実が、例年よりもくっきりとしている。
例年よりも、濃い。
それがなぜなのかというと、今年はこれから色々なことが待ち構えているから。

今後に向けてどうするべきかばかりを考えて過ごした一月……
さて、二月と三月は今後に向けて、気持ちや実力とか、できるだけたくさん蓄えよう。

皆さんにとって一月はどんな月でしたか。
今年の残り十一ヵ月に繋がる一月になりましたか。
未来に繋がる一月になりましたか。

これから待ち構えている変化たちを、良い形で皆さんにお届けしていければと思っています。

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。


前回は立方体への外部画像ファイルの貼り付けを行いました。
今回は外部画像を貼り付けた立方体を、マウス位置によって回転させてみようと思います。

つまり

  • マウスのx座標を元にして立方体の横方向の回転角度を

  • マウスのy座標を元にして立方体の縦方向の回転角度を

決めます。

マウス位置に合わせた回転角度の決定

以前このblogにも書きましたが、CubeやCubeといった基本図形はすべて、DisplayObject3Dクラスを継承しています。

そして、3D物体に関する多くの基本的なプロパティがこのDisplayObject3Dには用意されています。

今回はその中でrotationY(Y軸を基準とした回転)とrotationX(X軸を基準とした回転)を利用しました。

ENTER_FRAMEイベント発生時にマウスのx座標とy座標を元にして、六面に画像を貼り付けたCubeクラスインスタンスのrotationYとrotationXを変更しています。

以下が結果です。

以下がソースです。


ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

次回はマウスイベントの取得について学習します。

マウスイベント取得とカメラの移動‐Papervision3Dのお勉強(5)‐へ。
3D物体への画像貼り付け‐Papervision3Dのお勉強(3)‐へ。

前へ 1 2

概要

青春B運営メンバー多口カタンによる雑記blogです。
自己紹介はこちら。開発物をまとめたものはこちら
 
ヘッダーイラストはkojiさん制作です。
感想・意見・要望等ありましたら気軽にフォームにてコンタクトくださいませ。
 
Twitterはじめましたので誰でも気軽に声かけてくださいね。