ClockMaker Blog

HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」

2012-02-08T07:10:17Z

Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。

demo (HTMLエレメント版)

demo (Canvas版)

Canvas版のほうはHTML5対応ブラウザ(ChromeやSafari、Firefox)限定となりますが、HTMLエレメント版のほうはブラウザの対応範囲が広くIE6でも動作します。ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。

ShuffleText.js (HTMLエレメント版)
ShuffleEaselText.js (Canvas版)

それでは以下で使い方を紹介していきます。

使い方 (HTMLエレメント版)

上記のリンクから「ShuffleText.js」をダウンロードして、次のようにファイルを配置します。プレーンなJavaScriptで作成しているので、ライブラリの依存関係はありません。

ShuffleText.jsの使い方は至ってシンプルで、エレメントの中のテキストに対してエフェクトを適用します。

HTMLの適用したい要素に対して、document.getElementById()メソッドなどで参照をとり、ShuffleElementTextクラス(ShuffleElementText.jsの中身)のコンストラクタの引数として渡します。エフェクトを開始したいタイミングでstart()メソッドを呼び出します。

<!DOCTYPE html>
<html>
<head>
	<title>ShuffleElementText.js Example</title>
	<script src="ShuffleText.js"></script>
</head>
<body>
	<h1 id="myText">This is a ShuffleText.js Examle</h1>
	<script>
		var text = new ShuffleText(document.getElementById("myText"));
		text.start();
	</script>
</body>
</html>

実行結果

使い方 (Canvas版)

上記のリンクから「ShuffleEaselText.js」をダウンロードして、次のようにファイルを配置します。Canvas版は当ブログでゴリ押し中のHTML5 CanvasをFlashライクに扱えるフレームワーク「EaselJS」上で動作するようにしています。そのため、使用する際はeasel.jsも準備ください。

easel.jsにはテキストの表示オブジェクトとなるTextクラスが存在します(FlashのTextFiledクラスのようなもの)。ShuffleEaselTextクラス(ShuffleEaselText.jsの中身)はTextクラスのサブクラスとなります。つまり表示オブジェクトとしてStageにaddChild()して利用します。エフェクトを開始したいタイミングでstart()メソッドを呼び出します。

コードで示すと次の通りです。

<!DOCTYPE html>
<html>
<head>
	<title>ShuffleEaselText.js Example</title>
	<script src="easel.js"></script>
	<script src="ShuffleEaselText.js"></script>
</head>
<body>
	<canvas id="myCanvas" width="465" height="200"></canvas>
	<script>
		var canvas = document.getElementById("myCanvas");
		var stage = new Stage(canvas);

		var text = new ShuffleEaselText("Hello World", "24px Arial", "#000");
		text.y = 50;
		text.start();

		stage.addChild(text);

		Ticker.setFPS(60);
		Ticker.addListener(stage);
	</script>
</body>
</html>

実行結果

HTMLエレメント版のほうがシンプルに記述できますが、Canvas版のほうは他のグラフィック要素と組み合わせることで柔軟に表現を作ることができるのがメリットだと思います。

カスタマイズ方法

ShuffleTextクラスもShuffleEaselTextクラスも両方とも共通のプロパティーをもっているので、次のプロパティーを弄ってカスタマイズすることができます。

var text = new ShuffleText(document.getElementById("hoge"));
//var text = new ShuffleEaselText("Hello", "", "#F00");

// エフェクトの継続時間
text.duration = 500;

// ランダムテキストに用いる文字列 (日本語も可)
text.sourceRandomCharacter = "あいうえおかきくけこさしすせそ、。";

// 空白に用いる文字列
text.emptyCharacter = " ";

text.start();

実行結果

最後に

ちなみにActionScript 3.0版もMIT Lisenceで公開しています。HTML5に限らず利用したい方は次のURLからダウンロードくださいませ。

ShuffleText Effect in AS3 – wonderfl build flash online

感触としては、HTML5でWebフォントを扱うよりもFlashのほうが埋め込みフォントの自由度が高い(種類や埋め込みのカスタマイズが容易)のでデザインを重視するならFlashのほうが向いていると思いました。

それではまた近いうちにHTML5のネタを投稿します。次回もよろしくお願いします。

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門

2012-02-07T15:22:08Z

HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。

demo
source

EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。

デモの作り方

冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。

さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。

フォースマップの作成
パーティクル情報を付与した表示クラスの作成
フォースマップの適用と計算

フォースマップの作成

フォースマップというのは流体パーティクルを実装する際によく使われる手法で、雲模様の画像からパーティクルの移動方法を決定するのに使うものです。今回は次のフォースマップの画像ファイルを利用しました。

▲フォースマップの画像ファイル。フォースマップはPhotoshopのフィルターの雲模様を使って作成可能。

画像には赤・緑・青の3チャンネルの情報が含まれています。3つのチャンネルはそれぞれ微妙に雲模様の形状が違うことに注目ください。このカラー情報を速度に変換するのですが、X方向は赤のチャンネルを、Y座標には緑のチャンネルを、という感じで使うことになります。それぞれのチャンネルで模様が違うので、X方向とY座標でバラバラの動きをすることになります。

▲赤のチャンネル

▲緑のチャンネル

▲青のチャンネル

カラー情報をパーティクルの速度に変換する方法は後ほど解説しますので、まずはこのフォースマップをJavaScriptに展開する方法を紹介します。

JavaScirptのImageクラス(imgタグのJavaScript用クラス)を使ってフォースマップの画像ファイルを読み込みます。

forceMapImage = new Image();
forceMapImage.onload = initForceMap;
forceMapImage.src = "http://clockmaker.jp/labs/120201_easeljs_forcemap/forcemap.png";

function initForceMap() {
 // 読み込み完了
}

onloadイベント使って、画像読み込み終了時のイベントを使います。次にこのフォースマップの画像から、色情報を取得するために、Canvas要素に転写します。ActionScriptではBitmapDataクラスを使って画像の色情報を解析することができました。JavaScriptではCanvas要素にそれに相当する機能があります。前回も紹介したとおり、Canvas要素はbodyタグに追加 (appendChild)しなくても機能するので、スクリプト上でダミーのCanvasのインスタンス（下記のスクリプトのforceMapCanvasインスタンスが該当）を作成しておきます。

function initForceMap() {
    var forceMapElement = document.createElement("canvas");
    forceMapElement.setAttribute("width", forceMapImage.width);
    forceMapElement.setAttribute("height", forceMapImage.height);

    forceMapCanvas = forceMapElement.getContext("2d");
    forceMapCanvas.drawImage(forceMapImage, 0, 0);
}

なお余談ですが、フォースマップはActionScriptだとBitmapDataクラスのperlinNoise()メソッドを使ってスクリプト内で生成することが可能です。Canvasでも頑張ればコードによってperlinNoise()を自前で作ることができますが、APIの豊富さでもActionScriptのほうが一日の長があると思いました。

パーティクル情報を付与した表示クラスの作成

次に矢印のグラフィックを表示するための表示クラスを作成します。EaselJSにはBitmapクラスがあり、それを使えば画像のXY座標や回転を扱うことができます。今回のデモの場合は、それらのプロパティーに加えて加速度や速度のプロパティーを扱いたいのでBitmapクラスを継承したArrowクラスを作成しました。

JavaScriptのクラスの作成方法は今回は割愛しますが（後日、別の記事で紹介します）、次のようなスクリプトとして記述します。コンストラクタで記述しているvxとvyは速度用のプロパティー、axとayは加速度用のプロパティーです。

(function (window) {
    function Arrow(imageOrUri, x, y) {
        this.x = x;
        this.y = y;
        this.vx = 0;
        this.vy = 0;
        this.ax = 0;
        this.ay = 0;
        this.initialize(imageOrUri);
        this.regX = 10;
        this.regY = 10;
    }

    // EaselJSのBitmapクラスを継承
    var p = Arrow.prototype = new Bitmap();

    p.step = function (colorA, colorB) {
        // 省略
    };
    window.Arrow = Arrow;
}(window));

regXとregYは画像の基準点を設定するBitmapクラスのプロパティーです。今回利用する画像が20px四方の矢印画像で回転時の基準点を(X, Y) = (10px, 10px)に設定します。

フォースマップの適用と計算

次にフォースマップから速度に変換する方法を紹介します。Canvas要素(Context2Dオブジェクト)のgetImageData()メソッドを呼び出すことで、指定したピクセル位置からのカラー情報を取得することができます。今回は指定したピクセルのデータだけが欲しいので、1px四方で情報を取得します。

var arrow = particleList[i];
var imageData = forceMapCanvas.getImageData(
    arrow.x >> 1,
    arrow.y >> 1,
    1,
    1);

