画像ロールイン・ロールアウト

フラッシュ作成で困っているので質問いたします。
【環境】Windows XP(Professional)
【使用ソフト】Macromedia Flash MX 2004
まず、どのようなフラッシュを作成したいのかを
以下に記載いたします。
http://www.windowsmedia.com/MediaGuide/jaHome?WM …
このメディアプレーヤーサイトのガイドようなイメージで作成途中です。
サイト上部にあります、画像のロールイン・アウトを
右から左へと4枚の画像で繰り返したいのですが
その際のスクリプトがわかりません。
画像のロール方法は丸っきりメディアプレーヤーガイドと
同様にロールアウトしてる際に、次の画像がすでに右から
ロールインする、という形式です。
スクリプトはまったくの初心者です。
他に同様の質問があるか、検索はしてみたのですが
見当たらないようでしたので新たに質問させていただきました。
質問内容でわかりにくい部分、明記していない部分等
もしありましたらお知らせ下さい。
よろしくお願いいたします。

No.1 回答者： sassakun 回答日時： 2006/12/05 19:56

> その際のスクリプトがわかりません。

なぜスクリプトでするという結論を出されたのでしょうか。
ちゃんと考えられましたか，普通の方法で。

考え方にもよりますが，
ActionScript と言えば ActionScript である，
stop() や gotoAndPlay() くらいは使うかもしれませんが，
動きの基本はモーショントゥイーンでできますよ。
モーショントゥイーン以外も Flash の基礎知識でできます。

仮に ActionScript でするとしても，
モーショントゥイーン や Flash の基礎知識がなければ，
ActionScript ではできないと思います。


その普通の方法を１つ考えました。
基本的には画像の上にマスクレーヤーを用意して，
そのマスクレイヤーに写真と同じサイズの塗りのあるムービークリップを重ねて，
のマスクを画像にすべてかけた状態（ぴったり重ねた状態）から，
マスクムービークリップを左に動すという方法です。

「マスクとは？」
http://www.1art.jp/flash/le/lesson9/lesson9-2.htm

「アニメーションの基本（シェイプトゥイーン、マスクレイヤー）」
http://www.db.tokushima-u.ac.jp/miyoshi/opencour …
（→マスクに関しては下の方にあります。）


しかし，
マスクは 「かかっている」か 「かかっていない」か のどちらかしかありませんね。
半分くらいマスクをかける（半分くらい下のレイヤーを見せる）ということはできません。
そうなら，そうで，どうすれば出来るかを考えるのです。

　『鳴かぬなら 鳴かせてみせよう ホトトギス』

これは，普通に Flash を作るときでも，ActionScript を使うときでも全く同じです。
また，他言語や他ソフトでも同じだと思います。


--- 具体的方法例 ------

１つのムービークリップを用意して，
そのムービークリップの中のレイヤーを 30レイヤー くらいにします。
そして，写真を ムービークリップ（MC） に変換した物と，
その写真と同じサイズのマスクを交互にぴったり重ねて配置します。

Flash はレイヤーごとに配置されたオブジェクトを横から見ることができませんが，
仮に横から見ることができた場合のイメージ図です↓。

/////////////////////////////////////////////////
　□□□□□□□□□□□□□□ = マスク
　■■■■■■■■■■■■■■ =写真1(MC)
　□□□□□□□□□□□□□□ = マスク
　■■■■■■■■■■■■■■ =写真1(MC)
　□□□□□□□□□□□□□□ = マスク
　■■■■■■■■■■■■■■ =写真1(MC)
　□□□□□□□□□□□□□□ = マスク
　■■■■■■■■■■■■■■ =写真1(MC)
　　　～　省略　～
/////////////////////////////////////////////////

そして，一番上の写真(MC)のみのアルファ(不透明度)を 100％ にして，
それより下のレイヤーの写真(MC)のアルファを，
プロパティインスペクタで例えば 10％ にします。
そして，
マスクを左にモーショントゥイーンさせれば良いのですが，
このとき，動かすタイミングをずらしてモーショントゥイーンさせます。


