« 2005年10月 | メイン | 2005年12月 »
2005年11月23日
撮影から制作まで 1:ミノル
ども、タナカミノルです。
見ている人達に、有益な情報が出せるかわかりませんが、よろしくお願いします。
ってことで、自分がやった部分だけになってしまいますが、時系列で説明した方がわかりやすいと思うので、しょっぱなからいきたいと思います。
■オーディション
カワユイ女子をみんなでオーディションしました。
オーディションに必要なものとしては、「仮セリフ」「仮演技」の2点を用意しておいたら良いです。
今回は製品のPIPコンテンツで専門用語も多いので、そこらのセリフが問題なく言えるかをチェックするのと、演技についてもマイムでの演技になるので、それもチェックですね。
オーディション時は、モニターでチェックすること。
肉眼で見てしまうと、どうしても良く見えてしまうので、必ずモニターでチェックしてください。
広重さん起用の経緯は螺澤さんの方に書いてありますね。ちなみにオーディション時は、僕含めみんなデレデレでした（笑）
■絵コンテ作成（演出案）
大筋に関しては、螺澤さんの指示で大体決まってたので、どう見せるのかでの演出案を詰める作業です。
演出案を練るのに、西田さん、高木さん、タロさんと、トータル14時間くらいみっちり打ち合わせしました。アイデアが出まくりで、楽しかっです。
高津組（西田さん、高木さん、トザキさん、坂本さんの共同事務所）におじゃまして、お茶飲みながらガンガン詳細を詰めてった感じでした。
世界観ビジュアル。エフェクトやアニメでの演出。エイトちゃんの動きなど、ほぼ全部をこの時に詰めてます。ホントはここで西田さんが描いたビジュアルラフを見せたいのだけど既に捨ててしまったので、公開できないのが残念…
めちゃちょろろとした手書きで、「このラフがあのビジュアルになるとは…」という面白さがあってので是非見せたかったですが…（笑）
個人的に演出を詰めるのに気を付けた点を以下に書きます。
最初のブレストのときにみんなから出た「不思議の国のアリス」が気にいっていたのでそれを、常に考えてました。あとは、通常のPIPの撮り方は飽きられてるので、カメラアングルには変化を付けるようにとも考えました。
また演出については、西田さん、高木さん、タロさんからも詳細が語られますんで暫しお待ちを！！
で、出来上がった絵コンテはこんな感じです。
ここでは、かいつまんで3Pだけですが、こんな感じで38pくらいあります。
まぁ、この絵コンテができるまでも螺澤さんと、これまたトータル14時間くらいみっちり打ち合わせして、アイデアを出し合ってやっと完成に漕ぎづけたって感じで、かんなり苦労しました。
結構、描き直したしなぁ…あいからず絵が下手くそなのは勘弁…
ちなみに最終絵コンテが完成したのは、撮影日前日…わぁ、コワイわぁ
ホントだったら、もっと細かな演出に関しても絵コンテで上げるべきだったのですが、時間的に無理だったのでそこらへんは頭の中でイメージだけしてた感じです。
「PIPでも絵コンテは必要なの？」とよく言われるのでちょっと答えたいと思います。
ぶっちゃけて言ってしまえば、無くても問題無いです。ただ以下の点をクリアする為に、僕は書いた方がよいと思ってます。
・描くことによって、自分の中でのビジュアルを詰める
僕はそんなに頭の中だけでビジュアルをイメージするのが得意では無いので、描くことによって動画でのビジュアルを完全にイメージしときます。そうすることによって足りない点も見えてきますので、それを追加していくことになります。
手の動きや表情ひとつとっても、演出は必要なのでそこらは詰めておいた方が良いのでそれを考える為にですね。
撮影当日に演出で悩む時間はほとんど無いので、撮れないカットが発生した場合もこの時に考えておきます。
そんな感じで書くことによって色々リスクヘッジもできます。
・撮影スタッフへの共通認識の為
一人で撮影するのであれば問題ないのですが、この規模の撮影は大人数で動くことになります。共通認識が無い状態であれば、全ての指示は自分がしなくてはいけなくなるので、当日かならずテンパリます。
それを避けるのにあった方が良いと思います。
・クライアントへの確認
まぁ、これが仕事としては一番大事な部分なのですが、どんなにスタッフサイドが良いと思っていてもクライアントの了解が無ければボツになります。
ということで上では無くてよいと書きましたが、仕事の場合は絶対に書きましょう
考えてみたら、仕事じゃなくてPIP作る機会なんて無いですもんね（笑）
■テスト撮影
上の演出を詰めている最中に、実際撮れるかどうかの確認の為に一回だけテスト撮影をしています。
複数人のエイトちゃんがでてきて、シームレスな作業環境を説明する部分です。
>> テスト動画
このテストの目的は、「複数人重ねる為の撮影方法」「複数人でのやりとりができるのか」「合成のテスト」「服の色を変更できるのか」のチェックです。チェックした結果ですが、やりとりは撮影が難しいので無しに。服の色も現状では難しいのではという結果になりました。
ちなみに、このテスト撮影は、事務所の壁一面にブルーのカラーボードを張って撮影してます。ラストの方にそれが見れますね。
あと、この動画に関しての見かけのツッコミは無しの方向でお願いします…
トートツですが、かなり長くなりそうなので連載にします。
次回は撮影当日にフューチャーします。
2005年11月10日
Mag8Flash：シン
BitmapDataクラスのpixelDissolveの使用
今回は新しく追加された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の知識もいるようなので新しく勉強することがたくさんありそうです。ちなみに僕も悪戦苦闘中です。だれか教えてー。
では何か間違いや意見などありましたらどしどしコメントください。
2005年11月04日
Magazine8トップ：ジュン
Tipsということで、このMagのトップの構造をざっくりですが解説します。
先にクリタ君が書いたように、この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を持ってる人は一度触ってみるといいと思いますよ！