リッチな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 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 ProからHTML5書き出しを可能にするSwiffy拡張機能 | ClockMaker Blog
GoogleからFlash ProfessionalでHTML5書き出しを可能にする拡張機能が2011年11月17日に公開されました。もともとGoogleは変換サービスSwiffyをオンライン上で公開していましたが、これを使えば作成したFlashの制作ソフト「Flash Pro」から直接HTML5に出力することができます。それでは使い方を下記にて説明します。 使い方の手順 次のサイトで拡張機能が配布されていますので、MXPファイルをダウンロードします。この拡張機能はお使いのFlash ProがCS4/CS5/CS5.5であればインストールできます。 http://www.google.com/doubleclick/studio/swiffy/extension.html ダウンロードしたMXPファイルを開き、エクステンションマネージャーでインストールします。 Flash Proを起動し、
[BetweenAS3] カスタムイージング | ClockMaker Blog
Flashではスクリプトでトゥイーンを作るとインタラクションに関わるいろいろ制御が楽だったりするのですが、トゥイーンライブラリにビルドインされているイージングの種類も限られているので、求めている動きに近づけるときに限界を感じることがたまにあります。 ということで、BetweenAS3のイージング関数の引数に、Flash Professionalのようなカスタムイージングを適用するデモを作ってみました。ベジェでイージングの曲線をカスタマイズすると、わりと求めている動きに近づけられるかもしれません。 BetweenAS3 Custom Easing Generator Flash Professional カスタムイーズイン、イーズアウト メモ1. BetweenAS3にカスタムイージングを適用する方法は、Custom.func()を使って次のようなスクリプトを記述します。 var ease:
![[BetweenAS3] カスタムイージング | ClockMaker Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/7480026fb7b9c448fa3dc31bc59c32b63860d3d2/height=288;version=1;width=512/http%3A%2F%2Fclockmaker.jp%2Fblog%2Fwp-content%2Fthemes%2Fclockmaker%2Fimgs%2Ffacebook_thumb_logo.jpg){kind=logo}
BetweenAS3を使ってカスタムイージングの始まりと終わりに別のイージング関数を指定する方法 | ClockMaker Blog
ActionScriptでトゥイーンを作ろうとしたとき、始まりと終わりで別々のカスタムイージングを指定したいと思うことが多々あります。例えば、始まりはSineぐらいの緩やかなスタートにして、終わりはExpoぐらいの急なストップを指定したいという場合です。 Flash Professinalでは8以降のバージョンでタイムラインアニメーションであればカスタムイージングを作ることができますが、スクリプトでは始まりと終わりが別々のカスタムイージングは簡単に実現できません。そこで、そんなトゥイーンを簡単に作れるように、スクリプトジェネレーターを作ってみました。 デモ(Flex 4) (右クリックの[ソースを表示]でソースの表示可能) wonderfl版 (Flex 3) ライブラリ＆サンプル(CS4) 使い方 上記のライブラリ＆サンプルからソースファイルをダウンロードします。jpフォルダにライブラリ
PV3D演出サンプルNo.08:カスタムフラットシェーディング | ClockMaker Blog
Flashの3Dライブラリ Papervision3D(ペーパービジョン3D) 2.1 のデモ。高速に実行できるフラットシェーディング(テクスチャに陰影を付ける方法)を試してみました。陰影をつけることで質感に味がでてくるので、ブラッシュアップの一手法として紹介してみます。 demo (要Flash Player 9) source 技術的な解説は以下から。今回は当ブログ初登場の3D行列計算を試してみました。 ライブラリにはFlatShaderクラスという汎用的なシェーディング機能が備わってますが(関連記事：Papervision3Dでビットマップのテクチャにライトを適用する方法)、込み入ったモデリングデータに適用しようとすると、速度がでない上に破綻することがあります。ビルドインのFlatShaderで試したのは次のデモ。 立方体の面が三角ポリゴンに分割され、破綻しているのが確認できます。
Papervision3D 2.0で被写界深度表現(3):降り積もる雪 | ClockMaker Blog
前回は被写界深度計算にカメラの距離を利用しましたが、その続編。今回は雪が降積るパーティクル演出をやってみました。もちろん、今回も「ぼかし」を利用しています。 Snowfall Particle Demo(require Flash Player 9) Source(reqiure Papervision3D 2.0 Alpha & Tweener) 今回難しかったのは処理速度の最適化。さすがにリアルタイムに数百個のBlurFileterをEnterFrameで適用するのは重いので、一度BitmapData化しておいて、適宜materialを入れ替えるという手法を採用しました。この方法は、useOwnContainerプロパティを使わなくても被写界深度表現ができるので、PV3D1.xでも利用可能なのがメリットですね。次のブログが紹介している手法なので興味のある方は参考くださいませ。 rica
Papervision3D 2.1 の Flash CS3 拡張機能 | ClockMaker Blog
Papervision3D 2.1をFlash CS3上で簡単に扱えるようになる拡張機能が登場したので試してみました。今回も細かい説明をまとめると大変なので、ビデオキャプチャしています。 Tutorial of Papervision3D v2.1 mxp from clockmaker on Vimeo. 使ってみた感想は以下から。 良かった点 Flash IDEから3Dモデルの読み込みができるので、初心者でも容易に扱えるようになる 主な用途は3Dモデルの読み込み(Colladaファイルの読み込み) WYSIWYGなインターフェースなのでスクリプトベースより結果が直感的にわかりやすい 気になった点 設定できる項目が少ないので、スクリプトベースにとってかわることはなさそう パネルのテンプレートスクリプトは現時点ではコンパイルエラーが発生して使えなかった Flash CS4 は対応していない
BetweenAS3でタイムリマップ | ClockMaker Blog
昨日は記事がホットエントリーで1番(800ブクマ近く)になったみたいで、ブクマ頂いた皆様ありがとうございます。さて、一ヶ月半ぶりに当ブログのメインテーマであるPapervision3Dのデモを作ってみました。 ActionScript3.0の新種のトゥイーンライブラリ「BetweenAS3」を使ってPapervision3Dを動かしたデモです。BetweenAS3は高い実行パフォーマンスが素敵どころですが(参考)、豊富な機能を使うことで新しい演出手法が生まれるのではと考えています。そこで２つのポイントについて試してみました。まずは次のデモをご覧ください。 demo (require Flash Player 10) ソースコードは次の記事を参考ください。では以下、技術的な解説です。 技術的な２つのポイント 再生途中に一瞬スローモーションになりますが、これは一般的にタイムストレッチと呼ばれて
被ブクマ数が手軽に確認できるブックマークレット | ClockMaker Blog
ソーシャルブックマーク数を確認できるブックマークレットを作ってみました。 次の文字列をコピーしてアドレスバーに突っ込むと、そのページがどれだけブックマークされたかが表示されます。 javascript:(function(){var%20d=document;%20var%20s=d.createElement("script");%20s.charset="UTF-8";%20s.src="http://bit.ly/sDU6i?"+(new%20Date()).getTime();%20d.body.appendChild(s)})(); 国内でもっとも使われていはてなブックマークとDeliciousのカウントを表示するようにしています。 自分の作ったサイトがどれだけブクマされてるかチェックすると、注目度がわかって面白いです。アクセス解析と同様でサイトの制作者・担当者的にも被ブクマ数も
[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割
フレームアクションで覚える Papervision3D チュートリアル Vol.01 | ClockMaker Blog
私の身の回りの人やメール等でPapervision3D (ペーパービジョンスリーディー)の使い方を教える機会があり、その度にチュートリアルサイトを教えたりしています。ただ、世の中のコードを見ると様々な書き方があり、スクリプトになれていない初級者にとっては、難解に思われる事が多いかと思います。 そこで、初級者にもやさしいPapervision3D(以下、PV3D)チュートリアルをはじめてみることにしました。チュートリアルビデオを用意して5回ぐらいに渡って連載したいと思います。必要となるスキルレベルは、ActionScript 3.0の入門書を一冊読み終えたぐらいを想定してます。 テーマは「フレームアクションだけの短いコードで、シンプルにPapervision3Dを使ってみる」です。 なお、Papervision3Dの解説はさらに詳しく書籍にもまとめています。このブログを読んでさらにスキルを高
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
