gotoand…

行ってきました。寺子屋（仮）あらため「TERACO」の４回目

————- アジェンダ ———————————–

タイトル：寺子屋（仮）第4回「さくーしゃのFlashライヴコーディング」
日　時：2007年6月17日（日）13:00～ （途中参加OK）
場　所：株式会社カラーズ Osaka office （→地図）
会　費：無料
定　員：20名（早い者勝ち）
持ち物：ノートPC（あれば）、おやつ（500円まで）
晩ご飯：近くでみんなで食べよう。

で、詳細・経緯とかはmixiのイベント告知用掲示板とか追ってもらうとして
今日のライブコーディングのお題目は「寺子屋用Blogパーツ」を作ろう！というもの。

そしてその様子をhirossyさん制作のライブ配信システムで配信してしまおうというもの。

でそのライブ配信に対して、あちら側とこちら側で「つっこみ」を入れようという企画。

かなり長くなりましたが。。。とりあえず列記してみる。

あまりに読みにくいのでちょこちょこ修正掛けていきます。＾＾；

いつもきちんとまとめてくださる「にとよんさん：てっく煮」

今回惜しげもなくオープンライブコーディングを行ってくれた「さくーしゃのブログ」

そして「ゆるい」といいながらサーバーサイドの技術で「ライブ配信システム」を制作した「hirossyさん：hirossy javaとFlex2と。」

をご覧頂ければと思います。^^;

————- ライブ配信 ———————————–

ライブ配信の技術的な情報に関しては、

［hirrosyさん］
http://d.hatena.ne.jp/hirossy1977/20070616
http://d.hatena.ne.jp/hirossy1977/20070617
http://d.hatena.ne.jp/hirossy1977/20070618

［さくーしゃさん］
http://saqoosha.net/2007/06/15/588/

をご覧ください。w

つっこみんぐはlingrのAPIを利用したようですが、昨日のつっこみんぐのログは

http://www.lingr.com/room/osaka-teraco-live/archives/2007/06/17

からご覧いただけます。

————- Saqooshaさんの環境は ————————

元素材の作成はPhotoshopCS2
Flash（オーサー）はCS3英語版
ActionScriptのエディターはEclipse+FDT

でOSX上で。

という感じ。

————- 環境の準備 ————————

今回のプロジェクトのflaのファイル名とかフォルダ構成とか
使用するクラスの置き方とか。

【フォルダ構成】
┬─fla　←作っているflaファイルを
│　│
│　└parts←てら子ロゴのアニメ用素材PNGファイルで
│
├─classes←今回利用するクラスをまとめる用
│
├─out←パブリッシュしたswfはここに。必要なjs、XMLもここ。でUPする。
│
└─psd←てら子ロゴPSDファイル

【使用しているクラス】

CASA Framework
Fuse kit
Trance
でsaqooshaさん自作クラス

それぞれパッケージに入れて、classesフォルダへ入れる。

会場でちらっと話題に上りましたが、

フレームワークの類はFlashIDEに設定する方法もありますが、
Saqooshaさんは今回のように案件ごとのフォルダにclassをまとめておくと。
理由は、「フレームワークのバージョンアップに振り回されないようにするため。そのとき使ったフレームワーク一式は作成したflaファイルと一緒に管理しておく。」とのこと。

【パブリッシュ設定】
〔CTRL〕+〔SHIFT〕+〔F12〕で表示される〔パブリッシュ設定〕ダイアログボックスの〔形状タブ〕がありますが、入力フォームにパスを入力することで、パブリッシュ後のswfやHTMLの出力先フォルダが選べますというお話。

で、後は「パブリッシュHTMLテンプレート」とかのお話。
Saqooshaさんは「swfObject」用のテンプレートHTMLを作成して

に保存しておくとパブリッシュ時に出力されるテンプレートとして使用されますよ。というお話。
個人的にはテンプレート変数とか使えるので場合によっては便利だと思う。

【HTML テンプレート変数の使用】
file://C:\Documents and Settings\［ユーザー名］\Application Data\Macromedia\Flash 8\ja\Configuration\HelpPanel\Help\UsingFlash\00000824.html

————- 画像素材の切り出し ————————

saqooshaさんはPhotoshopCS2で作成したPSDファイルレイヤーでアニメーション遷移で使う画像をおいていた。
そいつらを必要な箇所ごとに、PNGで保存して、Flashのパーツとして利用していました。

結構個人的にはPSDファイルをそのままFlashに読み込んでいた。（要QuickTime）
アルファチャンネル保持できるから。PNGもアルファ持ってけるけど。。。なんか慣習でPSDそのまま行っていました。

