Report
2006 >> [11.11] [08.26] [05.13] [02.25] 
2005 >> [11.26] [08.27] [05.14] [02.05]
2004 >> [11.13] [08.07] [05.15] [02.07]
2003 >> [11.08] [08.24] [05.31] [02.01]
2002 >> [12.08] [09.07]

2004.05.15 ページ1
 demo1「小ネタでマターリ、Flashを楽しもう」 講師:サブリン氏
 demo2「ActionScriptどこに書く? - MXスタイルからAS2.0まで -」 講師:野中 文雄氏
 企業demo1「the TAB Pro」 株式会社ボーンデジタル
 企業demo2「Swift 3D Xpress for Flash MX 2004」 株式会社ディ・ストーム
司会:A.e.Suck、サブリン

ページ1 ページ2 ページ3 ページ4

5月15日、入梅前のすがすがしい日。
今回の参加者は107人でした。

 

小ネタでマターリ、Flashを楽しもう


講師:サブリン氏

F-siteの司会といえば、サブリンさん。軽妙なMCぶりで難しい内容を分かりやすく、楽しく進行してくれます。

今回はサブリンさんの最近の仕事から、プロとしての気配りが行き届いた素晴らしい事例を紹介していただきました。

シンプルで効果的な演出


「スキップボタンがついたオープニングムービー」
 今まで多く見られたパターンですが、トップページに戻るたびに繰り返されるオープニングムービーは見飽きた感がありました。

 サブリンさんは、1〜2秒の端的なオープニングで、アニメーション自体は画面のどこかクリックで飛ばされる上、トップに戻ってもイントロの部分は自動的にスキップされるなど、操作感をアップさせるための工夫をしているそうです。

事例:キングダム ハーツ チェイン オブ メモリーズ
http://www.square-enix.co.jp/games/gba/khcom/
©Disney Enterprises, Inc.
Developed by SQUARE ENIX / Jupiter
©Touchstone Pictures

しかもこれらの工夫はいたってシンプル。アクションスクリプトが苦手な方も工夫次第で楽しい演出が出来そうです。

 以上の事例でサブリンさんが苦労した点の一つは、カードイラストの大きさが共通ではなく、微妙に形が違ったことでした。一つのシンボルを複数コピーして効率よくアニメーションをさせた後にイラストが表示されると、微妙な形の違いがわかってしまいます。

そこでサブリンさんが考えたのが、イラストカードに変わる前に白いフレームを入れて、一瞬ホワイトアウトさせることでした。これで形の違いから注意がそれて、見栄えの良い演出になりました。

モーションブラー


 最初に登場するキャラは、横にスゥっと移動して止まるのですが、ここではモーションブラーが掛かっています。単にキャラクターの画像にPhotoshopの「ぼかし(移動)」を掛けただけではなく、「風」などで加工して、横に流れたように見える画像を間に挟んでいるのです。

そして、主線を効果でつぶし、ベタのみにすることにより、動きにスピード感を与えています。これはアニメの「オバケ」と呼ばれる手法をヒントにしているそうです。
※「オバケ」は、A.e.Suck氏のサイト
http://www.ae-suck.com/amazing/)で知ることができます。
「フレーム・イン」事例

サブリンさんのお勧めはイージングを併用すること。イージングなしだと、動きが太極拳のように単調になってしまいます。イーズイン、イーズアウトを使うことでメリハリのある動きになるのです。

「モーションブラー」の手法はバトル紹介ページ中のバトルのナンバーを表すカードのアニメーションにも用いられています。

事例:キングダム ハーツ チェイン オブ メモリーズ
http://www.square-enix.co.jp/games/gba/khcom/
©Disney Enterprises, Inc.
Developed by SQUARE ENIX / Jupiter
©Touchstone Pictures

微妙な動きにもプロのこだわり


 ナビゲーションボタンが現れる動きにもプロのこだわりが現れています。

 パラパラパラとボタンが上から登場する動きは、画面で動作を確認しつつ、タイムラインで各ボタンごとにフレームを削って微調整をしていくそうです。

デバッグでクオリティアップ


 一通り完成したらナビゲーションの部分だけではなく、色んな所をクリックして、操作感やエラーのテストをするそうです。

 

サブリンさんによれば、自分がかゆいなと思えば、クライアントやユーザーもかゆいと感じる。だから自分がかゆいところは全て直すのがクライアントと良い関係を保つコツとのことです。