▲例えば、(200px, 150px)の箇所の座標の1px四方で測定すると[200, 128, 102, 255]というカラー情報の配列が取得できる。

取得したImageDataオブジェクトには１次元配列として、赤・緑・青・透明度の順番でピクセル分繰り返してカラー情報(0〜255の数値)が入っています。今回は1pxごとの赤・緑・青の情報だけを使うのですが、赤と緑のチャンネルだけ情報を使う場合は次のように0と1を指定して、Arrowインスタンスのメソッドを呼び出します。

var colorR = imageData.data[0];
var colorG = imageData.data[1];
arrow.step(colorR, colorG);

Arrowクラスのstep()メソッドでは、このカラー情報→加速度→速度→座標/回転へと変換します。カラー情報は1チャンネルあたり0〜255の数値になるので、128を減算して-128〜128までの数値を扱うようにします。X方向に対して適用する場合は、負の値であれば左方向に移動し、正の値であれば右方向に移動することになります。

p.step = function (colorA, colorB) {
    this.ax += ( colorA - 128 ) * .0005;
    this.ay += ( colorB - 128 ) * .0005;
    this.vx += this.ax;
    this.vy += this.ay;
    this.x += this.vx;
    this.y += this.vy;

    this.rotation = Math.atan2(this.vy, this.vx) * 180 / Math.PI;

    this.ax *= .96;
    this.ay *= .96;
    this.vx *= .92;
    this.vy *= .92;

    ( this.x > 465 ) ? this.x = 0 : ( this.x < 0 ) ? this.x = 465 : 0;
    ( this.y > 465 ) ? this.y = 0 : ( this.y < 0 ) ? this.y = 465 : 0;
};

▲例えば、(200px, 150px)の箇所の座標のカラー情報の赤色成分を調べると200という値が取得できます。この値は100分率で示すと80%なので、X方向に向かって+30% (50+30=80%)の加速量となる。

▲例えば、(100px, 350px)の箇所の座標のカラー情報の赤色成分を調べると25という値が取得できます。この値は100分率で示すと10%なので、X方向に向かって-40% (50-10=40%)の加速量となる。

エンターフレームイベントに相当するtick()関数では、パーティクルの個数分だけfor文を回して上記の処理を行い、Canvasをレンダリングして処理は終了となります。

最後に

今回はEaselJSというよりは、Canvas要素のカラー情報の扱いの方法の解説でした。前回も紹介したとおり、Canvas要素はFlashでいうところのBitmapとBitmapDataとGraphicsをごちゃまぜにしたようなHTML5の新要素ですが、EaselJSをはじめとしたフレームワークでは移植できていないAPIも多々あります。そのためEaselJSを学習するのに加えてCanvas要素の各機能を学習することで表現可能なことが増えると思います。

ちなみにFlashだと同じような実装で1000個の表示が可能でしたが、Canvas(+EaselJS)だと200個ぐらいが限度でした。

HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト

2012-02-07T15:26:18Z

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でちょっと癖のある記法を使うことになるので、学習コストを下げる＆生産性を上げるためにもCanvasをFlashライクに使うことのできるEaselJSが注目されています。

デモの作り方

冒頭のデモですが、twistcubeさんのFlashの作品「SliceEffect」(wonderfl)から移植したものです。短いスクリプトの中に動きや実装のテクニックが詰まっていますので、ぜひオリジナルの作品のほうもチェックしてみてください。

さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。

画像の一部分のキャプチャ
画像の表示オブジェクトへのインスタンス化
トゥイーンの適用
エンターフレームイベントの実装方法

これらを詳しく解説していきます。

画像の一部分のキャプチャ

▲もとの画像ファイル「text.png」

スライスエフェクトを実装するにあたり、画像を横幅1pxの短冊状に分割する必要があります。そのためにダミーのCanvas要素を用意しました。Canvas要素はFlashでいうところのBitmapとBitmapDataとShapeをごちゃまぜにしたようなHTML5の新要素です。BitmapDataのように描画したものをキャプチャする機能が曲りなりにもあるので、これを利用します。Canvas要素はbodyタグに追加(appendChild)しなくても機能するので、スクリプト上でダミーのCanvasのインスタンスを作成しておきます。

var dummyCanvas = document.createElement("canvas");
dummyCanvas.setAttribute("width", 1);
dummyCanvas.setAttribute("height", image.height);
var context = dummyCanvas.getContext("2d");

次に画像を短冊状に分割します。drawImage()メソッドはFlashで言う所のBitmapData.draw()のようなメソッドです。画像の一部分だけをトリミングして Canvasに描画することができます。そして描画したものを配列に保存します。Canvas要素のtoDataURL()メソッドを使えば描画結果を画像データとして取得することができます。ここではループ文を使って、画像の左端から右端まで1px毎にこの処理を繰り返して結果をPNGデータとして配列に保持しておきます。

var srcArr = [];
for ( var i = 0; i < image.width; i++ ){
     context.drawImage(image, i, 0, 1, image.height, 0, 0, 1, image.height);
     srcArr[i] = dummyCanvas.toDataURL("image/png");
}

画像の表示オブジェクトへのインスタンス化

次に画面に表示する表示オブジェクトの作成です。EaselJSにはShapeやBitmap、TextなどFlashのクラス名に似た表示クラスが用意されています。今回は上の手順で作成した画像リソースを使いたいので、Bitmapクラスを利用します。次のようにしてBitmapインスタンスを作成し、XY座標や透明度を設定したうえで、stageにaddChild()します。addChild()するあたりはActionScript 3.0とそっくりですね。

var bmp = new Bitmap(srcArr[i]);
bmp.x = centerX + 1000 * Math.random() - 500;
bmp.y = centerY + 1000 * Math.random() - 500;
bmp.alpha = 0;
stage.addChild(bmp);

▲表示オブジェクト関連のJSクラス。Flashのflash.dislplayパッケージのようなクラスが用意されています。

トゥイーンの適用

画面に表示したら次は動きを実装します。ActionScriptで作る場合はTweenerやBetweenAS3、Tween24などのライブラリを使ってトゥイーンを作っていたと思います。それと同様に、JavaScriptでもトゥイーンを作ることのできるライブラリがあるのでそれを利用します。EaselJSと相性がいいのは同作者が開発しているTweenJSです。TweenJSでは次の記述でトゥイーンを実装します。

Tween.get(bmp)
     .wait(1.5 * i + 1000)
     .to({ alpha : 1,
         x : centerX + i,
         y : centerY}, 1500, Ease.elasticOut);

メソッドチェーンで処理を書く感じです。ActionScriptでトゥイーンをかじったことのある人ならなんとなく意味がわかると思いますが、ここではBitmapインスタンスに対して、ディレイをかけたうえで、透明度とXY座標を1.5秒でトゥイーンするようにしています。イージング方式をEase.elasticOutにしているのは演出の都合上です（勢い良くスライスが動いて見えるのはこのイージング方式によるところが大きいです）。

▲TweenJS

エンターフレームイベントの実装方法

最後にレンダリングを設定します。EaselJSの仕組みですが更新するときにはレンダリングメソッドのupdate()を実行します。EaselJSのTickerというクラスがエンターフレームイベントを管理するようになっていますので、次の記述でレンダリングメソッドを呼び出すようにします。

Ticker.setFPS(60);
Ticker.addListener(window);

function tick(){
    stage.update();
}

最後に

HTML5 CanvasはFlash Player 7.5ぐらい (Flash Player 8のBitmapData系の機能を一部実装したようなFlash Player 7という意)なので、Flashと比べると実現できることはまだまだ少ないのが現実です。ただ、実現できることは少なくてもレガシーなFlash(3〜5)の時代に様々な表現が試されたように、工夫次第で表現は作ることができます。EaselJSを使えば学習コストを抑えてHTML5 Canvasを試すことができるので、挑戦してみてはいかがでしょうか？

今後の予告ですが、EaselJSとTweenJSを使ってHTML5 Canvasのデモをいくつか作成してみましたので、しばらくはこれらをブログで紹介していきたいと思います。

▲テキストのフラクタル

▲パーティクルの流体表現

CanvasタグとJavaScriptで3Dのデモを作ってみました

Stage3D対応のAway3D 4.0 – 3次元空間におけるパーティクル表現

2012-02-07T15:32:39Z

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 Player 10で作ったデモ (Papervision3D 2.1 + Stardust 1.2)

▼Flash Player 11で作ったデモ (Away3D 4.0 + Flint 4.0.1)

実装方法の紹介

ちなみに、こちらのデモは次の２つの記事で紹介した機能を組み合わせて使っています。

パーティクル表現だけれであればAlternativa3D 8.17.0+Flint 4.0.1の組み合わせでもできるのですが、Away3D 4.0のフィルター効果によって全体的に光が膨張するような演出に仕上げることができました。Away3Dは自由度が高くて非常に便利なフレームワークです。