また、Illustratorで作成したものを、［ファイル］メニュー→［書き出し］→［swf書き出し］でAIからswfへ一気に持って行って素材として使うことがありました。ただ、AIでswfにすると、妙にポイント数が多く重たいベジェデータになる時があるので注意。
社内のイラストレーターに御願いするときなどは直接Flashで書かせることで、「ベジェのポイント数の問題」をクリアするようにしたりしてました。

————- アニメーション用MC作成 ————————

ga4さん作成のteracoのロゴを動かすパート。

筆書きの「介」を手書きアニメで出す方法。
Saqooshaさん曰く「A.e.Suckさんが昔やっていたの見て」とのことで
メインの絵「介」はそのままでマスクの方をアニメーションさせて「筆書きアニメ」を実現する。
（にとよんさんとこで絵付きで解説。）

で、DirectorとかFlashでアニメやっている人には珍しくない手法なんだけど、
プログラマ寄りの方々にとっては結構新鮮だったみたい。＾＾

アニメーションの手法として一般的らしいけど、「０からスタートして最後のキメの絵を出すアニメ」の場合
「最初にキメの絵を置いといて少しづつ消して（マスクして）いき０にする。でフレームを反転して本来のアニメに」ということを常套手段だったりします。

で、Flashのタイムラインを使ったアニメは終了。

blogpartsでいうと、「介」が手書きっぽく現れるアニメーションまでがタイムラインでオーサリングした

それ以降のアニメーションはスクリプトによるもの。
まさに「ライブ・コーディング」！

「もじゃもじゃ」とか「アポストロフィ？」みたいなものはFuse Kitでアニメーションをつけておりました。

フレームワークなかなか使う機会ないのですが、実際に使っているところを見て、さくーしゃさんの言う「Fuseの勘所・使い所」が見えたのは収穫。
ぱっと見、冗長な気がするけど、慣れればとても直感的に使えると思う。

————- メンバーリスト＆ １６枡メンバーリスト作成————————

でここで、メンバーリストの

・写真が表示される「アニメーション」回りはFuse kitで、
・メンバーリストを構成するXMLの取り込みなどはCASA Frameworkで、

行う。このへんは使用しているフレームワークの「得意分野」が明確になっていることもあるだろうけど、

「Fuse」→アニメ
「CASA」→縁の下の力持ち

って表現が以前teraさんが言っていた

『Flashでの基本的な「足回り」を簡便化してくれる印象』

という言葉に改めてなるほどと思ったりする。

tkさんから「XMLをノードとかパースして配列に持ってから処理を行うか？XMLオブジェクトに放り込んでしまうか？どっちが速い？」と質問あったと思うけど、
Flashやっているとそんな細かいこと考えてない。w

アセンブラとかCで作った実装系とかだと、ハード的な制約がありすぎだからそこまでケアする必要があるだろうけど。。。

普通にFlashやる場合はそこまで考えないかな。
「速い」というのは「完成するまでの道のりが最速か否か？」っていうところがポイントでかいかな？と思う。

なんでとりあえず「やってみる。w」で、動かなければ「根本解決」も必要ですが「力技」で乗り切るスキルと度胸も必要。w

これは「Flasher」ならではの発想かもしれない。

—————-

にとよんさんも言っているが、確かにさくーしゃさんが「ハマった」ということに驚いた。

いや普通に考えれば当然「ハマる」ことだってありえるだろうけど、やっぱりどっかで「この人はもの凄くスマートにコーディングしている！」って思い込んでいたんだと思います。

で、実際コーディングを見させてもらって感じたことは彼が「凄い！」と思えるところはもっともっと根本的なところなんだと思う。当たり前っちゃぁ当たり前だけど。^^;

そういう「根本的なところ」ってどうしてんのかなってとても興味があるわけです。

そのへんさくーしゃさんのことだから「どうして？」って聞いたら「センス！！」って一言で終わらされそうだけど＾＾；
きちんとプログラムを理解していることとか、英語読めるとか、いろんなことにきちんと興味を持ち、深く好きになるとか。。。 そういうのが大切だなぁと思った。

自分の下にいろいろ人が来てくれることも増えましたが。情報がたくさんあるなかでいかに深いところに目を向けてもらうかってすっげー課題だなぁと思う。

そして自分自身もがんばろうと思うわけで。。。
実務はFlashからは少し距離置くことになるけど、その分、自身のモチベーションはきちんとFlashにも注いでいきたいと思うわけです。

本当にさくーしゃさん貴重な時間と機会をありがとうございます。

hirossyさん今回は「縁の下の力持ち」な存在でしたがライブ配信システムお疲れ様でした。

Idoさんいつも場所の提供などありがとうございます。

参加された皆様本当にお疲れ様でした。

またの機会よろしくです。(o^ｰ’)b