Flashで線がうねって波みたいに？！

質問

こんばんわ、今FLASHでいろいろとWEB作成に挑戦しています。
そこで、表題のようなムービーを作りたいのですが、アクションスクリプトの解説サイトを見てもわからず挫折中＾＾；
作りたいのは、以下のようなものです・・・。
パスで書いた曲線が、10本くらい1pxごとに垂直方向にカスケードしています。
その10本の線がセットで不規則にうねうねと波のようにうねる・・・。
こんな感じです。わかりにくいですよね＞＜

FLASHに通じた方がいらっしゃいましたら、アドバイスください！
解説サイト、参考になるムービーなどを知っている方も教えていただければかなり嬉しいです！

私の作成環境は、FlashMXとSWiSH＠Windowsです。
ご回答お待ちしております！＞＜

回答No.2

DPE

＃１です。
ラスタースクロールのことではありませんでしたね。失礼しました。

線の形そのものが変わるというのは ActionScript ではできませんが、シェイプトゥイーンを使ってみてはいかがでしょうか。
直線から波線にすると、どうも、正しく変化しない（シェイプヒントを上手く使えばできるのかもしれませんが）ようですので、最初から波線にして、波の振幅の上下が変化するようなトゥイーンにした方が簡単だと思います。
文字だけだと表現が難しいのですが、

　　∩　　　∩　　　　　∩
　∪　　→　　∪　→　∪

キーフレームをこのような感じで振幅の上下を変化させ、キーフレーム間にシェイプトゥイーンを設定してみてください。間のコマは自動的に作成されます。

不規則に変化させるというのが、やはり今ひとつ分かりにくかったのですが・・・
とりあえず、揺れ幅の違うアニメを何パターンか用意しておいて、１つのパターンが終わるごとに次に再生するパターンをランダムに選択する方法はいかがでしょう。
まず、パターンを全て、１つのムービークリップの中に連続して作っておきます。
それぞれのパターンの開始フレームを、ActionScript の配列変数を使って管理します。
配列変数はインデックス値を指定して中身を参照します。このインデックス値を、乱数を使ってランダムに決めることで、配列変数の中身をランダムに取り出せます。
１つのパターンの最後で、この配列変数の値をランダムに取り出します。配列変数の中身はそれぞれのアニメの開始フレームになっていますから、取り出した値のフレームにジャンプすれば、ランダムにアニメが再生される、という仕組みです。この一連の処理は、予め、関数にして定義しておきます。
仮に、10フレームのシェイプトゥイーンアニメを３パターン用意するとします。フレーム１では各種初期設定をしますので、実際のアニメはフレーム２から作ります。すると、ムービークリップの構成は以下のようになります。

　・初期設定：フレーム１
　・パターン１：フレーム２～フレーム11
　・パターン２：フレーム12～フレーム21
　・パターン３：フレーム22～フレーム31

フレーム１にアクションを設定して、各アニメの開始フレームを管理する配列変数と、パターンを選んで指定のアニメを再生する関数を定義します。これは、以下のようなアクションになります。描画用のレイヤーとは別に、アクション専用のレイヤーを作ると便利です。
（↓このスクリプトをコピーして使う場合は、各行の行頭に入っている全角のスペースを、全て半角のスペースかタブに置き換えてください。このまま使うとシンタックスエラーになります）

　//アニメパターン開始フレームを管理する配列変数
　anime_tbl = new Array( 2 , 12 , 22 );

　//アニメパターンを選択・再生する関数
　function Anime_select()
　{
　　var tbl_ref;

　　//配列変数の参照位置をランダムに決める
　　tbl_ref = Math.floor( Math.random() * ( 2 - 0 + 1 ) ) + 0 ;

　　//選んだ配列変数の中身を見て、指定のフレームにジャンプ
　　gotoAndPlay( anime_tbl[ tbl_ref ] );
　}

　//最初に再生するアニメを選択
　Anime_select();

それぞれのパターンの開始フレームを anime_tbl という配列変数の中に入れて管理します。今回は３パターンですので、配列変数の要素は３つになります。
配列変数のインデックス番号は０から始まります。つまり、配列変数の要素が３つなら、インデックス値は０～２です。０～２の間で乱数を作り、配列変数の中身をランダムに取り出します。指定の範囲内で乱数を作る方法は、Macromedhia 社のＨＰで公開されている Flash のテクニカルノートに詳しい解説がありますので、よろしかったらご参照ください。
各アニメの終了フレームは 11・21・31 です。これらのフレームそれぞれに、

　//次のアニメを選択・再生
　Anime_select();

というアクションを設定し、処理用の関数を呼び出します。これで、１つのアニメが終わるごとに次のパターンを選び、再生されるようになります。

ムービークリップを１つ作っておけば、あとはインスタンスで同じものをいくつでも作れます。同じシンボルから作られたインスタンスでも、再生するアニメはインスタンスごとにランダムで決められますので、全部が全部同じ動きになることはありません。
長くなって申し訳ありませんでした。
不明な点がございましたら、また補足してください。

参考URL：

http://www.macromedia.com/jp/support/flash/ts/documents/fl0173.html

お礼

すごいです！！
あんな説明でここまで的確に理解してくださって本当に感謝いたします！
配列変数のご説明は本当にわかりやすいです！
配列変数ってそういう構造に用いることができるのですね！
大半の謎が解けました。
とにかく、チャレンジしてみます。

本当にありがとうございました！

回答No.1

DPE

ドット絵が主流だった頃のゲームでよく見かけた”ラスタースクロール”に近いのではないかと思うのですが、いかがでしょう。
ラスタースクロールとは、ライン１本１本を、三角関数の sin を利用して曲線的な動きで横方向に動かし、全体が波打っているように見せる方法です。
ラインの動きを図にすると、

　－　　　　　　－　　　　　　　－
　－　　　　　　　－　　　　　－
　－　　→　　　－　　　→　　　－　
　－　　　　　－　　　　　　　　　－　
　－　　　　　　－　　　　　　　－　　　　　　　　

あまりうまく表現できませんけれど、大体このようなイメージです。アニメの際、線の端の動きが滑らかな曲線（いわゆる sin カーブ）を描いて見えるのが特徴です。
（ブラウザの表示フォントによっては配置がズレます。等幅フォントで表示してご覧ください）
水面や炎のように揺らめくもの、異次元空間のような不思議な世界観を表現するのによく利用されていました。
「セットで不規則に」というのも今ひとつよく分からないのですが、波の揺れ幅がランダムに変わる、などでしょうか？

お礼

回答ありがとうございます！
大変遅くなってしまい、失礼致しましたm(__)m
やっぱり伝わりにくかったですよね＾＾；
DPEさんのものは、左右に波のような動きを出すようなものですよね？
ちょっと違うのですが、線の長さが600pxくらいで、その線自体が「－」→「～」という感じでウネウネと・・・というのなんです。
これはFLASHだとやはり難しいのですかね・・・。
何かまたよいアドバイスがあったらご回答お願いいたします！
ありがとうございました。