まだまだAway3D 4.0には面白い機能が備わっているようなので、年末・年始に勉強してみようかと思います。

追記

せっかくなので、Alternativa3D版のパーティクルデモも作成してみました。

Demo Alternativa3D 8.17.0 Version

Flintは複数のフレームワークに対応しているので移植は簡単でしたが、Alternativa3D版ではカラー効果が動作しないためモノクロームな見栄えになってしまいました。何かしら対処方法があるかもしれませんが、結構作り込みが必要な気がします。

参考記事

ayato@web – ３次元空間におけるパスの軌跡

Stage3D対応のAway3D 4.0 – パーティクル表現

2012-02-07T15:32:50Z

世間はクリスマスかもしれませんが、今日もFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回はシンプルな3Dのパーティクル表現を試してみました。

demo (Require Flash Player 11.1)
source (Away3D 4.0 alpha / Flint 4.0.1)

パーティクル表現には、Flint Particlesというパーティクルライブラリを使っています。本ブログでは以前、パーティクル表現のためのAS3ライブラリ「Stardust」を紹介したことがありましたが、FlintはStardustのベースになったライブラリです。Flintは昔から開発が進んでおり、Stage3Dの各種フレームワーク(Away3D, Alternativa3D, Flare3D, Starling)にも対応しているなど、今も積極的にコミットされています。

ということで、Stage3D対応のAway3D 4.0 alphaとFlintとの組み合わせはどんなものかと、以前作ったPapervision3D + Stardustのデモ「[Stardust] 3Dオブジェクトの軌道にパーティクルをつける」を移植してみました。

感触としては、

FlintがStardustとかなり似たAPIなので使いやすい(とはいえ、クラス数が多く制御としては難しいライブラリの部類に入ると思います)
今回のデモでは使っていませんが、パーティクル別にスケール・アルファ・色の加工ができ様々な表現が試せる
オブジェクトのキャッシュ機構が搭載されていて、パフォーマンス軽減の工夫がされている
パーティクルの個数を減らせば、Stage3DのCPUモードでもそれなりに動く(描画より計算にコストがかかっている印象)

という感じで、使い方さえ習得すれば結構な表現を試せそうな印象を持ちました。

次回は、Away3Dのフィルター機能とパーティクル機能を組み合わせたデモを紹介したいと思います。

Stage3D対応のAway3D 4.0 – 被写界深度表現

2012-02-07T15:33:03Z

引き続きFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回は定番の被写界深度表現を試してみました。

demo (Require Flash Player 11.1)
source (with Away3D 4.0 alpha)

前回紹介したとおりAway3Dには「DepthOfFieldBlur3D」というフィルター機能が備わっています。ただ、それは癖があり使いにくいので、このデモでは自前の処理にて実装しています。被写界深度表現の作り方については本ブログで既に紹介したことがありますが(下記リンク参照)、改めてAway3Dでの実装方法を紹介します。

PaperVision3D 2.0で被写界深度が実現できたよ

ビットマップキャッシュの作成

ブラーフィルター(ぼかし)はリアルタイムに実行すると処理負荷が大きくなるので、予めぼかしを適用したビットマップを作成しておきます。次のスプライトシートは例ですが、ぼかしの強弱をつけた複数枚の画像を連番で用意するということが想像できればOKです。

ActionScriptでは、次のようなfor文を使って、配列にキャッシュ画像を保持しておくと便利でしょう。

for (var i:int = 0; i < ブラーの回数; i++)
{
	var blurFilter:BlurFilter = new BlurFilter(i, i, 4);
	var bmd:BitmapData = new BitmapData(128, 128, true, 0xFF000000);
	bmd.draw(orijinal);
	bmd.applyFilter(bmd, bmd.rect, new Point(), blurFilter);
	// save
	blurs[i] = bmd;
}

ビルボードの作成

ビルボードというのは、大雑把に言うと3D表現で常に正面を向いたオブジェクトのことを指します。ビルボードにしてしまうと、3D上の角度は表現できなくなりますが、そのかわりに3D描画や計算の負荷を抑えることができるので、大量にオブジェクトを表示したい場合には有効な手法です。

Away3Dでは、「Sprite3D」クラスがその機能にあたるので、これをインスタンス化して3D空間(scene)に追加しておきます。

var ball:Sprite3D = new Sprite3D(マテリアル, 横幅, 高さ);
scene.addChild(ball);

カメラとオブジェクトの距離の計算

被写界深度を計算するうえで、カメラと個々のオブジェクトとの距離の計算が必要になります。Away3DではObject3D.positionプロパティーにてローカル座標を、Object3D.scenePositionでワールド座標を取得できます。座標はFlash標準のflash.geom.Vector3D型なので、次のメソッドを呼び出せば、3D空間内の2点間の距離を計算できます。

var distance:Number = Vector3D.distance(camera.position, p.scenePosition);

ぼかしの適用

上記で求めた距離を使って、予めプリキャッシュしたビットマップのどれを割り当てるか計算します。とりあえず私は次のような計算をしましたが、計算によって配列の加減、上限を超えないように数値を丸めています。

var distance:Number = Math.abs(Vector3D.distance(camera.position, p.position) - FOCUS_POSITION);
var blurVal:int = Math.floor((distance / FOCUS_RANGE) * BLUR_DEPTH);
blurVal = Math.max(0, Math.min(BLUR_DEPTH - 1, blurVal));

そしてオブジェクトのmaterialプロパティーに新しいマテリアルを割り当てます。Away3D 4.0ではマテリアルの動的な差し替えはマテリアルオブジェクトの参照を差し替える形になります。

var p = particles[i];
var material = materials[blurVal]
p.material = material;

Stage3D対応のAway3D 4.0 – フィルター(ポストエフェクト)

2012-02-07T15:33:17Z

昨日の記事に続いてFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回はフィルター機能を使ったデモを作成しました。プルダウンでエフェクトの種類を選べるので、試してみてください。

demo (Require Flash Player 11.1)
source (with Away3D 4.0 alpha)

Away3Dにはフィルタ機能が備わっていて、これはStage3D側で処理するポストエフェクトの部類になります。備わっているフィルター機能は次の通り。

▼RadialBlurFilter3D (放射状ぼかし)

▼MotionBlurFilter3D (モーションブラー)

※モーションブラーはfumixさんが以前Papervision3Dを使って紹介していたこともありました。
MOTION BLUR DEMO 001 (PV3D) – wonderfl build flash online
Away3D 4.0ではStage3D側でフィルター機能を使うことができるので、処理負荷もほとんど無視できるレベルになっています

▼BlurFilter3D (ぼかし)

▼BloomFilter3D (白くする効果)

▼DepthOfFieldFilter3D (被写界深度)

※DepthOfFieldFilter3Dは少し特殊なので、別のデモにて試しています。

demo (Require Flash Player 11.1)
source (with Away3D 4.0 alpha)

使い方

実装方法も至ってシンプルでView3Dオブジェクトのfilter3dプロパティーに、使いたいフィルターをセットするだけです。このあたりはFlashの通常のディスプレイオブジェクトへのフィルター適用方法と似ています。

var view = new View3D();
view.filters3d = [new BlurFilter3D(16, 16)]; // ←ココ
addChild(view);

このフィルタ機能は実はカスタマイズすることができて、9ballsyndromeさんが既にその作り方を日本語を紹介しています。その場合は、AGALを直接書くことになるので難易度が高いかもしれませんが。

Away3Dはこういうフィルター機能が備わっているなど、機能の華やかさでは他のライブラリに比べてリードしているように思います。

次回は定番の被写界深度表現について紹介します。

Stage3D対応のAway3D 4.0 – ダイナミックシャドー

2012-02-07T15:33:39Z

Flash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver 4」を試してみました。これはAway3Dに標準搭載されている影の表現を使ったデモです。

demo (Require Flash Player 11.1)
source (with Away3D 4.0 alpha)

ダイナミックシャドー（動的な影）については、3年前に「Papervision3D演出サンプルNo.05:Shadow Cubes」という記事でPapervision3Dを用いて試したことがありました。その時はリアルタイムな影の計算は処理負荷のコストが高く、実装方法もアクロバティックなテクニックが必要だったため、案件で使いづらいという印象を持ちました。

デモを見ればお分かりのとおり、今年になってFlash PlayerがフルにGPUに対応したことで、処理負荷の点は解決しました。では実装方法の難易度についてですが、Away3D 4.0 alphaには素晴らしいことにダイナミックシャドーが標準搭載されていて、コードもシンプルです。実際のコードを紹介すると次のとおり。

var light = new DirectionalLight();
scene.addChild(light);

