CSS Nite in OSAKA, Vol.32に出演しました(補足記事)

cnio32photo.jpg
撮影:岡田陽一さん(ふわっと)

8/18に大阪のリクルートエージェントさんの会議室で開催されたCSS Nite in OSAKAでちょっとデモをしました。

参加された方、どうも長時間お疲れさまでした。
HTML5やWeb標準技術に対するこれからの心づもりの話だったんですが、最後のデモはFlashからAIRアプリという手段もあるとアイデアも含めてデモを行いました。
File APIを使ってドラッグアンドドロップを実現することを前提にデザインを考えるのもいいですね。
位置情報は誤差があるにせよ、案件次第ではスマートフォンサイトから実践できます。
Firefox for Androidの最新版ならAndroid 2.xでも、ブラウザで写真が撮れます。
さらにAndroid 4.xでは標準ブラウザ(Chromeと「ブラウザ」両方)でもう写真が撮れますので数年後にはAndroid対応のWebサイトに撮影ボタンが付くかもしれませんね、場合によりますので全てというわけにはいきませんが。
まとめとして、
HTML5は本当にクロスプラットフォームでクロスブラウザを実現するにはもっと時間がかかるけど、スマートフォンなど幅広く標準ブラウザが実装している機能は使うことも検討したうえでデザイン設計を心がけるがいいですね、という内容がひとつ。
もうひとつ、Flashはもっと強力なレンダリングの可能性が高い開発環境なので、表示にパフォーマンスが求められる3Dゲームなどに活躍の場が広がるのと、ネイティブアプリ開発の期待も持てますので以下のようなことが言えると考えられます。

スマートフォンでの3DレンダリングにはFlash/AIRの選択肢も

penguin.JPG
もしもスマートフォンのブラウザ上で、プロダクトとなる3Dモデルをグリグリ回しながら見てもらうようなビューワーをつくるには最新のブラウザでもさすがに厳しい状況です。
そういった場合はネイティブアプリ化を提案するという手もあります。
参加された方にはスクリーンでしっかり見れなかったと思うので動画にしました。

Air for Android , 3DModel DEMO from Hideki Akiba on Vimeo.

