これはオブジェクトの現在の表示状態をビットマップ表現で描画するメソッドで、デフォルトではビットマップオブジェクトに何の変換も適用されません。つまり、たとえば Web カメラからのビデオフィードを表示中のビデオオブジェクトのスナップショットを作成する場合、そのビデオオブジェクトが回転されていたとしても、作成されるビットマップ表現は回転されていない状態になります。これについては、後のセクション「変換を伴うスナップショット」で説明します。
draw() メソッドの本質的な便利さだけに注目して話を進めましょう
このメソッドを最も単純な方法で使用した場合、指定したオブジェクトのビットマップ表現がベクターレンダラーによって描画されます。また、ビットマップのブレンドモードを適用することや、ColorTransform クラスによってビットマップに含まれるカラー値を算術変換することもできます。たとえば、ステージ上に animation_mc というムービークリップインスタンスがあり、その中にベクターアニメーションが配置されているとします。アニメーション再生中の何らかの時点で、そのときの表示状態のスナップショットからビットマップを作成するには、次のようにします。変換マトリックスとは、ある座標空間から別の座標空間へとポイントをマッピングするために使用される、3 × 3 の数値から成るグリッドです。変換マトリックスを 1 つ使用するだけで、ビットマップまたはムービークリップに対する傾斜、回転、伸縮、移動の操作を一度に実行できます。Matrix クラスの詳細についてはこの記事で取り上げませんが、その代わり、よく使用することになる Matrix クラスのメソッドをいくつか紹介します。draw() メソッドの第 2 パラメータを扱う場合はそれらのメソッドがしばしば必要となります。変換マトリックスを作成する際には、まず、何度も完全修飾クラスパスを記述しなくてよいようにクラスを読み込んでおきます。geom パッケージに属するので、次のようにして読み込みます。それから、次のコードで Matrix クラスのインスタンスを作成します。これにより、デフォルトの単位マトリックスが作成されます。単位マトリックスは、オブジェクトに適用しても伸縮、回転、傾斜、移動が発生しないマトリックスです。単位マトリックスを作成した後は、Matrix クラスの各種メソッドを使用してマトリックスの内部プロパティを変更することにより、オブジェクトに対してさまざまな変換を適用できます。
マトリックスを変更して、オブジェクトに適用すると拡大 / 縮小が発生するようにするには、Matrix
たとえば次のコードでは、オブジェクトのサイズを 2 倍にする変換マトリックスが作成されます。
さらに変換マトリックスを変更して、オブジェクトに適用すると回転も同時に発生するようにするには、Matrix
このメソッドのパラメータには、オブジェクトを回転させる角度をラジアン単位で指定します。度数からラジアンへの換算は、次の簡単な数式を使用して実行できます。次に示すコードでは、変換マトリックスを変更して、オブジェクトに適用すると 45 度の回転が発生するようにします。
オブジェクトに適用すると移動が発生するようにするには、Matrix
translate() メソッドに移動量のオフセットを指定して変換マトリックスを変更します。以上により作成した変換マトリックスをオブジェクトに適用すると、そのオブジェクトは 2 倍のサイズになり、45 度回転し、さらに x 軸、y 軸それぞれ 100 ピクセル分移動します。
変換を伴うスナップショット
draw() メソッドには第 2 パラメータとして変換マトリックスを指定できます。それにより、ステージ上のオブジェクトのスナップショットをビットマップ表現として描画するときに変換を適用できます。ムービークリップのスナップショットを作成するとき、デフォルトでは何の変換も適用されないため、たとえばステージ上のムービークリップに伸縮や回転が適用されていても、スナップショットは伸縮や回転を適用していない状態のイメージとなります。ただし、draw() メソッドの第 2 パラメータに変換マトリックスを指定してスナップショットを作成すれば、元のムービークリップと同じ変換を適用したビットマップを作成できます。ActionScript またはオーサリング環境から、ステージ上のムービークリップを伸縮、回転、または移動すると、Flash Player の内部では、ムービークリップに正しい変換を適用して表示するために変換マトリックスが使用されます。このプロパティからは、正しい変換の値があらかじめ設定されている Matrix クラスのインスタンスが返されるので、それまでにどのような変換がムービークリップに適用されているかを調べることができます。また、次のようなコードを記述すれば、あるムービークリップとまったく同じ変換を別のムービークリップに適用できます。次に示すコードでは、正方形を含んだムービークリップを作成し、これを ActionScript から伸縮および回転します。
// ムービークリップ内に、描画 API で黄色の正方形を描画
上で作成したムービークリップのスナップショットを作成する際には、変換マトリックスを指定しない限り、回転と伸縮を適用済みの正方形のイメージを得ることはできません。ステージ上に表示されているムービークリップそのままの正確なイメージをビットマップオブジェクトにするには、次のように、このムービークリップの変換マトリックスを draw() メソッドの第 2 パラメータとして指定します。
// ムービークリップと同じサイズで透明なビットマップを作成
// ステージ上に表示されたままのイメージで描画
ステージ上の表示とは異なる形でムービークリップのスナップショットを取得する (たとえば、表示の半分のサイズにする) 場合は、次のように、ムービークリップの変換マトリックスを取得してから変更を加え、意図したとおりの変換が適用時に発生するようにします。
// ムービークリップの半分のサイズで透明なビットマップを作成
// ムービークリップの変換マトリックスを取得
ムービークリップの変換マトリックスに変更を加え、ビットマップへの適用時には
描画サイズが半分になるようにする。
// 半分のサイズでムービークリップのスナップショットを作成
ライブラリに属するイメージの操作
ライブラリにあるイメージにリンケージ識別子が割り当てられていれば、BitmapData
loadBitmap() メソッドを使用して、ライブラリ内から直接にビットマップオブジェクトを作成できます。これは BitmapData クラスの静的メソッドなので、クラスのインスタンスからアクセスするのではなく、クラス自体を指定して呼び出します。呼び出すと、正しいサイズを持ちすべてのピクセルデータを含んだ、設定済みのインスタンスが返されます。ライブラリ内のイメージにリンケージ識別子を割り当てるには、次のようにします。ライブラリ内のイメージを右クリックし、[リンケージ] を選択します。[識別子] テキストボックスに一意の名前を入力します。このシンボルは、何の変換も適用しない状態でビットマップオブジェクトとして描画されます。
ライブラリからロードしたシンボルをサイズ変更するには、一時的なムービークリップに Movieclip
attachMovie() メソッドでシンボルを割り当て、それから、ビットマップのサイズを変更するような変換マトリックスを適用してムービークリップのスナップショットを作成するのが最もよい方法です。その例を次に示します。
// ライブラリ内のシンボルをムービークリップに割り当て
// ビットマップを伸縮するための変換マトリックスを作成
/// 指定した変換マトリックスでビットマップを伸縮して表示
// 不要になったムービークリップを削除
ライブラリからロードしたビットマップをサイズ変更する場合は、その後で Movieclip
attachMovie() によってビットマップをムービークリップにアタッチすることはできません。これを解決するには、次のようにビットマップオブジェクトを 2 つ使用する必要があります。1 つのビットマップオブジェクトに伸縮前のビットマップを格納し、それから、伸縮後のビットマップを含んだもう 1 つのビットマップを作成します。
// ライブラリから作成したビットマップをビットマップオブジェクトにアタッチ
// 伸縮率を正規化
// 新しい変換マトリックスを作成
// マトリックスを伸縮
アタッチしたビットマップが透明の場合は透明のピクセルで塗りつぶし、そうでない場合は白のピクセルで塗りつぶす。
// 不要になった大きいビットマップのメモリを開放
ロードしたイメージの操作
そのような場合は、まずムービークリップに外部ファイルをロードし、そのロード処理が完了するのを待ってから、ムービークリップのスナップショットを作成します。
// 外部ファイルを格納するムービークリップを作成
外部ファイルのロード処理の成否について通知を受け取る。
// イベントの発生によってステータスの変化を検出
// 外部ファイルをムービークリップにロード
// ファイルのロードが完了して使用できる状態になると "ローダー" オブジェクトから呼び出される関数
ロードするファイルと同じサイズでビットマップオブジェクトを
メモリ内に作成、透明のピクセルで塗りつぶし
// ロードした外部ファイルを含んだムービークリップのスナップショットを作成
// 不要になったムービークリップを削除
// ファイルをロードできない場合に "ローダー" オブジェクトから呼び出される関数
外部ファイルをロードできなかったので、格納用のムービークリップは不要
フィルタの適用
フィルタの詳細についてはこの記事で取り上げませんが、ビットマップのノイズを低減する場合やエッジをソフトにする場合にぼかしを適用するなど、イメージの処理ではフィルタが必要となることがよくあるので、ビットマップにフィルタを適用する方法について若干説明しておきます。Flash Player では置き換え、ぼかし、グロー、ドロップシャドウ、ベベルなど多様なフィルタエフェクトがサポートされています。いずれのフィルタも、ビットマップ全体、またはビットマップ内の矩形領域に対して適用できます。次に示すコードでは、ライブラリからロードしたビットマップに対し、ぼかしフィルタによってぼかし処理を適用します。
// ビットマップをライブラリからロード
// ぼかしフィルタを作成
// ロードしたビットマップにぼかしフィルタを適用
これはそのイメージのサイズを表す flash
Rectangle クラスのインスタンスを返すプロパティなので、ビットマップ全体にフィルタを適用することになります。次のように、Rectangle クラスのインスタンスを自分で作成して applyFilter() メソッドの第 2 パラメータに渡せば、ビットマップ内の特定の領域だけに対してフィルタを適用することもできます。
// ビットマップをライブラリからロード
// ぼかしフィルタを作成
// フィルタの適用先を指定する矩形領域を定義
// ロードしたビットマップにぼかしフィルタを適用
ビットマップ全体にフィルタを適用すると、場合によっては元のビットマップよりも大きいビットマップができることがあるので注意が必要です。たとえば、DropShadow フィルタを使用するとビットマップの周囲にピクセルが追加されるので、フィルタを適用した元のビットマップよりも大きいビットマップが生成されます。しかし、このことを意識していないと、BitmapData オブジェクトを作成してサイズを定義した後になって問題が発生する可能性があります。幸い、結果のイメージのサイズをフィルタ適用前に調べる方法が用意されているので、結果を格納するビットマップのサイズをあらかじめそれに合わせておくことができます。
// ビットマップをライブラリからロード
// デフォルトのドロップシャドウフィルタを作成
// フィルタ適用後のビットマップのサイズを確認
// 左上隅の座標値が負なら、幅と高さを増やすことが必要
// ロードしたビットマップが透明の場合は透明のピクセルで塗りつぶし、そうでない場合は白のピクセルで塗りつぶす。
// フィルタの適用結果を格納する新しいビットマップを作成
// ロードしたビットマップにフィルタを適用
特定ピクセルのカラーの取得
ビットマップ内の任意のピクセルを指定して、そのカラー値を調べるには、BitmapData
ピクセルのアルファチャンネルの強さとカラー値を乗算した値が返されるので、意図と異なる結果を生じることがないように注意してください。getPixel() とは違い、このメソッドではアルファチャンネルのデータも一緒に取得できます。
特定ピクセルのカラーの設定
このメソッドは、指定した x / y 座標にあるピクセルを指定したカラーに変更します。アルファチャンネルのビットは無視されます。次に例を示します。
// ランダムなピクセルの一方に、もう一方と同じカラーを設定
特定ピクセルグループのカラーの設定
矩形領域に含まれるピクセルのグループに特定のカラーを設定するには、fillRect() メソッドを使用します。このメソッドは、ビットマップを元の状態に戻す必要がある場合に便利です。ビットマップ全体を同じカラーで塗りつぶすと、結果的に内容を消去できるからです。第 2 パラメータには、矩形領域を塗りつぶすカラーを指定します。矩形領域を指定するには、まず、次のようにして Rectangle クラスの完全修飾パスを読み込んでおきます。geom パッケージに属しています。それから、次のようなコードで矩形のインスタンスを作成します。最初の 2 つのパラメータでは矩形の左上隅の x / y 座標を、その後の 2 つのパラメータでは矩形のサイズ (幅と高さ) を指定します。次に、特定のカラーでその領域を塗りつぶします。BitmapData クラスのすべてのインスタンスには、そのビットマップオブジェクトのサイズと位置を返すプロパティがあります。位置は常に 0,0 になるため、実際には、BitmapData クラスの大半のメソッドに必要となる形式でサイズの情報を取得するために使用します。
// ビットマップ全体を緑のピクセルで塗りつぶし
使用するカラーの範囲の変更
イメージ内のすべてのピクセルに対してカラーの変更を加える際、ループによって各ピクセルを操作するのは、非常に面倒で重い処理になります。しかし、カラー値が特定のカラーの範囲内にあるピクセルだけを変更する場合や、特定のカラー値を持つピクセルだけをすべて変更する場合には、個々のピクセルをループで処理する必要はありません。threshold() メソッドを使用すると、カラーが特定の範囲内にあるピクセルだけを対象として、カラーの置換やその他の論理演算を実行できます。たとえば、次のコードでは、イメージ内にある赤のピクセルをすべて透明にすることができます。// ビットマップ中央の矩形領域を黒のピクセルで塗りつぶす。
// ビットマップ内の赤のピクセルをすべて透明に変更
threshold() メソッドの戻り値には、操作の対象となったピクセルの個数が返されます。threshold メソッドの第 4 パラメータには、次のいずれかのストリングを渡すことで、演算の種類を指定します。
たとえば、演算パラメータとして
= を指定することにより、特定のカラーに該当しないピクセルすべてを変更することなどができます。次に例を示します。
ピクセルのコピー
ピクセルのコピーは、イメージ処理で日常的に必要となる操作です。
あるビットマップ内のピクセルを別のビットマップにコピーするには、BitmapData
このメソッドは、コピー元ビットマップ内の指定した矩形領域を、コピー先ビットマップ内の指定した場所にコピーします。これを使用すると、ジグソーパズルなどを作成できます。さらに、アルファチャンネルデータを含んだ第 2 のイメージを用意し、コピー処理のマスクとして使用することもできます。これにより、形が矩形でない領域のコピーが可能となります。次の例では、ビットマップ内の矩形領域を別のビットマップにコピーします。
// ビットマップをライブラリからアタッチ
// 元のビットマップからコピーする領域を定義
// コピーしたピクセルを格納する新しいビットマップを作成
// ロードしたビットマップの指定した領域にあるピクセルを、左上隅にコピー
この例では、円形の周囲に透明のピクセルを含んだビットマップをアルファマスクとして使用し、ビットマップ内の円形の領域を別のビットマップにコピーします。
// ビットマップをライブラリからアタッチ
// ムービークリップ内に円形を描画
// アルファマスクを格納するビットマップを作成
// 変換マトリックスを作成
// ムービークリップをビットマップに描画する際の位置を変更
// ビットマップ内に円形を描画
// 円形を含んだムービークリップは不要になったので削除
// ライブラリからロードしたビットマップからコピーしたピクセルを格納するビットマップを作成
// 透明のピクセルで塗りつぶし
// 円形を含んだビットマップをアルファマスクとして使用し、ライブラリからロードしたビットマップのピクセルをコピー
// ビットマップを表示
// 不要になったマスク用ビットマップを破棄
新しいイメージ API を使用したサンプルコードをオンラインに多数用意してあります。
著者について
Guy は世界中の Flash 業界で開催されるイベントで数々のプレゼンテーションを行っています。また、多くの賞も獲得しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
サイト構築でFlashを使う大きな魅力の1つは、多彩な表現力です。しかし、更新頻度の高いコンテンツでは、Flashを取り入れるのは容易ではありません。実際、弊社が最近手掛けた「新潟県弁護士会」サイトにおいて、更新頻度の高いコンテンツをFlashで作ることとなりました。いろいろと試行錯誤した結果、たどり着いたのはPHPを使ったオリジナルCMSです。本記事では、その試行錯誤の過程と、弊社オリジナルCMSの技術的なポイントを解説します。弊社の実装例はあくまでも1つの解でしかありませんが、みなさんの参考となればうれしいです。
新潟県弁護士会サイトについて
新潟県弁護士会サイトでは、当会の概要、法律相談の案内、イベントなど各種情報を提供しています。その中でも一番の特徴は、新潟県弁護士会に所属する弁護士を探せる「弁護士検索」機能です。名前、地域、取扱分野などから、希望する弁護士を探すことができます。この「弁護士検索」機能にフォーカスして解説していきます。条件を選んで検索を実行すると、該当する弁護士の結果として顔写真を付けたキャラクターが並び、キャラクターをクリックすると詳細情報が表示されます。クライアントから「弁護士検索」機能に関する主な要望として、以下の2点がありました。クライアント側で弁護士情報を更新できるようにし、かつ更新頻度は高い。
各弁護士について扱う情報が多い(名前や事務所名など、20項目以上)
弁護士に関するサイトとなると、ただでさえ堅苦しい感じがします。そこに検索結果をテキストデータの一覧で表示させると、無機質で味気なく、利用者は弁護士をより一層遠い存在に感じてしまいそうです。そこで、サイトデザインだけでなく、検索機能でも親しみやすさを強調することをクライアントに提案しました。その提案は採用され、Flashを使って表現力豊かな検索機能を構築することになりました。弁護士の顔写真を単純に表示するのではなく、弁護士をシンボル化した特徴のあるキャラクターデザインにし、さらにコミカルな動きつけることで、「身近な頼りになる弁護士」を演出しています。Flashを使うことが決まったら、あとはどのようにCMSを実装するかです。開発当初、サーバ環境が未定でした。スペックの低いサーバとなった場合でも、動作・運営に支障がないように設計しなければなりません。また、サーバによってはデータベースを使用できない場合もあります。そのため、データソースをXMLとするCMSを構築することにしました。クライアントは、Movable Typeの管理画面にあるブログ記事作成画面を使って弁護士情報入力を行うことになります。ただし、初期設定の入力項目では不十分なので、カスタムフィールド機能を使って、弁護士情報内容に合わせてカスタマイズしました。いざ試験運用を行ってみると、カスタムフィールドを作りすぎたせいか(20項目以上)、動作速度が非常に遅くなっていました。こうした状況では、クライアントは安心して更新作業を行うことができません。次に検討したのが、PHPを使ってオリジナルCMSを構築することです。ゼロから作るという大変さはありますが、管理画面は分かりやすく、入力フォームもシンプルとなり、動作も快適なので、クライアント側での更新作業も無理なく行えます。以下は、実際の管理画面と入力フォームです。
オリジナルCMSの管理画面
オリジナルCMSの入力フォーム
このオリジナルCMSからXMLを出力します。そして、以下のようなXMLが出力されます。<comment>弁護士法人新潟第一法律事務所新潟事務所所属です。取扱事件等は、事務所ホームページをご覧下さい。解析用のメソッドは以下のようになっています。
* 選択弁護士の情報設定
// スクロール位置の初期化
// 写真の読み込み
// 検索に戻るボタンを再開
今回のFlash+CMSにおける各ファイルの関係は下図のようになります。検索結果をランダムに表示する。サイト公開後、クライアントから追加の要望がありました。上述のXMLでは五十音順に弁護士データを格納してあり、検索結果は常に五十音順に弁護士が表示されるようになっていました。検索サイトの結果のように、最初の方に表示される情報ほど、利用者の目がいくものです。そこで公平な検索結果となるように、五十音順ではなく、ランダムに表示することとなりました。0ではフィルタによってノードを取得する方法はあっても、結果をランダムに並び替えるメソッドはありません。FlashからPHPを経由して、データベース側でランダムな結果セットを取得する方法も考えられますが、追加要望を受けたときにはFlashがほぼ完成していました。そこで、PHPではそのまま五十音順のXMLを更新し、ActionScriptによるフィルタ結果をさらにランダムに並び替えるコードを書いて対処することにしました。そこで、ページごとではなく、表示用XMLの弁護士をランダムに並び変える方法を採用しました。以下のようなランダム関数を利用して、五十音順に並んでいる検索結果XMLをランダムに並び変え、新しいXMLをswf内で作成するようにしています。XMLフィルタメソッドより取得された検索結果XMLから、for文を使い検索結果人数の回数だけ、ランダム関数で取得したインデックス番号の弁護士1人分のノードを取り出し、新しいXMLへ結合します。for文で回すという単純な力技で新しいXMLを作成していますが、速度的に問題がなかったのでこのロジックを採用しました。オリジナルCMSということで、ゼロから構築するのは大変でもあります。しかし、事前にクライアントにヒアリングを行い、更新が必要な項目や事項などしっかりと洗い出し、初期の段階から出てくるであろう問題点をあらかじめつぶすことができました。また、クライアント側としても入力項目のシンプルさゆえに、迷うことなく更新作業を行うことができています。しかし、今回のプロジェクトのように、要件内容によっては動作的な問題が発生することがあり得ます。
オリジナルCMSにしてしまうのも選択肢の一つではないでしょうか
著者について
2007年にWebサイトのプランニング、ディレクション、アナリシスを主幹業務とする株式会社ポルトプラディアを設立
RIAを使用した、ユーザーエクスペリエンス重視型のサイト作りを得意とする。
DTPオペレーターの経験は長いが、ここ数年はWebサイト制作を主業務とするデザイナー
本記事の「新潟県弁護士会」サイトCMSのテクニカルサポートを行う。
最近の制作サイトは熊木建築事務所
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
in:リアルな書き味と消し味を実現するテクニック | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
in:リアルな書き味と消し味を実現するテクニック
in」は、“黒板に落書き”という学生の頃に誰もが体験したことをWeb上で味わうことのできるお絵かきサービスです。絵に自信がない人でも気軽に落書きを楽しめる場所として、2008年2月末にサービスインしました。使い方は、まさに黒板と同じです。画面下部に並ぶ6色のチョークのいずれかを選択し、黒板上をクリック&ドラッグするだけで自由に線を書くことができます。線を書く際に、上下カーソルキーあるいはマウスホイールを使えば、線の太さが変わります。また、画面右下には黒板消しがあり、クリック&ドラッグすることで書いた線を消すことができます。図1:チョークを勢いよく動かすと線がかすれた感じになったり、黒板消しでこすると線がぼやけた感じになったりと、実際のチョークの書き味と消し味を再現しています。落書きが完成したら、画面右下の投稿ボタン使って「みんなのらくがき」コーナーに投稿することができます。また、落書き中のマウスの動きも全て記録されており、黒板消しで消した軌跡も含め、落書きの過程をリプレイすることができます。
inが生まれたきっかけ
その際、日本人のActionScriptテクニックを彼に見せつけるという名目でゲリライベントが開かれ、私はスピーカーとして参加しました。私のテーマは「BitmapDataで面白エフェクト」で、スクリーンに映し出される発表資料に対してその場で強調や注釈を書き込めるようにFlashで制作しました。テーマがテーマだけに、いっそのことその書き込み機能自体を面白エフェクト化しようと思い、チョークと黒板消しでやってみたところ、大きな反響が得られました。通常のお絵かきサービスでは、「好きなように描け」と言わんばかりに、いきなり真っ白いキャンバスと自由に選べるパレットが与えられるだけです。
それでは、絵に自信のない人はすぐにつまづいてしまうことが多いでしょう
ですが、黒板なら誰もが何かしら絵を描いたことがあると思いますし、チョークも限られた色数しかないので学校で描いた落書きそのままに描くことができるうえ、なにより適当でも許される空気感があります。
これなら絵心のないライトユーザーにも受け入れられるのではないかと思い、「こくばん
in」を開発して公開することにしました。
開発時のポイント
inの開発では、とにかく気持ちよさを追求しました。「チョークの書き味」「チョークを黒板に当てた時の音」「黒板消しの消し具合」、それら全てがユーザーに違和感なく伝わるようにしました。黒板らしさを前面に押し出すために、わざわざチョークの粉まで発生させています。粉が降り積もる処理は、2年前に趣味で作ったFlashゲーム「桜吹雪」で開発した堆積処理を再利用しています。チョークのかすれ具合、黒板消しのぼかしはBitmapDataを駆使しています。また、バックエンドにかかる負荷をできるだけ抑えるために、完成した作品の画像化は全てFlash側で行っています。
0になってバイナリデータを扱うことができるようになったため、このような手法がこれから常道となっていくのではないでしょうか
それでは、「チョークのかすれ具合」と「黒板消しのぼかし具合」をどのように実現しているのか、その基本的な考えとスクリプトコードを解説しましょう
チョークのかすれ具合
チョークのかすれ具合は、ベタ塗りの中にところどころ塗り漏らしを作ることで再現しています。塗り漏らしを作る手法は、ベタ塗りした矩形にわざわざひとつひとつ穴を開けていくと手間がかかるので、BitmapDataのpixelDissolveメソッドを使用することにしました。このメソッドを使うと、パラメータで指定した個数だけランダムに別の色で塗りつぶすことができます。しかし、そのままではくっきりと穴が開きすぎて、かすれ具合が不自然な感じになるので、さらに薄めのブラーフィルタをかけています。この処理過程をドラッグ中にマウスが移動するごとに繰り返すことで、マウスの軌跡に沿ったチョークのラインを引くことができます。この処理を実装するには工夫が必要です。なぜなら、pixelDissolveやブラーフィルタは対象範囲を矩形で指定するため、斜めの線に対して直接かけることはできないからです。さらに、斜めの線をいきなり黒板上に書いてしまうと、エフェクトをかける際に余分な領域にまでかかってしまいます。そこで、いったん別のビットマップデータを用意し、そこにマウス操作に合わせた線を真横に書いてからエフェクトをかけた上で、それを適切な位置に配置するように座標変換をかけて転写するようにしました。この転写の課程を、以下に図解しておきます。マウスの動きについて始点Aと終点Bを定める。
ビットマップデータを最終的に転写させる位置
チョークのビットマップデータをそのまま転写した場合の位置
マウスの位置を中心にチョークを動かしたいので、チョークの太さ分だけ平行移動
そうしないと、マウスがチョークの左上角のところにくるので、マウスの動きと描画範囲に不自然さが生じてしまうのです。線分ABの傾きと等しくなるようにビットマップデータ回転させる。始点Aの座標に向けて平行移動させる。以下は、この転写の課程を実現するためのサンプルコードです。
サンプルコードでは分かりやすくするために、ビットマップの回転具合および転写先の座標を指定するために使用する Matrixなど新規生成していますが、実際のこくばん
inでは、あらかじめ生成しておき、都度パラメータを初期化することで余計な負荷を抑えています。また、マウスの動かし方によって繋がりに不自然が生じないように幾つか工夫をしていますが、ここでは理解しやすくるために割愛しています。このチョークの処理で変動する値はマウスの座標値です。MOUSE_MOVE が発生するたびにマウスの座標を渡し、リプレイモードではリプレイデータに記録されたマウスの座標を渡します。こうして描画処理を共通化させておけば、微調整も楽に行うことができます。
黒板消しのぼかし具合
黒板消しで消した時のぼやけた感じは、ブラーフィルタを使って実現しています。描画は全てビットマップデータ上で行っているため、特定の領域にブラーフィルタをかけるための処理が必要になります。ここでは黒板消しを向きに対して水平に動かした場合の移動範囲をぼかしているので、矩形を任意の角度に傾けた領域を対象とします。ブラーフィルタは水平あるいは垂直方向にしか効果がないため、そのままでは任意の方向にかけることができません。そこでビットマップデータを用意して、移動&回転によって水平方向に転写した上で、ブラーをかけて元の位置に再度転写転写するようにしました。この転写の課程を、以下に図解しておきます。基本的な考えは、チョークのぼかし具合と同じです。マウスの動きについて始点Aと終点Bを定める。
黒板消しのぼかし効果をかけたい範囲
終点は次のフレームでは始点になるため、始点から終点直前までの描画を繰り返すことで一続きの線(消し跡)になります。そのままぼかし効果をかけると余分な範囲にも効果がかかってしまう。始点Aの座標の負をとって、原点へ平行移動させる。線分ABの傾きの負をとって、水平方向になるように回転させる。
マウスの位置を中心に黒板消しを動かすために、黒板消しのサイズの半分だけ平行移動
そうしないと、マウスが黒板消しの左上角のところにくるので、マウスの動きと描画範囲に不自然さが生じてしまうのです。
生成したマトリックスで転写した「消したい範囲」
ぼかし効果をつけたビットマップデータを元の位置に戻す。以下は、この転写の課程を実現するためのサンプルコードです。チョークのかすれ具合のコードと同様に、サンプルコードでは分かりやすくするために Matrix など新規生成しています。黒板消しでは、ぼかし処理を行うビットマップへの転写時にColorTransform でアルファ値を減らすことで薄くしています。この時にただ薄くしたものを転写するだけでは、戻した時にアルファブレンドされ、逆に濃くなってしまいます。これを防ぐため、表示用・ぼかし処理用ビットマップのベースを共に黒(#000000)にしておき、転写によってアルファブレンドが行われないようにしています。ただし、黒板のベースは黒ではなく深緑色(ここでは#003300)です。
そのため一番下のレイヤーに深緑色で塗りつぶした矩形を敷いておき、その上に表示用ビットマップを BlendMode
ADDで重ねることで正しい色を出すことができます。これはチョークの色が黒板のベース色よりも明るいから使えるテクニックですが、ノートやホワイトボードなど白色ベースの場合は別のアプローチが必要になります。
「チョークのかすれ具合」と「黒板消しのぼかし具合」は、パラメータのさじ加減ひとつで書く時の気持ちよさが大きく変わるので、サンプルコードでためしながら自分なりのお絵かきツールを作ってみてはいかがでしょうか
たとえば色鉛筆やクレヨンの質感などは簡単に作ることができます。
著者について
フリーランスのFlashエンジニア
ゲーム制作をはじめ、見て楽しい触って楽しいコンテンツ作りに余念がない。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
アクセス集中への対処
comの今後の展開予定
印刷用に表示
アドビ特集」にスピーカーとして参加した際に、「イベント会場内で携帯電話から参加できるようなコンテンツを発表しよう」という企画をもとに開発したシステムです。comの概要と仕組みについて解説します。
図1 イベントでの会場風景
著者について
1999 年に独学で個人サイトの運営を始める。
その後、本格的に Web 業界へと転身し、クリエーター、ディレクター、プランナー、講師業務、セミナーなど幅広く従事
現在は株式会社24-7にて、主にWebディレクター、プランニング、Flashクリエイターなどの業務に携わる。
comなどパブリッシャーとして活動中
より効果の高いWebの活用術を日々勉強中
『いざ高みへ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
そこで、Matrix3Dクラスの変換行列を使い*2 、マウスポインタの位置に合わせて3次元座標空間で平面を回転させるサンプルスクリプトについて解説します。変換行列の意義については、この記事の01「変換行列(Matrixクラス)とは」をお読みください。
サンプルファイルのダウンロード
メソッドのシンタックスは、つぎのとおりです。第1引数には、加える回転角を度数で指定します。
第2引数は、回転の軸をxyzからひとつ選びます*4
Vector3Dクラスの定数で指定するのがよいでしょう
ところが、メインタイムラインのフレームアクションにつぎのようにスクリプトを記述すると、ランタイムエラーになります(図001)
そして、[出力]パネルに表示されるエラーメッセージはつぎのとおりです。図001 フレームアクションがランタイムエラーになる。「オブジェクト参照」がnullだと告げる。
これは、インスタンスの
zプロパティにデフォルト値0を設定するだけで足ります。
したがって、上記フレームアクションに、この操作を加えてつぎのように修正すれば、3次元座標空間においてインスタンスはy軸で水平方向に30度回転します(図002)
なお、Matrix3Dクラスを使った変換には、パースペクティブが適用されるので、インスタンスは回転角に応じて台形に変形されます。
図002 3次元座標空間において水平方向に回転したインスタンス
それでは、マウスポインタの水平座標位置に合わせて、インスタンスをy軸で水平に回転させてみます。フレームアクションは、つぎのスクリプト001のようになります。スクリプト001 3次元座標空間におけるインスタンスをy軸で回転させる。
// 3次元座標空間においてy軸でインスタンスを回転
回転角の大きさは、インスタンスの基準点から見たマウスポインタの水平座標値に、調整係数を掛合わせて決めています。
したがって、インスタンスから水平方向にマウスポインタを離すほど、インスタンスが水平に回転するスピードは増します(図003)
図003■インスタンスがマウスポインタの位置に応じて水平に回転
回転スピードは、インスタンスの基準点から見たマウスポインタの水平座標値に比例させた。デフォルトは、インスタンスの基準点になります。
*4 インスタンスの回転する方向は、x軸なら垂直で、y軸では水平になることに注意しましょう
ZAXISと誤って記載されていることがあります。0で始めるオブジェクト指向スクリプティング」の第5回「イベントリスナーを使う」をお読みください。
02 変換行列を適用する順序
前掲スクリプト001に、y軸の水平回転だけでなく、x軸による垂直の回転も加えてみましょう
以下のフレームアクションのように、y座標についてもx座標と同じ処理を加えればよさそうに思われます。上記のステートメント追加により、確かにインスタンスが垂直方向に回転するようになります。しかし、その回転の軸に違和感があります。マウスポインタを垂直に動かしたとき、ステージ上のインスタンスの状態から垂直に回転しません。
いわばインスタンスが正面を向いた状態で垂直に回り、配置されたタイムラインのx軸でなく、インスタンス自身のx軸で回転しているように見えます(図004)
図004 マウスポインタを垂直に動かすとインスタンスのx軸で回転
マウスポインタを垂直に動かしたとき、配置されたタイムラインのx軸でなく、インスタンス自身のx軸で回転する。これは変換を適用する順序に原因があります。
変換をまったく加えていないデフォルト状態のインスタンスは、位置が親タイムラインの基準点にあり、拡大・縮小は行わない比率1の実寸、回転角も0の状態です(図005)
図005 変換を行う前のデフォルト状態
位置は親タイムラインの基準点、拡大・縮小は比率1、回転角0
そのインスタンスをオーサリング時のステージ上でも、あるいはランタイム時にスクリプトによってでも、移動したり、拡大・縮小したり、回転したりすると、変換が加えられたことになり、DisplayObject
そして、前に適用するメソッドは、インスタンスに設定されている現在のTransform
変換を前に適用するメソッド
変換を後に適用するメソッド
そのため、インスタンスは一旦デフォルトに戻り、回転を何も加えていない正面向きになります。それをx軸で回す訳ですから、つねに正面向きからの回転にしかならないのです。
変換行列は、適用の順序が変わると、その結果が変わることにご注意ください*8
これは、フィルタを適用する順番が変わると、その効果が変わってくるのに似ています。
したがって、インスタンスの現在の状態を回転しようというときには、後から変換するMatrix3D
ただし、この場合ひとつ気をつけることがあります。変換行列は、原点を基準として座標を変換します。この原点は、親タイムラインの基準点になります。つまり、インスタンスの変換は、配置された親タイムラインの基準点を中心に加えられるのです。
ちょうど[自由変形ツール]で、中心点を親タイムラインの基準点に設定した状態と考えればよいでしょう(図006)
図006 [自由変形ツール]で中心点を親タイムラインの基準点に設定
中心点に設定した親タイムラインの基準点を中心に、変形が加えられる。03 変換行列を後から適用する。それでは、改めてx軸で回す処理をスクリプト001に加えます。
具体的に変換行列をどのように適用すればよいでしょう
インスタンスを親タイムラインの基準点に置かないかぎり、回転はインスタンスの基準点でなく、その親タイムラインの基準点を原点として適用されてしまいます。かといって、インスタンスを完全にデフォルトに戻してしまうと、意図した回転ができませんでした。だとすれば、必要な値だけを個別にデフォルトに戻すのです。回転について問題になっているのは、インスタンスの位置です。したがって、インスタンスを親タイムラインの基準点に平行移動すれば、インスタンスを自身の基準点で回すことができます。そして、回転し終えたら、位置をまた平行移動してもとに戻せばよいのです。シンタックスはつぎのとおりです。
これらのメソッドを使って前掲スクリプト001は、つぎのように修正されます(スクリプト002)
スクリプト002 3次元座標空間におけるインスタンスをx軸とy軸で回転させる。
// 3次元座標空間でインスタンスを回転
まず、予め取得しておいたインスタンスのxy座標値をともにマイナスにして引数とし、変換行列(Transform
すると、インスタンスの位置は親タイムラインの基準点に移動します。しかし、位置以外の回転などの変換は、もとのインスタンスと同じ状態が保たれます。
そのうえで、改めてインスタンスのもとの位置のxy座標を引数として、Matrix3D
これで、ステージ上のインスタンスの状態をもとに、マウスポインタの位置に応じてインスタンスがx軸およびy軸で回転します(図007)
図007 ステージ上のインスタンスの状態から水平・垂直に回転
ステージ上のインスタンスの状態から、マウスポインタの位置に合わせて、インスタンスが水平・垂直に回転する。matrix3Dプロパティをもたず、プロパティ値はnullになりますので、インスタンスに3次元座標空間の操作が加えられたものとします。*8 変換行列の適用は、数学的には行列の乗算になります。com「変換行列を数学的に捉える」をお読みください。
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
02 インスタンスの角をドラッグして変形する。03 ふたつのポイントをドラッグしてインスタンスを変形する。04 3つのポイントによりインスタンスを自由な平行四辺形に変換する。
サンプルファイルのダウンロード
また、それらを組合わせて、長方形のインスタンスを平行四辺形に変えられます。ですから、たとえば3次元の表現に利用することも可能です。本稿は、このMatrixクラスについて、簡単なサンプルスクリプトをご紹介しながら解説していきます[*1]0を用います。
「Matrix」というのは、英語で数学の「行列」を意味します(あの映画のことではありません)
0のMatrixクラス[*2]は、数学の行列一般の演算を行うものではなく、インスタンスの座標空間を変換する3行×3列の行列[*3]です。Matixクラスが扱うこの行列を「変換行列」と呼びます。3×3の行列は、9つの要素をもちます。Matrixクラスの変換行列では、第3行目の要素は値が固定されていて操作できません。操作が可能な残り6つの要素には、つぎのようにプロパティ名が与えられています(上述のとおり、第3行目は値が「0 0 1」で固定です)[*4]これら6つのプロパティを使って、インスタンスに伸縮、傾斜、回転、移動などの変換を加えることができます。
a: 水平方向の伸縮率 = 変換後の幅/もとの幅
b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
tx: 水平方向の移動ピクセル数
ty: 垂直方向の移動ピクセル数
変換行列を使うときの注意は、インスタンスに変換が加えられておらず、基準点が親インスタンスの座標(0, 0)に配置された状態を起点とするということです。このいわばデフォルト状態のとき、インスタンスの変換行列はつぎのように左上から右下の対角線の要素が1、他の要素が0になります[*5]変換行列を操作するには、上記6つのプロパティを設定・変更するほか、次表001のようなメソッドが使えます。ただし、傾斜の変換を行うメソッドはなく、変換行列のプロパティを操作する必要があります。参考までに下図001には、変換行列の操作をシミュレートするサンプルSWFを掲げました。変換行列に、x軸とy軸方向それぞれについて、引数で指定されたピクセル数の平行移動を設定します。変換行列に、x軸とy軸方向それぞれについて、引数で指定された小数値の比率の拡大・縮小を設定します。変換行列に、引数で指定されたラジアン角の回転を設定します。
図001■変換行列のシミュレーション
それでは、Matricクラスで変換行列を作成して、インスタンスに適用してみましょう
その手順は、つぎのとおりです。
【Matrixクラスで変換行列を作成してインスタンスに適用する手順】
そのインスタンスの幅を2倍、高さは1
5倍にし、水平および垂直方向に0
5の傾斜をかけるには、タイムラインにMatrixクラスを用いたつぎのようなフレームアクションを記述します(図002)
インスタンスは、幅が2倍、高さは1
5倍で、水平および垂直方向に0
5の傾斜がかかっている。0と同じです。[*3] 行と列の数が同じ行列は「正方行列」と呼ばれます。変換行列は3×3の正方行列です。[*5] 対角の要素が1で他の要素が0の正方行列を「単位行列」といいます。02 インスタンスの角をドラッグして変形する。Matrixクラスの変換行列を使って、前述の6つのプロパティを操作すると、長方形を任意の位置と大きさの平行四辺形に変換することができます。そこで、長方形(正方形)のインスタンスの3つの角にドラッグできるポイントとなるインスタンスを置き、そのドラッグした位置座標に合わせて変換行列を計算し、長方形のインスタンスを平行四辺形に変換してみましょう(図003)[*6]図003■3つの角のポイントをドラッグするとインスタンスが変形する。ドラッグした3つのポイントの位置座標に合わせて、長方形のインスタンスが平行四辺形に変換される。いきなりインスタンスの3つの角を操作するのでなく、ひとつずつ順にスクリプトを組立てていきます。
まずは、右上隅の角から始めましょう
ポイントのインスタンスには、ドラッグするためのフレームアクションが記述してあります。そして、インスタンスの変形は、ポイントのフレームアクションからメインタイムラインの関数を呼出して行います。フレームアクションは、ポイントのインスタンスをドラッグするたびに、変換のためのメインタイムラインの関数xTransform()を呼出しています(図004)[*7]この関数は、まだメインタイムラインには定義されていません。
図004■ドラッグするポイントのインスタンスに記述されたフレームアクション
ドラッグの処理と、ターゲットのインスタンスを変換するためのメインタイムラインの関数xTransform()の呼出しが記述されている。そこで、メインタイムラインに関数xTransform()を定義すれば、ポイントのインスタンスをドラッグする間関数が自動的に呼出されることになります。この関数に、目的の長方形(正方形)のインスタンスを変換するための処理を記述します。
関数の定義の仕方は、つぎのとおりです(今回の関数には引数がなく、括弧()の後の戻り値のデータ型にはvoidを指定します)
【関数の定義】
// 関数が行うべき処理
aプロパティは、インスタンスの幅を拡大または縮小します。設定する値は、もとの幅を1とする小数値です。
a: 水平方向の伸縮率 = 変換後の幅/もとの幅
したがって、たとえばメインタイムラインのフレームアクションとして関数xTransform()に以下のような処理を記述すると、ポイントをドラッグしたとき(その方向や動きには関係なく)、インスタンスの幅が2倍に拡大されます。ただし、すでに注意したように、変換前のデフォルト状態のインスタンスを基準にしますので、単純にもとの幅の2倍に何度も設定されるだけで、拡大し続ける訳ではありません。それでは、右上隅に置いたポイントのドラッグ位置に合わせて、目的の長方形(正方形)のインスタンスを変換してみます。その値の計算方法はつぎのとおりでした。
a: 水平方向の伸縮率 = 変換後の幅/もとの幅
b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
この計算式にしたがってふたつのプロパティを設定すれば、インスタンスの右上隅の位置座標が変換できます。変換対象の長方形のインスタンスがmy_mc、ドラッグする右上隅のポイントのインスタンスをpoint1_mcとします。変換対象のインスタンスmy_mcは、基準点(左上隅)を配置先タイムラインの基準点(0, 0)に合わせておく必要があります。スクリプト001■右上隅のポイントのドラッグによりインスタンスを変形する。
上記スクリプト001で注意しなければならないのは、ふたつのプロパティMatrix
bへの代入式右辺で分母に指定しているインスタンスの幅(変数nWidthの値)の基準です。すでに何度か述べたとおり、これはインスタンスに変換が加わる前の、デフォルト状態の値を用いる必要があります。Matrixクラスのコンストラクタを引数なしに呼出せば、デフォルトの変換行列(対角の要素が1で他の要素が0)のインスタンスがつくられます。その変換行列を適用すれば、インスタンスmy_mcはデフォルト状態にもどります。widthプロパティの値を取っているのです。第4および第5ステートメントは、ドラッグしたポイントのインスタンスpoint1_mcのxy座標を調べています。
そして、第6と第7ステートメントで、前記の計算式から導かれた値をプロパティMatrix
bに代入します。matrixプロパティへの変換行列の代入です。
[ムービープレビュー]で試すと、右上隅のポイントをドラッグすれば、その位置に合わせてインスタンスが平行四辺形に変換されます(図005)
図005■右上隅のポイントをドラッグするとインスタンスが変形する。関数xTransform()により、インスタンスに変換行列が適用されて、平行四辺形に変換される。つまり、長方形を平行四辺形にはできても、台形や自由な四角形に変換することはできないということです。したがって、長方形の3つの角の位置を決めると、残る4つ目の角の座標は自ずと定まります。なお、このような座標空間の変換を「アフィン変換」といいます。[*7] ポイントのインスタンスに記述したフレームアクションは、変換行列の話題から逸れますので今回は触れません。実際のスクリプトは、サンプルファイルでお確かめください。0を制す」をご参照ください。03 ふたつのポイントをドラッグしてインスタンスを変形する。右上角のポイントひとつについてインスタンスが正しく変形されることを確かめたら、左下隅の角に置いたポイントに対しても、同じ要領で処理を加えます。このように動作は小分けして確認し、段階を踏んで拡張していくことが、スクリプトを早く正確に組上げるコツにです。左下角のポイントには、point2_mcというインスタンス名をつけました。dのふたつです。値の計算の仕方は、つぎのとおりでした。
この式により左下隅のポイントに合わせてインスタンスmy_mcを変換するには、前掲スクリプト001に以下のような処理を加えます(スクリプト002)
c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
スクリプト002■左下隅のポイントのドラッグもインスタンスの変形に加える。基本的な考え方は、前掲スクリプト001と変わりません。
dになったこと、それにともなって設定値を計算する分母がインスタンスのデフォルトの高さであるDisplayObject
heightプロパティの値に変わること、およびドラッグするポイントのインスタンスがpoint2_mcになるということくらいです。
[ムービープレビュー]で確かめると、ふたつのポイントのドラッグ位置に合わせて、インスタンスが自由な平行四辺形に変換できるようになりました(図006)
ただし、インスタンスの左上隅の座標が動きませんので、まだ位置は変えられません。図006■ふたつのポイントをドラッグしてインスタンスが変形できる。関数xTransform()に左下隅のポイント移動による変換行列の操作が加わり、自由な形状の平行四辺形に変形できる。
dの4つのプロパティ値を代入している右辺に注目してみましょう
分数(割り算)の分子・分母が規則的なパターンで並んでいます。これは偶然ではありません。数学の行列というのは、このように要素を決まったパターンで計算できるように並べたものなのです。その意味では、ActionScriptで行列の果たす役割は、さまざまなパラメータを処理しやすいように並べたフィルタや各種設定パネルに似たものと捉えることもできます[*8]フィルタを使うのに、「しきい値」など難しい用語の意味や内部処理の仕方は知らなくても、どのパラメータを動かせばどういう結果になるのかがわかれば足ります。行列も同じように、各要素の値が結果にどういう影響を与えるのか理解すれば、利用することは可能です。
[*8] たとえば、[プロパティ]インスペクタで、インスタンスのカラースタイルから[詳細]を選ぶと、[拡張効果]ダイアログボックスが開けます(図007)
そこにはインスタンスのカラーについて、赤(R)緑(G)青(B)アルファ(A)の各チャネルごとにパラメータが並んでいて、各チャネルの設定を同じパターンで操作できます。インスタンスのカラーについて、赤(R)緑(G)青(B)アルファの各チャネルごとにパラメータを設定できる。04 3つのポイントによりインスタンスを自由な平行四辺形に変換する。最後に、左上隅の角に3つ目のポイントを加えます。そうすると、インスタンスのかたちだけでなく、位置も自由に変えられるようになります。
tx: 水平方向の移動ピクセル数
ty: 垂直方向の移動ピクセル数
左上隅のポイントには、point0_mcというインスタンス名を設定しました。
すると、ドラッグした3つのポイントの位置座標に合わせて目的の長方形(正方形)のインスタンスを変換するには、前掲スクリプト002につぎのような処理を加えます(スクリプト003)
スクリプト003■3つのポイントのドラッグで自由な平行四辺形に変形する。
[ムービープレビュー]を見ると、3つのポイントをドラッグして、インスタンスをそれらの座標に合わせた自由な位置の平行四辺形に変換することができます(図008)
図008■ドラッグした3点のポイントに合わせてインスタンスが変形する。インスタンスの位置も含めて、自由な平行四辺形に変換できる。長方形を任意の平行四辺形に変換する処理は、3次元の表現に利用することが考えられます。したがって、変換行列を応用すれば、3次元の立方体のアニメーションをシミュレートすることもできます(図009)[*9]
図009■立方体を3次元で回転する表現
6面の角の座標と変形を演算処理すれば、3次元の立方体が表現できる。
5「変換行列と3次元の回転」)で解説しています(なお、同書の数学編には「行列」の説明も収めています)
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0の使用による、サーバ側ASPスクリプトを使用したMySQLデータの取得 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ASPスクリプトを操作するための準備
ASPスクリプトとの通信
ASPスクリプトから返されたXMLの解析
印刷用に表示
0の使用による、サーバ側ASPスクリプトを使用したMySQLデータの取得
私がこの記事の執筆を思い立ったのは、何年も前に作成したMTBF(平均故障間隔)アプリケーションをダイナミックASPからFlashに移植する必要が生じたことがきっかけでした。元のASPコードはMicrosoft SQLデータベースを操作し、もちろん、サーバ側ASPスクリプトを使用してデータベースのデータにアクセスしていました。0コードを作成しました。ちなみに、このチームとはアドビのFlashオーサリングチームです。現在では、このコードをMTBFアプリケーションだけでなく、自動テストアプリケーションや、Flashチームがさまざまなテストメトリックを追跡および確認するときに役立ついくつかの内部ツールにも使用しています。このサンプルアプリケーションによって、読者がデータソース接続の些細な問題に煩わされることなく、Flashを使用した便利で高機能なインターネットアプリケーションの作成作業に専念することができれば幸いです。この記事では、XMLとサーバ側ASPスクリプトを使用してFlashアプリケーションをバックエンドのMySQLデータベースに接続するための完全なソリューションを紹介します。まず、Flashを使用してMySQLフレンドリなSQL呼び出しを作成する方法と、それをサーバ側ASPスクリプトに送信されるXMLにまとめる方法を示します。次に、ASPをいくつかの部分に分けて説明し、ASPがFlashから送信されたXMLをどのように処理するかを見ていきます。最後に、Flashが返されたXMLを解析する方法について説明します。説明の中で、いくつかの便利な関数と、複数のMySQL呼び出しをまとめることによってサーバを何度も呼び出さずに済むようにする方法も紹介します。この記事を効率良くフォローするには、次のソフトウェアやファイルが必要です。
この記事に必要な予備知識
0についての基本的な知識があり、MySQLデータベースの設定および使用方法と、サーバ側ASPスクリプトを実行するためのIISサーバの設定方法を理解している必要があります。この記事ではMySQLデータベースが設定済みであることを前提としていますが、MySQLの入手および設定方法について詳しく知りたい場合は、MySQLのWebサイト*を参照してください。また、サーバ側ASPスクリプトを実行するIISサーバをローカルまたはリモートで設定することも前提としています。
著者について
NETのマイクロソフト認定プロフェッショナルの資格を持っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
2行のスクリプトで3次元の消失点をコントロールする | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
2行のスクリプトで3次元の消失点をコントロールする。
01 3次元空間の表現と消失点
03 消失点を移動する。
04 消失点のモーショントゥイーン
3次元空間の座標や設定は、オーサリング(ムービー作成)時だけでなく、もちろんスクリプトでもコントロールできます。今回は、いわば視線の方向が決まる「消失点」を、2行のスクリプトで動かしてみます。0の初級者向けの解説です。
01 3次元空間の表現と消失点
[3D位置とビュー]セクションで[Z]に正の値を設定すると(図001左図)、3次元空間の奥行きを表現するためインスタンスが小さくなります。
また、同時に位置もステージ中央に向かって移動します(図001右図)
図001■インスタンスのz座標と3次元表現の変化
[プロパティ]インスペクタの[3D位置とビュー]セクションで[Z]に正の値を設定すると(左図)、インスタンスが小さくなり、位置はステージ中央に向かって移動する(右図)
3次元空間のイメージを2次元のスクリーンに表示することは「投影」といわれます。そのとき奥行き(z座標)が遠いものほど小さく、また距離も縮めて表現するのが、「透視投影」または「遠近法投影」です。そして、かぎりなく遠ざかるにつれ、ある1点に向かって小さくなり、やがて消えていきます。
[消失点]は、[プロパティ]インスペクタの[3D位置とビュー]セクションで設定できます(図002右図)
その位置は、デフォルトではステージ中央です。
図002■消失点の意味とプロパティ
奥行きが遠くなるにつれ、インスタンスの表示は消失点に向けて小さくなる。[消失点]は、[プロパティ]インスペクタの[3D位置とビュー]セクションで設定できる。[*1] [プロパティ]インスペクタの[3D位置とビュー]セクションで設定する[消失点]は、ステージに対する設定です。
その設定は、ステージを頂点としたタイムラインの階層に配置されるすべてのインスタンスに適用されます(「3Dグラフィック」参照)
[ヘルプ]の「例:遠近法投影」には、サンプルとなるクラスが紹介されています(図003)
[ヘルプ]の「例:遠近法投影」には、消失点をコントロールするクラスのサンプルが掲載されている。asとして保存します。
図004■[プロパティ]インスペクタでドキュメントクラスを設定
これで準備は済みました。
[ムービープレビュー]を確かめると、消失点を示すインスタンスのドラッグによって、複数描かれた矩形の3次元空間における奥行きの方向が変化します(図005)
図005■消失点がドラッグで移動できる。消失点のインスタンスをドラッグすると、3次元の奥行きを表す方向が変わる。けれど、消失点のコントロールそのものは、数行のメソッドふたつで行っています。
図006■消失点をコントロールするのはわずか1行のステートメント
消失点をコントロールするのはふたつのメソッドで、しかも具体的にはprojectionCenterプロパティを設定する1行のステートメント
[*2] サンプルのファイルは、[ヘルプ]からダウンロードすることもできます。03 消失点を移動する。
クラスではなく、Flashムービー(FLA)ファイルのフレームアクションを使って、もっと簡単に試してみましょう
図007■消失点をステージ右下隅に設定する。シンボルのフレームアクションには、以下のスクリプト001を記述します。
スクリプト001■インスタンスのxy座標に消失点を設定するフレームアクション
図008■インスタンスのxy座標に消失点を設定する。この消失点となるMovieClipインスタンスを任意の場所に配置して[ムービープレビュー]で確かめると、前掲スクリプト001により消失点がインスタンスの座標に設定されます。図009■消失点がインスタンスの位置に設定される。
それではつぎに、この消失点のインスタンスを、マウスポインタの位置に合わせて動くようにしましょう
マウスポインタの座標にインスタンスの基準点を合わせるため、引数にはtrueを指定します(スクリプト002)
スクリプト002■マウスポインタの位置に合わせてインスタンスを動かす。[ムービープレビュー]でマウスを動かすと、ポインタの位置にインスタンスは移動します。
しかし、消失点はムービー開始時の設定のまま変わる様子がありません(図010)
というのは、startDrag()は、ひとたびメソッドを呼出すと、マウスが動くたびにインスタンスをポインタの位置に移動します。しかし、projectionCenterプロパティは、設定したときに消失点が変わるだけで、再度設定し直されないかぎりその位置は動きません。図010■インスタンスがマウスポインタに合わせて動いても消失点は変わらない。startDrag()メソッドでインスタンスがマウスポインタに合わせて動いても、消失点の位置は最初のまま変わらない。
0の定石は、繰返し発生するイベントにリスナーを登録して処理することです(後述05「もう一歩先へ」)
しかし、ここでは初級者向けにもっと手っ取り早いやり方をご紹介します。それは、スクリプトでなく、タイムラインを操作する手法です。スクリプトのレイヤーは1フレームで構いませんので、消失点のシェイプを描いたレイヤーに1フレーム挿入するだけです。これで、作業は終了です。タイムラインを2フレームに延ばしたので、第1フレームアクションが繰返し実行される。
[ムービープレビュー]を試すと、消失点のインスタンスがマウスポインタに合わせて動くとともに、消失点の位置も変わります(図012)
これは、MovieClipシンボルのタイムラインを2フレームに延ばしたことにより、再生ヘッドが2フレームをループして、第1フレームアクションが繰返し実行されるようになったからです。図012■マウスポインタの動きに合わせて消失点の位置が変わる。消失点のインスタンスはマウスポインタに合わせて動き、消失点の位置も変化する。[*3] メソッドの名前はstartDrag()であっても、実際にドラッグつまりマウスボタンを押す必要はありません。ただマウスを動かせば、インスタンスはポインタの位置に合わせて移動します。
04 消失点のモーショントゥイーン
消失点はモーショントゥイーンさせることができません。けれど、前項で作成した消失点のMovieClipインスタンスを使えば、トゥイーンアニメーションの効果が得られます。まず、マウスポインタを追いかける必要はなくなりますので、前掲スクリプト002からstartDrag()メソッドのステートメントは除きます。つまり、スクリプト001に戻す訳です。つぎに、消失点のシンボルの編集は終え、メインタイムラインで消失点のインスタンスのモーショントゥイーンを作成します(図013)[*4]図013■消失点のインスタンスをモーショントゥイーンで動かす。メインタイムラインで消失点のインスタンスのモーショントゥイーンを作成する。したがって、第1フレームアクションが繰返し実行されますので、消失点が1フレームおきに再設定されることになります。[ムービープレビュー]を確かめると、モーショントゥイーンさせたMovieClipインスタンスに合わせて消失点が移動します。図014■インスタンスのモーショントゥイーンに合わせて消失点が動く。モーショントゥイーンさせたMovieClipインスタンスに合わせて消失点が移動する。[*4] Flash CS4におけるモーショントゥイーンの作成の仕方は、以前のバージョンとは変わりました。
」などの記事が参考になるでしょう
今回は初級者向けの簡便な記述をご紹介しました。しかし、もちろんこの書き方は、洗練されたスクリプトとはいえません。0で、繰返す必要のある処理だけを毎フレーム実行するには、イベントリスナーを用いるのが定石です。
スクリプト003■イベントリスナーを用いた消失点のアニメーション
詳しくは、「2Dビューへの3Dオブジェクトの投影」をお読みください。jp「イベントリスナーを使う」などをご参照ください。
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
~パワードスーツが作りたいあなたへ~2万円でつくるマスタースレイブシステム | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
フィジカルコンピューティングについて
「曲げセンサー」を使ってみよう
バーチャルグローブを作ってみよう
印刷用に表示
~パワードスーツが作りたいあなたへ~2万円でつくるマスタースレイブシステム
当記事で紹介するGainerアプリケーションの完成図
今回その縁もあり、新たな作成したサンプルを紹介することで、フィジカルコンピューティングをもっと知っていただけたらと思います。この記事では、Adobe Flash CS3を利用して、直感的な操作を体感できるフィジカルコンピューティングの世界に触れていただこうと思います。この記事を完了するには、次に挙げるソフトウェアが必要です。その他必要な道具や工具がありますので、各章をご確認ください。
著者について
Flashのオーサリングやサーバーサイドプログラムを得意とするWebエンジニア
暇を見つけては、Flashからラジコンを動かす等、インターネットと現実世界を繋ぐモノを作って遊んでいます。
好きな食べ物はカレーライス
友人松村氏と始めたFlashの学校クスールで講師をする傍ら、Web制作案件もしています。2007年に原氏・タナカミノル氏・松村氏と「くるくる研究室」を立ち上げ日々研究に没頭している。
得意技は、出席の確認と、指し棒で、壁を叩くこと
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
カーネルの書き出しと読み込み
ブレンドの使用
フィルタの使用
印刷用に表示
Pixel Benderのエフェクトは、画像、ベクトルグラフィックスからデジタルビデオに至るまで、あらゆる表示オブジェクトに適用できます。実行処理速度の速さも特筆に値します。これまでActionScriptではフレームあたり数秒かかっていたようなエフェクトでさえ、これからはリアルタイムで処理できるようになります。このコンテンツを視聴するには Flash が必要です。このツールキットによって生成されるコンパイル済みのバイトコードは、Shaderオブジェクトに読み込むことで、SWFコンテンツ上で利用することができます。Pixel Benderによって何が可能になるかを知りたい、あるいは新しい技を習得したい、と考えるユーザには、Pixel Benderのプログラムサンプルをチェックすることをお勧めします。この記事で紹介するサンプル以外にも、アドビがホスティングするカーネルのパブリックリポジトリである Pixel Bender Exchange*には、様々なサンプルが掲載されています。これらのカーネルプログラムの作成者は、Flashデベロッパーコミュニティに自らの作品を披露することに同意した親切な方々ばかりです。是非皆さんも、作成したカーネルをExchangeに投稿してみてください。また、Pixel Benderプログラミングについてのディスカッション*フォーラムも存在します。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。この記事付属のサンプルファイルには、以下のプロジェクトが収録されています。この記事にはこれらのサンプルのSWFコンテンツが掲載されています。
この記事に必要な予備知識
コードは、レイヤー名「code」の1フレーム目に配置されています。シェーダが適用されるオブジェクトおよび各種コントロールは、「display」レイヤーに配置されています。
著者について
余暇にはスキンダイビングを楽しむ一方、子供たちと遊ぶことを忘れない子煩悩な父親でもある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Pixel Benderのエフェクトは、画像、ベクトルグラフィックスからデジタルビデオに至るまで、あらゆる表示オブジェクトに適用できます。実行処理速度の速さも特筆に値します。これまでActionScriptではフレームあたり数秒かかっていたようなエフェクトでさえ、これからはリアルタイムで処理できるようになります。このコンテンツを視聴するには Flash が必要です。このツールキットによって生成されるコンパイル済みのバイトコードは、Shaderオブジェクトに読み込むことで、SWFコンテンツ上で利用することができます。Pixel Benderによって何が可能になるかを知りたい、あるいは新しい技を習得したい、と考えるユーザには、Pixel Benderのプログラムサンプルをチェックすることをお勧めします。この記事で紹介するサンプル以外にも、アドビがホスティングするカーネルのパブリックリポジトリである Pixel Bender Exchange*には、様々なサンプルが掲載されています。これらのカーネルプログラムの作成者は、Flashデベロッパーコミュニティに自らの作品を披露することに同意した親切な方々ばかりです。是非皆さんも、作成したカーネルをExchangeに投稿してみてください。また、Pixel Benderプログラミングについてのディスカッション*フォーラムも存在します。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。この記事付属のサンプルファイルには、以下のプロジェクトが収録されています。この記事にはこれらのサンプルのSWFコンテンツが掲載されています。
この記事に必要な予備知識
コードは、レイヤー名「code」の1フレーム目に配置されています。シェーダが適用されるオブジェクトおよび各種コントロールは、「display」レイヤーに配置されています。カーネルのコーディングを始める前に、まずPixel Bender言語について簡単に説明します。この記事を読むだけでPixel Bender言語のエキスパートになれるわけではありませんが、以下を読む進むことで、この言語で記述されたプログラムが理解しやすくなるはずです。0チュートリアルおよびリファレンスガイド*」を参照するようにしてください。Pixel Benderには画像処理に特化した既製のデータ型および関数が収録されています。変数の型宣言は、変数の名前の後ではなく前で行う。varキーワードは使用しない。
つまり、整数の値を宣言する場合、次の構文ではなく、代わりに、次の構文を使用します。ランタイム時には新規オブジェクトを作成できない。つまり、newキーワードはサポート(必要と)されません。Pixel Benderプログラムで浮動小数点数を記述する際には、必ず小数点を記述に含めなければならないことに注意が必要です。小数点が含まれていない場合、Pixel Benderのコンパイラはその数値を浮動小数点数値ではなく整数として扱います。
つまり、仮に1
ベクトル型は、ベースの型名の直後に数字が添えられる形で示されます。例えば、float3と記述された型は、float型の3つの要素が含まれたベクトルであることを示します。Pixel Benderでの典型的なベクトルデータ型使用例を示すのが、次のステートメントです。上記のステートメントでは、rgbaPixelの名の新しいベクトル変数が宣言され、これに色の値が代入されています。スウィズリングがサポートされていることにより、これらの要素の並び順は単に要素名を入れ替えるだけで変更できます。例えば、次に示すステートメントでは、ピクセルの値を他の変数に代入する際に、ピクセルベクトルの赤と緑のカラーチャンネルが置き替えられます。次のように、チャンネルを繰り返すことも可能です。また、次に示すように、チャンネルを削除することも可能です。メモ:ベクトル変数で使用する変数名のセットは任意に選択できます。xと同じものを指します。ベストプラクティスとしてはrgbaのセットを色指定、xyzwまたはstpqのセットを位置指定にそれぞれ使用することが推奨されます。一度の参照において、異なるセットの要素名を混同させることはできません。行列データ型はベクトルとは似ているものの、数値が2次元の配列に含まれるという点が異なります。例えば、float3x3と記述した行列型には、3つの要素が備わった3つのベクトルが含まれます。このオプションがオンになっていれば、サポート対象外のPixel Bender言語機能が用いられた際に、コンパイラが即座にその旨を通知します。(オプションがオフになっている場合、カーネルをFlash Playerに書き出すまではエラーを確認できません。
カーネルの解説
入力画像のピクセルをサンプリング
サンプリングされたピクセルカラーに演算処理を適用
処理結果の値を出力ピクセルに割り当て
そして、サンプリング済みのピクセルは、スウィズリングを利用してカラーチャンネルの順序が並べ替えられた後、outPixel変数に割り当てられています。Flash CS4で生成したSWFファイル上でこのカーネルをフィルタとして使用すると、以下の結果が得られます。このコンテンツを視聴するには Flash が必要です。また、カーネル名の宣言も必須です。利用できる入力数に制限はありません。入力を一切使用しないことも可能です。ただし、カーネルをFlash Playerでどのように使用するかによっては、入力数に対して他の要件が発生することがあります。ブレンドとして用いられるシェーダには2つの入力、ファイルとして用いられるものには1つの入力が必要とされます。塗りとして用いられるシェーダに関しては、入力は一切不要です。なお、実行間にステート情報は一切保存されません。したがって、各実行時のサンプリング済みピクセルを蓄積し、平均のピクセル値を求めるようなことはできません。また、必要な情報はすべて、カーネルの各実行時に演算される必要があります。ただし、あらかじめActionScriptで演算処理を行い、この結果を入力またはパラメータとして渡すことは可能です。入力画像のピクセル値には、必ずサンプリング関数を用いてアクセスします。サンプリング処理は次の内蔵関数を用いて行います。Pixel Benderが画像を処理する際、カーネルは出力画像のすべてのピクセルに対して実行されます。原点は左上の隅にあり、正の値は右側および下側への移動を示します。ピクセルは常に正方形です。サンプリングの対象ピクセルは、outCoord()のポジションに限定されるわけではありません。例えば、次のサンプリングステートメントを利用すれば、現在のピクセルから10ピクセル右、かつ5ピクセル下のピクセルをサンプリングできます。0 )は、outCoord()関数によって生成される座標ベクトルと2要素からなるベクトルの和を求めます。0)と記述するのに相当します。サンプリング対象の座標が入力画像の範囲外になるような場合は、すべて0が含まれたカラーベクトルが返されます。例えば、入力のデータ型がimage4の場合に範囲外のピクセルをサンプリングすると、完全に透明な黒のピクセルが返されます。入力のデータ型がimage3であれば、(アルファチャンネルなしの)黒のピクセルが返されます。ただし、表現できる座標の範囲については実用的な制限があります。また、現存しないサンプリングデータの有用性についても制約が存在します。
ピクセルの操作
一旦ピクセルを表現するベクトルが取得できたら、これらのカラー値を様々な方法で操作できます。仮に、pixの名のpixel4変数があった場合、個々のカラーチャンネルまたはチャンネルの組み合わせは以下の様々な方法で参照できます。
赤チャンネルとアルファチャンネル:pix
赤と青を置き替えた状態のアルファチャンネル以外のすべてのチャンネル:pix
個々のカラーチャンネルは32-bitの浮動小数点数で表され、通常、0
0(白)の間の値になります。出力側のカラー値はこの範囲外でも指定できますが、この場合はレンダリング結果には表現されません。0)は、ビットマップとしてレンダリングされる際、いずれも同じ黒になります。
(ただし、同一画像に対して複数のフィルタを実行するような場合は、当該ピクセルをサンプリングするにあたり2番目のフィルタが(0
0)を検出するので、実行結果に大きな差が現れることがあります。ピクセルベクトルの演算処理には、スカラー値とベクトル値のどちらも利用できます。スカラー値を使用する場合は、演算処理が各チャンネルに適用されます。例えば、次に示す演算処理では、各チャンネル(アルファチャンネルを含む)の値が半減されます。ベクトルを用いてこれと同じことを記述すると、次のようになります。カーネルをFlash Playerで実行する際、入力画像のデータは一旦チャンネルあたり32-bitに変換され、その後カーネルの実行完了時に、チャンネルあたり8-bitへと再変換されます。入力の宣言には、次に示すように、inputキーワードを用います。カーネル内の個々の入力に、異なる数のチャンネルが含まれていても問題ありません。シェーダによって生成される出力画像のチャンネル数は、入力側のデータ型ではなく、出力ピクセルのデータ型によって決定されます。宣言する入力の数は、カーネルがFlash Playerによって使用される際に必要な数より多くても問題ありません。ただし、Flash Playerは自動的に、必要とされる入力に対してのみ画像データを割り当てます。なお、この余分な入力に対しては、カーネルがブレンド、フィルタ、塗りのいずれであるかを指定する前に、画像を割り当てる必要があります。
例えば、テクスチャ付きのエフェクトを作成するためにフィルタカーネルで追加の画像を使用した場合、当該カーネルが含まれたShaderFilterを表示オブジェクトのフィルタ配列に割り振る前に、必ず当該テクスチャをカーネルの入力として割り当てる必要があります(この方法については後ほど詳しく解説します)
パラメータの定義
カーネルには、入力画像以外の値もパラメータとして供給できます。パラメータのメタデータを宣言して、デフォルト、最小および最大の値を指定することも可能です。また、説明を供給することも可能です。メタデータは山括弧(<>)で挟む形で宣言します。パラメータを使用する際には、あらかじめ合理的なデフォルト値を定義しておくことが推奨されます。次のパラメータステートメントでは、メタデータが備わったfloat3パラメータが宣言されています。前出のパラメータの現在値、最小値、最大値にActionScriptからアクセスしたい場合は、次のステートメントが利用できます。(ここでは、これらのパラメータが備わったカーネルを含むShaderオブジェクトの名がmyShaderであったとします。仮に、パラメータがスカラー型であった場合は(floatなど)、返される配列に単一の要素が含まれます。
カーネルの書き出しと読み込み
書き出したカーネルには、pdjのファイル拡張子が付きます(図1参照)
Embedタグは、次の例に示されている通り、変数型定義のClassとともに使用します。次のコードでは、埋め込まれたカーネルを利用して、ステージ上のMovieClipインスタンスに適用される、新規のシェーダとShaderFilterオブジェクトが作成されます。しかし、必要であればカーネルをランタイム時に読み込むことも可能です。次のサンプルでは、URLLoaderクラスを利用してカーネルを読み込んでいます。swcライブラリを利用します。Embedタグを用いて初めてムービーをテスト・パブリッシュする際には、Flex SDKの位置を確認するよう促されます。他のバージョンのFlexを使用する方が良い場合は、パスを任意に変更することも可能です。0設定ダイアログボックス上で後からでも変更できます。0設定ダイアログボックスには、パブリッシュ設定のFlashタブ内、スクリプトドロップダウンメニューのそばにある「設定」ボタンをクリックすることでアクセスできます。
ブレンドの使用
ブレンドは、ブレンド適用対象の表示オブジェクトのカラーと、ステージ上の当該オブジェクトの背後のカラーを組み合わせます。ここでは練習課題として、既製ブレンドのいくつかを再現してみることにします。また、既製のブレンドを使用するだけでは簡単に達成しえないような、ブレンドの作成にも挑戦します。表示オブジェクトにブレンドを適用するには、読み込み済みのカーネルバイトコードでShaderオブジェクトを作成し、これを当該表示オブジェクトのblendShaderプロパティに割り当てます。ブレンドカーネルには必ず2つの入力が必要となります。1つ目の入力は(blendShaderプロパティが設定される)前景の表示オブジェクト、そして2つ目の入力は前景オブジェクトの下にあるなんらかのものです。他の入力も使用したい場合は(マスクまたはテクスチャを作成する場合など)、ブレンドを適用する前に、これらの入力に明示的にBitmapDataオブジェクトとして画像を割り当てる必要があります。乗算ブレンドでは、前景オブジェクトの各カラーと背景オブジェクトのカラーの積が求められます。片方の画像が純白なケースを除き、このブレンドは結果を暗くする効果があります。このコンテンツを視聴するには Flash が必要です。メモ:Pixel Bender言語上で2つのベクトルの乗算を行うと、対応する要素の値同士の積が求められます。つまり、仮にaとbがいずれもfloat2のベクトルで、次に示すステートメントが記述されていたとします。この場合、上記ステートメントは、次の2つのステートメントと同じことになります。スクリーンブレンドでは、カラーの積が求められた後、その値が反転されます。つまり、このブレンドには乗算ブレンドの適用と正反対の効果があります。片方の画像が黒であるケースを除き、このブレンドは結果を明るくする効果があります。このコンテンツを視聴するには Flash が必要です。このカーネルは、先ほどの乗算カーネルとほぼ同じであることが確認できます。resultに対する数値演算処理の内容が、唯一の変更点です。このサンプルには、読み込み・適用対象のシェーダが異なるという例外を除けば、同じActionScriptコードを使用できます。ハードライトブレンドは、乗算ブレンドとスクリーンブレンドを組み合わせたものです。前景のピクセルが50%グレーより明るい場合はスクリーンブレンドが適用され、それ以外の場面では乗算ブレンドが適用されます。このコンテンツを視聴するには Flash が必要です。ハードライトブレンドは、これまでのものよりやや複雑です。このブレンドでは、まず前景画像のピクセルのカラーチャンネルの平均値を用いて、当該ピクセルのグレーレベルが算出されます。そして、ifステートメントを用いることで、乗算とスクリーンのいずれかのブレンド処理が行われます。このサンプルに対しても、読み込み・適用対象のシェーダが異なるという例外を除けば、これまでと同じActionScriptコードを使用できます。次に、既製のブレンドだけでは達成しがたいブレンドにチャレンジすることにします。ここで紹介するフィルタは、ノイズテクスチャとsin()関数を用いて、木目または大理石模様のエフェクトを作成します。このエフェクトの出来映えは、ノイズテクスチャの特性に左右されやすいといえますが、たいがいの場合、パーリンタイプのノイズが良好な結果をもたらせます。このコンテンツを視聴するには Flash が必要です。このシェーダは、ノイズ画像のピクセル値をサンプリングすることで機能します。また、このシェーダは画像で直接ノイズピクセルを使用する代わりに、ノイズの値を一連のsin()関数にフィードします。そして、その結果と背景の積が求められます。結果エフェクトの曲線具合は、turbulenceパラメータを用いて制御されます。このサンプルに対して使用するActionScriptでは、これまでのサンプルと同じ方法でシェーダの読み込みと適用が処理されます。このサンプルでは、シェーダのturbulenceパラメータを制御するためにスライダが用いられています。スライダの最小値、最大値およびデフォルト値は、パラメータのメタデータに基づいて設定されます。そして、Sliderオブジェクトによって変更イベントがディスパッチされた際には、パラメータの値を変更するためにupdateFilter()メソッドが用いられます。したがって、単に元のShaderオブジェクトのパラメータ値を変更すれば良いというわけではなく、必ず、新たに更新されたShaderオブジェクトをblendShaderプロパティに割り当て直す必要があります。このサンプルでは、説明を簡素化するためにビットマップをノイズのテクスチャとして使用しましたが、BitmapDataクラスのperlinNoise()関数を利用して他のテクスチャを作成することも可能です。
フィルタの使用
フィルタとして使用するシェーダは単一の画像に適用されます。ShaderFilterオブジェクトはシェーダを「包む」役割を担い、単に、表示オブジェクトのfilters配列に追加するだけの操作で、シェーダを既製フィルタ同様に扱うことを可能にします。シェーダが適用されるオブジェクトは、当該カーネルの最初の入力に自動的に設定されます。フィルタカーネルが入力として他の画像も受け付ける場合は、フィルタが表示オブジェクトに割り当てられる前にこれらの画像を設定しておく必要があります。簡単なフィルタについてはChannelScramblerの説明で既に触れているので、ここではより複雑な「ぼかし(ガウス)」を例に解説を進めることにします。
ぼかし(ガウス)
ぼかし(ガウス)は、畳み込みフィルタの1つです。(「畳み込み」フィルタとは、周辺のピクセルの加重平均を計算するフィルタのことです。このコンテンツを視聴するには Flash が必要です。一般的な用途の畳み込みフィルタをPixel Benderで実現することは簡単ではありません。これは、Flash Playerがカーネルコード内でのループ処理をサポートしていないからです。ここでは、forループを使用する代わりに、周囲の各ピクセルをサンプリングするための、個々のプログラムステートメントを記述する必要があります。ここで紹介するサンプルカーネルは、サンプリング半径が1から6(畳み込み行列のサイズ、3 × 3から13 × 13に相当)のガウスぼかしを作成することができます。このフィルタでは、ガウスぼかしが分割処理可能であるという特性を生かして、処理が2段階に分けて行われます。最初の段階では画像に水平方向のぼかし処理が行われ、次の段階では垂直方向のぼかしが処理されます。これにより、出力1ピクセルにつき、「2x半径^2」ではなく「4x半径」の数のピクセルに対してのみサンプリングと加重平均を求める処理を行えば済むようになるため、ピクセルあたりの総演算量を減らすことができます。例えば、このフィルタがサポートする最大半径を使用する場合、最終的な出力1ピクセルあたり、水平、垂直の処理を合わせて26個の入力ピクセルがサンプリングされます。仮に、フィルタがこのぼかしを1段階で処理するのであれば、出力ピクセルにつき169もの入力ピクセルをサンプリングする必要があります。このカーネルでは、forループが使えないことを克服するために、整数の半径値が個別に扱われます。有効なそれぞれの半径値に対しては、現在のピクセルから所定の半径分両側に離れた、2つのピクセルがサンプリングされます。この2つのピクセルに対するガウス加重は同じであることから、これらは単に加算されます。必要なピクセルのサンプリングがすべて完了したら、ウェイトとスケールの係数が適用されます。
水平方向の処理には、次のカーネルコードが用いられます(垂直方向の処理でも、同様のカーネルを使用)
エフェクトを完成させるには、両方のカーネルをフィルタとして適用する必要があります。なお、フィルタを適用する順序に決まりはありません。次に示すActionScriptコードでは、半径パラメータを制御するためにスライダが用いられています。このサンプルの場合、各フィルタの半径には同じ値が設定されます。前出のブレンドと同じように、パラメータの値が変更された際には、シェーダフィルタを表示オブジェクトに再度割り当てる必要があります。ビットマップの塗り同様に、シェーダの塗りも表示オブジェクトのオリジンに登録されます。この登録情報は、変換行列を用いることで調整できます。面または線の塗りとして使用されるシェーダにおいて、入力画像は自動的に割り当てられません。(塗りアルゴリズムの一環として画像が必要になる場合は、beginShaderFill()メソッドを呼び出す前に、その画像を入力に明示的に割り当てる必要があります。
市松模様の塗り
次に取り上げる塗りのサンプルでは、市松模様を作成することにします。模様の正方形の大きさおよび色は、カーネルのパラメータによって制御されます。このコンテンツを視聴するには Flash が必要です。この模様のアルゴリズムでは、モジュロ除算を用いて現在のピクセル位置の値と模様サイズを倍にした値の演算が行われます。演算結果が模様のサイズ(checkerSize)より小さな場合は、カーネルがAの色を描画し、それ以外の場面ではBの色を描画します。これで縞模様が作成されます。この縞模様を市松状にするには、次に示すように、このテクニックを縦と横の両方に適用する必要があります。後は、これらの結果をどのように組み合わせるかが問題です。以下に、完全なカーネルコードを示します。このサンプルに対して使用するActionScriptコードは、これまでのものよりやや複雑です。これは、カーネルに一段と多くのパラメータが用いられていることと、パラメータ自体がより複雑であることに起因しています。この関数はShaderオブジェクトを作成し、カーネルパラメータのメタデータを使用してコントロール群の初期値を設定します。そして、シェーダの塗りを用いて描画を行うdrawShape()関数を呼び出します。塗りの更新は、いずれかのコントロールによってchangeイベントが発せられた際に、再びdrawShape()関数が呼び出されることで処理されます。この関数は、現在のコントロール値に基づいてカーネルのパラメータを規定し、現在のグラフィックスを消去してから当該シェイプを再描画します。前出のサンプルでは、カーネルパラメータを規定するためのスライダが組み込まれていました。ここではカラーピッカーコントロールも使用することにしますが、この実装はスライダよりやや複雑になります。checkerSizeのようなスカラー値のパラメータであれば、配列には単一の値が含まれますが、色のようなベクトル型の場合は、ベクトルの各要素に対して配列に1つずつ配列要素が含まれます。また、アルファチャンネルは、このユニットカラーでは最初のチャンネルであるものの、Shaderオブジェクトのパラメータ配列では最後のチャンネルとして扱われています。この演算結果は、ビットワイズ左シフト演算子(<<)を用いて32-bitユニット値の適切なagrb位置にシフトされます。そして最後に、ビットワイズOR演算子(|)を用いて4つのチャンネルが1つのユニットに組み合わされた後、返されます。この関数では、各チャンネルに対してビットワイズ右シフト演算(>>)が行われ、そしてビットワイズAND演算子(&)によって他のチャンネルに属するビットがマスクアウトされます。この結果は、Pixel Benderで必要とされる順序で配列の適切な要素へと割り当てられた後、返されます。
著者について
余暇にはスキンダイビングを楽しむ一方、子供たちと遊ぶことを忘れない子煩悩な父親でもある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
アイデアから制作、公開までより直感的で勢いをキープしたまま制作できる行程を感じ取っていただけると嬉しいです。
ポッドキャストアニメーションを体験
この記事で紹介している青池氏のアニメーションをビデオ・ポッドキャストとして配信しています。ビデオ・ポッドキャスト配信サイトからポッドキャストアニメーションをダウンロードして Flash アニメーション体験いただけます。
ビデオ・ポッドキャスト配信サイトからダウンロード
フォーマットを決める。まずは、ポッドキャストに向け Flash ムービーのフォーマットを決定します。次に同じドキュメントプロパティーの中にある項目「フレームレート」(1秒間に何フレーム再生するか)を設定します。iPod ビデオでは、毎秒30フレームの再生が可能です。ここでは、アニメーション制作の便宜上「15fps」と設定します。「30fps」ではより滑らかなアニメーションが制作可能ですが、フレーム数が倍になるとアニメーションのコマ割りも倍になりますので、作業量を考えながらフレーム設定をする事をお勧めします。ストーリーを考え、絵コンテを作る。思い描くストーリーをまとめて、絵コンテを制作します。今回はポッドキャストで再生されるということを意識して、iPod の液晶でもわかりやすい画面構成を意識します。あまり複雑になったり、テキストが小さすぎたりすると内容が伝わりにくいかもしれません。絵コンテは普通の紙に書いてもいいですし、今回の場合は、Flash 上でラフに描いた絵を、「イメージの書き出し」をして絵コンテにしています。ここで描いた絵を、アニメーション制作時に、「ガイドレイヤー」にペーストして、レイアウトの下書きに再利用しています。タイムラインにアニメを制作してゆく。Flash 8 で実際にアニメーションを制作するにあたって、画面上部に「タイムライン」が表示されます。これは左から右に時間の進行を表したもので、先ほど設定した「フレームレート」に従って、時間の流れを表しています。絵コンテの時に考えたタイミングに従って、タイムラインに下書きを書いてゆくと、実際のアニメーションのタイミングが体感できるはずです。そこでアニメーションのテンポが良いかどうか、繰り返し確認してゆきます。シンボルを使用する。「鉛筆ツール」は「線」を描くためのツールで「作画した後で修正や、線の太さの調整が可能です。一定の太さのきれいな線を引く事が出来ます。「ブラシツール」は、筆で描くようにタブレットを使用した場合、線に強弱を付けたり、勢いのある線を描くことが出来ます。このツールで描いた線は「塗り」として認識されます。これらのツールで描いた線に「バケツツール」などを使って着色してゆきます。Flashでは、作画した絵、読み込んだ画像ファイルなどを「シンボル」として登録する事で、「移動」や「縮小拡大」、「回転」、「色彩効果」など様々な効果をかけることが出来ます。アニメーションを製作する場合には「シンボル」の種類を「グラフィックシンボル」に統一して制作するとタイムライン上で動作の確認が出来ますし、ムービーの書き出しにも適しています。「オニオンスキン」でアニメを描く。タイムラインにキーフレームを作り、「コマアニメ」を描く場合には、タイムラインの下にある「オニオンスキン」ボタンをアクティブにします。これによって、前後のフレームが半透明に表示されますので、それをガイドにしながら作画してゆきます。半透明に表示される範囲を変更するには、タイムライン上部のオニオンスキンマーカーの範囲を変更するか、「オニオンスキンマーカー設定」で変更します。「トゥイーン」を活用する。いったん「シンボル」に変換したグラフィックは、タイムライン上でキーフレームを設定し、「モーション・トゥイーン」で移動、回転、拡大縮小などを行う事が出来ます。「頭」「体」「二の腕」「腕」などをそれぞれにシンボルとして登録し、この「トゥイーン」を組み合わせる事で、間接ごとに動くアニメーションを製作する事もできます。また「トゥイーン」には、「プロパティパネル」で「イージング」を設定する事で「動き始めは速く、次第にゆっくりと止まる」「ゆっくり動き始めてスピードを上げながら止まる」など、より自然で複雑な動きをつけることもできます。レイヤーを重ねてゆく。「タイムライン」上で「レイヤー」を追加し、背景を追加したり、アニメーションの上にタイトルを追加したりしてゆきます。アニメーション部分でも、前後の重なりや、分割して描いた方がわかりやすい所などにレイヤーを追加し、絵を重ねてゆくことが出来ます。レイヤー別に「シンボル」を設定してそれぞれに効果をかけるなどし、複雑なアニメーションの制作も可能です。サウンドを付ける。アニメーションに付けるサウンドは、アニメーションのグラフィック同様、タイムラインに配置してゆきます。この時、「プロパティ」のサウンド設定を「ストリーム」に設定すると、タイムライン上で動的にサウンドとアニメーションの同期を確認することが出来ます。サウンドもグラフィック同様、「レイヤー」を追加し、BGM、効果音、台詞など「レイヤー」を分けて重ねることが出来ます。音量の設定や、フェードイン、フェードアウトなどは「プロパティ」の「効果」からの選択や「編集」パネルで指定してゆきます。
プレビューで確認
アニメと音がそろった所で、メニューの「制御」より「ムービープレビュー」を行います。ここで思い通りのアニメーションになっているか確認します。
ポッドキャスト用ムービーに変換
プレビューがうまく行った所で、ポッドキャスト用ムービーに書き出してゆきます。「ファイル」メニューより「ムービーの書き出し」を選択し、ファイルネームを付けます。その時、フォーマットの選択がありますので「QuicTime ビデオ」を選択します。264」、画質は高くすればより良くなりますが、ファイルサイズが大きくなります。サウンドはここでは「44kHz 16ビットステレオ」に設定しておきます。ここで、Apple 社から提供されている「iTunes」を立ち上げ、「ファイル」メニューより「読み込み」で先ほど作ったムービーファイルを読み込みます。読み込みが完了した時点で「ビデオ」メニューにムービーのサムネイルが表示されます。このサムネイルを選択し、メニュー「詳細」より「選択項目を iPod 用に変換」を選択します。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Progressionを使えば、Flashサイトであっても、HTMLサイトのようなページ構成や画面遷移といったサイト基本機能を簡単に実装することができます。すでに多くのクリエイターが利用しており、個人サイトだけでなく、企業サイトでもProgressionが採用されています。そこで本記事では、技術賞を授賞した「PRGEAIR」の開発者である青木大輔さんに、その機能と使い方を解説していただきます。従来は開発言語としてPythonしか使えませんでしたが(PRGEAIRもPythonを使用します)、新たにJavaのランタイム環境がサポートされたことは記憶に新しいところです。これにより、Java自身はもちろんのこと、JRubyやJavaScript(Rhino)、ScalaなどJVM上で動作するコンパイラやインタープリタ言語での開発も可能となり、初期投資が極めて少なく、スケーラビリティの高いWebアプリケーションを公開できるプラットフォームとして、現在注目を集めています。PRGEAIRは、このようなコードを自動で生成してくれるのです。サーバサイドのコードを一切記述することなく、Google App Engineの各サービスを利用したサイトを公開することができます。サンプルとして、以下のようなアプリケーションを作ってみました。サーバ側は単なるデータストレージとして使用したい場合に威力を発揮します。以下は、Mac OSXでターミナルを使用した場合の例です。
airをダブルクリックしてインストール
STEP4 インストール後は通常のアプリケーションと同様にダブルクリックで起動します。右側のフォルダ選択アイコンをクリックして、Progressionプロジェクトを選択してください。この時点でFlashを起動する必要はありません。モデルを追加し、それぞれのモデルにデータ要素とデータ型を追加してください。モデルとは、リレーショナルデータベースで言うところの「テーブル」に相当し、データ要素は「カラム」に相当します。作成したモデルの定義は保存ボタンで保存を行なうことができ、別のプロジェクトでも使い回したい場合は、開くボタンで該当のファイルを選択すると追加できます。ただし、使い回せるのはモデルの定義だけで、別のGoogle App Engineアプリケーション間でデータそのものは共有できるわけではありません。
アプリケーションサーバとの接続
ActionScriptアクセスライブラリの使用には、はじめにアプリケーションサーバとの接続を確立します。
// エラー発生時のハンドラ
また、ログイン/ログアウトを処理させるには、上記で取得したURLに対してナビゲーションを行ないます。
// ログインページに遷移
// ログアウトページに遷移
その際、一つ注意が必要です。ここで送信するメールは、ユーザー自身のGoogle Mailのアカウントとは全く無関係だということです。つまり、送信元や返信先のアドレスを自由に設定することができます。
また、送信できるメール数には制限があります(別途有償プランで送信数を増やすことは可能)
冒頭で紹介したサンプルアプリケーションでは、セキュリティを考慮して、Google Accountでのログインを行なわないとメールを送れないように設計してますが、これはアプリケーション側での制約であり、APIレベルではこのような制限はありません。なお、現時点のPRGEAIRでは、メールに書類を添付する機能には対応していません。
// メールの送信関数
データストアへのアクセスライブラリは、PRGEAIRでの設定内容に依存します。Sampleクラスでは、それぞれ以下のメンバー関数が提供されます。結果は、それぞれResponderオブジェクトで指定した関数内で受け取ります。// モデルの定義を得ます。// 全データを得ます。// フィルタで絞り込んだデータを得ます。
// 全てのデータを削除
クラスの詳細などに関しては、以下のコマンドでASDocを生成して見てみてください。ただし、上記ディレクトリ上にある、Progressionが標準で組み込むライブラリがエラーを吐くので、ASDocを生成する際は、一時的にPRGEAIRで生成されるファイルだけを置くなどの工夫が必要です。
サンプルサイトのソースに関して
ProgressionのサイトからダウンロードできるPRGEAIRのアーカイブには、冒頭で紹介したサンプルサイトのソースコードが含まれています。Progressionでの具体的なアクセスライブラリの使い方に関しては、ソースコードを参考にしてください。yamlファイルの編集が必要となります。swfを追加する場合は、以下を追加します。
次のバージョンでは、個別に記述しないで済むように自動生成するapp
yamlの内容を改善する予定です。現状は、サーバサイドをあまり意識しないで簡単にGoogle App Engineに公開できることにフォーカスしていますが、今後は、Pythonスクリプトでサーバーサイドのロジックを記述できる方を対象にサーバサイドのサービスを拡張できるようにしていく予定です。
著者について
普段は家電の組み込みプログラムの開発をしているエンジニア
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
QRコードは今や至るところにあり、携帯電話には必ずと言っていいほどQRコードを読み取る機能がついています。
QRコードは、皆さんにとって身近な存在でしょう
※QRコードは株式会社デンソーウェーブの登録商標です。Web上でも、携帯サイトへアクセスしやすいように、携帯サイトのURLなどの情報を埋め込んだQRコードをWebページに貼り付けているサイトをよく見かけます。こうしたQRコードを作成するには、QRコード作成用のエンコーダを使います。エンコード用のライブラリは豊富にあり、Flash用のライブラリもあります。ところが、逆にFlashでQRコードを読み取るためのライブラリはなく、FlashでQRコードを読み取ることは不可能でした。その経緯については、弊社ラボサイトも参照してください。
画像ソースを解析してQRコードのビット列を生成するクラス
QRコードのビット列から文字列にデコードするクラス
本記事では、1を使った処理にについて紹介します。2も面白いトピックですが、数学的な側面が強くなるので詳細については割愛します。
QRコードの特徴
QRコードの画像解析を行うには、まず、Webカメラ映像内からQRコード部分だけを抽出しなければなりません。以下に、抽出上必要となるQRコードの特徴を挙げておきます。QRコード上にある黒や白の最小単位(点一個)を「1モジュール」と呼びます。QRコードの情報量のサイズ(縦横にいくつのモジュールが並んでいるか)を「バージョン」と呼びます。一番小さいものがバージョン1で、縦横のモジュールが4個増えるごとにバージョンの数字が上がり、バージョン40まであります。
【切り出しシンボル】
QRコードを見たとき真っ先に目に付くのがこの「切り出しシンボル」でしょう
これはQRコードの右下を除く3隅に存在し、これによってQRコードの位置、向き、大きさが分かります。切り出しシンボルの周りは、必ず白いモジュールで囲まれています。また、シンボルの中央を通る線に沿って黒と白の長さの比を見ると、次の画像のようにどの方向の線上でも必ず「1:1:3:1:1」の割合になるという特徴があり、これを手がかりに切り出しシンボルを抽出することができます。QRコードの左上を原点として数えると、7列目と7行目にそれぞれ「タイミングパターン」が配置されています。これはシンボル同士の間にあり、白と黒のモジュールが交互に並んでいます。タイミングパターン内のモジュールの数を数えることによって、QRコードのバージョンを判別できます。
【位置合わせパターン】
バージョンが上がるごとにQRコードの大きさが増し、カメラで捕らえたときの歪みも大きくなっていきます。これを補正するために配置してあるのが「位置合わせパターン」です。以上の特徴を踏まえて、Webカメラ映像からQRコードを抽出する手順は以下のようになります。
→画像ソースを取り込む
STEP2 切り出しシンボルを探すため、画像を白か黒かの2色にする。STEP3 切り出しシンボルを探すため、連続した黒色の画素をグループ分けする。
→切り出しシンボル検出
STEP5 QRコードの位置が分かったところで、背景と分離する。STEP7 QRコードのゆがみを補正するために位置合わせパターンを探す。
→位置あわせパターン検出
STEP8 ゆがみを考慮して各モジュールを抽出する。
→読み込みグリッド作成
それでは、各項目について説明していきましょう
解析対象の画像は、Webカメラあるいは静止画像などから取り込むことになります。
Webカメラから取得した生の画像
Webカメラから画像を取得したら、次は画像を白黒2色にして切り出しシンボルを探します。しかし、カラー画像をそのまま二値化するのは、RGBの各色をどのように考慮すればよいのか分かりません。そこでまずは、画像を明るさに応じてグレー化します。0」ですが、これを変えることによって全体の明度を一度の計算で補正することができます。
Webカメラだと暗く映りがちなので、私の経験的に「1
11」というマジックナンバーは、NTSC系加重平均法という方法に由来するものです。3つの数字がRGB各色に対する明るさの重み付けの値となっています。この操作の結果、画素中の赤、緑、青の値はすべて等しくなります。
Webカメラから取得した画像(左)、グレー化した画像(右)
グレー画像はRGBの値が揃っているので、閾値が一つあれば簡単に二値化できます。
二値化するコード例:
二値化の結果、白と黒だけになった画像
二値化によって情報量はかなり削減できましたが、全体をやみくもにスキャンするにはまだ早すぎます。ここで切り出しシンボルの形を思い出すと、「周りが白い、一繋がりの黒い四角」という特徴を持っていました。このような画像を処理するには、「ラベリング」という手法が有用です。これは画像中で隣り合った同じ色の画素を一塊とみなしてグループ分けする処理です。ラベリングを行うには、該当する色を素早く探す必要があります。これはBitmapData中の指定色が存在する矩形領域、または存在しない矩形領域のどちらかを選択して取得できるメソッドです。今回は上記メソッドを用いてラベリングを行い、その結果を保持するクラス LabelingClass を作成しました。
引数は処理対象、保持する矩形の幅/高さの最小値、 塗り開始色、元画像を実際に塗るかどうかの4つ
この操作の結果、画像中にある黒領域がグループ分けされ、処理しやすくなります。ラベリングの結果、まとまった黒色がグループ分けされ、それが上から下に向けて薄い青~薄い緑で塗り分けられた画像となります。
STEP4 ドット走査して切り出しシンボル検出
次に、切り出しシンボルでは黒白黒白黒が「1:1:3:1:1」の比率で並んで現れるという特徴を利用し、切り出しシンボルを抽出します。具体的には、ラベリングして抽出された各矩形の中央を通るラインの端から1画素ずつ色を取得し、連続した黒と白の長さを配列に格納します。
横方向走査のコード例:
// 最初の黒の前に白が紛れ込んでいたら無視する。最後の判定は、かなり計算量の少ない、手を抜いた式になっていますが、同じ領域について縦横と2度判定するため、結構いい精度で切り出しシンボルを認識できます。このステップですべての矩形をチェックして、シンボルが3つ見つかった時のみ次のステップへ進みます。なお、getPixelメソッドは、後述するタイミングパターンの検出にも使います。
シンボルを抽出した画像
赤で囲まれているのが検出された切り出しシンボル
次に紹介するのは、傾いた画像を回転・移動させる手法です。コンピュータにとっては、回転や移動によって情報量は変わらないので、その後の解析に影響はありません。しかし、人間が目で見てチェックする時に多少見やすくなるのでデバッグしやすくなります。また、QRコードの存在する範囲を正方形に近い形で再配置できるので、簡単に背景から切り抜くことができます。
回転・移動などの制御はMath
drawメソッドで書き込みます。今回やりたいことは、次のようなステップとなります。
現在の傾きを取得
回転の中心を決定
傾きを打ち消すように逆回転
適切な位置へ再配置
これをコードで書くと次のようになります。
回転・移動などの制御するコード例:
// 1 傾いたx方向ベクトルのx, y成分を使って次のように取得できます。// 2 任意の点を選び、回転中心とするためにを原点に移動します。// 4 回転中心を配置したい任意の座標に移動します。変形後の画像は、移動先や回転角によって元画像と異なるサイズになります。その点に注意して、bmp_dstのサイズを決定してください。この処理の結果、適切な範囲に正方形に近い形で画像がおさまり、見やすくなります。
回転・再配置し、背景を取り除いて切り出した画像
NOTE:WebカメラがQRコードに対して垂直に向いていないと、上辺が真っ直ぐでも左辺が斜めになるなどの歪みが残ります。この点を回避するために画面に読み込みガイド枠を表示することで、ユーザーがカメラを垂直に向けやすくするなどの工夫を行います。次に、QRコードのタイミングパターンを検出します。処理としては、左上にある切り出しシンボルの右下の座標から横と縦に引いたライン上で、切り出しシンボル検出のとき同様にgetPixelメソッドを使いながら走査します。このラインは実際のタイミングパターンが存在する位置より多少ずれていることが考えられるので、少しずらしながら何度か走査します。
タイミングパターン検出ラインを図示したところ
画像中の赤い線、青い線に沿って、各5回の走査を行っています。本来QRコードには方眼紙のようにモジュールが正確に配置され、全体で正方形になっています。しかし、Webカメラを通すと、どうしても歪んでしまうので、どのくらい歪んでいるのかを検出する必要があります。ある程度大きいバージョンのQRコードでは歪み検出/訂正用に位置合わせパターンが配置されています。右下の位置合わせパターンの位置は固定で、左下の切り出しシンボルの上辺を右側に延長した直線と、右上の切り出しシンボルの左辺を下側に延長した直線との交点上にその中央があります。これを利用して座標の検討をつけ、1ドットずつ斜めに走査して位置合わせパターンの白い画素を探します。
右下の位置合わせパターンを検出するコード例:
こうして得られた矩形領域の中心を現在の位置検出パターンの中心とみなします。
位置合わせパターンを抽出した画像
画像中の青い枠が位置合わせパターンの白領域の境界線
赤いドットが「見当を付けた」検出パターンが存在しそうな位置
全体にかかっている薄い赤線は次項で説明するグリッド
位置合わせパターンを使って、正方形からの歪みがどの程度かわかったので、これを補正しつつ各モジュールを読み込みます。この方法として、正確なグリッドを用意して画像に重ね、それを画像の歪みに合わせて変形させます。変形後のグリッド交点の下にある画像の色を取っていくことで元のQRコードのパターンを復元できます。今回の実装では歪みが小さいものとして、最も単純な補間を行いました。つまり傾きによる遠近法を無視して、単純に縦横nマスのものをn個に均等に分割する方法です。これを実現するコードは次のようなものになります。
読み込みグリッド作成のコード例:
// 横n,縦nのグリッドで左からi,上からj個目の位置を補正した座標を取得
こうして補正したグリッド上でgetPixelメソッドを行うことで、QRコードのビット配列を得ることができます。あとはデコーダの仕事になり、ここまでの読み取り精度次第で文字列が取得できます。
グリッド化の画素からビット配列を作成し、そこから再生成したQRコード画像
デコードについて
ここまででQRコードのビット配列が完成しましたので、その後はその配列をデコードクラスQRdecodeに渡してやれば文字列が得られます。
デコードのコード例:
dataに結果文字列が格納されます。詳しくは、サンプルのコードを見て下さい。次の手段を全て使って、QRコードを画像から抽出しました。今回はWebカメラから読み込んだ画像のため、明るさや歪みを補正する必要がありました。どのような方法で何を解析するかにより手段は変わってきますが、上記のような手段を探し出して、工夫を加えて適用すれば大抵のことはできると思います。処理内容が多いだけに、QRコードを読み込むためにさらに改良できる点は無数にあります。
グレー化&二値化の精度向上(部分的に閾値を変えるなど)
速度のボトルネックになっているラベリング手法の改善または代替手段
走査の効率化
回転走査の除去
パースを考慮した歪み補正
QRコード読み込み機能について今後の発展
PC+Flash+Webカメラと、すでにある素材で非常に安価にQRコードを読み込めるようになり、いろいろな可能性が広がったと思います。
これまで面倒だったQRコード付名刺→PCの情報入力を改善
QRコードをかざすだけで勤怠管理
PSPや携帯から情報をQRコード経由でPCに送る。みなさんも、いろいろと試してみてください。また、実際に動作するプログラムは、弊社ラボサイトに設置してあります。※次のような場合はうまく読み込めないことがあります。・QRコードが曲面上に印刷されている。・部屋の照明などでQRコードの一部だけが明るく光っている。・QRコードが小さく、Webカメラが接写に対応していない。
著者について
在学中はタイピングマニアだった。正確性の鬼として名を馳せ、全国コンクールで優勝したこともある。
タイピングのし過ぎで指を痛めてからはプログラミングをする時間が増え、PHPプログラマーとしてロゴスウェア株式会社に就職
1年後、社内移籍によりFlash開発がメインとなり、社内用ライブラリ開発などをしながら今に至る。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Spark projectでは、その他にもさまざまな用途のライブラリやソースコードが公開されています。ぜひ、チェックしてみてください。
みんなが「ユーザーアクションの記録・再生」を手軽にできるように
これまで、ユーザーのマウスやキーボード操作を記録・再生するコンテンツはいくつもリリースされてきました。しかし、「ユーザーアクションの記録・再生」機能を持つコンテンツのニーズは高い反面、そういった機能やライブラリはあまり公開されていなかったため、各デベロッパーがコンテンツに合わせて独自の仕様を決め、実装する必要がありました。今回、あるコンテンツの作成の際にこの記録・再生する機能が必要になり、実装することになりました。その時、こういう「ちょっとしたニーズを満たす機能をライブラリ化すれば、みんな便利かも」と思い、他の人でも簡単に機能を実装できるように汎用性をもたせたライブラリ「Recorder Lib」を作成しました。
MEMO:様々なライブラリが公開されていますが、こういう「単機能だけど、アイデア次第でいろいろ使える」系のものほど多くの方に利用されていると思われます(TeraClock、Threadなど)
【データを記録する】
記録するプロパティを指定すると、毎フレームごとに記録し続けます。また、記録する時間やフレーム数を指定することができます。特にイベントデータは、dispatchEventのタイミングでEventクラスのインスタンスを保持するので、再生用のメソッドを用意しなくても、再生時にそのまま同じイベントを起こすことができます。
【データをバインドする】
記録したデータを、別のオブジェクトのプロパティに割り当てることができます。例えば、マウスの動作を記録して、オブジェクトのx・y座標に割り当てることで、マウスの軌跡を辿ることができます。また、x・y座標の割り当てを逆にしたり、rotationに割り当てるなど、アイデアに次第で様々な組み合わせが行えます。
【データを再生する】
フレームごとに、バインドしたプロパティにデータを送り続けます。また、時間やフレーム数を指定して再生したり、記録しながら一定時間後に再生するというタイムシフト再生も可能です。このように「ユーザーアクションの記録・再生」機能を3段階に分けることで、記録するデータの種類を増やしたり、再生時に対応付けるオブジェクトを変えたりといった作業が行いやすくなっています。Recorder Libの構成は、プログラミングの「MVC(モデル・ビュー・コントロール)」の考え方をもとにそれぞれを切り分けています。そのため、みなさんが自分の開発するコンテンツに合わせて独自に拡張しやすくなっています。それをお見せするために、マウス操作行動判定コンテンツ「マウスハンテイ」を作ってみました。これは、ユーザーのマウス操作(移動やクリック)を10秒間記録し、その挙動をもとにコメントを出すといコンテンツです。「スタート」を押して、マウスを自由に10秒間操作してください。結果発表画面では、マウス操作の再現、移動距離と速さなどの分析結果、簡単なコメントが表示されます。このようなコンテンツも簡単に作成することができます。記録の準備として、以下の手順を行います。
//インスタンスの作成
//記録するプロパティの追加
//バインドするプロパティの設定
Recorderクラス(もしくはそのサブクラス)のインスタンスを作成します。
その際、引数に記録をモニターするオブジェクトを指定します(通常は、stageがいいでしょう)
記録するプロパティを追加します。2番目、3番目の引数は、記録するオブジェクトとプロパティの文字列です。
また、再生時にデータが変更されるタイミングで何か動作を行う場合は、PropertyEventを追加します(マウスの座標を記録した場合、カーソルが動いている時のみブラーを掛けるなど)
バインドするプロパティを設定します。値は生データで記録・再生されるので、閾値が異なるデータの場合は、一度別のプロパティに割り当て、変換を行う必要があります。
(例:x座標をアルファに変える際など)
データの記録
記録はrec()メソッドを実行することで始まります。
//記録の開始
//時間(ミリ秒)を指定して記録の開始
//フレーム数を指定して記録の開始
データの再生・停止
//記録の開始
//記録の停止
//再生の開始
記録時ではミリ秒単位で指定しましたが、このメソッドでは秒単位で指定します。単位が異なるのは、たいていの場合、ミリ秒がフレーム数に追いつかないからです。
//記録の開始
//遅延する時間(秒)を指定してタイムシフト再生を開始
右側の赤い録画ボタンを押して、赤い矢印をドラッグしてください。右から2つのストップボタンを押して記録を停止し、再生ボタンを押して下さい。
イベントの記録
rec()メソッド実行後、イベント発生時にrecEvent(イベント)メソッドを実行することで、タイミングとイベントが記録されます。再生時には、同じイベントインスタンスが実行されます。
//イベント記録の準備
//レコーダーの準備
//記録の開始
//マウスイベントの設定
//マウスを押した際の動作
//イベントの記録
//マウスダウン時の処理
キーコードの記録
キーコードはプロパティではなく関数にのみバインドします。そのため、再生時には「Aキーを押したタイミングでpressA()を実行する」といった対応付けを行うことができます。
//インスタンスの作成
//バインドするキーコードと、再生時に実行する関数を設定
キーコード記録のサンプル
右側の赤い録画ボタンを押して、矢印キーを使ってオブジェクトを移動させます。右から2つのストップボタンを押して記録を停止し、再生ボタンを押して下さい。
//インスタンスの作成
右側の赤い録画ボタンを押し、しばらくしてストップボタンを押して記録を停止します。再生ボタンを押すと、左側のオブジェクトの動きを再生します。
Webカメラ映像記録のサンプル
右側の赤い録画ボタンを押し、しばらくしてストップボタンを押して記録を停止します。再生ボタンを押すと、Webカメラの映像が再生します。
今後やりたいこと
記録できるデータ形式の追加(たとえば音声データなど)
記録データの圧縮、エンコード
差し当たって、テキストデータの圧縮機能を追加すれば、サーバへの記録時の容量削減などが行えて、利用の幅が広がると思いますので、今後進めていきたいと思います。
著者について
大手ECサイトのインターフェース設計、開発進行管理、Flashコンテンツの開発等を担当
その後、Flashデベロッパー専任となり、大手企業のブランドサイト、プロモーションサイト、CGMコンテンツなどの開発に携わっている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0を使った写真やビデオの反射効果 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0を使った写真やビデオの反射効果
最近、素敵な反射効果を取り入れているWebサイトやオンライン広告、そしてソフトウェアをよく見かけるようになりました。0的デザイン要素で、アルバムのカバー写真やビデオプレーヤの下側に、あたかも床があって反射しているかのような表現です。0ベースのカスタムクラスを作る方法を解説します。このReflect クラスは、手軽にインパクトのある要素をデザインに取り入れたい、そう考えている人たちのために作成しました。
反射効果を一から作るとなるとかなりの努力が必要でしょう
しかも、反射させる素材を変更すると、それに合わせて反射効果の部分もやり直さなければなりません。静止画ならまだしも、アニメーションやビデオを手作業で反射させるとなると、不可能としか思えません。ところが、この記事を読めば、ムービークリップにコピー&ペーストして、反射具合を調整するだけで反射効果を実現することが可能です。アニメーションやビデオにも同じように反射を適用できます。しかも、Reflect クラスを一度適用させてしまえば、ムービクリップの内容を変更しても、それに合わせて反射効果部分も自動的に変更されるのです。この記事やサンプルは、Flashコミュニティに対する私の愛の証でもあります。Flashコミュニティは、他のコミュニティとは違います。コードや機能について分からないことがあれば、誰かが進んで助けてくれます。0ベースの反射効果コードを紹介したとき、Flashコミュニティの親切なメンバーたちから、参考となるコメントや機能の要望などすばらしいフィードバックをたくさん頂きました。中には、Reflectクラスを改善するためのコードを提案してくれた人もいました。ここで紹介しているサンプルは、自分たちの時間を割いてまで私を助けてくれたFlashコミュニティメンバーたちの協力が込められたものなのです。この記事では、以下のソフトウェアとサンプルを使用しています。
事前に必要な知識
0、そしてActionScriptのクラスに関して中・上級レベルの知識を持っている人を対象としています。
Reflectクラスの解説に入る前に、反射効果がどのようなものかを実際に見ておいた方が理解しやすいでしょう
図1の反射効果エクスプローラには、いろいろとスライダーがあります。Reflection Codeボックス内には、プレビューの反射効果を実現するために必要なコードが表示されるようになっています。スライダーをドラッグすると、反射効果が変わり、右下のReflection Codeボックス内のコードもダイナミックに内容が変化しています。なお、このプレビュー部分のムービクリップのインスタンス名は「ref_mc」としています。スライダーをドラッグすると反射効果が変化します。
上部にある「Show Video」ボタンをクリックすると、反射させる素材が写真からビデオに切り替わります(ビデオを表示させているときは、写真に切り替わります)
気づいた人もいるかもしれませんが、写真を素材としているときは、コード内の「update time」を-1に設定しています。写真は静止画ですから、ビデオの場合と違い、定期的に反射効果部分をアプデートする必要がありません。他のパラメータについては、後ほど解説します。クラスを作成する際は、必ずパッケージを指定しなければなりません。as」とし、そのクラスファイルは複雑なフォルダ構成の中に置いています。クラスファイルを置くフォルダ構成は自由に決めることができますが、必ずパッケージと同じフォルダ構成にしなければなりません。
たとえば、この記事のダウンロードサンプルを開くと、Reflect
今回、ここまで複雑なフォルダ構成にしたのは、自分のコードが他のReflectクラスのコードライブラリと衝突しないようにするためです。他のクラスをインポートする。Reflectクラスでは、他のクラスも数多く利用しています。後に続くコードを見ればわかるように、これらのクラスのオブジェクトを使用します。Reflect クラスでそれらのオブジェクトを使用するには、まずは以下のコードのように利用するクラスをインポートします。
必要な他のクラスをインポートしたところで、Reflectクラスを書いていきましょう
まずは、Reflectクラスに関連する情報をトラッキングするための変数を設定してます。
//反射させるムービークリップ(被反射ムービークリップ)を参照
//ムービークリップのビジュアルコピーを保持するBitmapDataオブジェクト
//グラデーションマスクとして機能するムービークリップ
//反射を更新する頻度(ビデオやアニメーションの場合)
//ムービークリップと反射画像との距離
クラス内で参照される変数を定義したら、次にコンストラクタ関数を記述します。ReflectクラスをFLAファイルで使用するには、コンストラクタ関数を使って そのオブジェクトインスタンスを生成する必要があります。今回のサンプルでは、Reflectクラスのオブジェクトインスタンスをargsオブジェクトとし、ユーザーが定義した反射効果の設定情報をReflectクラスに渡す役割を担っています。たとえば、以下のようにReflectクラスをオブジェクトインスタンス化します。
お気づきの通り、ReflectクラスをFLAファイルで使用するには、既に定義しているパッケージパス、つまり「com
インポートした後は、Reflectクラスのオブジェクトインスタンスを参照するための変数を定義して、オブジェクトに情報を渡します。Targsオブジェクトから受け継いだ引数をReflectクラスの変数に代入します。他にも、これらの引数をもとにムービークリップの高さや幅、反射範囲に関する変数を定義します。/*argsオブジェクトから以下の変数に引き渡します。
//反射像の透明度
//グラデーションマスクの割合
//反射の欠け具合
//ムービークリップと反射像の距離
//ムービークリップの高さと幅を保存
//反射範囲を保存
お膳立てが終わったところで、いよいよReflection クラスのメイン部分です。BitmapDataクラスにはドローメソッドがあり、ムービークリップのビジュルスナップショットを取得できます。このドローメソッドを使って、Reflectクラスに引き渡したムービークリップのスナップショットを取得し、そのスナップショットデータをBitmapオブジェクトに入れます。
//ムービークリップのスナップショットを保持するBitmapDataオブジェクトを作成
//反射像の上下を逆さまにする。
//反射像をムービークリップの下に移動
ここまでのコードでコンストラクタとパッケージを閉じると、ムービークリップは図2のように表示されます。ご覧の通り、Reflectクラスでは、ムービークリップのビジュル層をコピーして、その上下を逆さまにし、ムービークリップの下に配置しています。
グラデーションを作成
反射像を適切な位置に置いた後は、次にグラデーションを保持するムービークリップを作成します。このムービクリップをグラデーションマスクに使用します。
//グラデーションマスク用の空のムービークリップを追加
グラデーションマスク用のムービークリップを追加したところで、実際のグラデーションに取りかかります。今回のグラデーションでは、様々な値を使用します。グラデーションを作成するには、受け取ったalphaとratio変数を使用します。これらの変数と、既に定義している反射範囲と合わせて、gradientMask_mc内にグラデーションボックスを構築します。いろいろと試してみてください。
//グラデーションの塗りを設定
//マトリックスとグラデーションボックスを作成
//グラデーションマスクのマトリックスの高さを設定
//グラデーションの塗りを作成
//反射像の上にグラデーションマスクを配置
//グラデーションマスクを機能させるにはビットマップキャッシュを有効化する。
//反射像のマスクをグラデーションマスクとして設定
更新頻度の確認
コンストラクタ関数の最後のパートでは、ムービークリップのスナップショットを保持しているBitmapDataオブジェクトのリフレッシュが適切な更新頻度で行われているかをチェックします。動かない、アニメーションのないムービークリップであれは、BitmapDataオブジェクトをリフレッシュする必要はありません。その場合は「-1」を指定します。そうすることで余計なリフレッシュを行わずに済むので、プロセッサのオーバーヘッドを抑えることができます。もしムービークリップにビデオやロールオーバーに反応するボタンなどが含まれている場合は、常に反射像が適切なイメージとなるように更新頻度を設定します。
//スナップショットの更新
メソッドを使用して反射を調整
あとは、いくつかのメソッドを使用して反射を調節します。このメソッドで定義されるエリアのスナップショットを撮ることになるので、大きいな範囲をエリアとするとそれだけメモリを使うことになるので注意してください。setBoundsメソッドは、水平方向のタイムラインアニメーションを含むムービークリップに最適です。図3を見てください。「Start Demo」をクリックすると反射像が表示され、ムービークリップが水平方向に移動します。もし、実行時にムービークリップにはReflectクラスが適用され、タイムラインアニメーションで元のムービークリップの範囲の外へとムービークリップが移動するようになっていれば、反射効果は見えなくなります。それは、実行時のムービークリップのサイズによって定義された反射範囲から外に出てしまうからです。setBoundsメソッドを使えば、必要に応じて反射範囲を拡大して、アニメーションによる反射領域の変化に対応できるのです。//ユーザーが反射範囲のエリアを設定できるようにする。updateメソッドを実行する頻度が高くなれば、それだけプロセッサへの負担も大きくなります。ただ、その分、なめらかな反射像となります。
更新頻度を設定するときは、無理な数字は設定せず、ビジュアルパフォーマンスに応じて設定しましょう
//ビジュアルパフォーマンスに応じて更新頻度を設定
反射効果の解除
反射効果を付けたら、その効果を解除する方法も必要です。解除の方法として、destroyメソッドを用意しています。このメソッドを使用すれば、DisplayObjectから反射のアイテムを削除し、インターバルをクリアにして、反射の要素をすべて取り除いてくれます。//反射の要素をすべて取り除く。
さらに学習したい方へ
Reflectクラスを静止画に適用する場合は非常に簡単ですが、ビデオに適用する場合は少し工夫が必要です。
ビデオを含むムービークリップを反射させるときは、ビデオが完全にロードされてからReflectクラスを適用させるようにしましょう
みなさん、いろいろと試してみてください。
Flashコミュニティにいる私たちがお互いを支えて助け合えば、プラットフォームとしてのFlashもどんどん大きくなることでしょう
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
NETなど、他のプログラム言語では日夜多くのクラスライブラリが開発され、プログラマーの間でさまざまなノウハウが共有されています。特に、国内ではその傾向が顕著です。
そんな理由もあるのでしょう
とはいえ、ある程度開発を行っていると、同じようなスクリプトを何度もたくさん書いている自分に気付くはずです。「同じようなスクリプト」は、他の誰かが同じように書いているかもしれません。
みんなのスクリプトをまとめて共有できるようになれば、同じではない部分、つまりオリジナルな部分にもっと時間を割くことができるでしょう
他のプログラム言語に比べて、ActionScriptのコミュニティは少なく、国内にもあまり存在しません。Spark projectを通して、サンプルコードや学習用のコードの共有、勉強会の開催、オープンソースプロジェクトへの参加などを行い、ActionScriptコミュニティの活性化や新たなスクリプターの育成に繋げたいと考えています。サイト自体は「trac」と呼ばれるプロジェクト管理ツールになっており、全ページが Wiki形式で、コミッターの方なら誰でも書き換えることができます。また、「チケット」と呼ばれるバグトラッキングシステムなども利用することが可能です。メモ:Spark Wikiの方は、誰でも編集することができ、いろいろな情報やノウハウを共有できるようになっています。0、はたまたFlashの拡張機能まで、数多くのプロジェクトがあります。これらはすべてオープンソースで、Subversionリポジトリで共有されています。
その中からいくつかのプロジェクトを紹介しましょう
最近流行の「拡張現実」を実現するためのライブラリです。動作するデモなどは、Saqooshaさんのサイトで確認できます。詳しくは、「てっく煮ブログ 」をご覧ください。Flashサイト制作のための画面遷移フレームワークです。Flashの拡張機能も充実しており、素早く、簡単に、自由に制作を行うことができます。詳しくは、サイトや制作事例をご覧ください。タスクシステムとJavaのスレッドモデルをベースとした、疑似スレッドライブラリです。複雑で冗長になりがちなイベント処理、非同期処理、リアルタイム処理を分かりやすくスマートに記述することができます。詳しくは、サイトやサンプルをご覧ください。
基本的にはすべて Subversionリポジトリ内にあるので、ここからスクリプトをチェックアウト(ダウンロード)する必要があります(プロジェクトによっては、圧縮形式やMXP、SWCといったパッケージで提供している場合もあります)
チェックアウトの方法については、「Spark projectのソースをとりあえず使ってみる方法」という素晴らしいブログエントリがあるので、こちらを参考にしてください。
コミットへのお誘い
「Spark projectで共有されているスクリプトを使うだけ」というのももちろん歓迎ですが、ちょっとしたものでもいいので、何か公開できそうなスクリプトがある人、もしくは、すでに共有されているスクリプトを一緒に修正したり機能追加をしたりしてみたい人は、ぜひ一緒にコミッターになってみませんか
コミットすることで広がる世界というのは、必ずありますよ
この辺りの思いは、「『これコミットして大丈夫なのかな
』と考える前にコミットして欲しい」というブログエントリに書いたので、ぜひ読んでみてください。
勉強会の案内
勉強会と言っても、高度なことばかり話すのではなく、ライトな感じで、初心者歓迎という雰囲気を作っていきたいと思っています。開催については、公式ブログで告知しますのでチェックしてください。
著者について
jpといったコミュニティの運営も行っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
FlashユーザーによるFlashユーザーのための誕生日プレゼント | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
読者の中にも、使っているという方は多いでしょう
勉強会では、Geoffさんとのトークセッションが行われましたが、その日はもう一つスペシャルイベントがありました。Flasherならではの趣向を凝らしたお祝いでした。
SWFObjectの解説は上記リンクに譲るとして、本記事では大喜利で披露された「FlashユーザーによるFlashユーザーのための誕生日プレゼント」について、制作者のみなさんに解説していただきましょう
なお、第9回勉強会の模様はUstreamのアーカイブで見ることができます。ビデオと一緒に、これ以降の記事を楽しんで下さい。僕のアシスタントの「猫パティシエ」が登場して、Webカメラを通してGeoffさんの顔をよーく観察します。彼はしばらく考えたあと、おもむろにケーキのスポンジにチョコレートクリームとストロベリークリームを塗りたくります。だんだんと顔のように見えてきました。さっき見たGeoffさんの顔をクリームで描いてくれたのです。ケーキの縁をクリームでかざり、ロウソクを立て、誕生日ケーキが完成します。
最後はロウソクを吹き消しましょう
誕生日おめでとう
順を追って、制作工程を解説します。まずは猫パティシエの画像を準備します。自作のお絵描き掲示板を使用して、次の三枚の絵を描きました。これらの画像の背景を切り抜き、Loaderでロードして使用しました。猫パティシエが顔を描くときの効果音や、最後の歓声などの音素材は市販のものを使用しています。音素材はwav形式だったので、Flashのタイムラインに音を貼り付けただけのものをパブリッシュし、そのSWFファイルをEmbedして使用しました。プレゼン時に使用したノートPCは性能があまりよくなかったので、フルスクリーン時の表示範囲を狭くとってFPSの維持を試みました。次のコードを使い、フルスクリーン時の描画元として画面左上320×240ピクセルの矩形領域を指定しています。真上から見るビューだとケーキに見えなさそうなので、立体的に配置しました。Webカメラを通して画像を取り込み、明度的に暗い部分と、HSV成分で肌色っぽい部分を抽出しました。暗い部分はチョコレート、肌色の部分はストロベリークリームという設定を説明しながら、猫パティシエの手が端から順番にケーキ上をなぞっていき、なぞった部分を先ほど抽出した画像とマスクを使って塗っていきます。
0で肌色検出
猫パティシエの手・ハケも、Flash Player 10の3D機能を利用して配置することで、奥行き方向への移動も自然に見えるようにしています。ロウソクはGeoffさんの年齢を聞いてから本数を決定し、顔部分の邪魔にならないようにクリックで配置していきました。ロウソクの先端には、TeraFireを配置して、ゆらぐ炎を演出しています。同じTeraFireクラスですが、設定次第で炎のようにも煙のようにも見せることができます。
著者について
「ソースコードやノウハウを共有して幸せになろう
」という思いの下、運営されています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
FlashでSVG形式のベクターグラフィックを利用する | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
FlashでSVG形式のベクターグラフィックを利用する。
Flashで外部画像データを読み込んで表示する場合、外部画像データとしてPNGやJPEGなどのラスター形式の画像を利用することが多いでしょう
では、ベクター形式の画像を利用したいと思った場合、どうすればいいでしょうか
ベクター形式の画像を利用する場合、まずそのフォーマットを検討することが必要となるでしょう
SWFなのか、それとも別のフォーマットなのか
場合によっては、独自フォーマットを検討することがあるかもしれません。
フォーマットを検討する際に、選択肢の1つに「SVG」を加えてみてはいかがでしょうか
本記事では、FlashでSVG形式のベクターグラフィックを利用する方法を解説します。
SVGでは、パス・線・塗りなどのシェイプ、回転・拡大・移動などの変形を定義することができます(※1)
これらをXMLで記述することにより多様なグラフィクスを表現できるわけです。※1 SVGではシェイプや変形のほかに、テキスト、アニメーション、フィルター効果なども定義できます。
それでは、SVGのグラフィクスを見てみましょう
SVGで作成した、円を重ねたグラフィクス
SVGで作成した、虎のグラフィクス
SVGをWebブラウザで開き、そのソースを表示させるとXML内容を確認できます。このようにSVGはXMLで記述できるため、テキストエディタなどで編集することが可能です。以上のように、SVGにはベクター画像のフォーマットとして、次のような魅力があります。規格化されたフォーマットである。XMLであるため、柔軟にソリューションに組み込むことができる。Webブラウザで簡単に閲覧できる。パスや色などのデータにアクセスできる。SVGの詳細については、以下のサイトをご覧下さい。を行う仕組みが必要です。テキスト、フィルター、アニメーションなどの要素はサポートされていません。
まずSVGのデータを作成してみましょう
」と入力し、「書式→アウトラインを作成」を行います。このファイルを保存する際に、「ファイルの種類」を「SVG」とすると、SVG形式のデータを作成することができます。
作成したSVGをWebブラウザで表示したところ
svg)をFlashで表示させるには、以下のようなスクリプトを書きます。
svgを表示させたところ
また、外部SVGファイルではなくスクリプト内に記述したXMLを使うこともできます。
SVGのパーツを操作
FShapeSVGでは、SVGの記述されたシェイプの親子構造が、そのままインスタンスの親子構造となっています。この親子構造を利用することで「グラフィクスの一部の色を変更」などの操作を行うことができます。以下の例では、塗りが同じ要素を5つ用意して、それぞれ塗りや線の情報をスクリプトで操作しています。
//2番目の要素の色を変更
//3番目の要素の色を変更
//4番目の要素の透明度を変更
//5番目の要素の塗りと線を変更
塗りや線の情報をスクリプトで操作
これまでの例ではSVGをSpriteに変換して表示する方法を紹介しましたが、Graphicsに直接描画したい場合もあるでしょう
画像をクリックするとサンプルデータが表示されます。これを応用することで、SVGの各要素を個別に描画するものを作ることができます。svg」内の要素に3D変形を加えながら描画したものです。スクリプトにについては、サンプルデータを見て下さい。画像をクリックするとサンプルデータが表示されます。
いかかでしたでしょうか
SVGを活用することでサーバサイドとの連携や、グラフィクス表現の選択肢が増えるといった可能性を感じていただければ幸いです。
著者について
comでマイペースに個人活動継続中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
将来を見据えた、新たなHTML内SWF埋め込み用コードの考察 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
将来を見据えた、新たなHTML内SWF埋め込み用コードの考察
レガシーコードでは、SWFが表示できなくなる。
みなさん、HTMLファイル内にSWFファイルを埋め込む際にどのようなコードを記述していますか
おそらく、多くの方が、Flashオーサリングツールでパブリッシュした時に書き出される以下のようなコード(レガシーコード)を使っていると思います。
レガシーコードの例
このレガシーコードは、さまざまな種類やバージョンのWebブラウザで適切にSWFが表示されるようにと、Webクリエイターたちが各Webブラウザの機能やW3C勧告への対応度を踏まえて試行錯誤した結果、到達したコードです。このような2段構えの構造になっている理由は、IE以外のWebブラウザではobjectタグのclassid属性などのサポートが不十分なため、SWFを表示する際に必要な情報を取得できないからです。そこで、objectタグの内側に、IE以外のWebブラウザ用でもちゃんと解釈できるembedタグを入れ子にして置いているわけです。(X)HTMLの仕様では、解釈できないobjectタグがある場合、そのタグの内側へと代替コンテンツを求めるようになっています。レガシーコードの場合、IE以外のWebブラウザは外側のobjectタグを解釈できないため、その代わりに内側にあるembedタグを解釈しようとします。広く使われてきたレガシーコードですが、実は以下のような問題点があり、レガシーコードを使い続けた場合、将来的には一部のWebブラウザでSWFを表示できなくなる可能性があるのです。そのため、将来リリースされるWebブラウザでは、embedタグをサポートしなくなる可能性がある。2004年頃に発生したEolas特許問題のため(SWFにマウスクリックを伝えるのに、1クリック余計に必要になる。「ActiveX コントロールのアクティブ化」と呼ばれている問題)、新しいSWF表示方法が必要となってきている。本記事では、1つ目の問題の解決策として、embedタグを使わない方法を紹介します。2つ目のEolas特許問題については、いずれ機会をみて記事にしたいと思います。レガシーコードでは、IE用のコードとして、objectタグを使用しています。そして、あまり知られていませんが、IE以外のWebブラウザ用でも、objectタグのみでSWFを表示させることは可能なのです。ただし、前述した通り、IEとそれ以外のWebブラウザでは、objectタグに使える属性への対応度が異なるため、1つのobjectタグですべての Webブラウザに対応することは困難です(方法はありますが、十分な検証がされていません。そのため、IE以外のWebブラウザ用の objectタグを、レガシーコードのように入れ子に記述する必要があります。SWFObjectのサイトで紹介されているコードを元にしたのが、以下のコードです。
IEが解釈するコード部分
では、IE以外のWebブラウザでは、どのように解釈するかというと
レガシーコードと同様に、外側のobjectタグではSWFを表示するのに十分なパラメータがないので、代替コンテンツとして内側のobjectタグを解釈しに行きます。
IE以外のWebブラウザが解釈するコード部分
このobjectタグのみを使った新しいコードは、W3Cの(X)HTML仕様書に則ったメディアの表示のさせ方なので、今後、業界標準になっていくと思います。実は、上記の新しいコードでは、Safari 3で問題が発生することがあります。そのため、外側のobjectタグと直下(子要素)のparamタグの情報をもとにSWFがレンダリングされ、緑色部分は外側objectタグの代替コンテンツとみなされ、レンダリングされません。(X)HTMLの仕様では、objectタグの直接の子要素のparamタグしか解釈してはならないことになっており、これは仕様に則った動作です。これでは、SWFを単に表示することはできても、その表示方法を指定するパラメータをSafari 3に渡すことができません。その解決手段としては、以下のように「FlashVarsなど、必要な物は両方に書いてしまう」方法があります。コードが冗長になりますが、確実な方法といえます。FlashVarsなど、表示方法を指定するパラメータを使用する場合は、Safari 3でもレンダリングできるように両方に記述しておく。ただし、この方法は十分な検証が行われていないため、古いWebブラウザや特定の環境では表示できない可能性があるので注意が必要です。
十分な検証が行われていないため、注意が必要
embedタグは廃止予定なので、今後はembedタグに依存したコードは書かないようにしよう
objectタグのみを使った新しいコードを使うようにしよう
これは、W3Cの仕様に則ったメディアの表示のさせ方なので、今後はこのコードが主流になっていくでしょう
新しいコードは、Safari 3で問題が発生することがあるので注意が必要
FlashVarsなど、表示方法を指定するパラメータを使用する場合は、Safari 3でもレンダリングできるように両方に記述しておくようにしよう
著者について
2002年から2004年にかけマクロメディアにインターンで在籍し、Web関連製品に関わる仕事をする。
2008年2月に合同会社レゾリューションズを設立
Web製作会社を支援するソフトウェアやサービスを設計・開発する日々
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flashをアプリケーションのインターフェイスとして利用するには、様々な方法が用意されています。まずはご存知の通り、Flashの標準機能を使ってプロジェクタとして書き出す方法です。ただし、この方法では(MXで様々な拡張がなされたものの)Flashで実現できる機能に限られてしまいます。また、Flash StudioやFMProjectorといった機能拡張したプロジェクターを制作出来るサードパーティー製のツールも開発されていますので、それらを利用する方法もあります。ただし、今のところ多くのツールはWindows専用であり、またそれぞれのツールの機能以外のことは実現できません。プログラミングの知識があればVisualBasicなどでSWFをインターフェースにしたアプリケーションをゼロから制作することも可能です。が、これは簡単にはいきません。そこで私達は、そういったプログラム開発環境を使わずに、様々な機能を比較的容易に実現できるDirectorを使ってアプリケーション開発を進める基礎的な部分についてご紹介したいと思います。
つまり、ボタン用であったり、アニメーション用として
この考え方によって、Flashによる柔軟なインターフェイスのデザインと、Directorによる強力なバックエンドの機能を組み合わせられるだけでなく、作業を分業化することにより効率的な開発が可能になります。
また、これまでは別々に制作をしてにいたFlashクリエータとDirectorクリエータが、「ちょっとしたルール」を守りながら手を取り合うことで、新たな可能性が広がっていくことでしょう
Flash的な発想と、Director的なコントロール(もちろんその逆も)それが組み合わされば、快適で自由度の高い制作をより短期間で進めていくことが出来るはずです。
それでは、簡単なサンプルをつかっておおまかな流れを追っていきましょう
リンク追跡アプリケーションの制作
「Flashの制作課程とDirectorの制作課程をそれぞれ個別に進めながら最終的にひとつのコンテンツにくみ上げていく」
さて、この作業の仕方一見難しいように思えますが、実は「ちょっとしたルール」を決めてやるだけで後は個別に作業を進めていくことが出来るのです。
まずは「ちょっとしたルール」を決めましょう
どんなものをつくるのか
「ちょっとしたルール」を決める前に何を作るのかを決めなくてはいけません。今回のサンプルでは、次のような仕様で制作していきます。取り出したリンクをイメージとして表示する。リンクからリンクへ次々と移動していけるようにする。リンク元をクリックするとそのURLをブラウザでひらく。最後に見ていた状態を保存する。といった感じです。分担を決める。また、これらのイベントはスプライトにアタッチされたビヘイビアに対して送られるので、対応するイベントハンドラをビヘイビアに組み込んでおく必要があります。
ムービースクリプトなどを直接呼び出す場合は、HTMLからアンカータグの部分を抜き出していく処理が必要になるので、その部分は比較的に高速に処理ができるDirector側の担当とします。取り出したリンクをイメージとして表示する。リンクからリンクへ次々と移動していけるようにする。前述の2つを繰り返していく形をとります。リンク元をクリックするとそのURLをブラウザでひらく。最後に見ていた状態を保存する。リンクを示すイメージの情報(表示位置)は表示時にFlashで設定します。設定済みのデータは随時Directorから保存していきます。この分担を元に動作のおおまかなフローを作成します。その代わりに以下の様な方法で実現できます。指定したフレームのフレームアクションを実行するコマンドです。野中 文雄氏のサイトに丁寧な解説があります。ぜひご参考ください。Flashのフレームを指定したフレームに移動させるコマンドです。移動先のフレームに実行したいアクションを定義しておくことで、前述のcallFrameの様な使い方も可能です。Flashの変数を設定するコマンドです。Flash側で常時監視するような構造になっていればイベントの代わりとして使用できます。しかし普通は、変数の変更、_qualityやフィールドの内容などを書き換えるのにつかいます。イベントに関係する部分では、前述の2種類の方法では引数を渡すことができないので、特定の変数を設定することで、引数に相当する動作をさせることになります。
「ちょっとしたルール」の決定
上図のフローをもとに、いよいよ「ちょっとしたルール」を決めていきます。
作成したXMLを保存するイベント
指定URLをブラウザで開くイベント
XMLを読み込むイベント
それ以外の(ピンクとブルー)の矢印はそれぞれの内部的な部分となります。
ではそれぞれのルールを明確にしていきましょう
(point:必要な情報として、取得するURLが必要なのでURLを引数として渡してやる必要があります。例では一つ前のページに戻れるようにひとつ前のURLも引数として渡しています。
作成したXMLを保存するイベント
(point:引数として渡す値には改行やダブルクォーテーションが含まれているとエラーが起きます。そのため改行やダブルクォーテーションを含むような値を渡したいときは、その値のパスを引数として渡して、Directorからそのパスの値をgetVariableします。例では拡張性もふまえファイル名も引数として渡しています。
指定URLをブラウザで開くイベント
そのためDirector側でブラウザを開くべきか他の処理をするべきか判定させる必要があります。
XMLを読み込むイベント
Flash側ではフレームラベルを設定しておき、Directorからそのフレームを呼ぶ形になります。引数が必要な場合は、setVariableを使用して、あらかじめ特定の変数を指定しておく必要があります。今回のサンプルでは「ちょっとしたルール」にはもうひとつ、リンク情報としてFlashで読み込むデータについてのルールが必要です。今回はXMLを使用するので、XMLの形式と名前を決めておきます。この様な形です。(point:例は見やすいようにNodeごとにインデントしていますが、実際は一行で隙間の無い状態で書き出します。Flash側の動作の流れは以下のようになります。(ここでは、一つ一つのURL情報をノードと呼んでいます。
//現在の状態を保存
//リンクの取得
という形で実行でき、Flash的に扱いやすくなります。
テキストフィールドとボタン
が実行されます。
//自分以外のノードを消去
//今いるURLのノードをスライド
//自分を中心にスライド
//ロールオーバー中だけURLを表示
//自分以外のノードを消去
//今いるURLのノードをスライド
//自分を中心にスライド
//ロールオーバー中だけURLを表示
//クリックするとそのURLをブラウザで開く。ただ、このとき注意しないといけないのはリンクしたswf変更がDirectorで反映されるのは、プロパティダイアログボックスでリンク先を変更したときと、ムービーを開いたときです。ここで、常に最新の状態にするためにprepareMovieイベントハンドラ内で次のようにしています。
-- メンバーのリンクを設定
(読み込めないなーとは思っているかもしれません。
その辺りで不具合が起こる可能性もあるので、起動時にlink
xmlが無い場合はあらかじめ、ダミーのデータが入った状態で用意しておきます。xmlが無いときだけつくる。次に、Swfが出来上がるまでに、いくつかのクリプトを用意しておきます。
今回必要なものは、HTMLからリンクを抜き出す。相対パスを絶対パスになおす。
データの読込(今回の場合はファイルの有無の確認に使用)
データの保存
あと、フレームループ用のスクリプト
といったものになります。
では順に各スクリプトの仕事を見ていきましょう
htmlストリングから、リンク先URLのみを抜き出していきます。また、抜き出し作業とともにFlashに渡すためのXMLも生成します。カレントディレクトリを元に相対パスのURLを絶対パスに変換します。絶対パスのURLの場合は何も変更を加えません。指定したパスのファイルを読み込みます。読込に失敗した場合は空のストリング("")を返します。
(今回の場合はファイルの有無の確認に使用)
指定したパスにストリングを保存します。既にファイルが存在する場合は、削除してから保存します。指定URLからGETする親スクリプトです。実行中は、処理の進行状態を監視します。一定時間を過ぎても取得できない場合は自動的にキャンセルします。次は、swfスプライトにアタッチするビヘイビアを用意します。
今回必要なものは、データの保存イベント
指定URLをブラウザで開く。といったものになります。それぞれの仕事は次の通りです。このサンプルのメインになる部分です。ダウンロードしたデータはリンクのみのXMLに変換されます。それらの処理がすべて完了した時点でFlashに対して終了を伝えます。指定されたパスの値を取得し、指定された名前で保存します。引数がURLかどうかを判定して、URLの場合はブラウザで開きます。組み込みのタイミングはswf、Directorの大体の制作が進んだ時点で適宜組み込んでいきます。組み合わせてみて動作に問題があれば随時問題点を確認しながら調整をし、完成までそれを繰り返していきます。swfを組み込んだ時点で、スコアに配置します。今回の場合はステージサイズとswfのサイズを同じ400×400ピクセルにしておきます。swfをスコアに配置した後は、あらかじめ用意して起きたビヘイビアを順次アタッチしていきます。後は、動作確認、バグ取りをして完成です。
プロジェクタ作成時は、Xtraの設定を忘れずに
NetLingo(ムービーエクストラダイアログで「ネットワークを追加」をクリック)
以上、お疲れ様でした。DirectorがFlashMXに対応した時点で、今回紹介した手法のいくつかは不要になる可能性がありますが、基本的な部分はかわらないと思います。強力なコールバック処理や、豊富なコンポーネントの利用によってより高いレスポンスでの制作が可能になっていくに違いありません。
今後もFlashとDirectorの組み合わせでパワフルで魅力的なコンテンツを作っていきたいですね
これらは今回紹介した手法を基礎にして、より綿密にFlashとDirectorのコミュニケーションを設計し、制作した製品です。また、サードパーティー製を含む、いくつかの強力なXtraのより高度な機能を組み込むことで様々なサービスを実現しています。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この節ではよく使用される方法をいくつか取り上げ、それぞれの欠点を説明します。
デフォルトの埋め込み方法
誰でも知っている方法がデフォルトのFlash埋め込み方法です。これはobjectタグと、代替メカニズムとしてその内側に挿入するembedタグで構成されます。これが最もよく使用されるFlash埋め込み方法であり、Flash IDEからSWFをパブリッシュするときのデフォルトになっています。また、SWFを埋め込む最も互換性の高い方法でもあり、様々なブラウザで機能します。これが最もよく使用されるムービーの埋め込み方法ですが、欠点がいくつかあります。プラグイン検出が行われない:プラグインが検出されないので、不完全なコンテンツが表示される場合や何も表示されない場合があります。昨今、多くのユーザはこれが表示されるとスパイウェアやマルウェアではないかと心配します。
Mozillaベースのブラウザでは「見慣れないジグソーパズルのようなアイコン」のボックスが表示されます(図2を参照)
どちらのプラグインインストール方法もユーザの便宜があまり考慮されず、何がインストールされるのかをはっきり説明していません。しかも、ブラウザによってobjectタグの扱いが異なり、まったく無視されたり、実装に問題があったりするので、代替メカニズムとしてembedタグが必要です。
Firefoxで表示されるプラグインインストールメッセージ
これらの方法にも次のような欠点があります。プラグイン検出が行われない:Flashのデフォルトembedタグと同様に、プラグインの検出が行われないと、不完全なコンテンツが表示される場合やまったく表示されない場合があります。この場合、FlashVarsパラメータから変数を渡すことが困難になり、Webサーバに格納するSWFファイルの数が2倍になるのでFlashコンテンツの管理効率も低下します。
「小さなFlashムービーをインデックスページに配置する」方法
この方法にも問題があります。内部のページではFlash Playerの検出が行われない:ユーザが内部のURLを別のユーザに送信した場合、そのユーザはインデックスページのFlash検出をスキップします。検索エンジンでのランキングが低くなる:この方法ではインデックスページを空のFlash検出ページとして使用するので、検索エンジンで表示されるサイトの説明が「Flash Playerの検出」などの意味のない語句になるか、何も表示されません。これでは、会社や製品の宣伝に使用するはずの貴重なWebサイト資産が無駄になります。さらに、Webサイトの他のコンテンツへのリンクを含めていない場合も多く(SWFにリンクが含まれているという理由で)、サイトの他のページのインデックスがないという事態が発生します。小さなFlashムービー:従来の「小さなFlashムービーをインデックスページに配置する」方法の問題点は前述したとおりです。これには以前のJavaScriptによる検出や埋め込み方法で見られたのと同じ欠点が多数ある上、Flash/HTMLデベロッパの作業を容易にすることもありません。この方法はサイトによって異なるので評価が困難ですが、私が検討した範囲では、JavaScript Flash検出スキームのほとんどは、同じ欠点を持っています。プラグイン検出の信頼性が低い:現在のバージョンのFlash Playerしか検出しないものが多く、新しいバージョンのプラグインがリリースされるたびに手動で書き直す必要があります。ページに追加するコードが増える:コンテンツの更新や変更がさらに難しくなります。この方法は、デザイナーなどがページのFlashコンテンツを変更したり、新たに追加したりする作業を難しくします。過度に複雑なソリューション:Flash埋め込みスクリプトの多くはファイルサイズが大きくなったり複雑になったりする傾向があります。SWFObjectは単純でサイズも小さくなるように設計されています。
次のステップ
ご覧いただいたように、SWFObjectの特長はサイズが小さく、使いやすく、アクセスが限定されないことです。ページの検証も行うことができます。また、スクリプトの更新については、私のブログ*をご覧ください。スクリプトの使用に関する質問や、新しい機能のリクエスト、ご意見などをお持ちの方は、SWFObjectメーリングリスト*にご参加ください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事を最大限に活用するには、以下のソフトウェアおよびファイルが必要です。
任意のテキストエディタ
この記事に必要な予備知識
次の例は、SWFの埋め込みに必要な最少限のコードです。このテキストはFlashコンテンツで置き換えられます。次の節で、このコードの動作を説明します。この部分はSWFを保持するHTML要素を作成します。この「ホルダ」要素内のコンテンツはFlashコンテンツによって置き換えられるので、Flash Playerがインストールされている場合、この要素内のコンテンツが表示されることはありません。代替コンテンツには、Flash Playerをインストールしていないユーザへのメッセージや、代わりのHTMLコンテンツなど、HTMLと画像を組み合わせたものを使用できます。この機能を利用すると、さらに、検索エンジンに代替コンテンツのインデックスを作成させることができます。パラメータを渡す。このコードは、新しいSWFObjectファイルを作成して次の必須パラメータを渡します。65」など)を指定することも、メジャーバージョンのみ(「6」など)を指定することもできます。
背景色:SWFの背景色を指定する16進数値
オプションのパラメータには次のものがあります。何も指定しない場合のデフォルトはhighです。
Flashコンテンツのページへの書き込み
このコードにより、SWFObjectスクリプトが指定されたHTML要素内のFlashコンテンツを置き換えて、コンテンツをページに書き込みます。ただし、ユーザのシステムに適切なバージョンのPlayerがインストールされていることが前提になります。
舞台裏での検出作業
SWFをインクルードしていないページが正しく動作するようになったら、代替コンテンツをFlashコンテンツと置き換える簡単なJavaScriptコードスニペットを追加します。これにより、検索エンジンでは代替コンテンツのインデックスが作成され、Flash PlayerをインストールしていないユーザにもHTMLページが正常に表示されます。アップグレードするように指示するかどうかはあなた次第です。代替コンテンツでも十分目的を達することができる場合は、ユーザにFlashコンテンツを見逃していることを知らせる必要はないかもしれません。5+で動作します。SWFObjectに組み込まれているプラグイン検出をスキップできます。ユーザのシステムで何らかの理由でプラグインの検出が失敗した場合、SWFObjectに組み込まれている検出機能を無効にして、必ずFlashコンテンツがページに書き込まれるように迂回用のリンクをインクルードできます。次に、リンクの例を示します。前述の例には、SWFObjectの基本使用に必要なものがすべて含まれています。SWFObjectでは追加のパラメータが必要な場合、簡単に追加できます。以下の例ではFlashコンテンツの埋め込みに使用できるいくつかの方法を紹介します。
いくつかのパラメータを追加した単純な例
ただし、データを渡すことができるのは最初にムービーがロードされるときだけです。通常は、flashvarsというパラメータを追加し、次のように、その値に名前と値のペアを文字列として渡します。上のように続けることができます。SWFObjectでは、パラメータを追加する際と同様に変数をいくつでも追加できるので、さらに簡単です。これが処理されると、渡した変数はすべてSWFの中で使用できるようになり、_rootタイムラインにある変数と同様にアクセスできます。
URL文字列からの変数値の取得
SWFObjectスクリプトには、URL文字列から変数値を取得できる関数が用意されています。例えば、次のようなURLがあるとします。上のURLを使用すると次のようになります。hashから変数を読み取ることもできます。これはFlashアプリケーションにディープリンクを設定するときに使用されることがあります。ユーザはPlayerをアップグレードするために、別のサイトへ移動する必要はありません。アップグレードが完了したら、アップグレードを開始したページに戻っています。次のようにSWFファイルの最初に、アップグレードが必要かどうかを簡単にチェックします。// アップグレードが必要な場合、アップグレードを開始するボタンを表示します。// 自動的にアップグレードを開始することもできます。// アップグレードのカスタムメッセージを割り当てて中央揃えにします。init()メソッドが実際に更新を開始します。注意:この例では、アップグレードのカスタムメッセージを使用しています。Flash 8がSWFファイルをパブリッシュする方法が変更されたので、アップグレードのカスタムメッセージに使用できるコンテンツは大きく制限されています。オブジェクト上のアウトラインやストロークはすべてhairlineに設定するか、完全に削除します。アップグレードのカスタムメッセージでコンテンツが表示されない場合は、オブジェクトを単純化してみます。
また、アップグレードプロセスをカスタムメッセージなしで呼び出すこともできます(FLA内のサンプルコードを参照)
flaファイルを開いてください。SWFがポップアップウィンドウに表示される場合や、Express Installによる更新が完了したら別の場所にユーザをリダイレクトする場合、オプションのxiRedirectUrl属性を使用して、SWFが含まれているページ以外の待ち受けページにユーザをリダイレクトできます。この節ではよく使用される方法をいくつか取り上げ、それぞれの欠点を説明します。
デフォルトの埋め込み方法
誰でも知っている方法がデフォルトのFlash埋め込み方法です。これはobjectタグと、代替メカニズムとしてその内側に挿入するembedタグで構成されます。これが最もよく使用されるFlash埋め込み方法であり、Flash IDEからSWFをパブリッシュするときのデフォルトになっています。また、SWFを埋め込む最も互換性の高い方法でもあり、様々なブラウザで機能します。これが最もよく使用されるムービーの埋め込み方法ですが、欠点がいくつかあります。プラグイン検出が行われない:プラグインが検出されないので、不完全なコンテンツが表示される場合や何も表示されない場合があります。昨今、多くのユーザはこれが表示されるとスパイウェアやマルウェアではないかと心配します。
Mozillaベースのブラウザでは「見慣れないジグソーパズルのようなアイコン」のボックスが表示されます(図2を参照)
どちらのプラグインインストール方法もユーザの便宜があまり考慮されず、何がインストールされるのかをはっきり説明していません。しかも、ブラウザによってobjectタグの扱いが異なり、まったく無視されたり、実装に問題があったりするので、代替メカニズムとしてembedタグが必要です。
Firefoxで表示されるプラグインインストールメッセージ
これらの方法にも次のような欠点があります。プラグイン検出が行われない:Flashのデフォルトembedタグと同様に、プラグインの検出が行われないと、不完全なコンテンツが表示される場合やまったく表示されない場合があります。この場合、FlashVarsパラメータから変数を渡すことが困難になり、Webサーバに格納するSWFファイルの数が2倍になるのでFlashコンテンツの管理効率も低下します。