よくある、Web2.0的反射。Flashでちまちまやるのもいいけど、こういうのはActionScriptを使うのが一番。「ActionScriptを使ったことがない・・」という人もかなり手軽にできるクラスリンク集です。
商用利用も可能と書いてあるものだけリンク。
AS3 Reflection Class
反射は「reflection」。googleで「as3 reflection」と検索すれば結構出てきますが、その中でもよさげなのを。
Advanced Flash Components Blog » Blog Archive » ActionScript 3.0 Reflection Class
ZIPファイルをダウンロードすると、サンプルとAS3が入っています。StyleExample.flaがてっとり早いです。サンプルではBitmapクラスを生成していますが、普段はMovieClipを反射させたいと思うので、適当な色をつけたMovieClipをステージに配置し、インスタンス名をtest_mcとかにし、
var r:BitmapReflection = new BitmapReflection(test_mc, style);
と、test_mcを指定してみましょう。
あと、AS内上に書いてある
//this.addChild(bmp);
はコメントアウトしておきましょう。（ノイズを作ったオブジェクトが表示されてしまいますので）
ほら、簡単に自分のMovieClipを反射させれますね。
画面をクリックすると、上から落ちてきます。
ちょっといじってReflection.asに、床の座標（絶対値）変数を追加し、refreshPosition()を床とターゲットオブジェクトの距離分を反射オブジェクトの座標に指定しています。
Creating movie clips with reflections in ActionScript 3.0 -Adobe Developer Center -
こちらも同様、反射ですが、すごくシンプルです。
sample filesからダウンロード。
反射させるには以下のソースをActionScriptに書くだけ。（MovieClip test_mcは自分で作る）
import com.pixelfumes.reflect.*;
var r1 = new Reflect({mc:test_mc, alpha:50, ratio:50, distance:5, updateTime:1, reflectionDropoff:0});
これだけでtest_mcに反射させれます。
前後の記事
関連した記事
トラックバック＆Pingback
この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:
コメント （ 5 ）
コメント記入欄
東大編入に関する情報をまとめたサイト～小山太郎流～です。高専から東京大学工学部に編入（農学部編入）体験談もあります。他の大学への編入の参考にもなると思うので是非！！Questionnaires
Loading ...Sites by Taro Koyama
友人のHP。カフェ・エスキスです。
札幌は円山にあります。ギャラリーも兼ねたカフェで、ギャラリーの予約は１年以上待たないとゲットできません。
前の会社でお世話になっていた方が独立した会社です。ロゴマークデザインとそのデザインコンセプト、サイト作成を担当しました。
友人のオーダーメイド舞台衣装のサイトです。
Webサイトをちょこっとだけ手伝いました。
2 月 26th, 2009 at 18:41:10
小山太郎様
はじめまして。krimihoと申します。
只今flash上で反射しながら動くMovieClipについていろいろ調べており、
こちらのサイトにたどりつきました。
大変わかりやすい解説ありがとうございます。
Flash内で手作業でやっていたもので、こんなに楽にできるとは思ってもいませんでした。
実は、
＞画面をクリックすると、上から落ちてきます。
↑このようなサンプルの動きが理想なのですが、
＞ちょっといじってReflection.asに、床の座標（絶対値）変数を追加し、
＞refreshPosition()を床とターゲットオブジェクトの距離分を
＞反射オブジェクトの座標に指定しています。
↑具体的にお教えいただくことはできないでしょうか。
上から落ちてくる動きをカスタムし、
クリックすると、床から浮き出る⇔沈むというような動きをしたいと考えています。
お忙しいところ申し訳ありませんが、お時間のあるときにご教授いただけると幸いです。
2 月 26th, 2009 at 22:11:14
krimihoさん、コメントありがとうございます！
動きは、Tweenerでやってます。とりあえずですが。
トップレイヤにbk_mcという透明ＭＣ入れて、
//ELはEventListenerの略です＾＾；
import caurina.transitions.Tweener;
bk_mc.buttonMode = true;
bk_mc.addEventListener( MouseEvent.CLICK, ELClick );
function ELClick( evt:MouseEvent ):void {
Tweener.addTween( test_mc, { x:test_mc.x, y:150, time:1.5, transition:”easeOutBounce” } );
bk_mc.removeEventListener( MouseEvent.CLICK, ELClick );
bk_mc.buttonMode = false;
}
で、本題。
反射位置を決める「床の座標」をRefrection.asに追加します。
m_stageFloorを追加。
Refrection.asの一番下に反射オブジェクトの位置を決める関数があるのでそこをいじります。
m_stageFloorからの距離分、反射オブジェクトを離すことをやっています。
internal function refreshPosition():void{
var b:Rectangle = this._target.parent ? this._target.getBounds(this._target.parent) : this._target.getBounds(this._target);
this.x = b.x;
//–> koyama change
//set the coord Y for floor as m_stageFloor;
// this.y = b.y+b.height+this._style.distance;
this.y = m_stageFloor+ (m_stageFloor- (b.y+b.height))+this._style.distance;
// trace( “val = ” + (b.y) );
//< -- koyama change
}
//--> koyama add
//
public var m_stageFloor:Number = 0;
public function SetStageFloor(val:Number):void {
// trace( “test val” + val);
m_stageFloor = val;
}
//<<– koyama add
出来たら、Flash側でBitmapReflectionをnewした後にでも
r.SetStageFloor(350);
を追加すると、床座標が設定されますです。
反射元のオブジェクトが左上原点にしてないとダメだったような＾＾；
その辺はfloorの設定を変えるとかすれば大丈夫かと。
ただ、フレーム毎に動かなくても再描画的なことをやっていたと思うので、
座標のバックアップを取っておいて、座標が変わったら作りなおすとかやれば、軽量な反射が出来ると思います。
床から出たり沈んだりの反射は、
マスクオブジェクトを作り、床より下しか描画しないようにしなくてはダメかと＾＾
2 月 27th, 2009 at 18:04:41
早速お返事いただきありがとうございます。
Tweenerはじめ、ActionScriptライブラリを使うのが始めてだったもので、
今回を機に知らなかったことをいくつも知ることができました。
丁寧にお教えいただき、感謝しています。
ヒントもいただき、理想の動きを実現できることができました。
いままで技術に関しての書き込みはしたことがありませんでした。
小山さんのプロフィールがなければ質問出来なかったと思います。。小心者なので ^^;
お顔が出ていたので、どこか安心しながら書き込みさせていただきました ^^
これからもHP・ブログ拝見させていただきます。
ありがとうございました。
今日は雪が降りとても寒いので、お体ご自愛くださいませ ^^
3 月 2nd, 2009 at 23:36:03
今度は返事遅くなりました＾＾；
いえいえ、こちらこそ。コメントありがとうございます。
理想の動きになったようで。
是非とも見たいですね～
ＵＲＬとか気軽に載せてくださいよ！！
5 月 19th, 2009 at 23:03:15
はじめまして。
orangeと申します。よろしくお願いします。
二番目のリンクのアドビ