このデモはFlashでつくったもので、3DソフトでモデリングされたペンギンをAway3Dというライブラリで読み込み、レンダリングをしています。
Away3D自体がGPUのパワーを使うStage3Dに対応しているので、非常に高速に描画処理されます。
実際フレームレートはほとんど落ちていません。
(ペンギンはこのサイトよりダウンロードしました。http://www.turbosquid.com/3d-models/rigged-penguin-3d-model/431413
「誰に対し何を提供するか」においては、どの技術を使うかは大して意味がなく、そのときそのときで一番適切な技術を使いましょう。
最近もFlashをDisると感じられた記事をどこかで見ましたが、私はどちらも大切な技術として向き合っていきたいと思います。

女体をwonderflで。

ちょっと前の投稿です。
実はこのデータ、POSERを元にLIGHTWAVEでデフォルメしまして、それをPapervision 3Dフレームワークで読み取りました。

ParticleGirl !?

頂点のデータだけにしたかったので、全部ポリゴンを外しました。
ああっ、、、ってアホな妄想をしながらColladaファイルに書きだしたんですが、中身を3次元座標データだけにまとめてあとは削除、もはやDAEではなくなって、読み込みソースも自前で作る羽目になりました。

ボディ、髪、オッパイ

この3つの3D座標を別々に読み取り、オッパイ部分は先に向かうほど揺れるようにしてみました。
しかしこれ、結構めんどうなのは、オッパイの先の座標から付け根の座標に向かって、Z座標の配列をソートしないといけなくて、まあ、もっと揺らしたい場合、あるパラメータを書き換えてFORKしてください、妄想しながら。。。
正直気持ち悪いくらい、ぶるんぶるん揺れてたのでわざと大人しくしてしまいました。
だめだなあ、ってか、、バカだなあ。

CSS Nite in OSAKAで三島さんが自己紹介に使っていたアレ

CSS Nite in OSAKA, Vol.17でInVogueの三島さんが自己紹介に使っていた、Webカメラを使って、Flash Playerがバーコードのようなものを読み取り、絵を出していた例のアレ。

やってみなきゃ損だと思って、何から始めよう・・・と思いきや、さくーしゃさんの『FLARToolKit』から勉強しようと思い、チャレンジ。

cabe.jpg

おおっ!さすがだ!!すばらしい!!
Papervision3Dを触っていて良かった!

でもコレじゃオリジナリティが・・・そうだ!Colladaで3DCGファイルを作るぞ!
幸いLightWave3Dのバージョンが9.5くらいから、Callada出力できるので、早速モデリング開始、わずか3分でモデリング終了!なぜならスライムだから!!今クリアする手前なんだけど・・・(ドラクエ9)

スライムをLightWave3Dでモデリング

テクスチャも貼っていよいよCollada書き出し!
DAEファイルを一度開いて、<init_from>の中身を相対パスに書き換え、テクスチャとなるJPEGファイルのパスを書き換えて保存。
サンプルファイルのSimpleCube.asにちょっと加えてみます。
DAEクラスを使ってprivate var _slime:DAE;と。

this._slime=new DAE();
this._slime.load(“slime.dae”);
_slime.scale=20;

くらいにした。相変わらず、モデリングでの寸法は適当です、悪いクセです、CG屋さんに怒られそう。

このスライムのオブジェクトを

_slime.rotationY=180;
_slime.rotationZ=-90;

で、向きを変えてあげる。

slime
わずか10分。
さすが、こんな凄いものを作るさくーしゃさん、恐るべし。もう、感服です。

ActionScript3.0 VectorクラスとdrawTrianglesメソッドを使ってみた

こちらでも

Flash Player 10に搭載された新機能、Vectorクラス、そして、Graphicsクラスの新メソッド、drawTriangles()で、Photoshopでいう、「指先ツール」のようなものを作ってみた。

そういえば今年の春先、Adobeのセミナーで、Flash Player10の新機能、というかFlashの新機能を紹介してはったなあ・・・なんか、じゅうたんにメッシュをかけて、あれをブラブラ揺らめかせられるんだよ!って、、、そんなこと言われてもユーザはどう使ったらいいか分からないじゃん。。と思いながらも、なんだか妙に印象的で記憶の片隅に残っていた。
ひょっとしてこのことなのかな?
Adobeのデベロッパーセンターサイトで「三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 1 」というタイトルで野中 文雄さんがとっても分かりやすく説明しておられるので、ついつい手を出してしまった。

3DCGで最近仕事をしていたので、ポリゴンメッシュは三角形が良い!というのは何となく分かる気がするが、座標、uvマッピングなど、CGの開発者の大変さがコレをやることによって身にしみて分かる気がする。

さて、そのサイトの説明だが、三角形を「Z」型を描くように、左上・右上・左下・右下、とそれぞれX,Y座標を打ってやる必要がある。
さらにそれを複数三角形を作る場合は、0,1,2 1,2,3 | 4,5,6 | 5,6,7・・・と隣り合わせの三角ポリゴンをつなぎ合わせてあげなければならない。
そしてuv座標を指定する。

ただ、はじめての僕には連続する三角形がどのようにひも付けするのか・・・
ちょっと困惑しましたので、色々試した結果、
複雑で難しいと思われる方へ、、
Mesherクラスというものを作ってみました。
コンストラクタの第一引数に、JPGなどの画像ファイルのURLを。
第二引数に分割数を(サンプルでは32、なので、横、縦それぞれ32分割メッシュ)それぞれ入れて
flaファイル側でインスタンス化してください。

よく考えたら、クラスファイルにするんだから、スライドバーとラジオボタンもスクリプトで作るべきだった。
良かったらflaファイルごとダウンロードして使ってください。
Mesher.lzh (884kb)
ソース、さらしてみます。

web creators7月号には3ヶ所に記事を書きました

web creators 2009年7月号

エム・ディ・エヌ発行の書籍、「web creators」の7月号には、短期連載記事とトラブルネタ、合わせて3ヶ所(3記事)を書きました。

さらに次号、8月号も執筆しました。こないだやっと校了したんですが、韓国旅行直前の羽田空港から編集部とやり取りするほど結構大忙しでした〜汗
今度は本業に近い!?Photoshopネタを書いています。
また発売されたらブログに書きますね。29日発売予定です。

一つはCSS Niteでもしゃべった内容、「Movable TypeとFlash」の連携記事を92〜93ページに書きました。
なんだか、ActionScriptクラスベースで内容が入門者にはわかりずらいと言われてしまい、セミナーではフレームアクションで書きました。

さらに39ページでは、「イベントターゲットを表示オブジェクトで扱うとエラーになる」というもので、良くあるイベントハンドラで引数にターゲットプロパティをつなげると、DisplayObjectが返って来ないという、経験者にはなんて事無い話ですが、そもそも、Sprite(ターゲット)と書くのとas Spriteとつなげるこの違いってなんなの?っていうマニアック(そうでもないか…)な事を書いてます。

そして59ページでは、「フォルダ内のASクラスがエラーも出さずに実行もしない」を書きました、結局AS3ネタばっかりになっちゃいましたが、要は、ある間違いでエラーも実行もしないので気持ち悪かったので書きました。

CSS Nite in OSAKA, Vol.16 フォローアップ 【秋葉秀樹】

秋葉秀樹

photo by おかだよういち http://s-style-arts.info/

6月9日、ロックの日に魂の叫びが(日頃のうっぷんが)爆発!
アップルストア心斎橋で行われた、CSS Nite in OSAKA, Vol.16にワタクシ、秋葉秀樹が出演してきました。

何と大阪版始まって以来のアップルストア心斎橋での動員数、160人を突破したこのイベント、ついに無料版マンスリー終結を迎えました。多くのご来場、まことにありがとうございました。

今回私のトピックは「脱!やらず嫌い『MovableType×Flashでつくるフォトアルバム』-ノンプログラマ編-」(いつもながら長いタイトルだ・・・)と題しまして、web creators 7月号に寄稿した、MTとFlash連携での記事を、もっと入門者向けに設定してご説明、あと、ActionScriptのライブコーディングを行いました。

スライドはこちらからご覧いただけます。
http://www.akibahideki.com/blog/cssnite/cssniteosaka_16_akiba.pdf
(PDF形式:8.6MB)

今回は最終回という事で、『アップルストアにぶっちゃけ、聞きたい事がある!』と、「オレたちロックだもんね♥」的なノリでストアの上島さんに「みんなも聞きたい質問」をぶつけました。
来場者のみなさん、いかがだったでしょう?

ライブコーディングした内容です、執筆内容はActionScriptクラスファイルでしたが、フレームアクションで今回は書きました。

web creators寄稿記事をCSS Nite in OSAKA, Vol.16でやります

web creators

連載の今回は3記事を寄稿しました。
で、6/9のCSS Nite in OSAKA@アップルストア心斎橋では、私、秋葉秀樹が出演します。
http://osaka.cssnite.jp/

内容は執筆記事をライブコーディングします。

なぜなら、ActionScriptクラスファイルの記事を書いていますが、入門者にはクラスの概念が分かりずらいということで、フレームアクションで書きながら一部をご説明って感じにします。

MTで書き出されたXMLをFLASHで読み込み、サムネイルをロード、表示まで、実際みなさまの前でActionScriptを書いて実行してお見せしながら解説します。

ただ、経験者にはツマラン内容となること間違い無し!です。

実行サンプルはこちらです、
http://works.akibahideki.com/web_creators/mt_flash.html

どうかよろしくお願いします。

SketchUpでPapervision3D

↑↑↑読み込みに結構時間がかかります。

無償版で提供されているGoogle SketchUpを使って試してみました。
直感的に操作が出来て、直線的な3Dオブジェクトなら割と楽に使えそう・・・・と思いきや、完成し、書き出したらコレがちょっと微妙〜(さらに研究中)。

というわけで、今日はSketchUpで書き出したColladaファイルを普通にDAEクラスで使うという流れで進めていきたいです。(Sketchupクラスは調べてからにします。)

なお、このエントリーは4月に行われる勉強会「splaaaash! Vol.3」の予告編・・・だと思っておいて下さい。

まず、SketchUpを起動します。
ピクチャ 1.png

そうするとこんな画面が
ピクチャ 2.png
定規、邪魔ですね、選択してデリートします。
ピクチャ 3.png
そして、四角形を書いてしまいます。

ピクチャ 4.png
簡単に押し出せちゃいました。

ピクチャ 5.png
その中に四角形を書いて、その大きさでくり抜くということも出来ます。

ピクチャ 6.png
門を作ります、これもくり抜いちゃいます。

ピクチャ 7.png
「写真を照会」コマンドで一気にJPG画像を貼付けるシーンです。
これで一旦書き出してみましょう。

↓フラッシュ上。いいんじゃないでしょうか。 ^O^
ピクチャ 9.png

ピクチャ 8.png
さらに直方体を作り・・・・

ピクチャ 10.png
「写真を照会」で大理石を貼付けました。

ピクチャ 11.png

曲線で切り込みを入れることも、押し出すことも出来ます。

ピクチャ 12.png
看板でも作っとくか〜〜

ピクチャ 13.png
さて、書き出しです。
「ファイル」→「書き出し」→「3Dモデル…」でこの画面。一旦kmz形式で書き出しました。

ピクチャ 14.png
そのままだと、圧縮されたままなので、これを普通に解凍します、写真ではStuffIt Expanderへドラッグアンドドロップ!!するとdaeファイルやimagesフォルダの中には、テクスチャがしっかり分けて入れられてます。
ただ、これをswfファイルが読める場所に置かないといけないから、ちょっと、場所移動します。

あと、daeファイルの中身のファイルパスを書き換えてあげないといけないので注意が必要でした。

それでは結果は・・・ドキドキ。
ピクチャ 15.png

あ、あれ?テクスチャが・・・・
続きは次回京都の「splaaaash!! Vol.3」で、みんなで遊びましょうっ。
ご予約はまもなく募集開始しま〜す。
ひとまず、mixiコミュニティー上から募集開始なので、
http://mixi.jp/view_community.pl?id=3997728
まで、コミュ参加をしておいて下さい〜〜。

詳細はそこからお伝えさせていただきますので!、ではお疲れさまでしたっ!!

getDefinitionByName()、定義されていないクラス名(ActionScript)

動的なクラス名で参照する場合に使うgetDefinitionByName。
例えば、こんな感じ。

クラス名が「Class1〜Class30」みたいに連番になっている場合。
ループ処理で参照したくなる。

ところが、そもそもgetDefinitionByNameとは、swf内で定義されていないクラス名を参照しようとすると・・・

『 ReferenceError: Error #1065: 変数 Class1 は定義されていません。
    at global/flash.utils::getDefinitionByName() 』

などと、怒られてしまう。

なんだ?と思いきや、結局リファレンスに書いてあるような

getDefinitionByName(“flash.display.Sprite”) as Class;

というのは、元々「flash.display.Sprite」が存在しているから、走るのです。

つまり、ActionScriptファイルであれば、しっかりとimportしてないもの、定義されてないものに関してはgetDefinitionByNameを使ったところで意味がなく、結局どこかでクラス名を定義しないといけないようです。

で、どう書くか・・・・?

こう書いたら動きました。なんか納得いかない!!

こんな書き方でいけるんだ。

splaaaash!! vol.2 みんなでPapervision!!! inデジハリ大阪校

カーソルキーの ← と → で、目線も変わるよ
まずは画面を1回クリックしてね

2009年2月22日(日)、17〜21時までの予定で行われる『splaaaash!! vol.2』のハンズオン体験講座!
デジタルハリウッド大阪校の全面協力によって、無料ハンズオンセミナーが実現しました。
http://mixi.jp/view_community.pl?id=3997728

せっかくいっぱい集まったから、ノンプログラマー、ノンスクリプター同士みんなで何か一つのモノを作るってのもオモシロいかもなって思って、Papervision3DのCubeクラスを使って、Photoshopなどと組み合わせてフラッシュを作ってみようと思っています。

続きを読む splaaaash!! vol.2 みんなでPapervision!!! inデジハリ大阪校