ということで、トップページの制作のTIPSを裏話を含めてご紹介したいと思います。

■人間はループしない
若干ネタバレ気味ですが、トップページでは実はこんな映像が仕込んであったりします。

1．静止している状態

2．メニューを選んだときのメニューを指差す動き（X3）

3.エイトちゃんをクリックしようとするとでるオマケ

4．いつまでたっても選ばないと出てくるオマケ

(3,4をまだ見てないかたは見てみてね！)

いろいといじっていると、1から2にいったり3にいったり、2から3にいったり4にいったりします。なので、１から2、1から3などすべての遷移がシームレスに繋がる必要があります。さらに2の動きの途中で1へということも想定されるので、そこもシームレスに繋がるのが理想です。
が……、パッと見た限りでは同じようなカットでも人間を撮影したものなので微妙に違ってしまうものです。
その違いが、2枚を並べて見ているぶんにはそれほど気にならないのですが、連続して2枚を切り替えたときに妙に目だってしまうのです。

人間はきれいにループしてくれないのです。。だって、生きているんだもの。仕方がないです。ぐすん。

■人間の目は動いているものに意識がいく
さてさて、人間はループしないという壁にぶつかり、、あれこれ悩んだすえ、

2枚の微妙な違いが気になる。
　↓
人間の目は変化に敏感。
　↓
人間の目は動いているものに特に注意がいくようになっている。

ということに着目しました。止まっている状態（1）からメニューを選ぶ動き（2）などの場合、完全に同じカットではないものをフェードでつなぐよりも、いさぎよくカットインで繋げたほうが大きな動きに目がいって、それほど違和感なく繋がることが分かりました。ほぼ同じようなカットの場合は、できるだけゆっくりとジワジワとフェードさせることで、人間の同カットも微妙に違うという差異をごまかすことにしました。

以上のスタディから建てた方針がこんなものです。

0．どの遷移からどの遷移にもいけるようにすべての管理はScriptベースで行う。
1．動きが大きいものはカットインでつなぐ
2．静止状態から静止状態は長めのジワジワとしたフェードインで。

トップページは一番最初に作ったものなので、この方針はその後各シーンでも使われていったものでした。

■人が呼吸するように、世界も呼吸する。
最後に映像を使った表現での世界観作りの部分でも1つお話しましょう。

映像を画面内に配置すると、それだけで映像の持つ生々しさが加わってしまいます。ただ立って止まっている人の場合でも呼吸したり、まばたきしたり、生き物の特有の「生々しさ」みたいなものがでてしまいます。
その人の背後にくる世界が完全に静止したスタティックな世界だと、生々しさのギャップがでて違和感がでてきてしまいます。周りの風景を注意深く観察してみると静かな静止したような場所でも、風によって草木がゆらいだり、光の表情が変わったりと、ひっそりと呼吸するように動いています。この普段意識しないレベルの動きでも、その動きが全くないと途端に嘘っぽく作られた世界のように感じてしまうのです。
そこで、メニューがふわふわ動いたり、背景のグラフィックが動かしたりと邪魔にならない程度の細かい動きを追加していっています。こうすることで、人と背後の世界観の間の違和感も解消されますし、何よりもモニタの奥に世界がありその中で生きている人、という部分が強くでてくることになります。懸念していた「実写の生々しさ」というのも「実写の持つリアリティ」になり素材の持つ力が演出的にもポジティブな方向に転換することができるのです。

今回はそのシークエンス2の中の、エイトちゃんがコネコネするオブジェクト制作について紹介したいと思います。

今回取り上げるシーン。

ニシダサンからきたオーダーは、「シンプルな形で立体的な方が良いかなと。難しかったら、簡単に3Dで起こしてみますー。」というもの。タロアウト的には(ははぁん。ニッシーは、3Dぽいのをイメージしてるんだな。でも自分は3Dできないしなぁ。。。うーん、でも、ニッシーに3Dで起こしてもらう時間的余裕もないし、なんとかそれっぽいのを2Dで作ってみよう。そして3Dで簡単に起こしたものよりは楽しげなものにしてみよう。やっぱりネンドをコネコネする感じだよなぁ。。。)そんな感じで、制作はスタートしたのでした。

