HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
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さんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
「Stage3Dプログラミング」という解説書を執筆しました | ClockMaker Blog
来月上旬発売の「Stage3Dプログラミング〜GPUを使ったFlash 3Dコンテンツ制作〜」というStage3D の書籍を私と酒井さんと高輪さんの3人で執筆しました。Stage3DとはGPUを活用することで高いグラフィックのパフォーマンスが得られるFlashの最新機能です。 ページ数：416ページ 出版社： ワークスコーポレーション 発売日： 2012/6/4 (amazon) 執筆： 池田泰延 (ClockMaker), 酒井直一 (丸林商店), 高輪知明 (nutsu) この書籍は、Staeg3Dの入門からAS3ライブラリの実用的機能までを網羅し、最新情報をがっつりとまとめた一冊となっています。AS3ライブラリは将来性・生産性の点で有望なAway3DとAlternativa3Dの両方を取り上げ、またネイティブなところから理解できるようにもStage3D APIやAGALの解説の章も用
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト | ClockMaker Blog
JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
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に対応したことで
日本語版 Flash Professional CS5 & CS5.5 に Flash Player 11 設定を追加する MXP | ClockMaker Blog
日本語版 Flash Professional CS5 & CS5.5 に Flash Player 11 設定を追加する MXP Flash Professional CS5 & CS5.5 に Flash Player 11 の設定を追加する機能拡張の日本語版ですが、入手しましたので次のURLにアップしました。 CS 5.5 MXP 日本語版 – FP11Publish_cs55_jp.mxp CS 5 MXP 日本語版 – FP11Publish_cs5_JP.mxp ※許可をいただきましたので、私のサーバーにMXPを置いています。 この拡張機能をインストールするとFlash Pro CS5/CS5.5で以下が適用されます。 パブリッシュ設定に Flash Player 11 が追加される Stage3D のテスト用に “Flash WMODE direct” という名前の HTML
正式リリースされた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というフレームワークを使用していますが、ポリゴンの重な
昔の3DデモをFlash Player 11(Stage3D)へ移植してみた 第2弾 | ClockMaker Blog
以前作った3Dデモを最新版Flash Player 11のStage3Dに移植するシリーズ第二弾。前回に続いて、今回は次の4つのデモを移植してみました。全部ソース付きです。 タイムストレッチデモ demo (Require Flash Player 11) source 「BetweenAS3のトゥイーン制御デモを2本wonderflに投稿」の移植版。立方体の数を20個から300個に増やしています。GPUによってパフォーマンスに余裕がでてくるので、3D空間内に配置するオブジェの数を暴力的に増やしても高い実行速度を保てます。 ※Alternativa3D 8.17.0とBetweenAS3を使用 テキストパーティクルデモ demo (Require Flash Player 11) source / アセット入りソースはこちら(要Flash CS5.5/Flash Builder 4.5)
ActionScript 3.0で日本語対応のPDFが作成できる「purePDF」のサンプル | ClockMaker Blog
ActionScript 3.0 からクライアントサイドだけで PDF を作成できる AS3 ライブラリに AlivePDF と purePDF があります。最近は「purePDF」が日本語に対応しているとかで評判が良かったりするのですが、試してみようにも公式で提供されているサンプルが少しばかり難しめです。そこでシンプルなサンプルを用意してみました。 デモ（要Flash Player 10.1） ソースコード（ZIP ※） ソースコードは Adobe Flash Builder 4 のプロジェクトで用意していますが、Flash Professional や FlashDevelop でも利用することができます。以下、具体的な使い方を解説します。 ※ライブラリとフォントは公式サイトから別途ダウンロードください 使い方 まずはライブラリのパスを通します。 公式サイトからライブラリの SWC フ
ClockMaker Blogからの義援金拠出について | ClockMaker Blog
東北地方太平洋沖地震により被災された方々に、心よりお見舞い申し上げます。また皆さんはご無事でしたでしょうか？私は出先で帰宅困難者となり某社に避難させてもらったり銀座中学校の体育館で一晩過ごしたりしました。 今年1年のアフィリエイト収入は義援金として寄付します さて、様々なところで支援のための募金が開始されていますが、当ブログの今年1年(2011年1〜12月)のアフィリエイト広告の収入を全て募金に回すことにしました。 災害により業界の経済が停滞するのは避けたいところです。色々考えたところ、復興支援に役立てつつ経済を回す方法として、この選択を考えました。Flash業界の方たちが普段の仕事をしつつ、たまにこのブログの記事が役立つことがあり、たまたまアフィリエイトの広告をクリックしてもらえれば、それが復興支援に繋がるという流れです。集まった義援金は日本赤十字社に寄付します。 もともとアフィリエイト
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
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
HTML5出力可能なFlash CS5拡張機能を作ってみた | ClockMaker Blog
2011年1月30日に開催された「東京てら子」というFlashの勉強会で発表した内容ですが、HTML5出力可能な�Flash CS5拡張ツールを作ってみたので紹介します。 まずはこちらのビデオをご覧ください。実際に動作している様子をビデオに録画したものです。 タイトルのとおり、Adobe Flash Professional CS5 から HTML5 コンテンツを書き出すという拡張機能で、サイトのトップページで使うようなシンプルなムービー制作に適したツールとなっています。対象ブラウザですがメジャーなモダンブラウザだけではなく、Internet Explorer 6-8 にも対応しています。 生成手順は次のとおり ( ↑ ) Flashの編集画面 ( ↑ ) 拡張機能を［コマンド］から呼び出す。すると変換が自動的に行われる。 ( ↑ ) 変換されたJavaScriptコードを生成、これをHT
Adobe MAX 2010 関連記事の総まとめ | ClockMaker Blog
Web業界が最も注目する一年に一回のイベント、Adobe MAX。今年のAdobe MAX 2010は10月末にて開催され、数多くのメディアやブログで最新情報が報じられました。Web業界にいる身としては、見逃すわけにはいかない情報ばかりなので、効率よくチェックできるようにまとめてみました。 メディアによってフォーカスしている部分が違ったりするので、出来る限りすべての記事をピックアップしています。行われたセッション/分野ごとに記事を分けていますので、見逃した記事があればぜひチェックしてみてくださいませ。 Adobe MAX 基調講演1日目レポート 米国ロサンゼルスの現地時間の10月25日に行われた基調講演。アドビCTOのKevin Lynch氏の講演によるメインイベントです。Web サイト、電子出版、ビデオ、エンタープライズアプリケーション、ゲームについて、数多くの技術が紹介されました。 A
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EaselJS Demo - Text Effect