/////////////////////////////////////////////////
　□□□□←動かす　（マスク）
　■■■■■■■■■■■■■■ =写真1 アルファ100
　□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真1 アルファ10
　□□□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真1 アルファ10
　□□□□□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真1 アルファ10
　　　～　省略　～
/////////////////////////////////////////////////

これで，
右端から徐々に消える 写真1 入りのムービークリップが１つ完成します。

その 写真1 が徐々に消え出す前に，
同じ構造の違う 写真2 を入れたムービークリップを下のレイヤーに準備しておけば，
上の写真1 が徐々に消え出すと同時に違う 写真2 が徐々に見えて来ます。

//--- 一番目のMC --------------------------//
　□□□□←動かす　（マスク）
　■■■■■■■■■■■■■■ =写真1 アルファ100
　□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真1 アルファ10
　□□□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真1 アルファ10
　□□□□□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真1 アルファ10
　　　～　省略　～
//--- 二番目のMC --------------------------//
　□□□□□□□□□□□□□□ = マスク
　■■■■■■■■■■■■■■ =写真2(MC)
　□□□□□□□□□□□□□□ = マスク
　回回回回回回回回回回回回回回 =写真2(MC)
　□□□□□□□□□□□□□□ = マスク
　回回回回回回回回回回回回回回 =写真2(MC)
　□□□□□□□□□□□□□□ = マスク
　回回回回回回回回回回回回回回 =写真2(MC)
　　　～　省略　～
//---------------------------------------//


このパターンで４枚目まで作り，
最後は，最初の写真のみを置いて，その 写真1 が完璧に見えた時点で，
メインムービーの最初のフレームに戻してループ再生させれば良いのです。

//--- 四番目のMC --------------------------//
　□□□□←動かす　（マスク）
　■■■■■■■■■■■■■■ =写真4 アルファ100
　□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真4 アルファ10
　□□□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真4 アルファ10
　□□□□□□□□□□←動かす　（マスク）
　回回回回回回回回回回回回回回 =写真4 アルファ10
　　　～　省略　～
//--- 一番目の写真 --------------------------//
　■■■■■■■■■■■■■■ =写真1 アルファ100
//-----------------------------------------//


写真1 が完璧に見えた時点で，
gotoAndPlay(1); を書いても良いですし，
そこが最終フレームであれば，
何も書かなくても，勝手にループ再生します。


ここまで考えたら，
そのまま上のように作れば良いのです。
また，ActionScript でするのなら，
上のように動作するようにプログラミングすれば良いのです。
少なくとも上のようなことが考えられなければ，
ActionScript で動きをプログラミングすることはできません。

ActionScript で "物を動かす" 必要があるのは，
主に次の３つの場合があると思います。

　１.マウスの座標など動的要因によって動きが変化する場合
　２.立体図形 や 数学的図形を表現するなど
　 　手で描く絵では表現出来ないものを表現する場合
　３.モーショントゥイーンで作るのがやたら面倒な場合

普通は１と２の場合です。
プログラミングが達者で，手間をかけるのが嫌だというときのみ，
３の場合が考えられます。

上で書いた具体的方法例は，
普通は １ にも ２ にも ３ にも該当しませんが，
人によっては３にだけは該当するかもしれませんね。

手間をかけることが嫌でなければ上の方法で作ってみても良いです。
Flash においては，これくらいのことは手間なうちに入りません。
手間をかけるか頭を使ってプログラムでするかです。



一応，以下には，
手間をかけることが嫌な場合の
ActionScriptでする方法を書いておきます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


写真まで ActionScript で用意するわけには行かないので，
サンプル作成に，
これを使わせていただきますか↓。

http://www.windowsmedia.com/CAPS/ImagesContent/A …

http://www.windowsmedia.com/CAPS/ImagesContent/4 …

http://www.windowsmedia.com/CAPS/ImagesContent/4 …

上のJPEGを使わなくても，
大きさが同じであれば何でも良いです。


> 右から左へと4枚の画像

と，ご質問では書かれていますが，枚数は気にしなくて良いです。
枚数は１文字変えるだけで OK のActionScriptにしますから。
説明はとりあえず上記３枚を使うと言うことで説明します。