var material = new ColorMaterial(0xFFFFFF);
material.shadowMethod = new SoftShadowMapMethod(light); // ←ココ(1)
material.lights = [light]; // ←ココ(2)

var plane = new Plane(material);
plane.castsShadows = true; // ←ココ(3)
scene.addChild(plane);

ポイントとしては(1)で影の質感を設定、(2)で影響を受ける照明を設定（複数の指定が可能）、(3)で3Dオブジェに対して影の影響を受けるかどうかを設定ということになります。

このブログではStage3D対応の3DライブラリとしてAlternativa3D ver8を主に紹介してきましたが、ここに来てAway3Dが実はかなり優れていることに気づきました。主にいいと思ったのは次の点においてです。

Flash界隈で人気の3DライブラリPapervision3Dと似たAPI (Away3DはPapervision3Dの派生ライブラリ)
プリミティブオブジェクトやマテリアルの種類が豊富
フィルターやフォグ、ダイナミックシャドー、3Dテキストなど機能が豊富
物理演算やパーティクルなどサードパーティのライブラリも強力
Alternativa3Dに比べてシンプルにコードを記述できる
オープンソースである

この他にもオレンジさんの勉強会の資料Flashup 第12回発表資料「最新のFlash3Dを使ってコンテンツを作ってみようAway3D入門講座」にAway3Dの機能が詳しく掲載されています。

処理パフォーマンスはAlternativa3DやFlare3Dのほうが若干優れている印象ですが、GPU支援を受けるのであれば処理パフォーマンスは気にならないかなとも思いました。

Away3Dについては作り貯めたデモが幾つかあるので、数回に分けてブログで紹介したいと思います。

Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」

2012-02-07T15:33:51Z

Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」を使ってデモを作ってみました。AwayPhysics は名前のとおり Away3D 4.0 alpha (Stage3D版) 対応の物理演算エンジンで、今までの3D物理演算ライブラリよりも高速に動作します。

[立方体バージョン 100個]

Demo
Source

[球体バージョン 100個]

Demo
Source

以前「ActionScript 3.0 での 3D 物理演算ライブラリjiglibflash」という記事で JigLib を紹介したことがありましたが、次の記事によると jiglib よりも AwayPhysics のほうが高速とのこと。JigLib と AwayPhysics との比較デモが紹介されています。

Away3D 4.0 jiglib vs Bullet « DevJamMemo

冒頭のデモは、note.xさんの次の記事と比較すると JigLib (Flash Player 10 向け)との動作速度の違いが掴めるかも。

note.x | [Away3D] JigLibFlash for Away3D

AwayPhysics は業界標準の Bullet エンジンを Alchemy (アルケミー)で固めており、API は JibLib に似たものになっているため今まで 3D で物理演算をやっていた方にとっては比較的とっつきやすいライブラリです。まだ開発途中なのでAPIに変更があるかもしれませんが、動作速度の点で使い物にならなかった JigLib よりは活路が見いだせそうな気がします。

ちなみにexamplesのデモですが、カーゲームにも利用できるようです。今後のライブラリの発展が楽しみです。

VehicleTerrainTest

Yahoo! Creative AwardでHTML5 賞を頂きました

2012-02-07T15:45:15Z

お手伝いさせていただいたコーポレートサイト「amanagroup INDEX」がYahoo! JAPAN インターネットクリエイティブアワードのHTML5賞を、受賞しました。

関係者のみなさま、おめでとうございます＆お疲れさまでした。HTML5に挑戦する最高の機会にお誘いくださいまして、本当にありがとうございました。

ちなみに今月のWebDesigning12月号(2011)の特集「先端事例に学ぶjQueryのテクニック」でも掲載されています。もし興味がありましたらそちらもチェックくださいませ。

Web Designing 連載記事と特集掲載のお知らせ

以下、クレジットです。

produced by amanaholdings inc.
Created by amanainteractive inc.
Creative Direction: Sachiko Oyamada
Art Direction & Design: Koji Nishida (RAKU-GAKI), Tomomichi Ikeda (ungraffi)
Design: Hiromi Taketa
Technical Direction & Program: Yasunobu Ikeda (ClockMaker)
Direction: Eiji Murakami, Sachiko Oyamada
Produce: Takayuki Yukawa, Manabu Hashiguchi

—————————————————

あ：Kentauros Yasunaga/spoon
か：Ryohei Takanashi/acube
さ：Uroku/vda
た：Kazuki Mori/hue
な：Ryohei Takanashi/acube
は：NABLA
ま：hydroid
や：hydroid
ら：Syunsuke Iguchi/hue
わ：Sakiko Ono/hue

Art Direction:
Sachiko Oyamada (あ,か,さ,た,な,は,や,ら)
Koji Nishida (ま,わ)
Eiji Murakami (か)

Movie:
Tsukahiro Yanahara/ spoon（all）

Links for 20120206 [はてなブックマーク]

2012-02-07T00:00:00-08:00

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanv...

yasu-log ブログを書きました - HTML5 Canvasを始めよう：EaselJSを使った流体パーティクルの入門
Unity - Flash in a Flash Winners

Unity - Flash in a Flash Winners
Tail Drift by Cameron Owen Tail Drift is a simple arcade racer in which you maneuver a red plane along a 3D candy-striped tubular track. The track runs below, above, and around floating islands and ho...

yasu-log ［B!］UnityのFlashコンテストの結果
大阪てら子 42「大喜利クイズ大会と忘年会」 - sakotsu inspire

大阪てら子 42「大喜利クイズ大会と忘年会」 - sakotsu inspire
ちょっとそこまで webの勉強しに行ってくるあけましておめでとうございます！ようやく落ち着いたので、去年12月に開催した大阪てら子42「大喜利クイズ大会と忘年会」に持っていったネタなど書かせてくださいお願いします。大喜利のルール説明大阪てら子42「大喜利クイズ大会と忘年会」では、今回のために用意したデスクトップアプリを大画面テレビに映して参加者のみなさんでクイズを楽しみました。 201...

yasu-log ［B!］大阪てら子 42「大喜利クイズ大会と忘年会」 - sakotsu inspire
Flash を HTML5に変換するアプリ「SWF Animation Converter」を利用して、キーボード操作できるキャラクターアニメーションを作成する｜マルチデバイスLab. - Multi Device Lab.

Flash を HTML5に変換するアプリ「SWF Animation Converter」を利用して、キーボード操作できるキャラクターアニメーションを作成する｜マルチデバイスLab. - Multi Device Lab.
去年公開させて頂きました、「SWF Animation Converter」 (以下SAC) がお陰様で多くDLいただき有難い限りの糸数でございます。しかし、「アプリで変換はできたけど、マウスアクションとか付けられないの？」「キーボード操作したいけどどうすれば？」などの質問をよく受けます（受けるということにしておいて下さい）。確かにそういうケース多々ありますよね。しかしそこはご安心を！...

yasu-log ［B!］Flash を HTML5に変換するアプリ「SWF Animation Converter」を利用して、キーボード操作できるキャラクターアニメーションを作成する
Edge アニメーションの HTML への埋め込み方法 - akihiro kamijo

Edge アニメーションの HTML への埋め込み方法 - akihiro kamijo
Edge を使って制作するアニメーションを "コンポジション" と呼びます。Flash での SWF に相当するものです。 Edge で作ったコンポジションは、そのまま既存の HTML ファイルに組み込めます。もしくは、Edge で既存の HTML ファイルを開いて、その中にコンポジションを制作するという使い方もできます。現時点の Edge プレビュー 4 では、複数のコンポジションを同時に扱う...

yasu-log ［B!］Edge アニメーションの HTML への埋め込み方法 - akihiro kamijo
Photoshop Vip

Photoshop Vip
アーティスト美術館 vol.9 Dan Vojtech 2009年4月16日　　　チェコ共和国出身の1986年生まれ、若干23歳の新鋭フォトグラファーDan Vojtech。スケートボードやBMX、スノーボードなどのエクストリーム系スポーツを中心に、ファッション関係の撮影なども行っている。もっと読む

yasu-log

Links for 20120205 [はてなブックマーク]

2012-02-06T00:00:00-08:00

uupaa looper 見っけたよー - latest log

uupaa looper 見っけたよー - latest log
(ε・◇・)з 通常の for in ループより 20%～75% 低コストな、うーぱー式ループのご紹介だよ～スコア http://jsperf.com/perf-for-in-loop-vs-pre-enum-keys-for-loop (100 times x 200 keys) Browser for-in loop uupaa-looper Chrome 16.0.912.77 14,7...

yasu-log ［B!］uupaa looper
書籍案内：ActionScript 3.0 パフォーマンスチューニング｜gihyo.jp … 技術評論社

