トップページへ戻る


文字レイヤーのトランジション
 
「あれ? どうした?」

「何回も見てると、なーんか気にいらないんだなーこれが」

「どこがだ?」

「二つあんだもん。ひとつは、画像が切り替わるときに、上の文字がパッと消えちゃうこと。もうひとつは、次の画像が読み込まれるときにも、文字の下敷きになってる黒い半透明の四角が消えないことだもん」

「一つ目の問題は簡単だ。と言うか、当たり前だ。トランジションの前に [ct] タグを使って文字を消しちゃっているんだから」

「あ、そうか。それじゃ [ct] タグはいらないねー」

「いらない場合はざっくり消してもいいけど、とりあえず様子を見たければ、不要なタグの行頭に半角の;を打つといい。そうすればその行はコメント行になって実行されなくなる」

「こうかなー?」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[image storage="test01" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 時々、日常生活の全てのしがらみを振り切って、ふっと旅に出たくなることがある。[l]
 その日のあたしは、ちょうどそんな気持ちだった。[l]
 出勤中、いつものように新宿駅西口に到着したあたしは、気がつくと江ノ島行きの特急券を買い、私鉄の特急に乗っていた。[l]
 どんよりとした薄曇の日だった。[p]
;[ct]\
[image storage="test02" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 江ノ島は、あたしにとって初めての場所ではない。[l]
 まだ十代だった頃、若さに任せて遊び回り、ずいぶん危ない橋を渡るような真似もした、言うならば思い出の地である。[p]

「それでいいだろう。二つ目の問題は、画像が切り替わる前に、文字レイヤーの黒い枠を消して背景を見せたかったんだっけ?」

「そーだもん」

「文字レイヤーのメッセージ用の黒い枠を消したい場合は、ちょっと手順が複雑になるけど、どうする?」

「どーーーーしても消したいもん」

「わかった。それじゃ、説明しよう」

「たのむもん」

「文字レイヤーの黒枠は、文字レイヤーそのものに描かれていると思っていい」

「ふーん」

「それじゃ、その黒い枠を消すためにはどうしたらいいと思う?」

「わかんない」

「文字レイヤー自体を消しちゃえばいいんだよ」

「んでも、そんなことしたら文字が見えなくなっちゃうぢゃんよもー」

「背景を見せたい場合は、文字は見えなくてもいいだろうが。後でちゃんと表示できるように戻せば問題ない」

「そーいえばそーだねー」

「ではどうすればいいか。単純に文字レイヤーを消すには、[layopt] タグを使えばいい」

「んー?」

[layopt] タグには layer、page、visible、その他の属性があるが、この中の visible を false にすると layer で指定されたレイヤーが不可視になる。いつも使っている文字レイヤーは message0 だから、これを消すには下のように書けばいい」

[layopt layer=message0 page=fore visible=false]\

「んでも、そんなことしたらトランジションが効かなくなっちゃうぢゃんよもー! いきなり見えなくしないでよねもー!」

「ごもっとも。そういうわけで、文字レイヤーをトランジションで消すためには、以下のような考え方をする」

「どんな?」

「まず、消したい文字レイヤーのバックグラウンドを不可視にする。それからトランジションを掛けて、不可視のバックグラウンドページを、文字の書かれているフォアグラウンドに転送する。こうして見えないものを呼び出したおかげで、フォアグラウンドの文字はトランジションによって消える」

「めんどくさそーだなー」

「まあ、やってみよう」

「んーと、まずは、消したい文字レイヤーのバックグラウンドを見えなくする……こうかな?」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[image storage="test01" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 時々、日常生活の全てのしがらみを振り切って、ふっと旅に出たくなることがある。[l]
 その日のあたしは、ちょうどそんな気持ちだった。[l]
 出勤中、いつものように新宿駅西口に到着したあたしは、気がつくと江ノ島行きの特急券を買い、私鉄の特急に乗っていた。[l]
 どんよりとした薄曇の日だった。[p]
;[ct]\
[layopt layer=message0 page=back visible=false]\
[image storage="test02" page=back layer=base]\
[trans layer=base time=2000 method=universal rule="trans1" vague=100 children=true]\
[wt]\
 江ノ島は、あたしにとって初めての場所ではない。[l]
 まだ十代だった頃、若さに任せて遊び回り、ずいぶん危ない橋を渡るような真似もした、言うならば思い出の地である。[p]

「うん。それで文字レイヤーのバックグラウンドが見えなくなった。次はそれをトランジションで表に呼び出そう」

「こうかなー?」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[image storage="test01" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 時々、日常生活の全てのしがらみを振り切って、ふっと旅に出たくなることがある。[l]
 その日のあたしは、ちょうどそんな気持ちだった。[l]
 出勤中、いつものように新宿駅西口に到着したあたしは、気がつくと江ノ島行きの特急券を買い、私鉄の特急に乗っていた。[l]
 どんよりとした薄曇の日だった。[p]
;[ct]\
[layopt layer=message0 page=back visible=false]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\

[image storage="test02" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 江ノ島は、あたしにとって初めての場所ではない。[l]
 まだ十代だった頃、若さに任せて遊び回り、ずいぶん危ない橋を渡るような真似もした、言うならば思い出の地である。[p]

「まだ実行するなよ。それだと、文字レイヤーが消えたままで、二ページ目の文章が表示されなくなるからな」

「あ、そーか」

「それじゃ、次は、画像をトランジションで切り替えた後、文字レイヤーを元通りに表示させよう」

「どーやんのかなー?」

「今の状態だと、文字レイヤーのバックグラウンドはどうなっている?」

「空っぽ」

「それをそのままフォアグラウンドに呼び出してどうなる?」

「どーにもなんないねー」

「だから、まずは文字レイヤーのバックグラウンドを見えるようにしなくちゃいけない。そうしないと、今まであった半透明の黒い四角や、その上に書かれる文字が見えないままで、どうにもならん」

「難しそーだなー」

「簡単さ。まず [ct] タグを使って文字レイヤーの属性を全てリセット。これで文字レイヤーのフォアグラウンドに黒い四角は復活する。あとはそれを [backlay] タグでバックグラウンドにコピーするだけさ」

「んでも、そーゆー手順が見えちゃったらまずいぢゃんよもー」

「今は見えないってば。文字レイヤーのトランジションで、バックグラウンドから不可視の属性をフォアグラウンドにコピーしただろ? つまりフォアもバックも不可視状態の、やりたい放題だ」

「それを聞いて安心したもん」

[ct] タグでリセットし、[backlay] タグでバックグラウンドにコピーした文字レイヤーの黒い四角は、 [layopt] タグで可視状態にしてから、消した時と同じように [trans] でフォアグラウンドに読み込んでくればいい」

「なるほどねー」

「それじゃ、タグを書いてごらん」

「どこに書けばいーのかなー?」

「背景画像がトランジションを終えた場所」

「んーと、トランジションの後には [wt] を忘れないよーに、と……」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[image storage="test01" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 時々、日常生活の全てのしがらみを振り切って、ふっと旅に出たくなることがある。[l]
 その日のあたしは、ちょうどそんな気持ちだった。[l]
 出勤中、いつものように新宿駅西口に到着したあたしは、気がつくと江ノ島行きの特急券を買い、私鉄の特急に乗っていた。[l]
 どんよりとした薄曇の日だった。[p]
;[ct]\
[layopt layer=message0 page=back visible=false]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
[image storage="test02" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
[ct]\
[backlay]\
[layopt layer=message0 page=back visible=true]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\

 江ノ島は、あたしにとって初めての場所ではない。[l]
 まだ十代だった頃、若さに任せて遊び回り、ずいぶん危ない橋を渡るような真似もした、言うならば思い出の地である。[p]

「それでいいだろう。それじゃ、実行してごらん」

「よーし!」

(文章と黒い枠がトランジションで一緒に消えて……)

(背景画像がトランジションで入れ替わって……)

(再び文字レイヤーの黒い枠がトランジションで復活!)

「うわーうわーできたー! すごいぢゃんよもー!」

「だろだろ?」

練習日記 2日目 次へ


トップページへ戻る