タグ

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

  • 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
    ryownet
    ryownet 2012/02/14
    画像を読み込み終わってからフェードインしてくれるライブラリ。jquery.lazyloadでいいような気がしてるけどflasherの気遣いと心意気を感じるのでブクマ
  • バズワードに流されてませんか? 今チェックしておきたい、現場の開発者から見たHTML5の実際のところ | ClockMaker Blog

    HTML5という技術が注目を集めていますが、実際の現場ではどういう認識で使われているのか参考になる記事をまとめました。これからHTML5を採用しよう、勉強しようという方に役立つようにピックアップしています。 ※なお、記事でのHTML5はCSS3とJavascriptも含めた技術全体の事として扱っています。マークアップやスマートフォン向けのHTML5というよりは、インタラクティブコンテンツ/WebアプリとしてのHTML5についてのお話です。 HTML5で制作された国内企業サイト20から現状の制作状況を知る!! | HTML5でサイトをつくろう まずは実際どのくらいHTML5でサイトが作られているのかチェックしておきましょう。こちらは国内企業サイトでHTML5が採用された実例をまとめた記事です。お客様への提案時には実例を見せるのがわかりやすいのでこういう記事は助かりますよね。 ※ちなみに私が

    バズワードに流されてませんか? 今チェックしておきたい、現場の開発者から見たHTML5の実際のところ | ClockMaker Blog
    ryownet
    ryownet 2011/09/13
    HTML5はまだマーケティング用語。あおればPVが稼げるだけ
  • Flash Player 11(Molehill API使用)とFlash Player 10を比較した動画 | ClockMaker Blog

    従来の Flash コンテンツが Molehill を使うことでどのくらい高速化できるか紹介したビデオを YouTube に投稿してみました。まだ Flash Player 11 インキュベーターリリースをインストールしてない方は、Molehill API の力をご覧ください。 YouTube – [Flash Player 11] CPU vs GPU with Molehill Molehill デモをまとめました また既に多くの開発者によって Molehill API を使用したデモが作られていますが、それらを次のページにまとめました。デモを実際にためすには Flash Player 11 インキュベーターリリースが必要ですので、事前にインストールしてからご覧ください。 Molehill Demo 一覧 関連記事 ClockMaker Blog の Molehill 記事一覧

    Flash Player 11(Molehill API使用)とFlash Player 10を比較した動画 | ClockMaker Blog
    ryownet
    ryownet 2011/03/11
    なんじゃこりゃ!FP11でついにFlashオンライン3Dゲームが本格化するのか?webにおけるFlashの立ち位置も変わってきそう。アニメはJSでやって、3DはFlashで、みたいな使い分けか。
  • 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

    ryownet
    ryownet 2009/11/19
    AS3高速化。こういうのが好きになってきたら(気になってきたら)視点を変えてプロダクトの質を高めたいけど、最速最適化はロマンがあるよね!
  • BetweenAS3でタイムリマップ | ClockMaker Blog

    昨日は記事がホットエントリーで1番(800ブクマ近く)になったみたいで、ブクマ頂いた皆様ありがとうございます。さて、一ヶ月半ぶりに当ブログのメインテーマであるPapervision3Dのデモを作ってみました。 ActionScript3.0の新種のトゥイーンライブラリ「BetweenAS3」を使ってPapervision3Dを動かしたデモです。BetweenAS3は高い実行パフォーマンスが素敵どころですが(参考)、豊富な機能を使うことで新しい演出手法が生まれるのではと考えています。そこで2つのポイントについて試してみました。まずは次のデモをご覧ください。 demo (require Flash Player 10) ソースコードは次の記事を参考ください。では以下、技術的な解説です。 技術的な2つのポイント 再生途中に一瞬スローモーションになりますが、これは一般的にタイムストレッチと呼ばれて

    BetweenAS3でタイムリマップ | ClockMaker Blog
    ryownet
    ryownet 2009/07/17
    そっかー。時間のトゥイーンてこういう使い方あったのか。FlashだけじゃなくAEの経験があるClockmakerさんならではの発想。映像やゲーム出身者の発想がほしい
  • 無料でFlashの制作環境を構築 FlashDevelopとFlex SDKのインストール | ClockMaker Blog

    FlashDevelop(フラッシュ・デベロップ)というActionScriptのエディターが非常に優秀で、これとAdobeがオープンソースで提供しているFlex SDKがあれば、お手軽かつ無料でFlashを作ることができます。 FlashDevelopはソフトの軽さと強力なコードヒント機能によってプロのFlasherから熱烈な支持を受けているエディターです。まずはコードヒント機能がどのくらい優れているか分かる90秒のライブコーディングビデオを用意しました。 FlashDevelop Code Hint Movie from clockmaker on Vimeo. コードの補間によってキータイプの量を劇的に減らせ、自動的に整形されるため見通しの良いコードが仕上がるのがおわかりになるかと思います。 では、そんな便利で高機能なFlashDevelopのインストール方法を紹介します。できる限り

    無料でFlashの制作環境を構築 FlashDevelopとFlex SDKのインストール | ClockMaker Blog
    ryownet
    ryownet 2009/07/15
    やっほーい
  • フレームアクションで覚える PV3D Vol.04 : BasicViewを理解する | ClockMaker Blog

    Papervision3Dを学習するチュートリアル第4回目です。今回はPapervision3D(以下PV3D)というライブラリがどのようにして3Dを扱っているのかを説明します。概念的な話になりますが、応用へのステップアップには、基を押さえておくことは重要ですのでしっかり理解しておきましょう。 PV3Dの概念 PV3Dで3Dを始めるときに必ず使う4つのクラスがあります。 Scene:シーン Camera:カメラ Renderer:レンダラー Viewport:ビューポート そもそもFlashは2次元の表現メディアですので、Flashで扱う3Dというのはあくまで概念的なものになります。 具体的に仕組みを説明していきます。PV3Dにおける3DというのはすべてSceneという概念的な空間のなかに配置します。その概念的な空間を撮影するのがCamera。Cameraで撮影したものを2次元表示に落と

    フレームアクションで覚える PV3D Vol.04 : BasicViewを理解する | ClockMaker Blog
    ryownet
    ryownet 2009/05/25
    PV3Dの概念
  • [Flashの高速化を試す]BitmapDataを配列に格納することで2〜3倍の高速化 | ClockMaker Blog

    「3Dのパーティクルに被写界深度をつけてみた」で紹介した Flash で被写界深度表現を高速化する常套手段ですが、もっと身近で実用しやすい例で試してみました。500〜1000個ぐらいの矢印がランダムに動き回ります。 シェイプだけだともっさりするよ BitmapDataで配列に格納すると高速化するよ 前者は矢印のシェイプをもったインスタンスが動き回るデモで私の環境では500個でfps30程度、後者は矢印のシェイプをプレレンダリングしたデモで1000個でfps50程度でてます。具体的な数字にしずらいのですが、単純に言ってしまえば2〜3倍くらいは高速化しています。(※当方の環境は Mac OS X 10.5, iMac, Core Duo 2GHz, Memory 2GB, Windowsだともっと早いです) 元ネタ 元ネタは Adobe MAX 2008 の城戸さんのプレゼンです。ビデオの8割

    ryownet
    ryownet 2009/04/25
    as3高速化はBitmapDataを配列にすること。roxik様のサンプルをもとに分かりやすく解説!
  • PV3Dで表面に凹凸ができるバンプマッピングを試しました | ClockMaker Blog

    PV3D 2.0(Greate White)でバンプマッピングと環境マッピングを試してみました。バンプマッピングとはIT用語辞典によると「実際の面は平らであるのに、凹凸があるかのように見せることができる」と紹介されてます。凹凸と環境マッピングと組み合わせることでテッカテカのテクスチャになるので、何かと面白そうな手法です。 demo (require Flash Player 9) source (with Papervision3D 2.0 beta) 参考記事 blog.tartiflop » Blog Archive » First steps in Papervision3D : Part 7 – Texture mapping with lighting, bump mapping and environment mapping Flash 9 PV 3D Example : 3d

    PV3Dで表面に凹凸ができるバンプマッピングを試しました | ClockMaker Blog
    ryownet
    ryownet 2009/02/27
    なんという3Dアース
  • 1