以前から作ってみたかったアハムービーぽいのに挑戦！
ちょっと画像の修正作業に時間を持ってかれたけど、flash上でやる事は意外と単純。
制作時間は45分ぐらいかな。

こういうのを見ることで脳が活性化？するんだっけか、確か。
でも作る側としては答え知っちゃってるからなんも意味なーし！

新しい本を買ってみた。
Flashモーションデザインハンドブック

この間の「バナー広告見本帳」が中級者向け、こっちは初心者を脱した人向けという感じ。
そんな凝ったサイトを作るわけでもないし、一番使うであろうボタン関係の作り方を学ぶんであればこっちの本だけで十分かなぁ。

さて、明日からはまたテンプレ制作を再開。
ただ今まで見たいにテーマを絞って作るんじゃなくて、flashを効果的に使ったレイアウトのみのプレーンなサイトを作っていく予定。
勉強勉強。

昔の映画風flashかんせーい。
完成

以下全部メモ。
各レイヤーはこんな感じ。


as - AS専用
noise - もやもやしてるノイズ
line - 縦線ノイズ
start_text - テキスト「下町探訪」
end_text - テキスト「素人のうぇぶでざいん」
photo - 写真

1フレーム目で変数の初期値を設定。

line = 0;
gettime = getTimer();
starttime = 4000; //4秒
endtime = 10000; //10秒

3フレーム目。
1フレーム目で取得した時間（gettime）から（starttime）秒経ったら4フレームへ。それまでは2-3フレームのリピート。
この間はstart_textレイヤーに配置した「下町探訪」のMCを表示。

if(getTimer() ＞= gettime + starttime){
gotoAndPlay(4);
}else{
gotoAndPlay(2);
}

5フレーム目。
1フレーム目で取得した時間（gettime）から（endttime）秒経ったら6フレームへ。それまでは4-5フレームのリピート。
この間はphotoレイヤーに配置した画像を表示。

if(getTimer() ＞= gettime + endtime){
gotoAndPlay(6);
}else{
gotoAndPlay(4);
}

そして6フレーム目でstop();
最後にlineレイヤーに配置した縦線フィルムノイズMCに直接書き込んだAS。
ここでは同時に表示する数は3本。
それぞれランダムに数字を取得して、横幅とアルファ値と表示位置を毎回取得、複製。

onClipEvent(load){
//フラグの初期化、同時に表示するライン数
flag = true;
if (_root.line ＞=3){
_root.line =0;
}

//複製時の名前
linename = "MC_line"+_root.line; }
onClipEvent(enterFrame){ //横幅とアルファ値
rdm = Math.ceil(Math.random()*5);
if(rdm == 0){
this._xscale = 100;
this._alpha = 40;
}else if(rdm == 1){
this._xscale = 80;
this._alpha = 30;
}else if(rdm == 2){
this._xscale = 50;
this._alpha = 20;
}else{
this._xscale = 0;
this._alpha = 0;
} //複製
if(flag == true){
this.duplicateMovieClip(linename,_root.line);
_root.line++;
flag = false;

this._x = Math.ceil(Math.random()*224);
this._y = 0;

}
}

思い描いたものができたことに満足。きもち～！

昨日の記事でflashはこの辺でいいかな～とか言っておきながら今日もflashを弄ってたり。

いま作ってるのは24風バナー のときになんとなく思いついた「映画風のflash」。
昔の無声映画みたいな白黒の風景に、フィルムノイズがピシピシっと走るもの。

フィルムノイズはduplicateMovieClipでコピーして、全体のもやもやしたノイズはアルファ値を低くした複数の雲画像をフレームごとに配置して、それをリピート。でなんとなくそれっぽく。
でもなんかしっくりこないなぁ。
ここは気分転換にゲームでもやって明日またいじってみよう・・！

でっけた。
完成

MCをランダム表示
移動方向，速度をランダムで決定
徐々に描かれるアニメーション

どの課題もしっかり理解できて、そして思い通り作れた。
ちなみにこのキャラは落描き？で描いた即席インコさん。

さてflashはこの辺で良いかしらね。久しぶりにテンプレ作ろうかなー。

今日の課題は横反転と時間の計測。

まず1つ目、横反転。
これはxscaleを-100にすればOKらしい。
このMCでは変数rdm_movexの値がマイナスなら横反転をしたいんだから、

if( rdm_movex ＜ 0 ){
this._xscale = -100;
}

これでOK！

続いて時間計測。
これはまずgetTimer();で現在の時間を取得して変数stoptimeに代入。
次に待ち時間を変数waittimeに代入。
そして再び現在の時間を取得。この現在の時間が最初に取得した時間+待ち時間以上ならOKってことだから、ASにするとこんな感じ。

stoptime = getTimer();
waittime = 6000;
if( getTimer() ＞= stopTime + waitTime ) {
OK！
}

バナーはほぼ完成。
デキはともかくだいぶ勉強になった感じだなぁ・・。
もうちょい細かいとこ変更して明日upup！

とりあえずキャラクターが描かれるアニメーションは完成。
ただ！ここで問題発生。

キャラクターの向いてる方向は右向きで固定だから、左方向に移動するとき（ rdm_movexかrdm_moveyの値がマイナスだった場合 )後ろ向きで移動してしまう。
これは2つの変数のうちどちらか一つがマイナスならMCを横反転、って事ができればうまくいきそうだけど・・やり方が分からない。

もう一つ、移動するためのASをキャラクターのMC自身に書き込んでいるせいか、全て描き終わる前にMCが動いてしまう。というかいきなり動く。
これは時間を計って一定時間経過したら動きましょう・・と言う風にできれば良いんだけどなぁ。