書籍案内：ActionScript 3.0 パフォーマンスチューニング｜gihyo.jp … 技術評論社
2012年2月10日発売野中文雄　著 B5変形判／336ページ定価3,360円（本体3,200円） ISBN 978-4-7741-4992-9 この本の概要本書のテーマは，ActionScript 3.0の処理をいかに軽く，あるいは速くするかという技術やコツの紹介です。Flashでは，3Dやフィルタが駆使された派手な表現が求められています。こうした要望に応えるためには，パフォーマンスに十分...

yasu-log ［B!］ActionScript 3.0 パフォーマンスチューニング - gihyo.jpの書籍案内
特産の「もっさみな」第34回「AIRKinectで遊んでみた。」の巻

特産の「もっさみな」第34回「AIRKinectで遊んでみた。」の巻
AIRのネイティブ拡張を使って、作成されたライブラリ。 Kinectセンサーと連携した「AIRKinect」でこんなんやってみました。（ちなみに2月2日発売した商用利用が可能な Kinect for Windowsで連携しています。）（動作がカクカクしているのは録画中な為＆ノートPCな為。）詳細は以下の勉強会でお話します。 Flex 勉強会第 164 回＠東京ネイティブ拡張 for ...

yasu-log ［B!］特産の「もっさみな」第34回「AIRKinectで遊んでみた。」の巻 / Adobe AIRとKinectは相性良さそうです
ShaderLab: Embedding Shaders In A Web Page | Jean-Marc Le Roux

ShaderLab: Embedding Shaders In A Web Page | Jean-Marc Le Roux
As you can read in the online Backsun FAQ, we are currently working on a tool called the "ShaderLab". This tools provides a visual programming environment to create, debug and test shaders in a user-f...

yasu-log ［B!］Stage3Dのシェーダーをブラウザ上で作るのことのできるウェブサービス「ShaderLab」. Flexアプリケーション。
feb19.jp blog - Flash の SWZ ファイルって何ぞや

feb19.jp blog - Flash の SWZ ファイルって何ぞや
textlayout.swz とか。何も考えずに使わないといけないから使っていましたけど。このファイルについてちょっと詳しく知りたくなったので調べてみました。アイコンは Mac OS X の Bootcamp Windows に似ていますが関係はなさそうです。 Adobe の Flash Professional CS5.5 のヘルプをみると http://kb2.adobe.com/jp/cp...

yasu-log ［B!］Flash の SWZ ファイルって何ぞや - feb19.jp blog
Dynamic Dummy Image Generator - DummyImage.com

Dynamic Dummy Image Generator - DummyImage.com
Sometimes you just need a placeholder image right at your finger tips. Just enter the width + x + height at the end of this URL and off you go! Example: http://dummyimage.com/640x480 FAQ What is this?...

yasu-log ［B!］ダミー画像を作るサービス
Rokko chan

Rokko chan
Tweet Q.ゲームパッドを使ってプレイしたい A.JoyToKeyをお使い下さい Q.Windos7だと画面がちらつく A.AEROモードをOFFにして下さい STAFF

yasu-log ［B!］Flashアクションゲーム「Rokko Chan」
会社員アヤのFacebook生活（4）～困った上司からの申請をかわせ！「制限リスト」 - nanapi Web

会社員アヤのFacebook生活（4）～困った上司からの申請をかわせ！「制限リスト」 - nanapi Web
仲のいい同僚や先輩、なつかしい友人の近況が並ぶニュースフィード。自分の日常に「いいね！」やコメントをもらったり、みんなの投稿に「いいね！」したり。Facebookの楽しさが、ちょっと分かってきた。そう思い始めた矢先に、ある友だち申請に、私の背筋が凍った。「げ、マスオ……」磯崎満寿夫。彩が務める会社の取締役、56歳。挨拶代わりに「いい尻だねぇ」などとあからさまなセクハラ発言をするため、社内の女子...

yasu-log ［B!］会社員アヤのFacebook生活（4）～困った上司からの申請をかわせ！「制限リスト」
SWCを利用したFlash制作の分業ワークフロー：FlashとFlash Builder連携開発 | デベロッパーセンター

SWCを利用したFlash制作の分業ワークフロー：FlashとFlash Builder連携開発 | デベロッパーセンター
Flash Professional CS5.5では、［パブリッシュ設定］ダイアログが改善され、SWC単体でのパブリッシュができるようになりました。本記事では、Flash Professionalでタイムラインアニメーションやグラフィック素材を作成するデザイナーと、Flash BuilderでActionScriptをコーディングするデベロッパーが、よりスムーズに共同作業を行うためのSWCの使い方...

yasu-log ［B!］SWCを利用したFlash制作の分業ワークフロー：FlashとFlash Builder連携開発 / ActionScript派なら、Flash ProのコンパイルではなくFlex SDKコンパイルの開発方法にシフトするのがお勧め

Links for 20120203 [はてなブックマーク]

2012-02-04T00:00:00-08:00

Flash11で3Dゲーム作成講座その１２｜ピック社長のブログ

Flash11で3Dゲーム作成講座その１２｜ピック社長のブログ
ピック社長のブログ FlashPlayer10対応3Dエンジン「Away3D Lite」とFlashMediaServer互換サーバ「Red5」を使った 3Dチャットを開発中です。記事一覧 Flash11で3･･･ » Flash11で3Dゲーム作成講座　その１２ 2012-02-03 21:15:34NEW ! テーマ：Flash11で3Dゲーム作成講座今回は3D界の大御所の大西武さんが開発...

yasu-log ［B!］Flash11で3Dゲーム作成講座その１２｜ピック社長のブログ
Flash Daily: Stage3D lab: Sound Spectrum visualizer in Stage3D ...

Flash Daily: Stage3D lab: Sound Spectrum visualizer in Stage3D ...

yasu-log ［B!］Stage3Dのサウンドスペクトラムのデモ
「汎用のUI技術」として広がるHTML5 - ＠IT

「汎用のUI技術」として広がるHTML5 - ＠IT
オープンウェブ・テクノロジー代表白石俊平 2012/2/2 すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、ブラウザのアップデート情報をお伝えする連載を始めるに当たってどうもこんにちは。白石俊平と申します。今回から定期的に、HTML5をはじめとしたWeb標準、そして業界の動向をまとめた記事を発信していきます。ぼくは、Web開発者向け...

yasu-log ［B!］白石俊平氏によるHTML5の紹介記事
Facebook Platform ｘ Flash Platformで開発するアプリケーションのアーキテクチャーの理解 | デベロッパーセンター

Facebook Platform ｘ Flash Platformで開発するアプリケーションのアーキテクチャーの理解 | デベロッパーセンター
リッチなユーザー体験の開発を可能にするのがFlash Platform。そして、リッチなソーシャル体験の開発を可能にするのがFacebook Platformです。この2つのプラットフォームを組み合わせれば、インタラクティビティと応答性、表現力にすべて優れるだけでなく、ソーシャルネットワーキングの機能性をも盛り込んだ充実したアプリケーションが開発できます。この記事では、Facebook Plat...

yasu-log ［B!］ADC - Facebook Platform ｘ Flash Platformで開発するアプリケーションのアーキテクチャーの理解

Links for 20120202 [はてなブックマーク]

2012-02-03T00:00:00-08:00

Google・Android女子部共催セミナーまとめ - Togetter

Google・Android女子部共催セミナーまとめ - Togetter
Google AdMobチームとAndroid女子部で共催した「スマートフォンアプリのマーケティング・マネタイズセミナー」のまとめです。 Googleからスマホマーケットの概要・マネタイズの考え方などを講演したほか、有名アプリ開発者によるトークセッション、女子部メンバーからの質問にGoogle社員・アプリ開発者が答えるQ&Aコーナーなど盛りだくさんの内容。終わったあとはGoogleのカフェテリア...

yasu-log ［B!］Android女子部共催セミナーまとめ
にゃあプロジェクト - ウェブログ - [AS3.0] StageVideoに挑戦！ (3)