コネコネする動きは、やはりシェイプが便利です。はじめに円を描画し、タイムラインを延ばしてキーフレームをいくつかうち、円の縁をマウスで適当に押したり引っ張ったりして変形させていきます。こんなときパスとか難しい事を考えず、まさにコネコネする感じで変形ができるのは、やっぱりFlashの良いところだと思います。それらをシェイプトゥイーンさせれば、動きの完成です。

タイムラインにキーフレームを作成。それぞれのキーフレームで円をこねます。

さて、次に3Dぽいイメージ作りです。ここで登場するのが、Flash8新登場のフィルタ機能というわけです。
シェイプトゥイーンのループアニメーションのムービークリップにフィルタをかけていきます。今回はベベルとグローをかけました。

ベベルは、基本的なイメージだと、エッジに厚みがでてボタンのような効果が簡単に得られるものですが、今回は、数値や影の色などを調整して、円が球に見えるようにしてみました。

ベベル初期設定時

ぼかしの大きさや影の色を調整したもの

グローは、光っているイメージを出しますが、今回は外側でなく内側に効果を設定する事で、球に柔らかい質感を与えると同時に、全体となじむようにしてみました。

グロー外側（初期設定時）

グロー内側

Flash8以前では、このようなフィルタ効果を施したグラフィックスは、Flash以外のソフトウエアで作成し、ビットマップ形式にして読み込む方法しかありませんでした。
さらにステキな事に、このフィルタは、設定したムービークリップ内のトゥイーンやシェイプのアニメーション1フレーム毎、きちんとフィルタをかけてくれるのです！
そして、単なるシェイプのアニメーションが、シンプルな形で立体的な、かつ動きもあって楽しげなものになったわけです。(なってますよね...?)

>> サンプルはこちら

こうして、なんとか無事に間に合う事ができました。本当にびっくりするくらい簡単で面白い機能だと思うので、皆さんもぜひ、楽しんで試してみてくださいね。ありがとうございました。

フィルタ機能を利用するにはそれぞれのパーツ（画像など）をムービークリップにして、「プロパティ・パラメータ・フィルタ」ウインドウの「フィルタ」タブをクリックします。そして、「＋」ボタンをクリックし目的の項目を選択します。「－」ボタンで設定したフィルタを削除する事も出来ます。

■ぼかし
「ぼかし」では読込んだ画像やベクトルデーターに「ぼかし」の効果を直接かける事が出来るようになりました。この機能によりオブジェクトがボケながらフェードインしたりという演出が簡単にできるようになりました。
「ぼかし」には水平と垂直があり、水平方向だけ、垂直方向だけ、両方と言った具合にぼかしをかける事が出来ます。さらに「ぼかし」の加減はは数値入力で制御する事が出来ます。

○元画像

○水平方向にだけぼかしをかけた場合

○垂直方向にだけぼかしをかけた場合

○両方にかけた場合

さらに「ぼかし」の画質を「低・中・高」で切り替える事が出来ます。画質が「高」であれば描画の際、CPUにそれだけ不可がかかりますが、画質のクオリティーは高くなります。画質が「低」であればその逆となります。その辺は目的に応じて調整する必用があります。

○元画像

○低

○中

○高

また、「フィルタ」をかけた上に「プロパティ」の効果も加える事が出来るので、「ボカシ」ながら「フェードイン」させたりなどの演出をする事も可能です。

■カラー調整
「カラー調整」では読込んだ画像やベクトルデーターの色調を変化する事が出来ます。この機能により、複雑なモーションを入れ子にしたムービークリップや画像の色調をflash上で変更したり、色調が変化しながらモーションしたりという事が可能になりました。
「カラー調整」では「明度・コントラスト・彩度・色相」をスライダまたは数値入力で調整出来るようになっています。

