HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較 | ClockMaker Blog
HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。 HTML Demo (Primitive Version) HTML Demo (Primitive Version Ex) HTML Demo (Optimum Version) Flash Demo (Primitive Version) Flash Demo (Optimum Version) 訂正 ※[2013/01/16 23:50追記] 匿名さんやthree.jsの開発者であるMr.doobさんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
Stage3D対応のAway3D 4.0 – 3次元空間におけるパーティクル表現 | ClockMaker Blog
Flash Player 11の新機能Stage3Dに対応した3Dライブラリ「Away3D ver 4.0」の作例紹介。前回紹介したパーティクル表現とフィルター表現を組み合わせて作ってみました。 demo (Require Flash Player 11.1) source (FlashDevelop用ファイル一式) 旧来のFlash Playerとのパフォーマンスの違い こちらの作例、どこかで見たことがあるかもしれませんが、これは1年前にFlash Player 10で実装したPV3D演出サンプルNo.09:Spiral Particlesのデモ(記事の後半のデモ)を移植したものです。前回のFlash Player 10のものと今回のFlash Player 11で作った両者のデモを比較してみると、フレームワークの機能の充実度もありますが、Flash PlayerがGPUに対応したことで
Stage3D対応のAway3D 4.0 – フィルター(ポストエフェクト) | ClockMaker Blog
昨日の記事に続いてFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回はフィルター機能を使ったデモを作成しました。プルダウンでエフェクトの種類を選べるので、試してみてください。 demo (Require Flash Player 11.1) source (with Away3D 4.0 alpha) Away3Dにはフィルタ機能が備わっていて、これはStage3D側で処理するポストエフェクトの部類になります。備わっているフィルター機能は次の通り。 ▼RadialBlurFilter3D (放射状ぼかし) ▼MotionBlurFilter3D (モーションブラー) ※モーションブラーはfumixさんが以前Papervision3Dを使って紹介していたこともありました。 MOTION BLUR DEMO 001 (PV3D) – w
たった数行のコードでクールなパーティクル表現を実現！ Flash Player 11対応の2Dフレームワーク「Starling Framework」 | ClockMaker Blog
たった数行のコードでクールなパーティクル表現を実現！ Flash Player 11対応の2Dフレームワーク「Starling Framework」 Flash Player 11の新機能Stage3Dですが、上条さんのブログでも紹介されているとおりStage3Dは3Dだけでなく2DでもGPUを使って描画できます。2DにおいてはStarling(スターリン)というフレームワークが存在し、これを使うことで2次元表現でもGPUの圧倒的なパフォーマンスを得ることができます。Adobe MAX 2011で受講したセッションのまとめでも紹介しましたが、Starling FrameworkはAdobe側もフィーチャーしており、今後が期待できるフレームワークの一つと考えて間違いなさそうです。ちなみStarlingについては次の記事が参考になります。 Starling （新しい ActionScript
Adobe CS5.5が発表 | ClockMaker Blog
本日（4月11日）AdobeからCreative Suite 5.5ファミリーの製品発表がありました。現在はサイトで新機能や価格が公開されています。発売日は2011年5月20日とのこと(プレスリリースより)。 今回アップグレードしたソフトは Dreamweaver CS5.5 Flash Professional CS5.5 Flash Builder 4.5 Flash Catalyst CS5.5 InDesign CS5.5 After Effects CS5.5 Premiere Pro CS5.5 Device Central CS5.5 Media Encoder CS5.5 で、ファミリーとして同梱されている「Acrobat」も最新版となっているようです。 取り急ぎ、Flash Platform関係で気になったことをまとめてみました。 [Flash CS 5.5] AIR f
FlashのアニメーションをHTML5に変換するツール「Wallaby」をAdobeが公開 | ClockMaker Blog
FlashのアニメーションをHTML5に変換するツールとして、3月8日「Wallaby (ワラビー)」のプレビュー版がAdobe Labsにて公開されました。 Download Wallaby – Adobe Labs 結論から言うとブラウザ互換など懸念点がありますが、思った以上に変換精度が高いです。そして真っ先に感じたのは、WallabyによってHTML5出力が可能になったという点で、アドビが提供しているFlash ProfessionalはHTML5時代が万が一到来してもオーサリングツールとしてのポジションを保ち続けるだろうということです。 速報として「インストール方法と使い方」と「変換したデモ」を紹介してみます。以下詳細です。 インストール方法と使い方 ①まずはAdobe Labsからアプリケーションをダウンロードします。アプリケーションはAdobe AIR製ですので、事前に最新のA
AIR for Android 解説本の出版のお知らせ | ClockMaker Blog
書籍出版と出版記念イベント開催のお知らせです。古堅真彦さんと私の共著で、日本初の AIR for Android 解説本となる「Flash ではじめる Android アプリ開発入門」（技術評論社刊）を 3/18 (金)に出版することになりました。 この本では、AIR for Android の開発で必要となる ActionScript の API を網羅し、基礎から実践的なアプリ開発手法、アプリケーションの最適化、マーケットの公開方法などを解説しています。 Flash Professional と ActionScript 3.0 で解説しているのですが、サンプルはシンプルなスクリプトで的を絞って理解できるように工夫していますので、初級者からでも読み進められる内容になっています。もちろん中・上級者の方にとってもスマートフォン向けの初見の API が多いと思いますので、参考になるはずです。
Molehill ファーストインプレッション | ClockMaker Blog
昨日紹介した「Molehill を搭載した Flash Player Incubator プレビュー版」ですが、Molehillを使うことでどのくらいFlash Playerが高速化されるのか検証してみました。 3D表示のデモ まずはAway3D 4.0 alphaを利用した8*8*8=512個の立方体表示のデモを御覧ください。 ①デモ (要 Flash Player 11) ソース (要Away3D 4.0 Alpha) 以前、従来通り(Molehill未使用、Flash Player 10)の方法で作ったことがあり「Flashの3Dエンジン「Alternativa3D 7.5」」で試したところ7*7*7=343個の立方体表示が限界でした。エンジンの種類が違うので正確に比較できませんが、表示できるポリゴン数が限界を突破したかのような可能性を感じます。以下、気づいたことを挙げてみます。 デ
Molehill を搭載した Flash Player 11 インキュベーターリリースが公開 | ClockMaker Blog
待望の新しい3D API Molehill (モールヒル)を搭載した Flash Player Incubator のプレビュー版がリリースされました。以前、「次の世代のFlash Playerは凄いことに！GPUにより数十万ポリゴンが60FPSで動く」という記事で紹介した次世代の Flash Player です。 Adobe AIR and Adobe Flash Player Incubator – Adobe Labs 今回公開されたものを使うことによって Molehill API を利用した SWF をコンパイルすることができます。既に国内外で紹介記事がでてます(早い！) 馬鹿全 – FlashDevelop + FlashPlayer11(Molehill) + Away3D 4.0 Alpha での遊び方 Changing the web, again. – ByteArray
東京てらこ7の発表資料「AS3でフーリエ変換を使って画像処理をしよう」 | ClockMaker Blog
8/27（土）に行われたFlashの勉強会、東京てら子 7「夏休みの自由研究発表・エフェクト」で「AS3でフーリエ変換を使って画像処理をしよう」という題目で発表しました。 Flashに限定した話でいうとフーリエ変換は音の処理で使われることが多いですが、画像に利用することで面白い結果を得ることができます。今回はフーリエ変換を使った、ローパス/ハイパスフィルタと、光学的なボケの再現について、研究したことをまとめています。 資料ですが例によって Acrobat.com に公開してします。 Acrobat.com で資料を確認する 資料中のFlashデモについてはこちらから試すことができます。 InteractiveDemo.swf RealDemo.swf ※今回のデモのソースコードは、諸事情により公開しません。 ※SWFはデコンパイル対策処理を施しています。 勉強の際に参考にしたサイトを紹介し
Flash Player 10.2 が正式リリース | ClockMaker Blog
Flash Player 10.2 が正式リリースされました。Adobe Flash Player Team Blog に新機能について詳しく紹介されていますが、まとめると次のような内容です。 Stage Video （ハードウェアアクセラレーションによるH.264ビデオのデコード＋表示支援。MacやWindowsで1080p HDビデオを再生してもCPU使用率が1〜15%。今まではFP10.1＆IE9の組み合わせでデコード部分しかハードウェアアクセラレーションされなかった。Stage Videoが試せるサンプルはこちら。） ネイティブマウスカーソル （任意のグラフィックスをネイティブなマウスカーソルとして設定可能になった。これによりスムースなレスポンスが得られるようになる。今まではカスタムカーソルはFlashコンテンツ側の実装で擬似的に再現していたため、マウスの描画が追いつかない場合があ
HTML5出力可能なFlash CS5拡張機能を作ってみた | ClockMaker Blog
2011年1月30日に開催された「東京てら子」というFlashの勉強会で発表した内容ですが、HTML5出力可能な�Flash CS5拡張ツールを作ってみたので紹介します。 まずはこちらのビデオをご覧ください。実際に動作している様子をビデオに録画したものです。 タイトルのとおり、Adobe Flash Professional CS5 から HTML5 コンテンツを書き出すという拡張機能で、サイトのトップページで使うようなシンプルなムービー制作に適したツールとなっています。対象ブラウザですがメジャーなモダンブラウザだけではなく、Internet Explorer 6-8 にも対応しています。 生成手順は次のとおり ( ↑ ) Flashの編集画面 ( ↑ ) 拡張機能を［コマンド］から呼び出す。すると変換が自動的に行われる。 ( ↑ ) 変換されたJavaScriptコードを生成、これをHT
第1回 AIR for Android 勉強会 発表資料「マルチタッチ/ジェスチャー入門」 | ClockMaker Blog
2011 年 2 月 2 日に開催した第1回 AIR for Android 勉強会のフォローアップとして「マルチタッチ/ジェスチャー入門」のスライドとサンプルをシェアします。この発表は AIR for Android の未経験〜初心者の方を対象に、最新の新しいタッチ系のAPIを紹介した内容になっています。 スライド資料 当初、勉強会は20〜30人の規模で募集されていたのですが、あまりに参加希望者が多かったので100人の会場に変更になりました。AIR for Android への期待や盛り上がりを感じざるを得なかったです。 関連記事 第1回 AIR for Android 勉強会 : ATND Togetter – 「「第1回 AIR for Android 勉強会」のつぶやきまとめ」
Stardustを使ってAS3のパーティクル表現を学ぶ Vol.02 | ClockMaker Blog
AS3 のパーティクルエンジンである Stardust (スターダスト)についてチュートリアル記事、第2弾目。 前回の記事では、Stardust は「イニシャライザー」と「アクション」がカスタマイズの鍵ということに触れました。今回の記事ではそれらの役割について説明します。まずは、視覚的にわかりやすいデモを作りましたので、こちらをご覧ください。(右側のパネルで各種パラメーターを調整し、左側で表示されているパーティクルの演出をカスタマイズすることができます) Stardust パラメーターシミュレーション ソースファイル(ZIP, Flex 4プロジェクト) 以下、詳細を説明します。 イニシャライザーとは イニシャライザーとは、パーティクルの初期値を設定するクラスとなります。EmitterクラスのaddInitialize()メソッドを使って、エミッターにイニシャライザーを追加していきます。
開発用Android端末を一番安く手に入れる方法 | ClockMaker Blog
Android 2.2 以上のスマートフォン/タブレットであれば、AIR for Android を使って Android アプリを開発することができます。Flash 開発者であれば今まで培ってきたスキルで挑戦できるのでまたとないチャンスですが、Android の実機を購入する事自体ハードルが高いと思っている方が多いのではないでしょうか。 そこで、Adobe AIR が開発可能なモバイル端末で、結局最終的にいくら費用がかかるのか一覧の表としてまとめてみました。 HTML版はこちら 結論としては、キャリアへの通信費が発生しない海外の SIM フリー端末が最も費用がかからないということになりました。キャリア版としてはソフトバンクの HTC Desire HD が安くなる計算となります。この資料はパケット通信定額のものなので、キャリアのデータ通信を利用せずWiFiで利用すればもっと少ない月額負担
PV3D演出サンプルNo.10: 3D Physics | ClockMaker Blog
先日紹介した ActionScript 3.0 の 3D 物理演算ライブラリ「jiglibflash」を使って、Flash のデモを作成しました。球体と地面の衝突で、リズムに合わせた音を発したり、地面が発光する感じの演出にしています。 デモ (要 Flash Player 10.1 以上) ソースコード (簡易版をwonderflに投稿) この作品のポイントは次のようなところ。ちなみに 3D エンジンには定番の Papervision3D を使用しています。 加速度センサーと 3D 物理演算の重力を同期（Android） 3D 物理シミュレーションの衝突を、動的サウンドライブラリ「SiON」と同期 ライブラリ「Stardust」 によるパーティクル演出 以下、技術的な解説です。 加速度センサー jiglib による 3D 空間の重力を、Flash Player 10.1 からの新機能である
ActionScript 3.0 での 3D 物理演算ライブラリ「jiglibflash」 | ClockMaker Blog
ActionScript 3.0 での 3D 物理演算ライブラリ「jiglibflash」を使ってデモを作ってみました。このデモの 3D エンジンには定番の Papervision3D を利用しています。 [JigLibFlash] Meteor [JigLibFlash] Terrain Physics 以前「JigLibFlash と SpringCamera3Dで3Dゲームっぽい動きを実現」という記事で jiglib を紹介しましたが、このライブラリをブログで紹介するのは実は 2 年ぶり。jiglib はその間も頻繁に更新されており、Flash Player 10 対応による高速化と、API の命名規則が C 言語風のものから ECMA ( ActionScript ) 風のものに変わっていて扱いやすくなっています。当ブログは特にここ数ヶ月時間がとれず更新頻度が落ちているわけですが、
Android Usability Seminar 2010 発表資料「Flash PlatformによるAndroidアプリ開発のこれから」 | ClockMaker Blog
Android Usability Seminar 2010 発表資料「Flash PlatformによるAndroidアプリ開発のこれから」 2010 年 11 月 27 日に開催した Android Usability Seminar 2010 のフォローアップとして「Flash Platform による Android アプリ開発のこれから」のスライドをシェアします。 スライド資料 この発表は今まで Flash を触ったことがない方を対象に、最新の Flash Platform 事情や Android アプリ開発のための技術を紹介した内容になっています。 Flash で Android アプリを開発するためのソフト 資料中でも紹介していますが、Flash で Android アプリを開発するためのソフトは次のいずれかとなります。 Adobe Flash Builder “Burrit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
