プロパティトゥイーン(動作追加バージョン)
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文字ずつ時間差でアニメーションをすることができます。上記のスクリプトのみでこのようなアニメーションも表現が可能になります。
