リッチな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はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。 デモの作り方 冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。 さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ
正式リリースされたFlash Player 11の新機能を試せる20本のデモ | ClockMaker Blog
今月上旬に、待望のFlash Player 11 の正式版がリリース しました。前のFlash Player 10から約3年ぶりのメジャーアップグレードとなります。 新しい機能は公式サイトで紹介されてますが、本ブログではインキュベーター版の頃から作られた実際に新機能を体験できる実験的デモを集めてみました。ご覧になる前にFlash Playerを最新にしておくことをお進めします。(開発者向けデバッグプレイヤーはこちらです) Stage3DによるGPUを活用した2D表現 LLC DigiFie » Starlingのパーティクルをちょっとだけさわってみた Starlingという2D表現のフレームワークでつくられたパーティクルデモ。GPUを使っているため高速。 Introducing Starling – ByteArray.org こちらもStarlingのデモ。4点のデモが掲載されています。
GPUを利用したCoverFlowのサンプル (ソースコード付き) | ClockMaker Blog
iTunesのようなCoverFlowのサンプルを最新版Flash Player 11のGPU機能を使って作ってみました。ソースコードも無料で公開していますので、よければ試してみてくださいませ。 デモ (要Flash Player 11) ソースコード一式 技術解説 Cover Flowはこことかここをはじめ今までいろんなところで無料サンプルが紹介されてますが、ポリゴンの重なり問題や、床の反射表現、奥行きのライティング具合（画面端のスライドほど暗く見える）など、こだわるポイントが結構あって地味に処理負荷が重い表現手法の一つでした。Flash Player 9時代のPapervision3Dでポリゴンの重なり問題が結構シビアだったりして、CoverFlowに限らず苦労された方も多かったのではないでしょうか。今回はAlternativa3Dというフレームワークを使用していますが、ポリゴンの重な
次の世代のFlash Playerは凄いことに！GPUにより数十万ポリゴンが60FPSで動く | ClockMaker Blog
今年のAdobe MAX 2010で発表された新技術の一つにFlash Playerの新しい3D APIがあります。現状のFlashの3Dでは数千のポリゴンしか処理できませんが、次の時代のFlash Playerでは数十万のポリゴンが処理できるようになります。これは従来と比べて 100倍ものパフォーマンスとなります。どのぐらい凄いかというと、次のビデオを見てもらえばわかるはず。 数十万のポリゴンをHDサイズのフルスクリーンにおいて60 FPSで処理される、という鬼のようなパフォーマンス。なおかつ、CPUの使用率が減るというエンドユーザーに優しい恩恵付き。この技術はFlash PlayerからGPUを利用することにより可能になったものです。コードネームは「Molehill」と呼ばれており、2011年中旬のリリース予定で開発が進められています。 Adobe Labs – 3D APIs for
CanvasタグとJavaScriptで3Dのデモを作ってみました | ClockMaker Blog
HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。 デモを見る ソースコード (［右クリック］→［ソースを見る］を選択) こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが（Papervision3D演出サンプルNo.01:羽ばたく蝶々）、両者のデモを比較することでメリット・デメリットが見えてきます。 ＜追記：2013年9月3日＞ Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。 デモを見る ソースコード (TypeScript)
Flash to HTML5 変換サービス「FL2HTML5(仮)」の雑感 | ClockMaker Blog
今日はFlashの界隈では大きなニュースが立て続けにリリースされました。Internet Explore 9 betaとFlash Player 64bit版「Square」はぜひチェックしておきたいところですが、さらに嬉しいニュースがありました。それはCLOQUE.から発表された FlashをHTML5に変換するサービス「FL2HTML5(仮)」です。 公式の発表 [開発] Flash to HTML5 変換サービスを開発成功 | blog.progression.jp ニュース記事 FlashサイトをHTML5形式に変換する「FL2HTML5(仮)」 – GIGAZINE ニュースリリース：CLOQUE.，| gihyo.jp … 技術評論社 Twitterやはてブでもバズっているのですが勘違いする人もでてくるかと思いますので、技術的な視点から雑感をまとめてみました。 Progress
60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
当ブログではFlashの3Dに関する記事を数多く書いていますが、この度それらの記事をこの1ページにまとめてみました。系統別にまとめたので、目的とする解説やサンプルが探しやすくなったのではないかと思います。それぞれの記事でソースファイルをダウンロードできますので、学習の理解にお役立てください。 Flashの3Dエンジンで最もメジャーな「Papervision3D」を中心にブログ記事を書いています。 Papervision3D – チュートリアル クリックで再生できます フレームア クションで覚える PV3D チュートリアル Vol.01 フ レームアクションで覚える PV3D チュートリアル Vol.01 (補足) フ レームアクションで覚える PV3D Vol.02 : Primitiveを理解する フ レームアクションで覚える PV3D Vol.03 : Materialを理解する フ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
