クロスフェーダー (Cross fader)

5月 14, 2009

説明:

UI 応用編、2つの画像をフェードイン、フェードアウトさせるクロスフェーダーです。スライダーラジオボタンを使っています。

動作:

・スライダーを左右に動かすと、画像A、画像B が切り替わる。

・フェードの仕方を上のボタンで選択できる。

解説:

フェードインは、2つの画像を重ねて表示し、上の画像のAlpha 値(透明度)を変更しています。

スライダーの出力する範囲を 0〜1 に調整し、Alpha 値に使用します。

そのままでもフェーダーとして機能しますが、さらにカーブ特性をつけるようにしました。実際の可変抵抗器(ボリューム)にもAカーブ、Bカーブなどの種類があります。

y = f(x) の特性を持たせるために、この回で説明したTimelines Patch とInterpolation Patch を使用しています。どちらも特性をベジェ曲線で指定することができますし、Interpolation Patch は[Quadratic, Cubic, Exponential, Sinusoidal] の中から選択することができます。

もちろん、Mathematical Expression Patch やLFO Patch を使うこともできます。

見所:

連動ボタンはラジオボタンの画像を変えただけです。

ボタン上の画像は、ベース画像とリアルタイムに合成しています。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。