http://clockmaker.jp/blog/2014/01/html5-webgl-away3d-typescript-samples/
WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう？ 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
リッチな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を使った流体パーティクル入門 今回は公式サイトで明らかになっ
Flash Stage3D対応のAlternativa3D 8がオープンソースに！ | ClockMaker Blog
相変わらず忙しい日々が続いており、久しぶりのブログの更新になってしまいました。 さて、Flash Player 11 (Stage3D)向けの3Dフレームワーク「Alternativa3D」が本日(2012年3月29日)ついにオープンソースになりました！ Alternativa3D 8 is out in Open Source! 記事をざっくり意訳すると次のような内容です。 ===== 2012年3月29日はAlternativaPlatform社やあなた方にとって重要なイベントとなりました。6年間、クローズドで開発されてきたFlashの3Dエンジン Alternativa3D8はオープンソースとなりました。ソースコードはGitHubで公開されています。Alternativa3Dのオープンソースの歴史はこれから始まります。私たちは、コミュニティーの支援や様々な言語での様々な著者によって、
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
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
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 RETWEET 発表資料「スマートフォンアプリ開発とFlexフレームワーク"Hero"入門」 | ClockMaker Blog
Adobe MAX 2010 RETWEET 発表資料「スマートフォンアプリ開発とFlexフレームワーク"Hero"入門」 2010 年 11 月 25 日に開催した Adobe MAX 2010 RETWEET のフォローアップとして「スマートフォンアプリ開発と Flex フレームワーク “Hero” 入門」のスライドとサンプルをシェアします。 スライド資料 サンプル（ソースファイル付き） サンプルについて 発表中に紹介したサンプルは Flex SDK Hero （プレビュー版）を利用した Android サンプルアプリです。これらのサンプルは Adobe Flash Builder “Burrito” （プレビュー版につき無償）で、［読み込み］→［Flash Builder / Flash Builder プロジェクト］→［プロジェクトフォルダー］を選択することで試すことができます。
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で日本語対応の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 フ
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)
東京てらこ7の発表資料「AS3でフーリエ変換を使って画像処理をしよう」 | ClockMaker Blog
8/27（土）に行われたFlashの勉強会、東京てら子 7「夏休みの自由研究発表・エフェクト」で「AS3でフーリエ変換を使って画像処理をしよう」という題目で発表しました。 Flashに限定した話でいうとフーリエ変換は音の処理で使われることが多いですが、画像に利用することで面白い結果を得ることができます。今回はフーリエ変換を使った、ローパス/ハイパスフィルタと、光学的なボケの再現について、研究したことをまとめています。 資料ですが例によって Acrobat.com に公開してします。 Acrobat.com で資料を確認する 資料中のFlashデモについてはこちらから試すことができます。 InteractiveDemo.swf RealDemo.swf ※今回のデモのソースコードは、諸事情により公開しません。 ※SWFはデコンパイル対策処理を施しています。 勉強の際に参考にしたサイトを紹介し
AS3オブジェクトをシリアライズできるライブラリXMLSerializerを公開 | ClockMaker Blog
サーバーサイドへのデータの通信やローカル保存などを想定した場合の、データの扱いについて前回のブログ記事で紹介しました（ActionScriptでのデータ保存形式の比較(XML・JSON・ByteArray) ）。XMLは汎用的に使われる頻度が多いですが、自前パーサーを作るのが難点という課題がありました。 そこでオブジェクトを半自動的にXMLにシリアライズできるXMLSerializer（XMLシリアライザー）というActionScript 3.0のライブラリを作ってみました。Spark projectにコミットしたので、利用したい方はそちらを参考くださいませ。 clockmaker/XMLSerializer – Spark project これを使うとFlashのデータで、配列や無名オブジェクト、カスタムクラス、Vector型などを完全に型情報をもったまま変換できます。ActionScr
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を理解する フ
F-siteでの発表資料「wonderflではじめるFlash 3D入門」 | ClockMaker Blog
5月30日、東京の国立オリンピック記念青少年総合センターで開催されたFlashのセミナーイベントである「F-site」にて「wonderflではじめるFlash 3D入門」と題して、3Dの入門的な内容で講演しました。 口頭での説明がないと少しわかりづらい部分もあるかと思いますが、資料は次のURLにアップしているので、良かったらご覧くださいませ。 プレゼンテーション資料(別Windowで開く) プレゼンのソースコード また発表のあとで、スライドに使ったソースを欲しいというリクエストももらいましたので、例によってソースコードも公開します。ソフトは「FlashDevelop」と一部「Flash CS5」を使用して作っていますので、参考にする場合はFlashDevelopで見てもらえればと思います。（ActionScript 3.0のライブラリとして、Progression 4のスライド設定とPa
wonderflから学ぶActionScript 3.0最適化 | ClockMaker Blog
いつも勉強になる_level0.KAYACさんのブログでイベント告知(ごはんとFlash -Its a wonderfl rice-)がありましたが、皆さん詳細をチェックしましたか？ ライブコーディングというその場でActionScript 3.0を書いて課題のFlashを作るという企画もあるのですが、私も参戦します。果たして30分で作り上げることができるのか、今から緊張します。 さて、前置きが長くなりましたが、wonderflで検証されたActionScript 3.0最適化手法をまとめてみました。詳細は以下から。 Bitmap関連 Flashの処理速度の最適化において、描画処理の最適化は最も効果があります。ここではスクリプトで高速化した検証結果をまとめてみました。 BitmapDataクラスのdraw()とcopyPixels()だとcopyPixels()のほうが160%高速。 co
待望のニュース！Flash CS5 で iPhone アプリが開発できる(Flash CS5最新情報の翻訳も) | ClockMaker Blog
待望のニュース！Flash CS5 で iPhone アプリが開発できる(Flash CS5最新情報の翻訳も) 米国で開催されている Adobe MAX 2009 で、今朝、重大な発表がありました。それはFlash CS5 で iPhone アプリが開発できるという大ニュースです。Adobe Labsに紹介ビデオと、実際に動作するFlash製iPhoneアプリが上がっています。ぜひ御覧ください！ Adobe Labs – Adobe Flash Professional CS5: Applications for iPhone さっそくですが、iTunes で販売されている Flash 製 iPhone アプリを試してみましたのでレポートしてみます。また Flash CS5 についても翻訳してまとめてみました。 Flash 製 iPhone アプリレビュー ↑ Red Hood (無料)
BetweenAS3でタイムリマップ | ClockMaker Blog
昨日は記事がホットエントリーで1番(800ブクマ近く)になったみたいで、ブクマ頂いた皆様ありがとうございます。さて、一ヶ月半ぶりに当ブログのメインテーマであるPapervision3Dのデモを作ってみました。 ActionScript3.0の新種のトゥイーンライブラリ「BetweenAS3」を使ってPapervision3Dを動かしたデモです。BetweenAS3は高い実行パフォーマンスが素敵どころですが(参考)、豊富な機能を使うことで新しい演出手法が生まれるのではと考えています。そこで２つのポイントについて試してみました。まずは次のデモをご覧ください。 demo (require Flash Player 10) ソースコードは次の記事を参考ください。では以下、技術的な解説です。 技術的な２つのポイント 再生途中に一瞬スローモーションになりますが、これは一般的にタイムストレッチと呼ばれて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FxUG東京での発表資料「Molehill入門」 | ClockMaker Blog