○元画像

○明度を下げた場合

○コントラストを強くした場合

○彩度を落とした場合

○色相を変化させた場合

この様に１つのグラフィックから様々な表情をもったグラフィックが作れると共に、モーションと組み合わせて複雑な表情を持たせた色調の演出が出来るようになりました。

この様に新しく追加されたフィルタ機能を使う事で、単なるオブジェクトの登場も、より印象的な効果をより簡単に演出する事が出来るのです。是非色々組み合わせたりして、今まで見た事も無いような演出をして頂ければと思います。

>> sample file

>>メイキング

こちらは補足。
カメラですが、今回はソニーのHDカムで撮影しました。
これは、デザインがまだ固まって無かったので、なるだけ解像度の高いところで撮影をしておけば、変更が効くので、保険的な意味で使用しました。プロの方でないと扱いずらかったり、後々の編集がきつかったりしますが、素材のクオリティは保証されますので予算があるときはオススメします。

次は、本題の編集とFLV書き出しのtipsです。

ってことで、自分がやった部分だけになってしまいますが、時系列で説明した方がわかりやすいと思うので、しょっぱなからいきたいと思います。

■オーディション
カワユイ女子をみんなでオーディションしました。
オーディションに必要なものとしては、「仮セリフ」「仮演技」の2点を用意しておいたら良いです。
今回は製品のPIPコンテンツで専門用語も多いので、そこらのセリフが問題なく言えるかをチェックするのと、演技についてもマイムでの演技になるので、それもチェックですね。
オーディション時は、モニターでチェックすること。
肉眼で見てしまうと、どうしても良く見えてしまうので、必ずモニターでチェックしてください。
広重さん起用の経緯は螺澤さんの方に書いてありますね。ちなみにオーディション時は、僕含めみんなデレデレでした（笑）

■絵コンテ作成（演出案）
大筋に関しては、螺澤さんの指示で大体決まってたので、どう見せるのかでの演出案を詰める作業です。

演出案を練るのに、西田さん、高木さん、タロさんと、トータル14時間くらいみっちり打ち合わせしました。アイデアが出まくりで、楽しかっです。
高津組（西田さん、高木さん、トザキさん、坂本さんの共同事務所）におじゃまして、お茶飲みながらガンガン詳細を詰めてった感じでした。
世界観ビジュアル。エフェクトやアニメでの演出。エイトちゃんの動きなど、ほぼ全部をこの時に詰めてます。ホントはここで西田さんが描いたビジュアルラフを見せたいのだけど既に捨ててしまったので、公開できないのが残念…
めちゃちょろろとした手書きで、「このラフがあのビジュアルになるとは…」という面白さがあってので是非見せたかったですが…（笑）

個人的に演出を詰めるのに気を付けた点を以下に書きます。
最初のブレストのときにみんなから出た「不思議の国のアリス」が気にいっていたのでそれを、常に考えてました。あとは、通常のPIPの撮り方は飽きられてるので、カメラアングルには変化を付けるようにとも考えました。
また演出については、西田さん、高木さん、タロさんからも詳細が語られますんで暫しお待ちを！！

で、出来上がった絵コンテはこんな感じです。

ここでは、かいつまんで3Pだけですが、こんな感じで38pくらいあります。

まぁ、この絵コンテができるまでも螺澤さんと、これまたトータル14時間くらいみっちり打ち合わせして、アイデアを出し合ってやっと完成に漕ぎづけたって感じで、かんなり苦労しました。
結構、描き直したしなぁ…あいからず絵が下手くそなのは勘弁…

ちなみに最終絵コンテが完成したのは、撮影日前日…わぁ、コワイわぁ
ホントだったら、もっと細かな演出に関しても絵コンテで上げるべきだったのですが、時間的に無理だったのでそこらへんは頭の中でイメージだけしてた感じです。

