alt+sync

オルトプラス の スタッフブログ

mingで合成した画像をアニメーションさせたい

      2015/10/21

Flash担当のこばやしです。
 
今回は、mingで画像をswfに埋め込んで、それをアニメーションさせる方法をご紹介します。(FlashLite1.1)
前回の記事でmingでswfに画像を埋め込む方法は紹介しましたが、それをアニメーションさせてみようと思います。
 
 
アニメーションの方法としては2つあります。
 
１，オブジェクトをスクリプトでアニメーションさせる
２，オブジェクトをタイムラインでアニメーションさせる
 
１に関しては、埋め込んだ画像オブジェクトに名前がつけられますので、その名前のオブジェクトをスクリプトでアニメーションさせます。ただ、FlashLite1.1はenterFrameなども無いため、スクリプトのアニメーションは意外と面倒です。
 
なので、FlashのタイムラインからのMovieClipをアニメーションさせ、そこに合成した画像をはめ込んでしまえば簡単なのですが、ここにちょっとした罠があります。
 

 
mingの合成は上記のような感じになっていて、mingで生成されたswfの中に、別のswfと画像が合成されます。合成されるオブジェクトは全て_rootに合成されるため、アニメーションがあるswfの中に画像を合成することができません。FlashLite2の場合は、_root以外にライブラリのオブジェクトとして合成することが出来るため、そのオブジェクトを実行時にattachMovieすればいいのですが、FlashLite1.1にはattachMovieはありません。
 
なので、埋め込んだ画像を、タイムラインで作ったアニメーションの中にはめ込むことができないのです。
 
ただ、埋め込んだ画像を全てスクリプトで制御してアニメーションさせるのは効率が悪いので、タイムラインアニメーションで作ったオブジェクトのプロパティを、埋め込んだ画像に毎フレームコピーすることで、タイムラインアニメーションを合成した画像に適応させます。
 
例えば、合成した画像を、右から左にトゥイーンさせたい場合は、そのようなタイムラインアニメーションを空のMovieClipで作成します。そして、下記のようなスクリプトを毎フレーム書くことで、合成した画像と空のMovieClipが同じ動きをし、合成した画像がタイムラインで作成したアニメーションで実行されます
 

1
2
3
4
5
6
7
// copyTarget : コピー先(合成された画像のパス)
// copyOrigin : コピー元(タイムラインアニメーションの空のMCへのパス)
setProperty(copyTarget, _x, getProperty(copyOrigin, _x));
setProperty(copyTarget, _y, getProperty(copyOrigin, _y));
setProperty(copyTarget, _xscale, getProperty(copyOrigin, _xscale));
setProperty(copyTarget, _yscale, getProperty(copyOrigin, _yscale));
setProperty(copyTarget, _alpha, getProperty(copyOrigin, _alpha));

 
こんな感じのスクリプトを毎フレーム書くことで、プロパティがコピーされます。
実際は毎フレームこのスクリプトをコピペするのではなく、外部ファイルにして

1
#include "inc/copyProp.as"

と記述してます。
 
全てのフレームにコピペするのは効率的でないので、JSFLを作って、選択したフレームの先頭のフレームスクリプトを、選択中の全てのフレームにキーフレームを追加してコピーするようにしてます。これはFlashLiteじゃなくても使えます。
 
選択した先頭のフレームスクリプトをコピーするJSFL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var doc = fl.getDocumentDOM();
var tl = doc.getTimeline();
var list = tl.getSelectedFrames();

if (list.length > 3) {
  alert("レイヤーは複数選択しないでください＞＜");
} else {
  var l = list[0];
  var as = tl.layers[l].frames[list[1]].actionScript;

  for(var i = list[1]+1; i < list[2]; i++) {
    tl.insertKeyframe(i);
    var f = tl.layers[l].frames[i];
    f.actionScript = as;
  }
}

 

 
このようにmingを使った場合、mingで合成することを前提としてFlashを制作する必要があったりします。
枯れた技術ですが今後も少しずつ紹介していきたいと思います。
 

Share on GREE

 - 開発者ブログ