にゃあプロジェクト - ウェブログ - [AS3.0] StageVideoに挑戦！ (3)
Flash Player 10.2 から採用された StageVideo を学習するよ。自作コントローラーを使って、サンプルFLVを再生してみるる。 StageVideoのズームとパンを試してみるよ。　要 Flash Player 10.2 以上 package { import flash.display.Sprite; import flash.net.NetConnect...

yasu-log ［B!］StageVideoのズームとパン - にゃあプロジェクト
執筆しました：工学社月刊I/O Adobe AIR iPhone/iPadアプリ開発第5回｜ Classmethod.dev()

執筆しました：工学社月刊I/O Adobe AIR iPhone/iPadアプリ開発第5回｜ Classmethod.dev()
こんにちは。くろの（福田）です。工学社さんの月刊I/O 2012年2月号でAdobe AIRを用いてのiPhone/iPadアプリ開発に関する連載記事の第5回を執筆しました。 Adobe AIR iPhone/iPadアプリ開発第5回画面遷移 http://www.kohgakusha.co.jp/books/detail/4044 今回は一覧＞詳細のようなスマホでの典型的な画面遷移処理に関...

yasu-log ［B!］執筆しました：工学社月刊I/O Adobe AIR iPhone/iPadアプリ開発第5回
Slice Effect - jsdo.it - Share JavaScript, HTML5 and CSS

Slice Effect - jsdo.it - Share JavaScript, HTML5 and CSS
var image; var stage; init(); function init() { image = new Image(); image.onload = loadHandler; image.src = "http://jsrun.it/assets/s/9/M/o/s9MoT.png"; } function loadHandler(){ var dummyCanvas = doc...

yasu-log ［B!］HTML5 Canvas版のSlice Effect。Flashっぽく作れるEasel.jsとTween.jsを利用。
Flash Daily: AIRKinect Extension is a Native Extension for use...

Flash Daily: AIRKinect Extension is a Native Extension for use...
AIRKinect Extension is a Native Extension for use with Adobe AIR 3.0. AIRKinect allows AIR developers to tap into the rich experience of the Microsoft Kinect and push interactivity to a new level. Two...

yasu-log ［B!］AIRでKinectとStage3Dを連携
Particle Formation

Particle Formation
埋め込み画像（幅64pixel高さ64pixel）の画素をパーティクルに置き換えて表示してみました。OffestPositionLocalアクションで発生位置をずらして画像を作り、BrokenLineLocalアクションで2点間を往復移動させて動作がループしているように見せています。Away3Dのバージョンは4.0.110915 Alphaで、パーティクルシステムは「liaocheng/away3...

yasu-log ［B!］Particle Formation / Away3D 4.0 alphaによる3Dパーティクルデモ
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog

HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog

yasu-log ［B!］HTML5 Canvasを始めよう：ActionScriptっぽく書けるEaselJSとTweenJSを使ってテキストエフェクト
TweenJS: A Tweening & Animation Library for Javascript & HTML5.

TweenJS: A Tweening & Animation Library for Javascript & HTML5.
a tweening & animation library for javascript and html5 TweenJS v0.1 The first official release of TweenJS. Download now. More updates & better examples coming soon. links: download, API documentation...

yasu-log ［B!］メソッドチェーンでかけるTweenJS。jqueryと違ってプレーンな状態でトゥイーンができる。
AIR 3.2, Stage3D and Minko: 100k polygons at 26fps! | Jean-Marc Le Roux

AIR 3.2, Stage3D and Minko: 100k polygons at 26fps! | Jean-Marc Le Roux
AIR 3.2 beta 5 is available on Adobe Labs, but one of the most ancitipated new features is the addition of Stage3D for Android and iOS devices (iPhone and iPad). Thanks to AIR 3.2 and Stage3D, Flash d...

yasu-log ［B!］Stage3D対応ライブラリMinkoではモバイルAIR 3.2で10万ポリゴンを26fpsで再生可能
IE9、IE8、IE7、IE6がすべてシェア増 - 1月デスクトップブラウザ | エンタープライズ | マイナビニュース

IE9、IE8、IE7、IE6がすべてシェア増 - 1月デスクトップブラウザ | エンタープライズ | マイナビニュース
Net Applications - Usage Share Statistics for Internet Technologies. Net Applicationsから2012年1月のデスクトップブラウザシェアが発表された。1月はこれまでの傾向と異なり、これまで強い成長を続けてきたGoogle Chromeがシェアを減らし、それに代わるようにIEがシェアを増やしている。IEはすべてのバージョ...

yasu-log ［B!］IE9、IE8、IE7、IE6がすべてシェア増 - 1月デスクトップブラウザ - マイナビニュース / HTML5がますます遠のきますね
iPhoneは、ソフトバンクとauのどっちがいいの？山手線で実際に比べてみたら、驚愕の結果に…！:らばQ

iPhoneは、ソフトバンクとauのどっちがいいの？山手線で実際に比べてみたら、驚愕の結果に…！:らばQ
iPhoneは、ソフトバンクとauのどっちがいいの？山手線で実際に比べてみたら、驚愕の結果に…！昨年秋から発売された、iPhoneの最新機種「iPhone 4S」は、ソフトバンクとauの2社から発売され、どちらを買うべきか議論が広がったのは記憶に新しいところ。私も正直どちらを買おうか、真剣に悩みました…。しかしネットでは色々な比較が話題になったものの、携帯電話にとって最も重要な「通話品質」を真...

yasu-log ［B!］iPhoneは、ソフトバンクとauのどっちがいいの？山手線で実際に比べてみたら、驚愕の結果に…！
JavaScript 3DレンダリングエンジンのThree.jsを試す | KRAY Inc

JavaScript 3DレンダリングエンジンのThree.jsを試す | KRAY Inc
こんにちは。 KRAYアルバイトの浅海です。今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。半信半疑で使ってみたところ、たしかに...

yasu-log 一年ぐらい前に試したら親子構造ができなくて行列を使わざるを得なかったのですが、今はどうなんでしょう。

Links for 20120201 [はてなブックマーク]

2012-02-02T00:00:00-08:00

ForceMap Arrows - jsdo.it - Share JavaScript, HTML5 and CSS

ForceMap Arrows - jsdo.it - Share JavaScript, HTML5 and CSS
var NUM_PARTICLE = 200; var arrowImage; var forceMapImage; var forceMapCanvas; var forceMapIndexA = 0; var forceMapIndexB = 1; var stage; var particleList = []; init(); function init() { forceMapImage...

yasu-log ［B!］EaselJSでパーティクルデモ (ActionScriptからの移植)
HTML5+Three.jsで3Dプログラミングに挑戦！ | 宇都宮ウエブ制作所

HTML5+Three.jsで3Dプログラミングに挑戦！ | 宇都宮ウエブ制作所
丸坊主なのに寝癖が付く男、正宗です。前回の記事「Actionscript3erが覚えるJavascriptでのクラス開発まとめ」でjavascriptをActionscript3ライクに書く方法をまとめてみたので、今度は練習がてらHTML5をさわってみました。 WebGL版です。クリックで別ウインドウで開きます。画像クリックすると別ウインドウで開きます。うまく動かない場合はWebGLを使わな...

yasu-log ［B!］HTML5+Three.jsで3Dプログラミングに挑戦！ - 宇都宮ウエブ制作所
【レビュー】タブレット版Photoshopの使い心地やいかに!? 「Adobe Touch Apps」レビュー | クリエイティブ | マイナビニュース

【レビュー】タブレット版Photoshopの使い心地やいかに!? 「Adobe Touch Apps」レビュー | クリエイティブ | マイナビニュース
アドビシステムズが2011年11月より提供を開始したタッチスクリーン用アプリ「Adobe Touch Apps」。本アプリは「Adobe Photoshop Touch」、「Adobe Collage」、「Adobe Debut」、「Adobe Ideas」、「Adobe Kuler」、「Adobe Proto」という6種類のAndroidアプリで構成されている(iPad対応版も今後リリース予定...

yasu-log ［B!］タブレット版Photoshopの使い心地やいかに!? 「Adobe Touch Apps」レビュー
Flash Daily: ND2D v0.9.13 released (+ best practices howto) ...

Flash Daily: ND2D v0.9.13 released (+ best practices howto) ...
ND2D v0.9.13 released (+ best practices howto) From Lars Gerckens: “I just released version 0.9.13 of my Stage3D engine. Meanwhile is ND2D in a very good and stable state. All features that I planned ...

yasu-log ［B!］ND2Dの最新版 0.9.13がリリース
gotoAndLearn() - Object-Oriented JavaScript: This tutorial covers the basics of creating classes, properties and methods in JavaScript.

gotoAndLearn() - Object-Oriented JavaScript: This tutorial covers the basics of creating classes, properties and methods in JavaScript.
Object-Oriented JavaScript - This tutorial covers the basics of creating classes, properties and methods in JavaScript.

yasu-log ［B!］gotoAndLearn()でまさかのJavaScript講座
にゃあプロジェクト - ウェブログ - [AS3.0] StageVideoに挑戦！ (1)

にゃあプロジェクト - ウェブログ - [AS3.0] StageVideoに挑戦！ (1)
Flash Player 10.2 から採用された StageVideo を学習するよ。自作コントローラーを使って、サンプルFLVを再生してみるる。動画提供: @clockmaker さん要 Flash Player 10.2 以上 package { import flash.display.Sprite; import flash.net.NetConnection; ...

yasu-log ［B!］StageVideoに挑戦 - にゃあプロジェクト
インフォメーション：JaGraプロフェッショナルDTP&Webスクール，「ActionScript 3.0 パフォーマンスチューニング―速い，軽い，うまいスクリプティングを目指す」を2月25日に開催｜gihyo.jp … 技術

インフォメーション：JaGraプロフェッショナルDTP&Webスクール，「ActionScript 3.0 パフォーマンスチューニング―速い，軽い，うまいスクリプティングを目指す」を2月25日に開催｜gihyo.jp … 技術
インフォメーション JaGraプロフェッショナルDTP&Webスクール，「ActionScript 3.0 パフォーマンスチューニング―速い，軽い，うまいスクリプティングを目指す」を2月25日に開催 2012年2月2日 JaGra, DTP, Webデザイン, ActionScript, Flash この記事を読むのに必要な時間：およそ 1 分 2012年2月25日，社団法人日本グラフィックサービ...

yasu-log ［B!］JaGraプロフェッショナルDTP&Webスクール，「ActionScript 3.0 パフォーマンスチューニング―速い，軽い，うまいスクリプティングを目指す」を2月25日に開催 - gihyo.jp
【web系勉強会】大阪てら子43「みんなで教え合おうぜ！特別授業 vol.2」 : ATND

【web系勉強会】大阪てら子43「みんなで教え合おうぜ！特別授業 vol.2」 : ATND
日時 : 2012/02/04 14:00 to 18:30 定員 : 15 人会場 : AID-DCCさん会議室（入口が閉まっている場合は701のボタンを押してください）（大阪市中央区南久宝寺町4丁目5番17号） URL : http://https://www.aid-dcc.com/#map_area 管理者 : sakotsu ハッシュタグ : #teraco 【　ごあいさつ　】こん...

yasu-log ［B!］大阪てら子43「みんなで教え合おうぜ！特別授業 - 2/4開催 / 『HTML5で作るスマホアプリ』『AfterEffects超入門』『時東ぁみちゃんと握手する方法』など

Links for 20120131 [はてなブックマーク]

2012-02-01T00:00:00-08:00

ActionScript 3.0 パフォーマンスチューニング－速い、軽い、うまいスクリプティングを目指す - F-siteセミナー

ActionScript 3.0 パフォーマンスチューニング－速い、軽い、うまいスクリプティングを目指す - F-siteセミナー
■Twitter: @FumioNonaka / Mailing List: ActionScript 3.0 JaGra PROFESSIONAL SCHOOL Seminar ActionScript 3.0 パフォーマンスチューニング－速い、軽い、うまいスクリプティングを目指す 2012年2月25日土曜日 JaGraプロフェッショナルDTP&Webスクールセミナールーム 13:30～1...

yasu-log ［B!］‎2月25日土曜日「ActionScript 3.0 パフォーマンスチューニング－速い、軽い、うまいスクリプティングを目指す」(無料)の参加申し込み開始
ブログにおける最高の戦術とは、更新すること。なのか。

ブログにおける最高の戦術とは、更新すること。なのか。
いや、まめにブログを更新することがえらいってわけではないのだけれど、定期的にブログを更新できる人はすごいなぁといつも感心しています。ブログを更新するモチベーションは一体どこから来るのか。途中で書くのに飽きたりしないのか。ゲームしたり漫画読んだり寝たり他に趣味ができたり、ブログに対する情熱が失せてきたりしないのか。言ってみれば、ブログを更新し続けること自体がもう奇跡みたいなもので、少し気を抜けば...

yasu-log ［B!］ブログにおける最高の戦術とは、更新すること。なのか。 / ログを残せなくなったブロガーは、そこでブロガー人生が終了してしまう
オライリー・ジャパンのePUBフォーマットを支える制作システム - O'Reilly Japan Community Blog

オライリー・ジャパンのePUBフォーマットを支える制作システム - O'Reilly Japan Community Blog
オライリー・ジャパンから先日発表されたプレスリリース「ePUBフォーマットによる電子書籍のラインナップを開始します」にあるとおり、弊社トップスタジオはオライリー・ジャパンとの共同事業として、ePUBフォーマットでの電子書籍の制作を開始しました。トップスタジオではこのePUBフォーマット電子書籍の出版候補の選定、翻訳、編集、そしてePUB制作までに関わっています。本稿では、このePUBの制作プロセ...

yasu-log ［B!］オライリーのePubを支える制作フォーマット
にゃあプロジェクト - ウェブログ - [AS3.0] StarlingでWaveParticleに挑戦！

にゃあプロジェクト - ウェブログ - [AS3.0] StarlingでWaveParticleに挑戦！
そうだ！ @clockmaker先生のアレを作ってみよう！「Starling Framework 演出サンプル No.01: パーティクル | ClockMaker Blog」要 Flash Player 11 以上要注意サ...

yasu-log ［B!］StarlingでWaveParticleに挑戦！ - にゃあプロジェクト
女子中学生が開発したアプリ「iBento」リリース　お弁当作りを手助け - ねとらぼ

女子中学生が開発したアプリ「iBento」リリース　お弁当作りを手助け - ねとらぼ
女子中学生が開発したアプリ「iBento」リリース　お弁当作りを手助け「iBento」は中学2年生の生徒らが開発キャンプで作ったiPhoneアプリが公開された。iPhoneで弁当のおかずを配置したり、レシピを検索できる。 [ITmedia] 共有するプリント／アラート女子中学生のチームが開発したiPhoneアプリ「iBento」が1月31日、正式リリースされた。お弁当作りを手助けするアプリだ...

yasu-log ［B!］女子中学生が開発したアプリ「iBento」リリース　お弁当作りを手助け
ASCII.jp：Android版iPod touch!?　「Samsung GALAXY Player5.0」

ASCII.jp：Android版iPod touch!?　「Samsung GALAXY Player5.0」
昨年海外で発売されたサムスン製5型メディアプレーヤー「GALAXY Player5.0」がJan-gle秋葉原本店に入荷した。ポケットに十分収納可能な5型サイズを採用する「GALAXY Player5.0」 GALAXY Player5.0はいわばiPod touchのGALAXY版といえる、5型液晶パネル採用のAndroid OS搭載メディアプレーヤー。Androidマーケットに対応するため、...

yasu-log ［B!］Android版iPod touch!?　「Samsung GALAXY Player5.0」。Jan-gle秋葉原本店で税込2万7800円で販売中。AIR for Androidの検証用に・・・
Flash Daily: Napoleon - extending ND2D with physics & more. ...

Flash Daily: Napoleon - extending ND2D with physics & more. ...
Napoleon - extending ND2D with physics & more. This experiment adds the 2D physics of Nape and some extra 2D object types to the 2D GPU accelerated ND2D framework.

yasu-log ［B!］Napoleon - ND2Dの物理演算拡張ライブラリ
CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル | Webロケッツマガジン

CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル | Webロケッツマガジン
CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風（ガラス風）ボタンにどこまで近づけるか？というのを実際にやってみました。チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います！こんな感じになりました　何はともあれ↓が出来上...

yasu-log ［B!］CSS3でガラス玉を作るチュートリアル
EaselJS Demo - Text Effect

EaselJS Demo - Text Effect

yasu-log ［B!］easel.js + tween.jsを使用したcanvasアニメーションサンプル
にゃあプロジェクト - ウェブログ - [AS3.0] ND2DでWaveParticleに挑戦！

にゃあプロジェクト - ウェブログ - [AS3.0] ND2DでWaveParticleに挑戦！
package { import flash.display.Sprite; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.events.Event; import flash.display3D.Context3DRenderMode; ...

yasu-log ［B!］ND2D版のWaveParticleデモ - にゃあプロジェクト
PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。 / Maka-Veli .com

PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。 / Maka-Veli .com
どうも。某サイトのクオリティにがっかりしてる松本です。これからは自分らしく普段通り書いていこうと思いますので宜しくお願い致します。さて、今回はPhotoShopの画質変換・圧縮についてです。ニアレストネイバー法、バイリニア法、バイキュービック法でのリサイズと、保存時の圧縮率パーセンテージ別、更に写真の特徴なんかとを比較すると何か新しい発見があるかなぁとふと思いましたので検証してみます。そもそ...

yasu-log ［B!］PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。
Flash Professional CS5.5 11.5.1 アップデート公開 - akihiro kamijo

Flash Professional CS5.5 11.5.1 アップデート公開 - akihiro kamijo
Flash Pro CS5.5 のアップデートが公開されました。このアップデートには CS5 以来発生していた、ファイルの保存に関する修正が含まれています。時間がかかりましたが、これでようやく安心して CS5.5 を使えるようになったのではないかと思います。そのほかのバグ修正もふくまれていますので、さっそく更新してみて下さい。更新には、ヘルプメニューから「アップデート」を選択し Appl...

yasu-log ［B!］Flash Pro CS5.5アップデートについて / Flash CS5やCS5.5(初期)だとfla/xflが壊れるとどうしようもないので、CS5.5アップデート(Flash Pro 11.5.1)を適用することをお勧めします

Links for 20120130 [はてなブックマーク]

2012-01-31T00:00:00-08:00

にゃあプロジェクト - ウェブログ - [AS3.0] ND2Dを試すのだ！ (26)

にゃあプロジェクト - ウェブログ - [AS3.0] ND2Dを試すのだ！ (26)
Flash Player 11 から採用された Stage3D を学習するよ。 ND2D を試してみるのん。 Node2DクラスとSprite2DCloudクラスとParticleSystem2Dクラスを使ってみるよ。要 Flash Player 11.0 以上 package { import flash.display.Sprite; import flash.display...

yasu-log ［B!］ND2Dによる無限スクロール演出 - にゃあプロジェクト
Flash Daily: GlobalGameJam entry: Jormungand Flash Player 11 +...

Flash Daily: GlobalGameJam entry: Jormungand Flash Player 11 +...

yasu-log ［B!］Flash Player 11のFlare3DとQuickBox2Dで作られたゲーム - 2Dカメラ的な演出も良い感じ
2012-01-30 - 登大遊＠筑波大学大学院コンピュータサイエンス専攻の SoftEther VPN 日記

2012-01-30 - 登大遊＠筑波大学大学院コンピュータサイエンス専攻の SoftEther VPN 日記
筑波大学の構内道路は道路交通法の適用を受けるらしい警察庁交通規制課長による公式見解によると、なんと、筑波大学の構内道路は道路交通法の適用を受けるということが判明しました。これまで、筑波大学の道路では、警察署長の許可無しで宿舎祭などの祭事行為を行ったり、一部を祭などのために占有したり、屋台を出したり、ナンバープレートのない実験用の車を走行させたり、公安委員会が実施する交通規制以外の交通規制を学生団体...

yasu-log ［B!］筑波大学の構内道路は道路交通法上の道路であることが判明 (警察庁の公式見解)
FlashEff | The Flash Animation Tool & Component for Flash CS3

FlashEff | The Flash Animation Tool & Component for Flash CS3
The best animation tool for Flash CS3 and CS4, FlashEff is a transition flash component and framework that handles complex animations, show/hide texts add filters and animated buttons.Order FlashEff P...

yasu-log ［B!］3000個以上の超絶かっこいいFlashのエフェクトプラグイン「FlashEff2」
Ten tips for building better Adobe AIR applications | Adobe Developer Connection

Ten tips for building better Adobe AIR applications | Adobe Developer Connection
Community resources Adobe Cookbooks (share code) CSS Advisor (browser bug fixes) Exchanges (share components) Adobe Labs Adobe Open Source Forums RSS feeds Bug base User groups Adobe Community Profess...

yasu-log ［B!］AIRアプリを作る際に役立つ10個のTips - ADC記事 / メモリリーク対策の勘所やフレームレートスロットルなどを紹介
aidn - CUTE CUTE CAT／daniwell

aidn - CUTE CUTE CAT／daniwell
daniwellP初音ミクオリジナル曲「CUTE CUTE CAT」のFLASH-PVサイトです。

yasu-log ［B!］CUTE CUTE CAT／daniwell - 躍動感のあるPV的なFlash
ND2D best practices – howto - nulldesign // lars gerckens

ND2D best practices – howto - nulldesign // lars gerckens
I just released version 0.9.13 of my Stage3D engine. Meanwhile is ND2D in a very good and stable state. All features that I planned to integrate, are implemented and working. It’s very close to v 1.0....

yasu-log ［B!］ND2Dのベストプラクティスについて。ND2Dはモバイルで真価を発揮する。
Free Flash ebooks from O’Reilly | Flash-db

Free Flash ebooks from O’Reilly | Flash-db
We find an interesting offer by O’Reilly for all the Flash community. In fact is not a book, but three books targeting different aspects of Flash platform. What’s New in Flash Player 11 This book wil...

yasu-log ［B!］オライリーのタダ本。Flash Player11とかAIR 3とか Starlingとか。
Cut the Rope

Cut the Rope
Play Cut the Rope! A mysterious package has arrived, and the little monster inside has only one request…CANDY!By clicking "Free Download" you agree to the Internet Explorer software license terms. Pri...

yasu-log ［B!］Canvasで作られたゲームコンテンツ。例によってIEのプロモーション用。
Mac OS X Lion CSS3 by Alessio Atzeni

Mac OS X Lion CSS3 by Alessio Atzeni
Mac Os X Lion with CSS3 ExperimentI'm sorry to inform you that your browser sucks! This site uses features that require a modern browser - why not try Firefox ? Apple About This Mac Software Updates.....

yasu-log ［B!］CSS3で作られたMacOSX
にゃあプロジェクト - ウェブログ - [AS3.0] MenuDockクラスに挑戦！ (3)

にゃあプロジェクト - ウェブログ - [AS3.0] MenuDockクラスに挑戦！ (3)
MenuDock.as　(jp.nya.project.effects.MenuDock.as) [AS3.0] MenuDockクラスに挑戦！ (1) 参照。 MenuDockIcon.as　(jp.nya.project.effects.MenuDockIcon.as) [AS3.0] MenuDockクラスに挑戦！ (1) 参照。 Main.as package { import f...

yasu-log ［B!］FlashによるMacOSXのDock風メニュー。やっぱFlashのほうがスムーズだね！
Source Code - 720p Video on iPad and Android Tablets with Adobe AIR | Flashstreamworks

Source Code - 720p Video on iPad and Android Tablets with Adobe AIR | Flashstreamworks
My guide to advanced video delivery with AIR for mobile resulted in a lot of interest, but also in the question how to exactly achieve 720p video quality on tablets, and the request for an encoding ex...

yasu-log ［B!］720pのビデオをiPadやAndroidタブレットでAdobe AIRを使って再生する方法
What's new in Flash Builder 4.6 | Adobe Developer Connection

What's new in Flash Builder 4.6 | Adobe Developer Connection
Earlier this year, Adobe released the first version of Flash Builder with support for mobile application development. With this recent release of Flash Builder, Flex and ActionScript developers can bu...

yasu-log ［B!］What's new in Flash Builder 4.6 - Adobe Developer Connection
ADC Presents - Introducing Adobe Edge Preview 4 | Adobe TV

ADC Presents - Introducing Adobe Edge Preview 4 | Adobe TV
The Adobe Developer Connection (ADC) is your source for technical articles and how-to videos that cover Adobe developer products and technologies. More Episodes in this Show Introducing Adobe Edge Pre...

yasu-log ［B!］Adobe Edge Preview 4 の紹介ビデオ - Adobe TV
adamcousins.com » Flash Stage3D, Flex 4.6 and FDT 5

adamcousins.com » Flash Stage3D, Flex 4.6 and FDT 5
Online presence for digital developer Adam CousinsHere is a quick test I created last May using the (then) newly released flash player 11 and away3d 4 classes. It demonstrates some of the new Stage 3d...

yasu-log ［B!］ Away3D 4.0(Stage3D対応版)を使って作られたインタラクティブな地球デモ。FDT 5を使用。

ClockMaker Blog

HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」

使い方 (HTMLエレメント版)

使い方 (Canvas版)

カスタマイズ方法

最後に

関連記事

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門

デモの作り方

フォースマップの作成

パーティクル情報を付与した表示クラスの作成

フォースマップの適用と計算

最後に

HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト

ライブラリの紹介

デモの作り方

画像の一部分のキャプチャ

画像の表示オブジェクトへのインスタンス化

トゥイーンの適用

エンターフレームイベントの実装方法

最後に

関連記事

Stage3D対応のAway3D 4.0 – 3次元空間におけるパーティクル表現

旧来のFlash Playerとのパフォーマンスの違い

実装方法の紹介

追記

参考記事

Stage3D対応のAway3D 4.0 – パーティクル表現

Stage3D対応のAway3D 4.0 – 被写界深度表現

ビットマップキャッシュの作成

ビルボードの作成

カメラとオブジェクトの距離の計算

ぼかしの適用

Stage3D対応のAway3D 4.0 – フィルター(ポストエフェクト)

使い方

Stage3D対応のAway3D 4.0 – ダイナミックシャドー

Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」

Yahoo! Creative AwardでHTML5 賞を頂きました

Links for 20120206 [はてなブックマーク]

Links for 20120205 [はてなブックマーク]

Links for 20120203 [はてなブックマーク]

Links for 20120202 [はてなブックマーク]

Links for 20120201 [はてなブックマーク]

Links for 20120131 [はてなブックマーク]

Links for 20120130 [はてなブックマーク]