「PIPでも絵コンテは必要なの？」とよく言われるのでちょっと答えたいと思います。
ぶっちゃけて言ってしまえば、無くても問題無いです。ただ以下の点をクリアする為に、僕は書いた方がよいと思ってます。

・描くことによって、自分の中でのビジュアルを詰める
僕はそんなに頭の中だけでビジュアルをイメージするのが得意では無いので、描くことによって動画でのビジュアルを完全にイメージしときます。そうすることによって足りない点も見えてきますので、それを追加していくことになります。
手の動きや表情ひとつとっても、演出は必要なのでそこらは詰めておいた方が良いのでそれを考える為にですね。
撮影当日に演出で悩む時間はほとんど無いので、撮れないカットが発生した場合もこの時に考えておきます。
そんな感じで書くことによって色々リスクヘッジもできます。

・撮影スタッフへの共通認識の為
一人で撮影するのであれば問題ないのですが、この規模の撮影は大人数で動くことになります。共通認識が無い状態であれば、全ての指示は自分がしなくてはいけなくなるので、当日かならずテンパリます。
それを避けるのにあった方が良いと思います。

・クライアントへの確認
まぁ、これが仕事としては一番大事な部分なのですが、どんなにスタッフサイドが良いと思っていてもクライアントの了解が無ければボツになります。
ということで上では無くてよいと書きましたが、仕事の場合は絶対に書きましょう
考えてみたら、仕事じゃなくてPIP作る機会なんて無いですもんね（笑）

■テスト撮影
上の演出を詰めている最中に、実際撮れるかどうかの確認の為に一回だけテスト撮影をしています。
複数人のエイトちゃんがでてきて、シームレスな作業環境を説明する部分です。
>> テスト動画

このテストの目的は、「複数人重ねる為の撮影方法」「複数人でのやりとりができるのか」「合成のテスト」「服の色を変更できるのか」のチェックです。チェックした結果ですが、やりとりは撮影が難しいので無しに。服の色も現状では難しいのではという結果になりました。

ちなみに、このテスト撮影は、事務所の壁一面にブルーのカラーボードを張って撮影してます。ラストの方にそれが見れますね。
あと、この動画に関しての見かけのツッコミは無しの方向でお願いします…

トートツですが、かなり長くなりそうなので連載にします。
次回は撮影当日にフューチャーします。

今回は新しく追加されたActionScriptについて説明します。
実は僕も今自分で試しながら勉強中なんで間違っていたりしたらぜひ指摘ください。

MAGAZINE 8ではティザー用と本番用に2つのFlashを作りました。
本番用はFlash Communication Serverを使ったメンバーの生活を垣間見ようというのを作り（僕も含めてみんなあんまりログインしてないけど）、ティザー用ではせっかく新しいStudio 8の紹介コンテンツなんでFlash 8の新しいActionScriptを試そうと思い作りました。

このTipsではそこで使用したActionScriptを紹介します。

Flash 8で新しくなったActionScriptといえばやはりBitmapDataクラスが追加されたことかなと思います。
今まではFlashでビットマップを扱うというと.jpgや.gif、.pngファイルを取り込んでそれをただ配置するだけでした。影をつけるにも画像を歪ませるにもまずはFlash以外の画像加工ソフトを使って、それをFlashに取り込んでから使っていました。
しかし今回のFlash 8からはFlash上で画像にさまざまはエフェクトをかけることができます。
もちろんFlash上にフィルタ操作パネルというのがあってそこでも影をつけたり、イメージをぼかしたりできるのですが、ActionScriptはそれではできない効果も作れます。
ということで今回はビットマップイメージを扱うクラス、BitmapDataクラスの中のひとつpixelDissolveを紹介します。

dissolve（ディゾルブ）とは画面の切り替え技法のひとつで、画面が次の画面に溶け込む感じで消えていく方法です。こんな感じでさわやかなクリタくんも間抜けな銅像みたいな感じになります。

