タグ

ブックマーク / clockmaker.jp (13)

  • Stage3D勉強会(第2回) – 発表資料 | ClockMaker Blog

    2012年7月31日に東京・五反田にて開催したStage3D勉強会(第2回)ですが、発表者の皆さんが資料を公開したのでシェアします。 「Starling フレームワークの最適化」(野中文雄氏) – 発表資料 「Away3D 4.0 GOLD 入門」(ICS 池田泰延) – 発表資料 「Alternativa3DでiPhoneゲーム」(393氏) – 発表資料 「モデリングを始めてみよう」(糸数 昌史 (IMJ)氏) – 発表資料 Stage3D勉強会は毎月開催していく予定です。第3回は日程が決まり次第、私のTwitterアカウントで告知しますので、気になる方はフォローしてチェック頂ければと思います。

  • ClockMaker Blog

    Adobe MAX JAPAN 2018で登壇してきました 2018年11月25日 (日) 雑談 11月20日(火)のAdobe MAX 2018で「イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック」と題して発表しました。 発表の振り返りを記事として残しておきたいと思います。少しエモい感じで恥ずかしいですが、この気持ちを忘れないように記事にまとめました。 9年前のAdobe MAX 2009での思い出が原点にありました。 人生を変えた2009年のAdobe MAXを目指した 思い起こせば、Adobe MAXにはじめて参加したのが2009年。締め切り間近の修羅場な仕事があるなか、朝〜夕方はMAX会場、夜から朝にかけて会社で徹夜の開発作業として、無理して参加したことを覚えてます。連日徹夜してでも参加して良かったというのが当時、MAXで強く思っ

    ClockMaker Blog
  • Flash Stage3D対応のAway3D 4.0がついに正式版に! | ClockMaker Blog

    Flash Stage3Dに対応したAway3D 4.0が正式版となり「Away 4.0 GOLD」として公開されました。2年前のAdobe MAX 2010で紹介されて以降、4.0 alpha、4.0 betaと長い間開発中でしたが、より安心して使えるようになったのではないでしょうか。また4.0正式版の発表と合わせて、Away FoundatonはAdobeの公式サポートを受けることになったことも発表しました。従来からのオープンソースのスタンスは変わらないようですが、資金繰りの心配が要らなくなる分、フレームワークの開発が一層進むものだと予想します。 ※Away3DはオープンソースのActionScriptフレームワークでありApache License v2.0 のライセンスが適用されています。ライセンスの範囲内であれば商用・個人利用問わず無償で利用することができます。 さて、Away3

  • 「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の解説の章も用

    「Stage3Dプログラミング」という解説書を執筆しました | ClockMaker Blog
  • リッチな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コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
  • HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog

    最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。

    HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
  • HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog

    HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas

    HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
  • 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に展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ

    HTML5 Canvasを始めよう:EaselJSを使った流体パーティクル入門 | ClockMaker Blog
  • 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でちょっと

    HTML5 Canvasを始めよう:EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
  • 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

    FlashのアニメーションをHTML5に変換するツール「Wallaby」をAdobeが公開 | ClockMaker Blog
  • Flash Player 10.2 が正式リリース | ClockMaker Blog

    Flash Player 10.2 が正式リリースされました。Adobe Flash Player Team Blog に新機能について詳しく紹介されていますが、まとめると次のような内容です。 Stage Video (ハードウェアアクセラレーションによるH.264ビデオのデコード+表示支援。MacWindowsで1080p HDビデオを再生してもCPU使用率が1〜15%。今まではFP10.1&IE9の組み合わせでデコード部分しかハードウェアアクセラレーションされなかった。Stage Videoが試せるサンプルはこちら。) ネイティブマウスカーソル (任意のグラフィックスをネイティブなマウスカーソルとして設定可能になった。これによりスムースなレスポンスが得られるようになる。今まではカスタムカーソルはFlashコンテンツ側の実装で擬似的に再現していたため、マウスの描画が追いつかない場合があ

    Flash Player 10.2 が正式リリース | ClockMaker Blog
  • Flashに関する有用なTwitterまとめ | ClockMaker Blog

    TwitterではFlashに関する話題で議論がおこなわれることがあります。有用なやりとりはトゥギャッターというウェブサービスにまとめられることがありますが、その中でこれだけはチェックしておきたいという話題をピックアップしてみました。 見逃しがしてしまったまとめがあれば、ぜひチェックしてみてください。 Flash 関連のまとめ記事 「Flashあるある」 「Flash CS6の要望まとめ」 「画像処理をデザイナーがやるのかコーダーがやるのかという話」 HTML5 / JavaScirpt 関連のまとめ記事 「間違ったJavaScriptとFlashの使い分け」 「お客様の中にFlashとHTML5に詳しい方はいらっしゃいませんか!」 「HTML5が切り開くWebアプリケーションの未来実況まとめ」 ActionScript 関連のまとめ記事 「ActionScript 2.0 ってどんな存在

  • 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を理解する フ

    60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
  • 1