最後まで丁寧な仕事をするプロの様子が伺えます。

効果音でより魅力的に


 
サブリンさんの手がけるサイトは音が効果的に使われていて、サイトをより魅力的に見せています。ネットや市販の素材集などから使えそうな音源を見つけ、自分のライブラリとしてストックしておくと無駄な検索時間を省くことができて良いそうです。

 でも音源を探すのは意外と時間がかかるもの…。
サブリンさんは効果音も自分で作成してしまうそうです。ご興味のある方は一度自分で作ってみてはいかがでしょうか。
以下サブリンさんお勧めの音編集ソフトをご紹介します。

サブリンさん談:
「音を加工する為のソフト(波形エディタ)の場合、Mac OS Xなら、未だにSoundEdit 16をClassic起動するなど、いまいち不満なところがあったりします。でも、他があまりなく、仕方なくPeakを使うことが多いです。
Expressでもいいんですが、細かいコダワリが必要ならフルバージョンがイイ。
Mac OS 9以前なら、SoundEdit 16がいいけど、今更買うんか?とも思うんで微妙ですねえ。Mac OS Xにした方が良いとそもそも思うし。もうすぐ10.4になっちゃうよ(笑)

  ソフトシンセは、ReasonとCubase SXを使ってます。こういうソフトとしては安価だし、色々自由度が高いし、音質がイイ。Reasonの使用感は大好きだけど、ちょっと音質悪いんで、最終的にはCubaseでマスタリングしてやるとスゲーイイ音になります。最終的に圧縮掛けるとしても、元がイイ音の方が圧縮されても良いのよ。

  Winならオールラウンドとして、Adobe Audition結構イイ感じですよ。ループも一杯付いてくるし。Macで言うと、SoundtrackやGarageBandみたいな感じのソフトで アニメや映像とのリンクもイイ感じ」

FlashらしくないFlashを…


サブリンさんが最近はまっているのがFlashらしくない演出。
ビットマップやビデオを使ったデザインの事例を紹介してくれました。

事例:FINAL FANTASY VII ADVENT CHILDREN
http://www.square-enix.co.jp/dvd/ff7ac/
©SQUARE ENIX CO., LTD. All Rights Reserved.
CHARACTER DESIGN : TETSUYA NOMURA

2004年発売予定のFFVII続編DVD映像作品のプロモーションサイトです。
DVDのインターフェースを意識したナビゲーションデザインが秀逸な、クオリティの高いサイト。

ビットマップで、ぼかしや光の効果をうまく使って隅々まで美しい仕上がりです。
ベクターデータに比べてどうしても重くなりがちですが、ファン待望のDVDということもありクオリティを重視したそうです。

After Effectsで一味違った効果を…


キャラ紹介のムービーでは、After Effectsを使って一味違った演出をしています。

After Effectsで必要なムービーを、ひとつのムービーとしてレンダリングし、Flash MX 2004に取り込む際にムービーのクリッピング機能を使って、必要な部分だけを読み込むと手間が省けて楽とのこと。


またAfter Effectsはムービーのアルファ処理が連番画像ファイルとして書き出せるそうです。それをFlashに読み込むとイメージシーケンスとして読み込まれるので、時間もかからず賢いやりかたですね。

おもしろ作品ご紹介

 最後に「鼻ピコキャッチ」と「その男、ニャルゲ」というおもしろ作品の紹介でサブリンさんのセミナーは終了しました。

 「鼻ピコキャッチ」は鼻で飛ばしたハナ●ソ(笑)を空中でキャッチするゲーム、「その男、ニャルゲ」は一発必中のシビアな要人暗殺ゲーム。どちらもプッと笑っちゃうようなシュールなセンスの光る作品で思わず笑いが!

「鼻ピコキャッチ」
(PlayStation 2用ゲーム「ROOMMANIA #203」サイト用ミニゲーム)
http://www.roommania203.com/ura/maniac_games/hanapiko.html
Original Game ©SEGA CORPORATION
©WAVEMASTER/SEGA CORPORATION, 2003

「その男、ニャルゲ」(個人作品)
http://www.saburi.com/temp/n2.html

 

 以上、サブリンさんによる「小ネタでマターリ、Flashを楽しもう」でした!

 

Top

ページ1 ページ2 ページ3 ページ4

© 2001-2004 F-site All Rights Reserved.