この2つの課題さえクリアできれば一応の完成はしそう。月曜までに！

まとめその2
昨日のままだと思ったように行かない部分があったから、今日は修正とか。

シーンの1フレーム目に次のASを記述。
MC複製の際に使用する変数iと、ムービーの横幅と縦幅をそれぞれ変数に代入して保存。

i = 1; // 初期値
beginw = _width; // 横幅
beginh = _height; // 縦幅

続いて2フレーム目にはこれ。
昨日の1フレーム目に書いたASからfor文を取り除いたもの＋α。

load_number = Math.floor(Math.random()*3)+1;
MC_set.attachMovie("circle"+load_number, "circle"+i, i); rdm_x = Math.floor(Math.random()*beginw)+51;
rdm_y = Math.floor(Math.random()*beginh)+26;
MC_set["circle"+i]._x = rdm_x;
MC_set["circle"+i]._y = rdm_y; rdm_scale = Math.floor(Math.random()*100)+51;
MC_set["circle"+i]._xscale = MC_set["circle"+i]._yscale = rdm_scale;

シーンの最終フレーム。

if( i == 15){
i = 1;
}else{
i += 1;
} gotoAndPlay(2);

昨日のものは1フレーム目でMCのcircle1～50を一気に作って表示していたけど、今日のは2フレーム目で"circle"+iを1個しか作らない。
ただシーンのフレームが最後に達したときにi+1をしたら2フレーム目にジャンプをする事で次のMCを作成。
今回同時に作られるMCは15個（i = 15）までとして、i = 15になったら1に戻してMCを上書きする。

最後に、flashの外枠を一番上に表示したいから、シーン上に配置した外枠に次のASを記述。

onClipEvent (enterFrame) {
this.swapDepths(999);
}

はぁ。ここまで辿り着くのに何時間かかったろうか・・。
画面の外にMCが移動すると_widthや_heightがどんどん大きくなっていくって事が分からなくて、ずっとそこで躓いてた。ムービーのデバッグをする事で変数とかの数字をリアルタイムで見れると知ったときは感動だったなぁｗ

明日はいよいよ絵の作成？

まとめその1
まずMCを3つ作って（MC_circle1～MC_circle3（テストなのでただの円画像）、それぞれにリンケージを設定。リンケージの意味は理解できてないけど、こういう時に使うものなんだと無理やり理解。
次に空のMCを作って（MC_set）、それをシーン上に配置。
シーンの1フレーム目に次のASを記述。

for (i=0; i
load_number = Math.floor(Math.random()*3)+1;
MC_set.attachMovie("circle"+load_number, "circle"+i, i);

rdm_x = Math.floor(Math.random()*(_root._width-150))+51;
rdm_y = Math.floor(Math.random()*(_root._height-75))+26;
MC_set["circle"+i]._x = rdm_x;
MC_set["circle"+i]._y = rdm_y;

rdm_scale = Math.floor(Math.random()*100)+51;
MC_set["circle"+i]._xscale = MC_set["circle"+i]._yscale = rdm_scale;

}

日本語訳
for (50回繰り返し) {

load_number = ランダムで1～3を抽出;
次のMCを読み込む("MC_circle"+上記の数字, "これが新しい名前", 深度);

初期位置のx座標 = ムービーの横幅=nとして、51～n-99の間からランダムに抽出;
初期位置のy座標 = ムービーの横幅=mとして、26～m-49の間からランダムに抽出; rdm_scale = 大きさ0.5倍～1.5倍からランダムに抽出;
横幅 = 縦幅 = rdm_scale;

}

ただこのまままだと円の画像は静止したままだから、MC_circle1～MC_circle3の円に直接ASを記述。

onClipEvent (load) {
rdm_movex = Math.floor(Math.random()*5)+1;
rdm_pm = Math.floor(Math.random()*2);
if(rdm_pm==0){
rdm_movex *= -1;
} rdm_movey = Math.floor(Math.random()*2)+1;
rdm_pm = Math.floor(Math.random()*2);
if(rdm_pm==0){
rdm_movey *= -1;
}
}

onClipEvent (enterFrame) {
this._x += rdm_movex;
this._y += rdm_movey;
}

日本語訳
最初に1回だけ実行{
rdm_movex = ランダムで1～5を抽出;
rdm_pm = ランダムで0～1を抽出;
rdm_pmが0ならrdm_movexにマイナス符号をつける rdm_movey = ランダムで1～2を抽出;
rdm_pm = ランダムで0～1を抽出;
rdm_pmが0ならrdm_moveyにマイナス符号をつける
}

このMCがシーン上にある限り常に実行 {
横方向の移動速度 += rdm_movex;
縦方向の移動速度 += rdm_movey;
}

骨組みは完成。
どうやら作るのが楽しいぞっと！

このまま次のステップに行くのもいいけれど、なんだかんだでこの2週間の間に身についた事もいくらかあるだろうから、最後のまとめとして今までのテーマを複数取り込んだバナーを作ってみる！

とりあえずの目標。
・予め用意したMCをランダムで表示 （しんしんと降る雪 より）
・そのMCは表示の際に少しずつ描かれていくようなアニメーションで （ドローイングイラスト より）
・MCの移動する速度、方向はランダム （これはサンプルに無かったかも）
・見た目が鬱陶しくならなければ背景をスクロール（画像ローテーション より）

あとは気まぐれで追加したりしなかったりと。
でっきるかな～。