12年度 新卒採用コンテンツを制作いたしました!

今年のテーマは"ありがとう"。
弊社サービスTHANKSをはじめとした、"ありがとう"の文化をテーマとしたサイトとなっています。
3人×9列で=27人。(さんきゅーです。さんきゅー。)27人の社員が自分以外の26人へ向けた702個の"ありがとう"のメッセージを見ることができます。
 
弊社の"ありがとう"、ぜひのぞいてみてください。
 
 

CREDIT

creative direction / planning:柳澤 大輔
project management /direction : 瀧澤 紗由梨
art direction / design :西 慶子
interaction design / programing:村井 孝至
system / programing:渡邊 匡志
copywriting / 松原佳代
sound design / 瀬尾浩二郎
whistle / 牛木匡憲、藤川綱司
 
 

テクニカルトピックス

RSLとexternal-library-pathを利用したロードシーケンス

今年の新卒サイトは、見た目よりもとっても容量食いのコンテンツ。
大量の画像・埋め込みフォント・音素材と、様々な素材が山盛りです。
 
マウスに追従して、顔が振り向くボックスの中身には、
上下左右、、と9方向分の、顔向け&指差し、正面、フリーポーズ、フリップ持ちと、各バリエーション2コマずつ。合計57枚の画像を1人として、全部で1500枚を超える画像を読み込んでいます。
 
その他、メッセージ分のフォント埋め込み、弊社の口笛奏者と、サウンドデザイナーが頑張ったBGMなど、削るのが困難な内容。クオリティも落としたくは無い。。ということでRSL(RuntimeSharedLibrary)を使ったswf分割術の出番です。
 
RSLとは、名前が英語になっただけで、実は以前からある"共有ライブラリ"のことなのですが、
今回の方法はmxmlcのコンパイラオプション、external-library-pathを使うのがミソ。
 
今まではgetDefinitionでなんとなく作法的に取り出していましたが、このの方法だと、巨大な一塊のswfをつくるような感覚で手軽にswf分割をすることができます。
この方法で、総計13MB強の巨大なswfをBGM/Op/コンテンツ本体/フォント/パネルといった単位で数100kbから数Mb単位の複数のswfに分割。それらを必要なタイミングで分割読み込みをしています。
 
僕の場合はFDTでやってますが、mxmlcのオプションなので、各環境で同じことが出来るはず。
くわしくは、taroの記事を。とても良い方法です。
 

XFLの効果的な使用方法

もうひとつ欠かせなかった制作術が新しくできたXFL。
 
1500枚以上ある画像のロード方法をどうするか。ここで少し悩みました。
外部読み込みにすると、、サーバーへのアクセスも大量+読み込む量も大量=時間がかかる! と悪いことだらけ。
 
すぐに、1つのバイナリにしてしまおう="swfに埋め込み" というところまでは決まったものの、デザイナも最後までいじり続けるこの画像、どうしたものか。
そこで使ったのがXFLでした。
FLAファイルを保存する時にCS5 非圧縮ドキュメント(*.xfl)を選択します。
 
すると、ライブラリ以下の素材データが、比較的生で出てきますね。(だめなのはMxxxxx.datとなって別の場所にいってしまいました。。。。)
さらに一緒に出てくるDOMDocument.xmlにノードの追加や、編集を加えることで、テキストエディタで、MovieClipの構造を書き換えたり、まったく新しい素材をエディタで作ることができてしまいます。
 
ざっくりいってしまえば、swfmillみたいな感触です。
 
弊社でも事例はあるのですが、今回は純正のxflを信じて導入。この機能を使って、タイムラインで作られた1人分の画像管理MovieClipを27個に増やし、写真パスを一斉書き換え、Libraryを直接svnに関連付け、更新するというフローを確立。
XFLにはややこしい仕様や構造があるようで、半ば構造解析しかけながら、なんとか使いきり、見事1500枚の画像にほとんど触れずに血と汗の結晶のような画像補正済み画像の波を自動で乗り切りました。
 
ということで、テクニカルトピックがやたらと長くなりましたが、
 
 

ステキな新卒のみなさんに会えるのを楽しみにしてます!

 
この新卒サイトを見て、ほんのりした気持ちでKAYACに入ってきてくれる、ステキな新卒のみなさんに会えるのを楽しみにしています。
 
このブログもFlashブログになっていますが、中の人々は、HTML5だとか、JSだとかas3だとか、oepnFrameworksだとか、Androidだとか、iOSだとか、特に括りは無くなってきていて、実はなんでもありの部署だったりします。そのうち名前も変わるんじゃないかな。 
 
ということで、是非カヤックの"ありがとう"を体験してみてください!


2012年度 新卒採用コンテンツ『3x9=さんきゅう 27人のありがとう』 

 

HTML5飯