ClockMaker Blog

Adobe MAX 2013で受講したセッションのまとめ

2013年05月14日 (火)
セミナーレポート

Adobe MAX 2013の開催から早くも1週間。Adobe MAXではCreative Cloud新製品の発表などの他、技術的なセッションが数多く開催されます。私はセッションに参加するごとにツだるようにしていたのですが、それらをトゥギャってみました。初出の情報や、現地ならではの情報をまとめることができたとおもいます。

ジャンルごとに受講したセッションを分類してますので、気になるセッションがあればチェックしてみてくださいませ。
続きを読む »

Adobe MAX 2013に参加します

2013年05月03日 (金)
セミナーレポート

こんにちは、池田です。来週5/6(月)〜5/8(水)にロサンゼルスで開催されるAdobe MAX 2013に行ってきます（アドバンテージツアーで参加します）。今年で参加は3回目になるのですが、私のスケジュールは次のようになっています。主にFlash/HTML5/CreateJSに関することを中心に受講するセッションを選びました。

HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS

2013年04月08日 (月)
HTML5

にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。

Demo (Require the browser supported HTML5 Canvas)

Demo (Require the browser supported HTML5 Canvas)

ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJSはモーションデザイナーも使いやすいようにビジュアルエディターが用意されています。

以下、使い方を紹介したいと思います。

Toolkit for CreateJS 1.2の新機能紹介

2013年04月05日 (金)
HTML5

Flash ProfessionalからHTML5に書き出す機能であるToolkit for CreateJSの最新版Version 1.2が公開されました。前回のリリースが2012年9月だったので8ヶ月ぶりのバージョンアップとなります。

Flash to HTML5 | Learn more about the CreateJS toolkit

CreateJSデモコンテンツ「日本全国花粉飛散マップ」

2013年03月19日 (火)
HTML5

こちらのブログの更新が久しぶりになりました。「日本全国花粉飛散マップ」というコンテンツをa24さんと作ってみました。

日本全国花粉飛散マップ Pollen Map in Japan | ICS

HTML5 CanvasをFlashのように扱えるフレームワーク「CreateJS」と、型指定などを使って効率良くJavaScript開発ができる「TypeScript」を使って開発しています。

CreateJS関連の技術について会社のブログにいくつか記事を投稿していますので、よければご覧くださいませ。

Flash Stage3D対応のAway3D作例 – 燃えさかる炎の表現

2013年02月07日 (木)
Flash 3D

Flash Player 11のStage3D (GPUを活用できる機能)に対応した3Dライブラリ「Away3D 4.1 alpha」の作例紹介。Away3Dの最新版4.1 alphaのパーティクル機能と、物理演算ライブラリAwayPhysicsを使ってデモを作ってみました。燃えさかる炎の表現です。

Demo (要Flash Player 11.5)
Source (ドキュメントクラス)

このデモは500行ぐらいのコードで表現を作っています。HTML5 & WebGL に比べて Flash & ActionScript は 3D ライブラリが充実しているので、パーティクル機能や3次元の物理演算を比較的容易に実装できるのがいいなと思いました（最近WebGL系のライブラリを触ってみた感想として）。

Edge Animateで作成するHTML5サイトのサンプル

2013年02月04日 (月)
HTML5

随分前に作成したものですが、Edge Animateを使ったウェブサイトサンプルを作ったので紹介します。Edge Animateとは2012年9月にリリースされたアドビのHTML5向けのアニメーション制作ツールです(参考記事)。アニメーションを作るためのタイムラインを持っており、JavaScriptなどを併用してインタラクティブコンテンツを作ることのできます。ユーザーコミュニティーが盛り上がればいいなぁということでソースファイルも配布しておきます。

Flash Stage3D(Starling)とWorkerを利用した流体パーティクルの表現

2013年01月24日 (木)
ActionScript

Flash Player 11.4で追加されたWorkerと、Stage3D（Starling）を利用して、たくさんの矢印が飛び交う流体パーティクルデモをリメイクしてみました。デモは次のURLから試せます。

Demo (require Flash Player 11.4)
Source (ZIP / Flash Builer 4.7 Archive)

以前、本ブログで次の記事で同様のでデモを作ったことがありましたが、その時はFlashのBitmapDataを活用する設計で作成していました。今回のデモでWorkerを使ったメリットと、Stage3Dを使ったメリットを紹介したいと思います。

WebGL対応のライブラリThree.jsを爆速にする方法

2013年01月18日 (金)
雑談

前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。

さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。