Flashライブラリパッケージ :: hikatsuka.swf > プロパティトゥイーン(動作追加バージョン)

FlashによるWEBアプリケーション開発支援ライブラリパッケージ :: hikatsuka.swf

プロパティトゥイーン(動作追加バージョン)

hikatsukaMotionParallel(mc, X, Y, W, H, A, R, F, E, EF);
ムービークリップを指定のプロパティの値までアニメーションします。

パラメータ 属性 対応プロパティ 説明 備考
mc MovieClip   対象となるムービークリップのインスタンス名  
X Number _x X座標の数値 [null]で無視
Y Number _y Y座標の数値 [null]で無視
W Number
or String
_xscale
or _width
水平スケールの数値
※文字列(String)で「100px」等とすると幅の指定になります。
[null]で無視
H Number
or String
_yscale
or _height
垂直スケールの数値
※文字列(String)で「100px」等とすると高さの指定になります。
[null]で無視
A Number _alpha 透明度の数値
※0(完全な透明)~ 100(完全な不透明)
[null]で無視
R Number _rotation 回転角度の数値 [null]で無視
F Number   アニメーションの継続を示す数値  
E String   イージングの種類
none:等速
in:加速(最初は遅く、最後は早く)
out:減速(最初は早く、最後は遅く)
 
EF Function   アニメーション終了後の実行する定義関数の指定 省略可能
ページの先頭へ

説明・解説

ムービークリップを任意の座標や大きさまでてアニメーションさせることができます。
基本は「hikatsukaMotionSingle」と同じですが、「hikatsukaMotionParallel」の場合、異なるパラメータで複数記述することで、より複雑な動きを表現できます。
簡単な比較を説明をすると、
「hikatsukaMotionSingle」
└アニメーションのパラメータ指定は1度のみ。複数記述すると前に記述した設定は無視される。
「hikatsukaMotionSingle」
└アニメーションのパラメータ指定は何度も可能。複数記述すると前に記述した設定と合わさって動作する。
という感じになります。
※パラメータの「F」は厳密なフレーム数ではありませんのでご注意ください。

ページの先頭へ

主な使用例

使用例1

それぞれ各ボタンをクリックするとムービークリップ「mc」が複雑な動きでアニメーションします。異なるプロパティと継続数で「hikatsukaMotionParallel」を3つ同時に使用。

このFlashのサンプル(341K)
※FLAファイルは、Flash MX 2004 ドキュメントです。
※このサンプルを正常に動作させるためには、hikatsuka.swf が必要です。

【テスト1ボタンの処理】
hikatsukaMotionParallel(mc, 200, null, 150, 150, 50, null, 10, "out");
hikatsukaMotionParallel(mc, 350, 50, 40, 40, null, null, 30, "out");
hikatsukaMotionParallel(mc, 500, 20, 100, 100, 50, null, 60, "out");

【テスト2ボタンの処理】
hikatsukaMotionParallel(mc, 400, 50, 80, 80, null, null, 10, "out");
hikatsukaMotionParallel(mc, 200, 30, 50, 50, null, null, 20, "out");
hikatsukaMotionParallel(mc, 250, 80, 150, 150, null, null, 40, "out");

【テスト3ボタンの処理】
hikatsukaMotionParallel(mc, 200, 20, 150, 80, 50, null, 10, "out");
hikatsukaMotionParallel(mc, 250, 30, 50, 50, null, null, 20, "out");
hikatsukaMotionParallel(mc, 300, 80, 150, 150, 100, null, 40, "out");

このように「hikatsukaMotionParallel」を複数実行させ、それぞれ異なるパラメータを記述すると、各モーションの動きが合わさって複雑なアニメーションを可能にします。
※特に継続時間を変えていくのがポイントです。

ページの先頭へ

使用例2

ムービークリップ「txt」に対して、スクリプトをフレームごとに2種記述したランダムタイポアニメーション。

このFlashのサンプル(333K)
※FLAファイルは、Flash MX 2004 ドキュメントです。
※このサンプルを正常に動作させるためには、hikatsuka.swf が必要です。

【最初のフレーム】
stop();
//アニメーションの終了処理設定
moveEnd = function() {
	//アニメーション終了後の処理
	play();
	delete moveEnd;
}
//初期設定
txt._xscale = 0;
txt._yscale = 0;
txt._alpha = 100;
//アニメーション設定
hikatsukaMotionParallel(txt, Math.random()*Stage.width, Math.random()*Stage.height, null, null, null, null, 5, "out");
hikatsukaMotionParallel(txt, Stage.width/2, Stage.height/2, 100, 100, null, null, 10, "out", moveEnd);

【次のフレーム】
stop();
//アニメーションの終了処理設定
moveEnd = function() {
	//アニメーション終了後の処理
	play();
	delete moveEnd;
}
//アニメーション設定
hikatsukaMotionParallel(txt, Math.random()*Stage.width, Math.random()*Stage.height, null, null, null, null, 5, "out");
hikatsukaMotionParallel(txt, null, null, 1000, 1000, 0, null, 20, "in", moveEnd);

アニメーション終了後、「moveEnd」で定義させた関数が実行されます。また、座標値にランダム関数を使用しているため、タイポグラフィの表示される位置が再生されるたびに変化します。
このように、アニメーション終了後の実行する関数を定義することで、複雑なアニメーションも2フレームのみで表現可能になります。

ページの先頭へ

使用例3

タイマー関数を併用したタイポグラフィ

このFlashのサンプル(369K)
※FLAファイルは、Flash MX 2004 ドキュメントです。
※このサンプルを正常に動作させるためには、hikatsuka.swf が必要です。

stop();
//////////タイポグラフィ設定
//アルファを全て0に
for (i=0; i<=13; i++) {
	eval("txt"+i)._alpha=0;
}
//////////タイポグラフィ処理
function imageShowTitle(mc,i) {
	//座標を記憶
	var tempX = mc._x;
	var tempY = mc._y;
	//初期位置
	mc._x = Math.random()*Stage.width;
	mc._y = Math.random()*Stage.height;
	mc._xscale = mc._yscale = tempS;
	mc._rotation = 360-Math.random()*720;
	//
	//アニメーションの終了処理設定
	moveEnd = function() {
		//最後の文字のアニメーションが終了した場合
		if (i>=13) {
			play();
		}
		delete moveEnd;
	}
	//アニメーション処理
	hikatsukaMotionParallel(mc, Math.random()*Stage.width, Math.random()*Stage.height, 1000, 1000, 80, null, 10, "out");
	hikatsukaMotionParallel(mc, tempX, tempY, 100, 100, 100, 0, 15, "out", moveEnd);
}
//////////時間処理
//カウント用
var i=0;
//時間関数
function WaitTime() {
	//タイポグラフィ処理
	imageShowTitle(eval("txt"+i),i);
	//カウントアップ
	i++;
	//タイマー終了処理
	if (i>13) {
		clearInterval(WaitTimeId);
	}
}
//処理開始
WaitTimeId = setInterval(WaitTime, 80);

タイマー関数を利用すると、1文字ずつ時間差でアニメーションをすることができます。上記のスクリプトのみでこのようなアニメーションも表現が可能になります。

ページの先頭へ