３枚をローカルに保存しましたら，
Flash で新規ドキュメントを作成して，
その３枚のJPEGを，Flash のステージに読み込みます。
読み込みましたら，順はとうでも良いので，
３枚ともムービークリップに変換してください。

ただし，ムービークリップに変換するときに，
基準点を左上にしてください。

-----------------------------------------
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：■□□
　　　　　　 ○ ボタン　　　　　　　　　　　　　　　 □□□
　　　　　　 ○ グラフィック　　　　　　　　　　　　 □□□
-----------------------------------------


基本的にはどこを基準点にしても良いのですが，
今回の方法の場合，基準点を左上にすると色々操作しやすいです。

３枚ともムービークリップに変換しましたら，
ステージ上には３枚とも不要なので，
「右クリック」→「カット」などで，
ステージ上からそのムービークリップを消してください。
_root（メインムービー）のタイムラインはこれで空になるはずです。

きれいサッパリステージ上が空になりましたら，
一辺 5mm くらいの四角を描いてください。
色や大きさや線のあるなしはどうでも良いです。
とにかく適当で良いです。

その四角を選択して，ムービークリップに変換します。
こちらの基準点はどこでもかまいません。

四角のムービークリップができましたら，
ダブルクリックでそのムービークリップ内のタイムラインの編集に入ります。

ダブルクリックすると，さっき描いた四角のシェイプがあると思いますから，
その四角を消し去ってください。
これで，ムービークリップの編集は終わりです。
結局，空のムービークリップを用意するだけです。

空のムービークリップができましたら，
ドキュメントの編集 で _root のタイムラインに戻ってください。

_root のタイムラインに戻ると，空のムービークリップが小さな

　　　○

のようにステージ上のどこかにあると思いますから，
この ○ にインスタンス名を付けます。
この説明では 「TopMC」 というインスタンス名にしておきます。

この「TopMC」をステージの左上のコーナーに移動させてください。
このポイントに全ての画像の左上コーナーを表示させるようにします。

ここまでできたら，
「表示」→「ライブラリ」などで，「ライブラリパネル」を表示させてください。

「ライブラリ」には３枚のJPEGと，４つのムービークリップがあると思いますから，
４つのムービークリップのうち，
１番目に表示させたい写真の入っているムービークリップを選択し，
「右クリック」→「リンケージ」と選択します。

すると「リンケージプロパティ」 ダイアログが出てきますから，
　□ ActionScript に書き出し
にチェックを入れます。
　□ 最初のフレームに書き出し
にも自動的チェックが入りますからそれは入れたままで良いです。

そして，
　識別子[　　　　　　　　]
の部分に p0 と記入してください。
　識別子[p0　　　　　　　]
この p0 がこのムービークリップの識別子（名前）になります。

２番目に表示させたい写真の入っているムービークリップにも
同様の操作で今度は p1 と記入してください。

３番目に表示させたい写真の入っているムービークリップにも
同様の操作で今度は p2 と記入してください。

ステージに戻って，
タイムラインにレイヤーを１つ追加してください。
追加したレイヤーを スクリプト専用レイヤーと勝手に決めておきます。

その，追加したレイヤーの フレーム1 の空白キーフレームを選択して，
次のような ActionScript を書き（コピペし），
任意の場所に SWF をパブリッシュするか，
「ムービープレビュー」すると完成です。