これがActionScriptで操作できるというわけです。
では早速ソースコードを見ていきましょう。

まずはFlash 8から追加された新しいクラスをインポートします。
BitmapDataは今回のpixelDissolveを使用するときのクラスで、PointはそのpixelDissolveの引数のひとつに使用します。

import flash.display.BitmapData;
import flash.geom.Point;

次にBitmapDataクラスをインスタンス化します。
1番目と2番目の引数がこのビットマップの大きさの指定、3番目の引数が透明にするかどうかです。
3番目の引数をtrueにしておかないと画面が真っ黒になるので注意してください。

var mcWidth = kurita._width + 1;
var mcHeight = kurita._height + 1;
var myBitmapData = new BitmapData(mcWidth, mcHeight, true);

上で作成したBitmapDataのインスタンスをMovieClipに割り当てます。
今回はクリタくんの写真をMovieClipの中に配置してそれにBitamapDataを割り当てました。

kurita.attachBitmap(myBitmapData, this.getNextHighestDepth());

最後にpixelDissolveメソッドで写真を表示させていきます。

1番目の引数　使用するBitmapDataソース
2番目の引数　ソースの領域
3番目の引数　ソース矩形の左上のポイント
4番目の引数　ランダムシードの値
5番目の引数　ディゾルブの領域

4番目の引数で戻り値であるnewNumを再び渡しているのは正直あまり意味分かってないです。すみません。
「この関数の戻り値は後続の呼び出しに渡して、終了するまでピクセルディゾルブを続ける必要があります。」とヘルプにあるのでとりあえず戻り値を渡しています。

newNum = myBitmapData.pixelDissolve(myBitmapData, myBitmapData.rectangle, new Point(0, 0), newNum, interval);

上記のコードをMovieClipのピクセル分onEnterFrameで繰り返します。
サンプルではどの大きさのMovieClipでも50回ループすれば写真が現れるように、全体のピクセル数を50で割った分だけ一度にディゾルブが行われるようにしています。

最後にすべてのコードを書いておきます。
kuritaというインスタンス名を他のMovieClipインスタンス名に変えればどんなMovieClipでも動くはずです。
コードをコピペして試してみてください。

// 使用するクラスをインポート
import flash.display.BitmapData;
import flash.geom.Point;

// 写真と同じ大きさのBitmapDataインスタンスを作成し、写真のMovieClipにattachする
var totalDissolved = 0;
var mcWidth = kurita._width + 1;
var mcHeight = kurita._height + 1;
var interval = (mcWidth * mcHeight) / 50;
var totalPixels = (mcWidth) * (mcHeight);
var myBitmapData = new BitmapData(mcWidth, mcHeight, true);
kurita.attachBitmap(myBitmapData, this.getNextHighestDepth());

// MovieClipをクリックするとonEnterFrameで徐々に写真を表示させる
kurita.onRelease = function() {
onEnterFrame = function(){
newNum = myBitmapData.pixelDissolve(myBitmapData, myBitmapData.rectangle, new Point(0, 0), newNum, interval);
if(totalDissolved > totalPixels) {
trace("stop")
delete onEnterFrame;
}
totalDissolved += interval;
}
}

できあがりはこちら。

ということで今回はBitmapDataクラスのほんの一握りの機能pixelDissolveを紹介しました。
このほかにもBitmapDataクラスを使うと今までになかったFlashの表現が可能です。
ただちょっとCGの知識もいるようなので新しく勉強することがたくさんありそうです。ちなみに僕も悪戦苦闘中です。だれか教えてー。

では何か間違いや意見などありましたらどしどしコメントください。

先にクリタ君が書いたように、このMagはMTをベースに3つのログ（issue、blog、tips）から成り立ってます。各々から吐き出される3つのRSSを読み取ってきてトップにて表示させている仕組みです。