------------------------------------------
// 写真の枚数の設定（可変）
var pNum = 3;
// 写真の動く速さの設定（可変）
var spd = 20;
// 写真を切り換える時間の設定（可変（ミリ秒））
var change = 9000;
// 写真を重ねる深度の上限の設定（可変（奇数））
var rank = 35;
// ずらす幅の設定（可変）
var slip = 2;
//
// 通し番号 n の初期値
var n = 0;
// 写真番号 pn の初期値
var pn = 0;
//
// 最初の写真を配置
TopMC.createEmptyMovieClip("myMC"+n, n);
TopMC["myMC"+n].attachMovie("p"+pn, "pMC0", 0);
//
// ユーザー定義関数 makeMC の定義
function makeMC() {
delete (TopMC["myMC"+n].onEnterFrame);
removeMC();
n++;
pn++;
TopMC.createEmptyMovieClip("myMC"+n, n);
if (pn>=pNum) {
pn = 0;
}
for (var i = 0; i<=rank; i++) {
TopMC["myMC"+n].attachMovie("p"+pn, "pMC"+i, i);
}
for (var i = 0; i<=rank; i += 2) {
TopMC["myMC"+n]["pMC"+i].setMask(TopMC["myMC"+n]["pMC"+(i+1)]);
TopMC["myMC"+n]["pMC"+(i-2)]._alpha = 8;
TopMC["myMC"+n]["pMC"+(i+1)]._x = TopMC["myMC"+n].pMC0._width+(i*slip);
}
moveMC();
}
//
// ユーザー定義関数 moveMC の定義
function moveMC() {
TopMC["myMC"+n].onEnterFrame = function() {
for (var i = 0; i<=_root.rank; i += 2) {
if (this["pMC"+(i+1)]._x<=_root.spd) {
this["pMC"+(i+1)]._x = 0;
} else {
this["pMC"+(i+1)]._x -= _root.spd;
}
}
};
}
// ユーザー定義関数 removeMC の定義
function removeMC() {
if (TopMC["myMC"+(n-1)] != undefined) {
TopMC["myMC"+(n-1)].removeMovieClip();
}
}
// change ミリ秒ごとに makeMC を実行
myID = setInterval(makeMC, change);
------------------------------------------


（可変） が付いている部分は，
カスタマイズ可能です。

４枚の写真があるのでしたら，
同様に ４枚をステージに読み込み，
ムービークリップに変換し，
識別子を p0，p1，p2，p3 にして，

　// 写真の枚数の設定（可変）
　var pNum = 3;

の部分を，

　// 写真の枚数の設定（可変）
　var pNum = 4;

にしてください。

モーショントゥイーンでする方の説明と，
ActionScript での動きは若干違いますが，
基本的には同じ考え方です。
setMask で，マスクも使っていますし，
_alpha = 8;　でアルファも使っています。

結局，
手作業で作れる物をプログラムで自動化しているだけです。

この回答へのお礼

sassakunさん

まずはお礼をさせてください。本当に、本当にありがとうございました！！
とても丁寧に、またこれほどまでに詳しく説明していただけるとは・・・。
どこを探してもダイレクトに理解できるものはネット上になく、
自分のやりたいことをピタッと回答していただけるだなんて
感謝のしようがありません・・・。ありがとうございました。

モーショントゥイーンで、というのはまったく頭に浮かびませんでした。
最初の概念が違うだけでできないこともさせることが出来るのですね。
でもレイヤーの使い方がイマイチわからなかったので、
sassakunさんの書いてくださったURLを参考にしてみたいと思います。
手間がかかっても、わからないスクリプトを記述するよりは
はるかに自分で出来ることの一つですよね。
スクリプトを自由に記述できるようにするより、まずは最も重要な
レイヤーを知らないと意味がないですね。
私が出来たことといえば、モーショントゥイーンで全体的に
フェードイン・アウトのみでした。

そして、スクリプトの記述・・・。大変ありがとうございました。
今回はこの記述を使用させていただき、完璧に作ることが出来ました！！
とても丁寧な説明だったので、問題なく出来上がりました。
もう感動して大騒ぎです。
でも、今回はsassakunさんがこのように丁寧に記述していただけたので
まったくの無知である私にも出来たことですね。

とても丁寧に回答してくださったこともなんとも大変嬉しかったのですが、
角度を変えた視点でのやり方というのはもっとも勉強になりました。
他ソフトでも・・・というのもごもっともですね！！
人それぞれやり方もあって、問題から回避するのですよね。

sassakunさんの回答で一発でスッキリ難問も解決できてしまいました。
この回答はメモして大事にしておきます。
本当にありがとうございました！！

お礼日時：2006/12/07 16:44