Dreamweaver8からXSLTを操れるようになっています。そのXSLTをColdFusionにて読み取ってます。Dreamweaver8で、XSLT、XSLを作るところを簡単に説明します。

=====
Dreamweaver8で、File→新規→XSLT（フラグメント）を選択します。そうすると「XML ソースの指定」というダイアログボックスが出てくるので、「インターネット上のリモートファイルを添付」を選んで、XMLファイルのURLを打ち込みます（例えばhttp://magazine.eight8.jp/blog/index.rdf）。すると、アプリケーションウィンドウのバインディングパネルにXML情報がツリー状になって表示されます。ここからノードをXSLスタイルシートにドラッグしてあげるだけでいいんですねぇ。上部の挿入のバーにはXSLTタブがあり、ノードをリピートさせたり、コメントを書いたり等がボタン一つでできるようになってます。このファイルをXSLでセーブ（例えばtest.xsl）してあげます。

バインディングパネルからrss:itemの方の「dc:date」をXSLのデザインビューにドラッグ&ドロップします。水色でハイライトされた「{rdf:RDF/rss:item/dc:date}」が表示されるはずです。shift+enterで改行して、同じように「rss:title」をドラッグ&ドロップします。「{rdf:RDF/rss:item/rss:title}」と追加されます。F12でブラウザーで確認すると、日付とタイトルが表示されます。（文字化けしている場合は、ブラウザーのエンコードをutf-8に）

上記作業でできたハイライト部分を選択してあげて、右クリックから段落フォーマット→段落を選択し、< p >タグで囲みます。上部XSLTタブからリピート領域ボタンをクリックします。リピート領域のダイアログボックスからリピートさせたい部分「rss:item」を選択します。すると、デザインビューにグレーで囲まれたxsl:for-eachというのが表示されます。F12でプレビューすると、日付とタイトルがリピートされているはずです。

「{rss:title}」を選択し、プロパティウィンドウからリンクボタンをクリックします。ファイル名の選択をデータソースにしてあげ、rss:itemのrss:linkを選択します。プレビューすると、タイトルに記事へのリンクが貼られてますね。

>> sample file
=====

こんな感じで、簡単に操れるようになってるDreamweaver8です。こいつをColdFusionやPHP、asp等に読み込ませてあげてRSSリーダーを作ったのがMagのトップになります。

すごく大雑把に説明しちゃいましたが、「ああ、簡単なのね」って思ってくれるとやる気も起こるもんです。自分のblogを持ってる人は一度触ってみるといいと思いますよ！

まずマガジン部分についてちょっと解説をしたいと思います。
最初の企画段階では色々な案、「雑誌風」にするだとか、「ポータルっぽく」とか、あったのですが結局見やすく、構造的に簡単なものにしようということになりました。

このマガジンについて気づいていない方もいるとおもうのですが、ISSUE,BLOG,TIPSはそれぞれ別のブログとして独立していて、トップページはインデックス的に各記事のタイトルを表示しています。そしてそのインデックスは各ブログのRSSを拾いColdfusionを利用して自動更新されるようになっています。詳しい技術的な部分はこのあとジュンさんが書いてくれると思いますが、この方法はDreamweaver8により結構簡単にできるんです。
つまり個人でRSSリーダーが作れ、そのデザインもCSSで出来るので、ポータルなどのサイトにはかなり使えるのではないかと思います。CBCNETでも使えそうです。

マガジントップのフラッシュの部分は、松村さんが制作したもので、Flash Communication Serverを使ったものです。メンバー8人+ハッチベーがオンラインの時はそのアイコンが出てきて、ユーザーはマウスでそいつを打つことができます。打たれた際に出るメッセージは各メンバーがそれぞれ入力したものが出るようになっています。
それにしてもアイコンがよく似ています。僕なんかそっくり。

といった具合でマガジン部分の簡単な解説でした。
コメントで質問なども入れていただいても大丈夫だと思うのでどうぞ。。

では引き続き宜しくお願いしますー。