これでサウンドが停止されます。
著者について
サンフランシスコベイエリアのファンは、Jeffのトロンボーン演奏を寛大に許容しています。のダンシングホットドッグ、Big Frankとして活躍した経験もあります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。
著者について
「bohe」のニックネームで、さまざまなオンラインFlashコミュニティに参加している。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
さらに、データタイプがサポートされているものならパラメータを何個でも渡すことができます。これらのパラメータは、それぞれ次の内容を意味しています。任意のオブジェクト(またはnull)を指定できるので、このオブジェクトは必ずしもこのメソッドを含むオブジェクトである必要はない。Flashで以下のコードを入力します。図6は、HTMLからFlashにxとyの値を送ってボールを動かした場合の状態と、その速度を表しています。
値を入力してボールを動かした例
また、ローカルのFlashコンテンツをインターネットに接続させる方法については、Flash Playerテクニカルノート*を読んでください。
次のステップ
この記事で触れたトピックについてさらに詳しくは、以下のリソースをご覧ください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。まずここで紹介するのは、セキュリティ関連の制限について、Flash Player 8が旧バージョンより強化されている点です。ローカルのsandbox:デフォルトでは、ローカルのSWFがインターネットに接続できなくなっています。また、HTTP通信やローカルのHTMLファイルとの接続も行えません。このダイアログボックスが表示されるという問題と既存のコンテンツが破損するという問題は、エンドユーザまたはFlashデベロッパーが適切な許可を設定すれば解決します。読み込み制限:ローカル以外のURLにあるSWFとHTMLのコンテンツについては、ローカルパスからコンテンツ(SWF、HTML、PNGなど)を読み込むことができなくなっています。サードパーティ製ストレージ: Flash Playerで表示されるオブジェクトがサードパーティのSWF(ブラウザのアドレスバーに表示されているドメイン以外のドメインにあるもの)によって常に共有されている場合でも、そのオブジェクトの読み込みや書き込みができないようにユーザが設定できるようになっています。この制限はデフォルトでは有効になっていないので、これを適用するかどうかはユーザが自分で判断しなければなりません。FlashからHTMLにパブリッシュすると、以下のコードが生成されます。注意:ローカルのFlashコンテンツをインターネットに接続させる方法については、Flash Playerテクニカルノート*を読んでください。^^"というメッセージストリングをパラメータとして送ります。すると図1のようなウィンドウが表示されるようになります。
Flashから生成されたメッセージウィンドウ
さらに、グローバルセキュリティ設定パネルでSWFファイルへのアクセスを許可する必要があります。
パブリッシュ設定ダイアログボックスの設定
たとえば、次のコードは command と argsを処理することによって、メッセージウィンドウを作成します。Flashで以下のコードを入力します。ここで使われている # は、送信する2つの引数の間でセパレータとしての役目を果たしています。上記のコードでは、ストリングを # セパレータで分けたうえで、 \n を使用してメッセージウィンドウ内の新しい行にテキストが配置されるようにしています。すると図3のようなウィンドウが表示されるようになります。
2つの引数が表示されたメッセージウィンドウ
JavaScriptでFlashと接続するには、いくつかある所定のメソッドのうちどれかひとつを使うという方法しかありません。これを使うことで、JavaScriptからそのページに埋め込まれているSWFに対してストリングの値を送ることができます。
では、この例を見てみましょう
Flashで以下のコードを入力します。HTML内のテキスト入力部分に入力された値は、 vars プロパティの中に保存されます。図4は、その結果を表示したものです。ActionScriptからHTMLページ上のどんなJavaScript関数でも直接呼び出すことができますし、どんなデータタイプの引数でも好きな数だけ渡すことができ、戻された値を受け取ることができます。次の表1は、ExternalInterfaceがサポートしているブラウザとオペレーティングシステムの組み合わせを一覧で示したものです。かつては、1つのメソッドを使ってJavaScript関数を呼び出し、戻り値を受け取るにはまた別のメソッドを使わなければなりませんでした。それが今では1つの関数を呼び出すだけで、即座に戻り値を受け取ることができるのです。
ずいぶん簡単になったものですね
call() メソッドでは、以下の基本フォーマットが使用されます。これらのパラメータは、それぞれ次の内容を意味しています。
0個のパラメータを指定することも、複数のパラメータをカンマで区切って指定することも可能
Flashで以下のコードを入力します。また、ローカルのFlashコンテンツをインターネットに接続させる方法については、Flash Playerテクニカルノートを読んでください。さらに、データタイプがサポートされているものならパラメータを何個でも渡すことができます。これらのパラメータは、それぞれ次の内容を意味しています。任意のオブジェクト(またはnull)を指定できるので、このオブジェクトは必ずしもこのメソッドを含むオブジェクトである必要はない。Flashで以下のコードを入力します。図6は、HTMLからFlashにxとyの値を送ってボールを動かした場合の状態と、その速度を表しています。
値を入力してボールを動かした例
また、ローカルのFlashコンテンツをインターネットに接続させる方法については、Flash Playerテクニカルノート*を読んでください。
次のステップ
この記事で触れたトピックについてさらに詳しくは、以下のリソースをご覧ください。
著者について
「bohe」のニックネームで、さまざまなオンラインFlashコミュニティに参加している。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
jp :「自分で花火を作って、打ち上げる」花火大会の仕組み | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ユーザーが花火をデザインし、自分だけの花火大会を演出する。花火玉のデザインから色情報を配列にして収集する。色情報から粒子データへ拡張する。花火の動きを再現する。花火玉を登録する。
印刷用に表示
jp :「自分で花火を作って、打ち上げる」花火大会の仕組み
ユーザーが花火をデザインし、自分だけの花火大会を演出する。
Webだからこそ体験できるコンテンツは何か
ユーザー自身が花火をデザインし、自分だけの花火大会を演出する。現実の世界では、とうてい実現できない話も、Webだからこそ実現できる、そんな思いからこの企画が採用されました。jpでは、まず「花火玉を作る」画面(図1)で自分だけの花火をデザインします。カラーピッカーから好きな色を選択し、花火玉の上でドラッグしながら「火薬」に色を塗っていきます。デザインしたら、「出来上がりを確認」ボタンをクリックして、花火の打ち上がり具合を確認し、花火玉を保存します。そして、保存した花火玉で自分だけの花火大会を作ったり、みんなの花火大会にエントリーすることができます。
画面左は、自分がデザイン・保存した花火玉です(最高10個まで)
画面右は、現在編集中の花火玉です。「出来上がりを確認」ボタンをクリックすると、編集中の花火玉が左へスライドして、花火が打ち上がった状態を確認できます。
花火玉をデザインした後は、画面左下の「あなたの花火大会を作る」メニューから自分の花火玉と好きな会場を選び、「出来上がりを確認」ボタンをクリックしてエントリー(保存)すると、自分だけの花火大会へ登録することができます(図2)
他にも、みんなの花火大会に参加すると、いろんな人が作った花火と共演することができます。図2 自分の花火大会では、自分が決めた順番に次々と花火が打ち上がります。
花火を作ったり、登録したり、打ち上げたりと、自分で好きなように花火大会を演出することができるのがFirework
jpの醍醐味です。それでは、どのようにして自分でデザインした花火を打ち上げているのか、その考え方と構造を解説していきます。
著者について
株式会社イージェーワークス入社以来、Flashを専門に数々のRIAコンテンツの設計・制作・開発に携わる。現在では、マッシュアップを中心としたプロジェクトチームのリーダーとして、常に新しい技術の挑戦に余念がない。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
jp :「自分で花火を作って、打ち上げる」花火大会の仕組み | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
jp :「自分で花火を作って、打ち上げる」花火大会の仕組み
ユーザーが花火をデザインし、自分だけの花火大会を演出する。
Webだからこそ体験できるコンテンツは何か
ユーザー自身が花火をデザインし、自分だけの花火大会を演出する。現実の世界では、とうてい実現できない話も、Webだからこそ実現できる、そんな思いからこの企画が採用されました。jpでは、まず「花火玉を作る」画面(図1)で自分だけの花火をデザインします。カラーピッカーから好きな色を選択し、花火玉の上でドラッグしながら「火薬」に色を塗っていきます。デザインしたら、「出来上がりを確認」ボタンをクリックして、花火の打ち上がり具合を確認し、花火玉を保存します。そして、保存した花火玉で自分だけの花火大会を作ったり、みんなの花火大会にエントリーすることができます。
画面左は、自分がデザイン・保存した花火玉です(最高10個まで)
画面右は、現在編集中の花火玉です。「出来上がりを確認」ボタンをクリックすると、編集中の花火玉が左へスライドして、花火が打ち上がった状態を確認できます。
花火玉をデザインした後は、画面左下の「あなたの花火大会を作る」メニューから自分の花火玉と好きな会場を選び、「出来上がりを確認」ボタンをクリックしてエントリー(保存)すると、自分だけの花火大会へ登録することができます(図2)
他にも、みんなの花火大会に参加すると、いろんな人が作った花火と共演することができます。図2 自分の花火大会では、自分が決めた順番に次々と花火が打ち上がります。
花火を作ったり、登録したり、打ち上げたりと、自分で好きなように花火大会を演出することができるのがFirework
jpの醍醐味です。それでは、どのようにして自分でデザインした花火を打ち上げているのか、その考え方と構造を解説していきます。花火玉のデザインから色情報を配列にして収集する。ユーザーは「花火玉を作る」画面で花火玉の各「火薬」に色を塗ります。これを元に花火を再現していくわけですが、まず最初の工程として、火薬の色情報を配列として収集します。この時、取得する配列内の順番は火薬の位置によって決められます。「花火玉を作る」画面にある花火玉の火薬は、スクリプトで生成・配置されており、中心から徐々に半径を拡張するように円を描きながら火薬の位置を決めています。
このスクリプトでは、最初の円周で6つの火薬を等幅に配置し、半径を5つずつ増やしながら円を拡張し、次の円周で12個、18個、24個
と火薬の数を6ずつ増やしていきます。図3 花火玉の火薬の位置で配列の順番が決まっています。以下は、花火玉を生成するスクリプトです。
// 円周の玉数を増幅
// 花火の星を作る。
// ボタンオーバーのときのライン
// ボタンオーバー - ドラッグしながら色を塗る処理
// 星にカラーを適応
getter/setterメソッドとは、プロパティの値を設定したり返したりするための専用メソッドで、クラス内にはメソッドとして定義しますが、クラスの外側からはプロパティとしてアクセスすることができます。dataプロパティを読み取ると、色情報の配列を返し、逆に色情報の配列をdataプロパティに指定すると花火玉の火薬の色が適応されます。図4 dataプロパティによって花火玉の火薬の色を設定したり返したりします。以下は、花火玉の配列を入出力するスクリプトです。色情報から粒子データへ拡張する。花火玉から色情報の配列を受け取ったら、花火の打ち上がりを演出するための「粒子」データ(位置、移動距離、持続エネルギー)へと変換していきます。色は、物理エンジンによって描画されるため、数値化して取得します。位置は、火花のxとyの座標になりますが、初期設定として花火が拡散する時の中心の位置を指定します。花火の中心位置は打ち上がるときのタイミングによって変わってくるので、値を任意に変更できるようにメソッドの引数として設定できるようにしておきます。移動距離は、配列の順番によってルール付けされています。
その情報から粒子の速さ(半径の長さ)と方向(角度)を取得し、取得された半径と角度からx軸方向とy軸方向 の移動距離を計算していきます(図5)
図5 配列の順番から、粒子の速さ(半径の長さ)と方向(角度)を導きだしています。更にそこから、vx(x軸の移動距離)とvy(y軸の移動距離)を計算しています。色情報から粒子データへ拡張する内容をまとめると、図7のようになります。以下は、色情報を粒子データに変換するスクリプトです。
// n : 星データからパーティクルに拡張する配列量の倍率
// 円周の玉数を増幅
// カラー情報の配列からオブジェクトを取得
// 火花データを拡張
花火の動きを再現する。実際の花火を見ると、発火して火花が発光した後、時間と共に爆発エネルギーが減衰し、やがて空気中で消えていくという特徴があります。この花火の動きをシミュレーションするために、座標に移動距離を加算しながら、移動距離の値にエネルギー消費量を乗算、y軸方向の移動距離に重力の値を加算するという物理エンジンを生成しました。これを図にしたのが、図8です。
火花の移動距離にエネルギー消費量(ここでは0
95)を乗算することで、徐々に花火(粒子)が拡散する勢いを減らしています。95を乗算して火花(粒子)の移動距離を徐々に減らしていきます。このとき、花火玉の火薬から取得した色と位置を元に、粒子データの位置・移動距離・持続エネルギー・色情報を生成しているため、ユーザーが意図した通りの花火の形で演出することができるのです。また、拡散した花火の粒子データを描画する処理ですが、粒子データごとにMovieClipインスタンスを生成する方法だと非常に処理が重くなるので、1つのインスタンスの中にそれぞれ点描画するという方法を採用しています。火花(粒子)が夜空で消えるときの余韻を演出するために、別のMovieClipインスタンスに火花の残像を表現するためのビットマップデータ作成し、さらに時間によって徐々に残像を消し込むために半透明の黒いビットマップデータを作成し、それを重ね塗りするようにします。また、花火のぼかした感じを表現するために、描画用のインスタンスにグローフィルタを適応し、明度を若干上げています。火花を描画するとき、毎フレームごとに粒子データから取得した移動距離の値によって座標を計算します。この黒いビットマップデータ(aftereffect_bmd)の透明度を変更することによって、火花が消える間隔を遅めたり速めたりできます。このとき、背景画像レイヤー(back_mc)を最背面に置いてしまうと一つの問題が生じます。それは、残像用のビットマップデータ(diplay_bmd)に半透明の黒いビットマップデータ(aftereffect_bmd)を重ね塗りするのですが、全体を徐々に真っ黒にするため、下にあるレイヤーが見えなくなってしまいます。
そうすることによって、表示オブジェクトの色の補数 (逆)と背景色の補数が乗算されるため、表示オブジェクトの黒い領域が削除されるので、その下にあるグラフィック(花火)が表示されるようになります(図9)
以下は、粒子の演算に関するスクリプトです。// 一定以下のエネルギー量をもつ粒子データを削除する。
// 粒子データの重力値と明度
//時間が経つごとに粒子のエネルギーを減少させる。// カラーを適応する。// 粒子データを点描画する。//余韻を表現する。0で開発を採用する理由として、このときの粒子の点描画処理を快適に表現するという意図が前提にあります。花火玉を登録する。「花火玉を作る」画面で生成された火薬の情報は、自分の花火としてサーバに登録できます。そのとき、大量の花火玉データをサーバと転送する際、XMLでデータを受け取るよりもJSON形式にしたほうがデータ情報量は減ると考えました。JSONクラスを活用し、encodeで文字列にしたものを繰り返しdecodeすることによって、元のオブジェクトの変更せずに花火情報を複製することができます。これを利用して、スターマインで繰り返し花火を打ち上げる処理を表現しています。jpの仕組みの解説は終了です。夏の思い出に浸るもよし、作品を眺めて癒されるもよし。自分だけの夜空を、あなたのセンスで彩ってみてください。
著者について
株式会社イージェーワークス入社以来、Flashを専門に数々のRIAコンテンツの設計・制作・開発に携わる。現在では、マッシュアップを中心としたプロジェクトチームのリーダーとして、常に新しい技術の挑戦に余念がない。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
実際、ARを取り入れたプロモーションサイトを見かけるようになりました。こういったサイトでは、カメラ映像内にリアルタイムで電子情報を付加することができるコンテンツが用意されています。FLARToolKitがやってくれるのは、「マーカー」と呼ばれる四角い図形をWebカメラ映像内から探し出して、3次元空間上の位置を計算するところまでです。
pdf」というPDFファイルがあるので適当な紙に印刷します(できればちょっと厚手の紙がいいです)
これがマーカーになります。
pdf内に描いているマーカー
パソコンにWebカメラを接続します。これがないと始まらない。swfを開いて、画面上にWebカメラからの映像が映っているか確認します。
Webカメラにさきほど印刷したマーカーを向けると
マーカー上にピンクのキューブが表示されました。マーカーをいろいろと動かしても、マーカー上にピッタリとピンクのキューブが表示されます。
flaのスクリプト、つまり先ほどのピンクのキューブを表示させるためのスクリプトは、別ファイルのSimpleCube
asにすべて書かれています。そのスクリプトの中身を細かく解説していきます。第1引数は、カメラ補正ファイルへのパスです。第2引数は、マーカーのパターン定義ファイルへのパスです。これは、使用するマーカーに対応するパターン定義ファイルを指定します。オリジナルマーカーの作成方法については後述します。initを呼んだあと、初期化が問題なく終わると最終的にこの関数が呼び出されます。3Dオブジェクトの設定はこの中でします。パターンファイルが存在しなかったり、Webカメラが接続されてないと、この関数が呼ばれるまでにエラーが出てしまいます。マーカーが正常に認識できているか確認しやすいように、Papervision3Dを使ってマーカーと全く同じサイズのPlaneを作り、マーカー部分に重ねるようにしています。マーカーのサイズが80mm四方なので、80と指定します。これにaddChildすることで自動的にマーカーに追従して動くようになります。マーカーの上にCubeをのっけます。マーカーの半分のサイズにしています。Cubeは原点中心に作られるので、-Z方向、つまりマーカーの上方向に20移動させると、マーカーにちょうどのっかってるようになります。マーカー上でオブジェクトを動かすときは、この座標系で動くので覚えておいてください。それ以前のリビジョンでは、これとは違う座標系になっているので注意してください。オリジナルマーカーを作る。マーカーは、簡単なルールに沿って作れば、誰でも好きなデザインで作ることができます。そのルールというのは、以下の3つです。
ここでは、説明をわかりやすくするためにサイズ指定しておきます)
内側の正方形内には、上下左右が判別できる非点対称の図形を描く。
なるべく濃い色、コントラストが高くなるように
以上のルールを頭に入れた上で、マーカーをデザインしてください。マーカーは、カメラかざしたときにハッキリとゆがみなく映るように、厚手の紙に印刷することをおすすめします。
サイズは、ハガキ用紙とかがちょうどいいでしょう
こうして作ったマーカーをFLARToolKitで使用するためには、それぞれのマーカーに対応した専用のマーカーパターンデータを作成する必要があります。マーカーパターンデータというのは、FLARToolKitに「こういうマーカーを使うから、認識してね」と指示するデータです。カメラ使用許可ダイアログが出た場合は「許可」する。カメラ画像が表示されるので印刷したマーカーを映す。
左のウィンドウにキャプチャ内容が表示されるのでSave
これで、FLARToolKitで使用できるマーカーパターンデータが作成できました。flaで使用できるようにコードを書き換えます。asの20行目でパターンデータを指定しているので、そこをオリジナルマーカーパターンデータのファイル名に書き換えます。再パブリッシュして動作を確認してみてください。3D オブジェクトを読み込んでみる。
ピンクのキューブだけだと寂しいので、最後にキューブの代わりに3Dオブジェクトを読み込んでみましょう
Blenderを使って、こんな感じの地球を作ってみたのでこれを使います。
読み込む地球3Dオブジェクト
asに、このモデルを読み込む処理が書かれています。サイズを調整します。向きを調整します。これだけでCollada形式の3Dオブジェクトを読み込むことができます。asでは地球が回転するようにちょっとコードを付け加えています。
flaをパブリッシュして動作を確認してみましょう
マーカー上で地球が回転しています。さて、このあたりで今回のチュートリアルは終了です。
非常に基本的な部分しか解説していませんが、FLARToolKitの面白さは伝わったのではないでしょうか
FLARToolKit は、単純にマーカーの上にオブジェクトを表示するだけではなく、いろんな使い方もできます。まだまだ遊べるツールなのでいろんなアイデアを考えてみてください。
著者について
netでブログ書いてます。
新しもの好きで飽きっぽいGeek
「先生じゃないのに先生って呼ばれる」とかゆってたら最近本当に先生ぽいことをやっちゃったりなんかして
いよいよ先生
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
クリック操作とドラッグが可能なシェイプの作成
コードからクラスへの変換
クラスインスタンスの動的な作成
印刷用に表示
0のサポートが含まれています。0コードを実行できます。0言語で記述されたスクリプトを含む(または読み込む)FLAファイルがコンパイルできます。スクリプトをフレームに割り当てるか、スクリプトをライブラリシンボルに関連付けておけば、ステージ上のコンテンツにインタラクティビティが追加できます。この記事では、まずFlashのドローイングツールを利用して新しいシェイプを作成する手順を紹介します。そして、ボタンクリックやマウス動作に反応するような、インタラクティビティをシェイプに実装する方法を説明し、その後、ActionScriptをメインのタイムラインから外部ファイルに移動して、この外部ファイルのコードをライブラリ内のシンボルもしくはメインのFlashドキュメントにリンクさせる方法を説明します。この概念は、皆さんにとって興味深い内容のはずです。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。
ベータ版をダウンロード *
ベータ版について詳しく*
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。
0プログラミング』や『ActionScript言語リファレンス』などのマニュアル類を制作するアドビのプラットフォームドキュメンテーションチームに所属
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0のサポートが含まれています。0コードを実行できます。0言語で記述されたスクリプトを含む(または読み込む)FLAファイルがコンパイルできます。スクリプトをフレームに割り当てるか、スクリプトをライブラリシンボルに関連付けておけば、ステージ上のコンテンツにインタラクティビティが追加できます。この記事では、まずFlashのドローイングツールを利用して新しいシェイプを作成する手順を紹介します。そして、ボタンクリックやマウス動作に反応するような、インタラクティビティをシェイプに実装する方法を説明し、その後、ActionScriptをメインのタイムラインから外部ファイルに移動して、この外部ファイルのコードをライブラリ内のシンボルもしくはメインのFlashドキュメントにリンクさせる方法を説明します。この概念は、皆さんにとって興味深い内容のはずです。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。
ベータ版をダウンロード*
ベータ版について詳し*く0を利用するFlashドキュメント(FLAファイル)が作成できる唯一の開発環境です。
0ドキュメントが作成できるとともに、シェイプトゥイーンやモーショントゥイーンをはじめ、flash
utilsパッケージ、静的テキストフィールド、シーン、ライブラリといったオーサリング環境独特の機能が利用できます。ドキュメントクラス:Flash 9からは、SWFファイルのメインタイムラインと関連付けられたクラス定義である、ドキュメントクラスという概念が新たに登場します。ドキュメントクラスはメインのタイムラインを初期化すると同時に作成されます。0パブリッシュ設定ダイアログボックス(図1参照)で行います。0では、リンケージ識別子の必要がなくなります。
これからはライブラリシンボルのクラス名を指定して、直接的かつ動的にシンボルのインスタンスを作成できます(図2参照)
クラスパスで指定したディスク上の位置にクラス定義が存在しない場合は、Flashがバックグラウンドでこの定義を作成して、クラスをインスタンス化できるようにします(図3参照)
0のエラーと警告に関しては、2つのオプションが新たに加わります。
0環境設定ダイアログボックスで指定できます(図4参照)
1つ目の厳密モードオプションを選択した場合、コンパイラは問題発生時により厳密に対処するようになり、問題点が警告ではなくエラーとして扱われます。警告モードオプションを選択した場合は、通常より多くの警告が表示されます。0に移行する際に便利です。実行時にアセットを作成・ロードするActionScriptのみの開発環境とは違い、AS3 Previewを利用すればデザイン作業時にアセットをステージに配置しながら、容易にSWFファイルを作成できます。
クリック操作とドラッグが可能なシェイプの作成
まず簡単なシェイプを作成し、強化されたイベントモデルを利用してこのシェイプをクリックできるようにします。また後ほどのサンプルでは、シェイプをドラッグできるようにするとともに、コードをクラスに変換し、クラスのインスタンスを動的に作成してみることにします。
クリック可能なシェイプ
まず、以下の手順でシェイプをクリックできるようにしてみましょう
メニューからファイル/新規を選択して新規ドキュメントダイアログボックスの「Flashドキュメント」を選択するか、「スタート」ページの「Flashドキュメント」を選択します。flaとして保存します。ツールパネルから楕円ツールを選択し、ステージ上に円を描きます。真円を作成するには、シェイプを描いている間Shiftキーを押し続けます。メモ:シェイプを作成する際、オブジェクトの描画モードがオフになっていることを確認するようにしてください。選択ツールを選択してからステージ上に描いたシェイプをダブルクリックし、このシェイプをハイライトします。シェイプが選択されたままの状態で、修正/シンボルに変換を選択して(またはF8キーを押して)、シンボルに変換ダイアログボックスを開きます。「名前:」テキストフィールドの内容をcircleに変更し、「OK」をクリックしてシェイプをムービークリップに変換します。ステージ上のシンボルが選択されたままの状態で、プロパティインスペクタの「インスタンス名」テキストボックスにball_mcと入力します。ステージ上のシンボルの選択状態を解除してから、アクションパネルを開きます。このコードでは、シェイプに対するクリック操作を待ち受けるイベントリスナーが追加されることで、ball_mcインスタンスがクリック可能になります。この手法は、以前のバージョンのActionScriptでコンポーネントにイベントリスナーを追加していたのと似ています。0では、 onPress() イベントハンドラを用いて、ムービークリップやボタンインスタンスに対するユーザのクリック操作を検知していました。制御/ムービープレビューを選択して、ファイルをパブリッシュします。Flashドキュメントを再度パブリッシュします。マウスカーソルを円の上に配置すると、カーソルが手のマークに変わります。これで、シェイプがクリック可能であることが、ユーザに対して視覚的に表現できます。
ドラッグ可能なシェイプ
MOUSE_UP)イベントといったイベントリスナーを付け加える必要があります。制御/ムービープレビューを選択して、Flashドキュメントをパブリッシュします。円の上でマウスの左ボタンをクリックし、ボタンをクリックし続けると、ステージ上のシェイプが移動できます。また、マウスボタンを放すと、ステージ上のシェイプがそれ以降ドラッグできなくなります。ステージ上のシェイプをドラッグできるようにすることで、さまざまな可能性が広がります。しかし、ドラッグ可能なシェイプを作成するために、毎回、以上のコードを記述しなければならないようでは大変です。
では、上記のコードを外部のクラスファイルに変換して、シンボルをこのクラスに関連付けるだけで、シンボルが自動的にドラッグ可能になるとしたらどうでしょう
次のセクションでは、この方法を紹介します。
コードからクラスへの変換
以下のサンプルでは、ムービークリップをドラッグ可能にするためのロジックをカプセル化したActionScriptクラスを作成します。このクラスの新規インスタンスが作成されると、ステージ上の各インスタンスにコードを追加することなく、該当シェイプが自動的にドラッグ可能になります。flaとして保存します。fla(手順1で作成)と同じフォルダに保存します。displayパッケージに所属)を拡張する、新しいクラスのBallの定義が含まれています。外部のActionScriptドキュメントを利用する際には、FLAファイルを利用する場合と異なりクラスを明示的にインポートしなければならない点に注意してください。flaドキュメントを開きます。前出のサンプルの手順にならい、楕円ツールを使ってステージ上に円を描き、これをムービークリップシンボルに変換します。作成したシンボルがライブラリパネルに表示されるので、パネル上のシンボルを右クリックし、コンテクストメニューから「リンケージ」を選択します。「OK」をクリックして変更を適用し、ダイアログボックスを閉じます。ステージ上にballシンボルのインスタンスが配置されていることを確認してから、制御/ムービープレビューを選択してSWFファイルを生成します。ボールのインスタンス上でクリックすると、マウスカーソルが手のマークに変わるとともに、シンボルがドラッグ可能な状態になります。次のサンプルでは、クラスのインスタンスを動的に作成する方法について解説します。
クラスインスタンスの動的な作成
ステージにシンボルのインスタンスを作成するには、必ずオーサリング時にシンボルをドラッグして配置しなければならないわけではありません。
newコンストラクタの使用
以下にその例を示します。ここでFlashは、Ballクラスの新規インスタンスを指示通り作成してはいるものの、 addChild() メソッドを利用してこのシンボルを表示リストに含めていないため、ステージ上には表示されていません。手順1のコードに次の行を追加し、b1インスタンスが表示リストに追加されるようにします。次のサンプルでは、ドキュメントクラスを利用することにします。ドキュメントクラスを利用すれば、タイムラインの1フレーム目の代わりに、コードを外部ファイルに配置しておくことができます。これは、以前のサンプルで示したように、クラスとシンボルの関連付けに似た手法です。次のサンプルでは、コードをタイムラインからASファイルに移動する方法を紹介します。flaドキュメントの1フレーム目のコードを削除します。asという名前で保存します。flaドキュメントを開きます。制御/ムービープレビューを選択して、SWFファイルをプレビューします。さまざまな形状と大きさをもつballシンボルの10個のインスタンスが、ステージ上に表示されるはずです。ご覧のように、「ドキュメントクラス」テキスト入力ボックスを使用すれば、メインタイムラインのフレームではなく、外部ファイルにActionScriptコードを配置でき、複数のFLAファイル間でコードを再利用するといったことが可能になります。
次のステップ
0がもたらす魅力のごくわずかな部分を紹介してきました。0言語リファレンス*を参照してください。各APIに対する詳しい解説が含まれています。
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。
0プログラミング』や『ActionScript言語リファレンス』などのマニュアル類を制作するアドビのプラットフォームドキュメンテーションチームに所属
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
初期状態でも使いやすいように配慮されている Flash ですが、使いこなすにしたがってより効率な環境にカスタマイズしたくなるものです。そのような個々の要求に応えるため、Flash には他のアプリケーションとは比較にならないくらい、非常に多くの強力な拡張性を備えています。拡張機能というと、何か特別な機能という印象があるかもしれません。しかし、普通に Flash を使用されている方でも、実は気付かないうちに拡張機能のお世話になっているのです。起動時に表示される「スタートアップスクリーン」、Flash CS4 で搭載された新しい「プロジェクトパネル」、コマンドメニューにある「モーション XML の読み込み /書き込み」、果てはアクションパネルのコードヒントまで、実はすべて拡張機能を使って作られています。
Flash 標準の機能が Flash の拡張機能として開発されているというのは、拡張性の高さを示すに十分な説得力がありますね
一口に拡張機能と言っても、大小様々な機能があります。代表的な拡張機能は以下の通りです。コマンド:よく使う操作を JSFL という API を経由して、まとめて実行可能な機能です。コンポーネント:ユーザーインターフェイスなどをカンタンに作成するための機能です。カスタムアクション:アクションパネル左部にあるアクションツールボックスに任意のアクションを追加する機能です。パネル:ユーザー作成の任意のパネルを追加可能な機能です。テンプレート:よく使うパターンの fla ファイルをテンプレートとして登録できる機能です。ツール:ツールにカスタムツールを登録できる機能です。このように Flash は多種多様な拡張性を備えています。しかし、これらを扱うためのドキュメントが少ないため、機能自体もあまり知られていません。多少ハードルはありますが、使い方を学ぶもっとも確実な方法はすでに作成済みの拡張機能データを直接確認することです。隠しフォルダ上に存在しているため、フォルダを開くには「フォルダオプション」の「ファイルとフォルダの表示」にある「すべてのファイルとフォルダを表示する」の設定を有効化してください。また、必要がない限りこの設定は標準値である「隠しファイルおよび隠しフォルダを表示しない」とすることをお薦めします。隠しフォルダ上に存在しているため、フォルダを開くには「フォルダオプション」の「ファイルとフォルダの表示」にある「すべてのファイルとフォルダを表示する」の設定を有効化してください。また、必要がない限りこの設定は標準値である「隠しファイルおよび隠しフォルダを表示しない」とすることをお薦めします。中にはワークスペース設定やキーボードショートカット設定、パブリッシュプロファイルまで、Flash に関わる設定を含むファイルが多く格納されています。それぞれのデータの役割を理解しておけば、例えば OS をクリーンインストールする際のバックアップなどに便利です。
まずはファーストステップとして、オーサリング上の動作が JSFL 上ではどのようなコードになるのかを確認するところから始めましょう
“動作”と“コード”を併せて確認するには、[ウィンドウ→他のパネル→ヒストリ] にあるヒストリパネルが便利です。ヒストリパネルは通常、履歴の取り消し/やり直しなどに使用しますが、他にも任意のステップをコマンドとして保存することで、再度実行することができるような機能も搭載されています。実はこのファイルの中に設定されているコードが JSFL なのです。
動作とコードとヒストリパネルの比較図
それでは実際にコードを実行させてみましょう
今回は気軽な JSFL 実行環境である、JSFL コンソールを使って解説していきます。JSFL コンソールは、記述した JSFL をその場で実行可能な簡易エディターです。すでに Progression がインストールされている環境であれば、[ウィンドウ→他のパネル→JSFL コンソール] を開くことにより、エディターを起動することができます。
エディターが起動できたら、白い編集エリアに対して以下のようなコードを記述してみましょう
記述できたら、パネル右上の「実行ボタン」をクリックして実行してみましょう
出力パネルがアクティブになり、「Hello JSFL」という文字列が表示されたでしょうか
これがもっともシンプルな JSFL の実行になります。
【矩形を描いてみよう】
Flash を操作する場合、JSFL 上では fla ファイルからタイムライン、レイヤーまで、すべての要素はオブジェクトとして扱うことになります。このように使用するメソッド・プロパティに差異はありますが、ドット・シンタックスを用いた記述フォーマット自体は ActionScript と同じです。しかし、実際の JSFL でのコーディングには多少癖があります。// 矩形を描画する。// 画面に表示する。一方 JSFL を使って同様の処理をするには、以下のようなコードになります。// (ライブラリに)新規ムービークリップを作成する。// 矩形を描画する。// 画面に表示する。一見して違いが分かりにくいですが、操作する際の基準位置がそれぞれで異なっています。なぜこのような回りくどい手順になっているかというと、JSFL はマウス操作が前提となっている Flashの操作手順をスクリプト経由でも使用可能にしたものであるため、基準はあくまでもマウス操作であることに起因するものかと思われます。この点が理解できていると、コーディング中に戸惑うこともなくなり、ヘルプもよりスムーズに読めるようになります。
■拡張パネルの作り方
最後にもっとも拡張機能らしさが感じられる拡張パネルを作ってみましょう
拡張パネルとは、Flash 標準のプロパティパネル、変形パネル、ライブラリパネルのような機能をユーザーが作成することができる機能です。拡張パネルを作るには、パネルとして動作させたい機能を SWF ファイルとして作成することになります。※前項で使用した JSFL コンソールも拡張パネルとして作成されています。
今回はカンタンなサンプルとして、自動保存パネルを作成してみましょう
作成する機能は以下のように設定します。一定時間で fla ファイルを自動的に保存します。保存間隔はパネル上から設定可能にします。自動保存のオン/オフが切り替え可能にします。
それでは、まず新規 fla ファイルを作成しましょう
つぎに [ウィンドウ→コンポーネントパネル] を開き、保存間隔を設定するための NumericStepper コンポーネントと、自動保存のオン/オフを切り替えるための Buttonコンポーネントをステージに設置します。
コンポーネントを設置したイメージ
コンポーネントが設置できたら [ウィンドウ→コンポーネントインスペクタパネル] を開き、それぞれの初期値を設定します。
設定後のコンポーネントインスペクタのイメージ
あとはスクリプトでボタン状態に応じた処理を加えれば完成です。
fla ファイルの 1 フレーム目を選択した状態でアクションパネルを開き、以下のコードを設定しましょう
// 設置したコンポーネントを宣言する。// タイマー用のリスナー関数を作成する。// ボタンを切り替えた際のリスナー関数を作成する。
// ボタンが選択状態であれば
// タイマー間隔を再設定する。// タイマーを開始する。// タイマーを停止する。// タイマーを作成する。// イベントリスナーを登録する。上記のコードのポイントは上記のコードのポイントはMMexecute() 関数です。今回はつぎのようなコードを設定しました。アクティブな fla ファイルが存在しない場合には null を返すので、この戻り値を元にして条件分岐することでアクティブな fla ファイルが存在しない場合には何もしないようにしています。つぎに fla ファイルに対して save() を実行することで保存処理をし、つぎの行で自動保存時間を出力しています。これで拡張パネルが完成しました。しかし、MMexecute() 関数は特定の条件下でしか動作しない関数ですので、通常のプレビューでは実際に動作を確認することができません。
著者について
Web デザイン会社、ウェブサービス会社などを経て、Progression プロジェクトの開発・運営を、本業の Web デザイナーが副業になってしまうほど精力的に展開中
現在はワークショップなどでの講演活動と同時に、グローバルな普及を目指しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Spark projectでは、その他にもさまざまな用途のライブラリやソースコードが公開されています。ぜひ、チェックしてみてください。
Flashサイトを構築する際に、サイトデザインやデザインパーツをPhotoshopで作成し、それをFlashに読み込んでオーサリングしている人も多いでしょう
バージョンアップとともに、FlashとPhotoshopの連携は強化されてはいるものの、現状の機能だと物足りなさを感じている人はいませんか
本記事では、FlashとPhotoshopの連携をもっとスムーズに、もっと便利にするスクリプト集を紹介します。その際、PSDのレイヤー構造のまま読み込んだり、キーフレームに配置したり、画像の圧縮形式を選択したりすることが可能です。デザインとFlashオーサリングを1人で行う場合であれば、Flashでの使用方法を考えながらPhotoshopでデザインできるため、デザイン作業も自由にでき、PSDデータのままであってもFlashへの取り込みは比較的スムーズに行えます。しかし、デザイナーとデベロッパーが異なる場合、あらかじめPSDデータのレイヤー構成の取り決めを厳密に決めておく必要があり、その結果、デザイン作業に制限が生まれたり、レイヤー構造のすり合わせなどの余計な作業が増えてしまうという可能性があります。また、両方のケースに当てはまりますが、デザインに修正が発生して画像を差し替えることになった場合、PSDデータのままでは個別の画像の更新がしにくかったり、画像が分解されることによる容量が増加するなど、いくつかデメリットもあります。
そのため、直接PSDデータによる連携ではなく、結局、必要なデザインパーツを『Web およびデバイス用に保存』機能を用いてPNG24やJPEGで切り出し、Flashに一括して取り込むようにしている人も多いでしょう
ただ、こうした切り出し作業を手作業で行うのは面倒です。場合によっては、単調な切り出し作業に数時間も取られてしまうことがあります。
どうすれば、効率よく切り出し作業を行えるようになるのか
PhotoshopからFlashへ画像を書き出す際のフォーマットや設定については、以下のサイトが参考になります。
小野田智「普段の制作における個人的なベストプラクティス」
それぞれの機能について説明しましょう
【選択したレイヤーのみ表示
選択したレイヤー/レイヤーセットのみを表示するスクリプトです。Photoshopでは、レイヤーの表示/非表示アイコンを右クリックすると、メニューに「ほかのレイヤーをすべて表示/非表示」機能があります。この機能の場合、レイヤーセットの中身も非表示となります。しかし、このスクリプトを使用すると、レイヤーセット内にサブレイヤーがある場合はすべて表示します。
【選択したレイヤー以外を非表示
選択したレイヤー/レイヤーセット以外を非表示にするスクリプトです。
上記の「選択したレイヤーのみ表示
jsx」と異なり、レイヤーセット内のサブレイヤーの表示状態を保持します。
【選択したレイヤーを切り出し
選択したレイヤー/レイヤーセットの内容を切り出して、新規ファイルを作成するスクリプトです。レイヤーセット内のサブレイヤーの表示状態を保持します。
【選択範囲を切り出し
選択範囲の内容を結合した後に切り出して、新規ファイルを作成するスクリプトです。Photoshopの「切り抜きツール」機能と異なり、このスクリプトの場合はドキュメントを新規に作成します。また、切り出す範囲の上下左右が透明だった場合は、透明範囲を消去して作成されます。
【指定したレイヤーセットを切り出し
特定の名前がついたレイヤーセットの内容を切り出すことができるスクリプトです。接頭語、接尾語、中間キーワードを指定し、条件にマッチしたレイヤーセットを切り出して、新規ファイルを作成します。レイヤーセットの中にサブレイヤーがある場合はすべて表示します。条件のAND/ORを指定することができます。背景レイヤーは有効になるので、特定背景のPNG、JPEGの作成も可能です。ファイルに書き出す場合はレイヤーセット名がファイル名になります。ただし、重複した場合は連番が付加されます。
【指定したレイヤーを切り出し
上記のスクリプトのレイヤー版です。※Photoshopには標準で「レイヤーをファイルに書き出し」というスクリプトが用意されていますが、PNGでの書き出しができないのと、レイヤーセット単位での書き出しができません。【全てのドキュメントを保存せずに閉じる。大量に開いたドキュメントを、保存せずに一気に閉じるスクリプトです。上記の切り出し系スクリプトを使った際に大量に作成されたドキュメントを閉じる際などに、使用すると便利です。
【他のツリーのレイヤーを削除
上記の切り出し系スクリプトなどでレイヤー数が多すぎて処理が重くなる場合に、トップレベルで関係の無いレイヤーを削除してしまうスクリプトです。PSDの切り分けなどにも使用することができます。
ダウンロードと導入方法
ダウンロード後は、下記のPhotoshopのスクリプトフォルダに入れます。スクリプトを実行するには、メニューから「ファイル → スクリプト」を選びます。スクリプトフォルダに格納していないスクリプトでも、メニューから「ファイル → スクリプト → 参照」で開いて実行することができます。また、以下のようにキーボードショートカットを割り当てると、素早く実行できます。
[選択範囲を切り出し]のショートカット例
選択したレイヤーを切り出し]のショートカット例
使用する上での注意事項
自己責任にてご利用ください。データのバックアップをとった上でのご利用をおすすめします。JavaScriptやアクションを組み合わせることで、できるだけ高速化していますが、レイヤー数300以上のファイルに対して実行すると、Photoshopの動作が重くなりますのでご注意ください。レイヤー数600以上のファイルに対して実行すると、Photoshop以外のアプリケーションにも影響を及ぼす恐れがありますので、くれぐれもご注意ください。3ヶ月ほど使用した経験上、レイヤー階層が浅ければ、レイヤー数が多くても大丈夫のようです。逆にレイヤー階層が深いと、当然ですがループが増えて重くなるようです。不具合などあった場合は、Spark projectのチケットなどに書き込んでいただけるとありがたいです。切り出し系のスクリプトが、20%ほど高速化されています。Flashコンテンツで大量の画像パーツを使用する場合、「コピー → 新規→ 貼り付け → Webおよびデバイス用に保存」の手順で一つひとつ書き出していたら、いくら時間があっても足りません。
そんな時は「指定したレイヤーセットを切り出し
STEP01 レイヤーセットにあらかじめ名前をつけておきます。例えば、メニューなら以下のような感じです。
日本語も使用できますが、ファイルに書き出す場合はアルファベットの方がよいでしょう
STEP02 スクリプトから「指定したレイヤーセットを切り出し」を選びます。STEP03 ダイアログで指定キーワードを入力します。STEP04 ファイルに保存したい場合は「ファイルに保存する」にチェックを入れ、保存フォルダを選択します。STEP06 書き出しが成功すると、書き出し結果が表示されます。Case02 このレイヤーセットの画像だけ切り出したい。Photoshopでの作業中、大量のレイヤーの中から特定のレイヤーセットのみ表示するのは意外と手間がかかります。
標準で搭載されている「ほかのレイヤーをすべて表示/非表示」機能を使うと、中身も非表示にされてしまい、全部表示し直すはめに
そんな時は「選択したレイヤーを切り出し
STEP01 切り出したいレイヤーセットもしくはレイヤーを選択します。STEP02 スクリプトから「選択したレイヤーを切り出し」を選びます。STEP03 選択したレイヤーの画像が統合されて、新しいドキュメントとして表示されます。
」ダイアログにサヨウナラ
作業も終わってPhotoshopを終了しようすると、作業中のドキュメントすべてに 「変更を保存しますか
」というダイアログが表示されます。
大事なファイルは保存したけど、それ以外はいちいち「いいえ」をクリックするのが面倒
そんな時は「全てのドキュメントを保存せずに閉じる。STEP01 大事なファイルを保存したことを確認して、スクリプトから「全てのドキュメントを保存せずに閉じる」を選びます。STEP02 「全てのドキュメントを保存せずに閉じます。
このまま操作を続けますか
」というダイアログが出ます。「psdを開く」→「パーツを切り出し」→「閉じる」の流れのビデオも用意しましたので、こちらも参考にしてみてください。
みなさん、いかがでしたでしょうか
使い方はとても簡単です。ぜひ、使って下さい。
また、みなさん自身でもスクリプトを作成して、それを公開・共有し、みんなでもっと便利な開発環境を作り上げましょう
多くの人が、Photoshopでの作業を自動化するスクリプトや、スクリプトを作成するノウハウを公開しています。参考にしてみて下さい。海外ですが、スクリプトを多数配布されています。以下、開発者向けの作成Tipsです。
また、スクリプトを使用するには、メニューの「ファイル → スクリプト」から使用したいスクリプトを選択するだけです(一部、異なるアプリケーションがあります)
著者について
大手ECサイトのインターフェース設計、開発進行管理、Flashコンテンツの開発等を担当
その後、Flashデベロッパー専任となり、大手企業のブランドサイト、プロモーションサイト、CGMコンテンツなどの開発に携わっている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
0以降、大きな進化を遂げ、ブログツールとしてだけではなく、コンテンツマネジメントシステム(以下、CMS)としての機能も強化されました。通常、CMS構築はプログラマーの領域とされていますが、MTの構築環境はデザイナーにとっても分かりやすく、HTMLをコーディングする感覚でCMSを構築することができます。デザイナーだけで大規模なサイトを構築できるというのが、MTの魅力の一つです。さらに、MTで作成したサイトとFlashを連携させることで、サイトに様々な機能を追加することができます。一方でFlashサイトは、制作ファイルと実行ファイルが分かれていることから「更新管理に不向き」といわれていましたが、MTと連携させることでFlashサイトの更新管理も簡単に行えるようになります。このようにMTとFlashの組み合わせることで、お互いが持つメリットを活かしたコンテンツを開発することができます。本記事では、MTとFlashの連携方法、そしてメリットや可能性についてまとめてみました。
著者について
株式会社カンドウコーポレーションで、プランニング、デザイナー、アニメーション、Flashエンジニアとして活躍している。柳谷とは同じチームでサイト制作にあたることが多くあり、それぞれの得意分野をコラボレーションさせた、新たな可能性に日々取り組んでいる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
一方、MTで作成したエントリーの内容は、いったんデータベースに格納され、テンプレートを使ってJSON/XML/CSV形式で書き出すことができます。テンプレートさえ用意しておけば、再構築の際、サーバ内にこれらのファイルが自動で生成・更新されます。
Flash側では、MTが書き出した読み込み用ファイルをloadするスクリプトを記述すれば、あとはMTが更新されるたびにFlashサイトの内容が更新されるようになります(図1)
エントリー数が極端に多くなると、ファイルの読み込みに時間がかかる場合があるので、テンプレートを分割したり、読み込むタイミングを変えたりする必要があります。1からはカスタムフィールド機能が標準搭載されており、自在に入力フィールドを増やすことができます。テキストフィールド以外にも、「チェックボックス」「ラジオボタン」「画像のアップロードボタン」などを作成することができ、各カスタムフィールドにはデータ出力のための独自MTタグが割り当てます。それらを利用すれば、エントリーのデータを細かく分類してFlashに読み込むことができるので、より高度な表現が可能となります。インデックステンプレートを新規に作成します。エントリー数分ループする。これらのデータファイルは、MT内の記事が更新されるたびに自動で出力され、スタティックなファイルとしてサーバ内に保存されます。Flashを配置したHTMLが表示された時、自動的にこのデータファイルが読み込まれるようにFlashを設計します。なお、Flash内でJSONやXMLデータを読み込んで処理する方法はここでは触れませんが、多くのサイトで解説されているため、そちらを参考にしてください。同じテンプレートから各記事に合わせて内容を組み立てて再構築できるのが、CMSの大筋の仕組みです。
たとえば、全ての記事ページにFlashで作ったマップを設置するとしましょう
引数でHTMLとFlash間で情報をやり取りをするようにしておけば、記事ページによってマップの中心点が変わるコンテンツを作ることができます。以下は、そのためのMTテンプレートとその出力結果です。
あとは、Flash側で、引数の値によって動きが変化するものを作ります(後で紹介する「ブログの記事内容とマップを連動させる」で、実例を紹介しています)
・MTテンプレートコード(MTx、MTy 2つのカスタムフィールドを作ります) ※ブログ記事アーカイブテンプレートを使用します。Flash側では、受け取った引数をもとにセンター位置を変更し、ズームするスクリプトを記述します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
機能テストでは、システムが全体として期待どおりに機能することを検証します。すべてが正しく接続されていることも確認します。Seleniumは、Webブラウザ自体内で直接実行し、実際のユーザの操作をシミュレートします。Seleniumは、様々なブラウザとプラットフォームをサポートしています。特に、Webアプリケーションの機能やユーザアクセプタンスの検証テストを実行するときに役立ちます。我々は前回のプロジェクトでSeleniumを使用し、Flashコンポーネントを含むWebアプリケーションが期待どおりに動作することを検証しました。我々は作業に着手し、展開されたFlashアプリケーションをSeleniumでテストするための有効なソリューションを実現しました。この記事を読み進める前に、次のソフトウェアをインストールする必要があります。
この記事に必要な予備知識
0とJUnitユニットテストフレームワークに関する十分な知識が必要です。図1は、このソリューションの概要を示します。まず、いくつかの用語とテクノロジについて確認します。この場合、Selenium RCサーバはブラウザをインターセプトするプロキシとして機能します。Selenium RCクライアントドライバは、ブラウザコンポーネントをネイティブのユニットテスト言語で操作する方法を提供します。
サンプルのWebアプリケーション
サンプルのWebアプリケーションは非常に単純です。Flash SWFオブジェクトは、クリックごとに再描画される(緑、青、赤と順に色が変わる)長方形を表示します。実際にデモページ*でお試しください。htmlのソースコードは次のとおりです。as)は次のとおりです。その前に、環境が適切に設定されていることを確認してください。6K)をクラスパスに追加します。jarの場合と同じです。このようにSeleniumではFlashをテストできるでなく、Webアプリケーションの他のすべてのオブジェクトをテストできます。
同じテストで、すべてのWebアプリケーションの検証を行うこともできます(該当する場合)
この機能は、Webアプリケーションのコンポーネント間の相互運用性を検証する場合に特に役立ちます。例えば、Flashコンポーネントと残りのWebアプリケーションの対応する値を検証できます。
次のステップ
Flash SWFオブジェクトを含む単純なWebアプリケーションをテストする例を示しました。この記事で示したように、テストは展開されたSWFに対して実行されます。Flex は、Flash プラットフォームのエンタープライズ開発を本来の目的としてデザインされました。例えば、Flexはアプリケーション開発に向いています。テストは、エンタープライズ開発を成功に導く基本的なプラクティスです。Selenium RCは、この記事で提案したソリューションのメインコンポーネントです。Seleniumは進行中のオープンソースプロジェクトであり、今後登場する機能は様々な利益をもたらします。例えば、Selenium Grid*を使用して複数のテストを並行して実行したり、様々なブラウザや運用システムに対してFlash Webアプリケーションの互換性を検証したりすることができます。
著者について
eカマースとテレコミュニケーション業界での様々なテクノロジを駆使したアジャイル開発とオブジェクト指向テクニックが専門分野です。さらに13年間に及ぶソフトウェア開発経験に基づき、開発者、アプリケーションアーキテクト、プロジェクトマネージャ、ビジネスアナリスト、トレーナーなど、様々な役割をこなしています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Adobe - セミナーレポート:Flashコンテンツをゲームプラットフォームへ展開する技術、ビジネス
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flashコンテンツをゲームプラットフォームへ展開する技術、ビジネス
2009年6月18日、東京・大崎のゲートシティホールにおいて「Flashコンテンツをゲームプラットフォームへ展開する技術、ビジネス」と題したセミナーが開催されました。このセミナーでは、Flashのコンテンツをコンシューマー・ゲーム機で表示させるサードパーティーエンジン「Scaleform」の技術、そしてそれを利用した事例として、任天堂Wii向けのエデュケーション系ゲーム「あいうえ・おーちゃん」について、制作の舞台裏が紹介されました。近ごろ、Flashプラットフォームにおいてさまざまなツールが登場しています。そしてFlash Builderは、Flexフレームワークを使ったアプリケーションの開発時に使用する、デベロッパーのためのツールです。
新しいオブジェクトベースのアニメーション制作方法、モーションエディター、モーションエディターを使った3Dアニメーション制作、そしてそのアニメーションをモーションプリセットに取り込む
といった流れをデモンストレーション
Scaleform GFxは、ワールドワイドで400以上のゲームに採用されているミドルウェアで、Flashで制作されたコンテンツを効率よくゲームプラットフォーム上で表示させるためのサードパーティ・ソリューションです。阿部氏はまず、デモムービーを見せながら、Scaleform GFxを使うことで、ゲーム上でどのような表現が可能になるのか、その例を紹介しました。具体的には、フロントエンドのメニュー、HUD(メーターやゲージ)といったものを、Flashでグラフィカルに作ることが可能です。また、ゲーム内の3DのオブジェクトにFlashのムービーを貼付けることもできます。「ハードウェアのCPUに低負荷で、軽量かつ高い効率で描画させることができる」と阿部氏は話します。ゲームを進行させながらリッチなUIを表示させても、ゲーム自体を重くすることなく、非常に楽にHUDやメニューを出すことができます。また、Scaleform GFx独自のアンチエイリアスや、ベクターフォントのテキストレンダリングといった機能も持っています。とくにデザイナーに対するメリットとして、阿部氏は「信頼できるワールドワイドなサポート、大きなコミュニティ、クリエイターの多さ、ナレッジの多さ」を挙げます。0に対応しています。0についても対応する予定ですが、時期はまだ未定です」と阿部氏は話します。
その他にも、Flashコンテンツをゲームに活用するための強力なツールやUIコンポーネント、プラグイン集が揃っているScaleform GFxは、デザイナーにとっても、ゲームプログラマーにとっても魅力的なソリューションと言えるでしょう
休憩を挟んだ後の第3部では、株式会社ホームメディアから発売されたWiiウェア『あいうえ・おーちゃん』がScaleform GFxを用いて開発された事例について、リトルスタジオインク株式会社 取締役、株式会社ホームメディア代表取締役 町田保氏が講演しました。
リトルスタジオインクは、「ひらけ
ポンキッキ」の映像スタッフが基になって立ち上げた会社で、子ども向けのコンテンツ制作に関しては膨大な経験と資産を有しています。株式会社ホームメディアはその関連会社で、『あいうえ・おーちゃん』のパブリッシャー(発売元)となっています。『あいうえ・おーちゃん』は、幼児がテレビに向かって楽しみながら学ぶことができる、知育ソフトです。
「テレビの画面で楽しめるものを効率よく短期間でWii向けに作るにはどうしたら良いか
Flash 3の時代から、パソコン向けに知育コンテンツを制作してきたリトルスタジオインクにとっては当然のことでした。自分たちが作ってきたコンテンツが、なるべく手間がかからないかたちでWiiに使えるということで「ブレークスルーだと感じた」と振り返ります。
ゲームエンジンは高価であるという理由で、Mainプログラム(C++)を自前で開発
『あいうえ・おーちゃん』のオーサリングには、もちろんFlashが使われています。
FlashコンテンツをWii向けに最適化するポイントのひとつは、メモリ消費を減らすこと
町田氏は、PCのFlash Player上で再生するSWFファイルとWii用のファイルとを比較し、同じ内容のコンテンツでも、Wiiウェアのほうではメモリ消費が抑えられている例を紹介しました。『あいうえ・おーちゃん』にはミニゲームがたくさん収められているのですが、画像が多いミニゲームでは、実行時メモリが1MB近く削減できているものもあります。
「PCの場合はあまり気にしなくても良いが、ゲームでは数MBを削る争い」と話す町田氏
Scaleform GFxによる最適化は、メモリ消費を抑える上でとても有効であることがわかりました。また、町田氏からは、Wiiウェアのデベロッパーになる条件についても紹介されました。日本の事情については守秘義務の関係で明かされませんでしたが、北米を例にお話をしていただきました。デベロッパーになるためには、条件があり、主に「ゲームの開発能力を証明する」「セキュリティを確保する」「守秘義務契約」「開発コスト」「ゲームパブリッシャーと契約すること」といった条件が紹介されました。今回の事例で言えば、ホームメディアがパブリシャーで、リトルスタジオインクがデベロッパーとなります。最後に全体を通しての質疑応答が行われました。
来場者の多くがFlash制作者ということもあり、そのような制作者が「どうすればゲーム業界に関わることができるのか
」といった声が挙りました。Scaleformの阿部氏は、Flash制作者がゲーム開発に関わる方法として、ゲーム会社に就職するのが近道だが、それではごく一部にしか関われない可能性があるという現実を踏まえ「パブリッシャーに企画を持ち込むのが良いのでは」と話しました。サードパーティエンジンScaleform GFxを利用して、Flashコンテンツがゲームプラットフォームですでに活用されている――ということが、今回のセミナーで実事例を通して来場者Flashユーザーにお伝えしました。アニメーションはもちろん、WebやRIA等の世界でFlashを扱ってきたクリエイターやプログラマーには、Flashを用いてビジュアルを表現したり、ユーザーインターフェイスを設計したり、世界観を実現するためのノウハウを数多く持っているはずです。
そういったノウハウが、ゲーム制作に活かせることは間違いないでしょう
次のステップ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
デベロッパーを自負する筆者は、これまで Flash とともに成長してきました。ただし、Flash オーサリングツールは、つまるところ開発環境を詰め込んだクリエイティブツールであることから、デベロッパーには何かが欠け、デザイナーには何かが余分であると感じさせるところがありました。しかし、Flash の表現力と、どこへでも容易にアプリケーションをデプロイできるという特長が魅力となり、本来クリエイティブツールとして開発されたツールのぎこちなさに目をつむってでも、アプリケーションを開発する価値があったといえます。Flex 2 がエキサイティングなのは、まさしくこのような背景があったからです。これからは、Flash プラットフォームに注目するデベロッパーのために開発された開発環境とフレームワークを利用して、Flash オーサリングのクリエイティブな表現力を活かしつつ、Flash プラットフォームに向けた開発作業に取り組めるようになります。では、我々が何を発表したのか、そして Flex 2 製品ラインとは何かを紹介します。
0 を利用してアプリケーションを開発、コンパイル、デプロイできます (この際、Flex サーバーは必ずしも必要ではありません)
既にお気付きの方もおられるでしょうが、これからは「Flex」という名前に従来より幅広い意味が込められることになります。
これまで Flex は、デベロッパーがリッチかつ表現力豊かなアプリケーションを開発することを可能にする、エンタープライズ仕様のサーバー (Flex Server 1
5) として認識されていました。0) を指すことになります。
ここで重要な点をひとつ
Flex フレームワークを利用するアプリケーションを開発する際、Flex サーバーは必ずしも必要ではありません。
0」と書かれていることに気付いた Flash デベロッパーが沢山おられることでしょう (私もまずこの点に気付きました)
本来 Flash はアニメーション用のツール / プラグインとして開発され、時間の経過とともに、数多くのプログラミング機能やデベロッパー向け機能 (スクリプティングのサポート、デベロッパーを重視した API、より体系立てられたスクリプティング構文など) を収録し、進化し続けてきました。しかし、プレーヤーの核心部分はアニメーションやコンテンツの表現力に重点をおいていたことから、開発プロジェクトの再生環境として最適化されていたわけではありませんでした。我々は、プレーヤーのパフォーマンスを何年もの間最適化し続けてきた結果、プレーヤーを新たな次元に引き上げるためには、バーチャルマシンの再開発と、フレームやベクターの表示処理だけでなくコード実行処理にも最適化されたプレーヤーの開発が不可欠であるという結論に至りました。0 は、プレーヤーの新しい VM とともに一から再開発されています。これにより、我々はさまざまな事柄の簡素化、パフォーマンスやメモリ消費量の最適化、より強力で生産性の高い言語の投入といった機会を得ることができます。0 を即座に理解することができます。次に示すのは、簡単なクラスのコード例です。0 が Flash デベロッパーにもたらすメリットには、どのようなものがあるかを挙げてみます。
コンパイル時の、より厳格な検証機能
より優れた実行時のエラー処理とレポート機能
従来の的を絞ったパフォーマンス強化ではなく、基礎パフォーマンスの包括的な強化
より強力なデバッグ環境
したがって、ここではこれ以上の解説を割愛することにします。
引き続き Flash オーサリングを使いたい場合は
ここで皆さんの頭には、次のような考えが浮かんでいることでしょう
ツールの動作も安定しているし、使い方も既に熟知しています。新機能にも満足しています。答えは「もちろん」です。5 で再生するためにコンパイルすることができます。5 によってパフォーマンスと作業生産性を向上させられるようなゲームを開発していたとします。0 の機能性や最新のプレーヤー API、バーチャルマシンを利用することができます。これにより、今後プロジェクトはコマンドラインや他のエディタからでもコンパイルできるようになります。0 の完全なサポートが搭載される予定です。
Blaze は、まだ開発サイクルの初期段階にあることから、その正確なリリース時期を公表するわけにはいきません (ちなみに、Flash オーサリングの一般的な開発サイクルは 18 ~ 24 ヶ月です)
0 のサポートを含めた Blaze のアルファ版を公開する予定です。
プレーヤーとオーサリングツールのバージョンが一致しない理由
一部の方々からは、春にプレーヤーがリリースされると、Flash オーサリングツールには新しいプレーヤーとプログラミング言語に対するサポートが含まれないのではないかという質問が、私の IM に寄せられています。確かにこの点は、今回の発表を耳にし、まず私が抱いた疑問でもありました。これまで Flash オーサリングツールとプレーヤーは常に同じ開発 / リリースサイクルを共有し、とても密接な関係にあったといえます。したがって、常にすべてのテクノロジーを同期化するのは容易でなく、プレーヤーと Flash プラットフォームに依存する一部の製品間に、やむを得ずバージョンのズレが生じます。5 が今春にリリースされると、同様のズレが Flash オーサリングツールに対して起こります。
5 の全機能をサポートしません (ただし、これらの機能をサポートするパブリックアルファ版を公開する予定です)
これらは、すべて Flash プラットフォームの成長と成功ゆえに起こる事柄です。しかし、この結果、プレーヤーをより迅速に進化させられることはもちろん、最新プレーヤーに依存する製品は、よりユーザーの理にかなったタイミングで最新機能を実装できるようになるといったメリットが発生します。5 の公開からしばらく時間が経過していることになります。
Blaze の出荷と同時に即座に最新機能が利用できるということは、従来の Flash にはなかった画期的な事柄だといえるでしょう
実際に触れてみてください。5 がダウンロードできます。なお、これらはすべてアルファ版リリースであることに注意してください。したがって、ある程度の荒削り感が残っていることや、一部の機能が正しく動作しないこともあり得ます。我々は、今回ほど早期に開発中のソフトウェアを公開したことがありません。しかし、荒削り感に目をつぶってでも、今の段階で皆さんに方向性を提示し、皆さんからフィードバックをお寄せいただく方が、結果的には実りが多いことを我々は確信しています。Flex 2 に関しては、既にさまざまな情報が公開されています。以下に一部の情報へのリンクを示します。
著者について
現在は、Adobe AIRのデベロッパ関連のシニアプロダクトマネージャです。これまで、Flashとリッチインターネットアプリケーションに関するさまざまな講演活動や執筆活動を行ってきました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事では、以下のソフトウェアを使用しています。
従来の「音」関連機能
これまでのFlash Playerに搭載されていた「音」に関する機能というと、どんなものが思い浮かぶでしょうか
ざっと挙げてみましょう
音の再生/停止
音量のコントロール
パン(音の左右の定位)のコントロール
ピーク(再生されてる音の音量)の取得
画像処理系APIの充実ぶりと比べると、お世辞にも充実しているとは言い難い内容です。たとえば下のようなコードを書いてコンパイルすると、440Hzのサイン波(聴覚検査で聞くようなポーという音)がずっと鳴り続けます。swfをダウンロードして確認してください。以下のサイトから入手できます。//一度のイベントごとに2048~8192サンプル×左右2チャンネル分のデータを書き込みます。先ほどのサンプルコードの波形データを書き込むあたり【※2】を見てもわかるように、「どのような波形データを鳴らすか」はActionScriptで完全にコントロールできます。言い換えると、「プログラム上で波形データさえ作れれば、どのような音でも鳴らすことができる」ということです。これによってFlashで様々な音関連のアプリケーションを作ることが可能になります。
たとえばですが、以下のようなものができるのではないかと思います(処理速度的な部分をクリアできれば、ですが)
イコライジング機能つきのMP3プレイヤー
ちょっとした音楽の制作環境
シンセサイザーやサンプラーのような仮想楽器
使用上の注意点
それは「レイテンシ(音の遅延)」です。Dynamic sound generationの仕様上、波形データを書き込んだタイミングと、その書き込んだ波形データが実際に鳴るタイミングには数百ミリ秒程度のズレがあります。「数百ミリ秒」と聞けば、非常にわずかなズレのように感じるかもしれませんが、実際に聞いてみるとその遅延に気づくものです。また、再生環境によってはさらにズレる可能性があります。実際どの程度遅れているかは、上記サンプルコードの【※1】のような計算で計測することができます。Dynamic sound generationの用途として、「音とアニメーションの同期」や「クリック時の効果音」なども考えられますが、レイテンシの問題があるため、それらの場合には旧来の方法を使うことをオススメします。見ての通り、某電子楽器にインスパイアされて作ったものです。某楽器と同じような感覚で、16×16に並んだボタンをクリックしてオン・オフしてみてください。下5行分にはドラムの音サンプル、その上にはベースの音サンプルが割り当てられていいます。ボタンをクリックしてオン状態にしておくと、縦ラインが通過した時に、該当する音が鳴るようになっています。ちなみにベースの音は、1つのベース音の波形データをもとに、リアルタイムに音程を上下させて鳴らしています。また、下の方に並んでいるボタンやツマミには、BPM(テンポ)の変更やエフェクトなどの機能が割り当てられています。ぜひ、いじってみてください。
音を鳴らすタイミングの完全な制御
フィルタやエフェクタ、ピッチ変更など、リアルタイムでの音の加工
といったことができるようになっていることが、実際に体験していただけると思います。
いかがでしたでしょうか
リポジトリ:興味ある方はぜひご覧になってみてください。
著者について
大学卒業後、転がり込んだ小さな制作会社で、必要に迫られてデザインからHTML、CSS、Flash、PHPまで幅広く身につけつつ、様々な種類の案件をこなす。
その後、ウノウ(株)にてWebサービス系サイトのデザインを担当
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
カスタムコントローラーの構成について
カスタムコントローラーの作成
縮小版カスタムコントローラーの作成
Web サイトへのカスタムコントローラーの追加
つぎのステップ
印刷用に表示
また、Flash Video エクステンションでは、ページ上の FLV ファイルを制御するための再生コントローラーを、デフォルトで用意されている数種類の中から選ぶことができます。デフォルトの 6 つのコントローラースキン (テーマグラフィック) は、それぞれ含まれている制御要素が異なり、ビデオがどのように見えるかを左右します。また、Flash デザイナーは、Flash MX 2004 を利用して独自のスキンを作成し、カスタマイズしたスキンをデフォルトのものの代わりに使用することができます。この記事では、独自のスキンファイルの作成方法と、そのスキンを Flash Video エクステンションで利用する方法を紹介します。
この記事に必要なもの
このチュートリアルをフォローするには、つぎのソフトウェアとサンプルファイルをインストールする必要があります。メモ: アップデータは既存の MX 2004 バージョンを上書きインストールします。
この記事のために必要な予備知識:
前編記事では、サンプルサイト内にビデオを追加して、再生する方法を紹介しています。
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ローカルセキュリティが変更された理由
ローカルセキュリティの基本
連携するメディア用のローカルセキュリティ
ローカルセキュリティのシナリオ
ローカルセキュリティの図表
ローカルセキュリティと無関係な変更点
サードパーティの記憶領域
ユーザーは、クライアントサイドで永続化されている共有オブジェクトに対してサードパーティドメインの SWF が読み取りや書き込みを行うことをできないようにすることができます。デフォルトではサードパーティの記憶領域が有効になっていますが、Flash Player 設定マネージャで [サードパーティ製 Flash コンテンツにログイン情報およびコンピュータ上のその他のデータを格納することを許可します] をオフにすることによって、サードパーティの記憶領域を無効にすることができます。サードパーティ SWF とは、その元のドメインが、ユーザーがアクセスしているプライマリドメイン (ブラウザのアドレスバーに表示されているドメイン) と一致しないすべての SWF のことです。サードパーティの記憶領域のオプションは、ローカル共有オブジェクトと、(そのよく知られていない同類である) 永続化されたリモート共有オブジェクトの両方に適用されます。Flash Player は、その SWF の元のドメインとブラウザのアドレスバーに表示されているドメインとを比較し、両者のドメインが正確に一致しない場合は、その SWF をサードパーティであると判断します。サードパーティ記憶領域に関する制限事項は、ローカル SWF (ユーザーのファイルシステムからロードされた SWF) には適用されません。リモート SWF のみに適用されます。サードパーティ SWF であるかどうかを判断するにはブラウザの URL との比較が必要となるため、Flash Player でサードパーティ記憶領域の制限事項が監視されるのは、Web ブラウザ内で再生されている場合のみです。スタンドアローンプレーヤー、プロジェクタ、および Flash オーサリングプレーヤーの場合は監視されません。
制限事項が適用される場合
SWF が純粋にサードパーティファイルである場合、つまり他の人のサイトに組み込まれている SWF である場合、特定のユーザーによっては、その SWF が共有オブジェクトに対して読み取りや書き込み操作を行うことが許可されません。その理由については、次のセクションの説明を参照してください。サードパーティであるとして処理されている SWF が、自分の管理下にあるサイト内でのみ使用される場合は、永続共有オブジェクトに対して読み取りまたは書き込み操作を行う必要のある SWF がすべて、ユーザーがアクセスしているプライマリドメインから処理されるように、サイトを再編成する必要があります。
サードパーティの記憶領域が制限される理由
インターネットにアクセスしてさまざまな情報を閲覧すると、便利さと引き換えにプライバシー上のリスクを負うことになります。通常、使用する IP アドレス、オペレーティングシステム、ブラウザなど、自分に関する情報をある程度公開することは避けられませんが、既知の信頼できる相手以外には、ほとんどの個人情報を非公開にすることが望まれます。近年論議の的となっている個人情報の 1 つに、Web コンテンツに格納されるトラック情報によって明らかにされる閲覧履歴があります。ある特定のユーザーのアクセス情報が多くの異なるサイトで同様の方法で記録され、後でそれらのサイトや他のサイトが記録されたアクセス情報をすべて読み取って、ユーザーの閲覧習慣に関する情報を構築できる場合、一部のユーザー (およびユーザープライバシーの保護を提唱する人たち) はこれをプライバシーの侵害と感じます。こうしたトラック情報は、通常、Web サーバーまたはユーザー自身のコンピュータに格納されます。このため、ユーザーの閲覧履歴は上記の方法で収集できることになります。しかし、閲覧記録をサーバー上に保存しておくと、サーバーの記憶領域が消費され、またサーバー間の通信も必要となるため、コストがかかってしまいます。また、IP アドレスなどの特性の識別は時間の経過と共に変化する可能性があり、また多数のユーザーによって共有される場合もあるため、複数のアクセス情報から 1 人のユーザーを識別するのが困難な場合もあります。このため、履歴情報の入手を望む側にとっては、可能な場合、閲覧履歴をユーザー自身のコンピュータに記録し、そのコンピュータを使用してアクセスされたサイトの記録を蓄積する方法の方が便利です。この方法で情報を保存するテクノロジーには、ブラウザの Cookie と、Flash の永続共有オブジェクトがあります。各種ブラウザと Flash Player には、他のサイトが作成した Cookie や共有オブジェクトを読み取ることを禁止する、起源が同じセキュリティポリシーが実装されています。この制限があるため、関係する各サイトが閲覧記録を独自のデータストアに格納するだけでは、他のサイトがこの情報を読み取って履歴情報を構築することができません。このため、一般的には、すべての履歴情報を記録する 1 つのドメインを指定し、履歴を記述する文書を各サイトがそのドメインから参照し、そのドキュメントの取得に使用した URL でサイトを特定する情報を渡す方法が使用されます。以降のアクセスでは、共有のドメインから履歴を読み取るドキュメントが、Cookie を記述するドキュメントによって記述されたすべての記録にアクセスすることができ、ユーザーの閲覧履歴の一部が明らかにされます。各種ブラウザと Flash Player のユーザーは、サードパーティの永続化されたデータに対する読み取りおよび書き込み操作を無効にすることができます。ここでのサードパーティとは、ユーザーがアクセスしているプライマリドメイン (ブラウザのアドレスバーに表示されているドメイン) とは一致しないドメインのことです。html が永続化されたデータに対する読み取りまたは書き込み操作を試みた場合、ブラウザまたは Flash Player はその操作を許可しません。
これは、ユーザーがブラウザで閲覧しているのは common
com はサードパーティドメインであるためです。HTML ページのソースである Flash コンテンツが信頼性のないコンテンツである場合は、これが役に立ちます。たとえば、ユーザーが独自に作成する SWF 署名を含める可能性のあるフォーラムを管理しているときに、生成された HTML がこれらの SWF を直接ソースとして使用する場合は、これらの SWF が HTML ページでスクリプトを実行できないようにする方が安全です。保護しなければならない機密データがなく、他のドメインとデータを共有する必要がある場合は、このワイルドカードを使用すると便利です。
ただし、連携する SWF がどのドメインから提供されるのかが実行時までわからないとき (連携する SWF が負荷分散クラスタから提供される場合や、呼び出し元 SWF が多くの異なるドメインで使用される場合など) には、System
前述のように、この呼び出しによって、インターネット上のすべての SWF が、呼び出し元の SWF をスクリプティングできるようになります。
より明確なアクセス許可
このアクセス許可が確立されると、使用する側のドメインにあるすべての SWF が、許可を与える側の SWF をスクリプティングできるようになります。許可を与える側のパーティは、許可を与える側の SWF ではなく、許可を与える側のドメインであると解釈されました。com からロードされる他のすべての SWF もスクリプティングすることができました。これによって、予期しない結果が引き起こされる場合がありました。
com の管理者が、互いに関係のない多くの異なる Flash アプリケーションを管理しており、一部のアプリケーションについては外部ドメインからのアクセスを許可する必要があるが、site1
com のすべてのアプリケーションについては外部ドメインからのアクセスを許可したくなかったとします。swf にもアクセスを許可することになると気が付かなかった可能性があります。この処理が適用されるのは、バージョン 8 以降の SWF のみです。com) を使用するかを判断します。
永続共有オブジェクトの保護
このような共有オブジェクトは、以下に仮定に基づいて説明する攻撃から保護されます。この HTTPS の要件を除き、保護された保存場所にある共有オブジェクトへのアクセスに適用される規則は、保護されない共有オブジェクトの場合と同じです。
保護された共有オブジェクトの取得
たとえば、保護されたローカル共有オブジェクトを取得するには、次のように指定します。保護された共有オブジェクトを明確に要求する SWF のみが、新しい、保護された別個の保存場所を使用します。以前のバージョンの SWF で作成された共有オブジェクトはすべて、HTTPS であるかどうかに関係なく、元の保護されない保存場所に置かれます。保護された共有オブジェクトと保護されない共有オブジェクトは、それぞれ異なる保存場所に置かれています。このため、同じ名前、localPath、およびドメインを持つ 2 つの永続共有オブジェクト (1 つは保護された共有オブジェクトでもう 1 つは保護されない共有オブジェクト) を取得することが可能です。
保護された共有オブジェクトを使用する理由
保護された永続共有オブジェクトは、権限のないパーティによる仮想上の攻撃から保護されます。HTTPS プロトコルによって、いくつかの重要な保護機能が提供されます。最もよく知られているのは、ネットワーク上のサードパーティがネットワーク通信の内容を見ることができないようにする "暗号化" 機能です。暗号化以外の重要な機能としては、"整合性" があります。この機能では、1 つのパーティが他のパーティにデータを送信するときに、そのデータが修正されることなく到着するか、修正された場合にはその修正を検知し、無効データとして拒否されるようにします。この機能は、インターネットの分散型性質を悪用する "介入者攻撃" と呼ばれる脅威から、データを保護するのに役立ちます。ネットワーク通信に関わるパーティ (インターネットサービスプロバイダの社員、ネットワークオペレータ、プロキシサーバー、ファイアウォールなど) は、ネットワーク通信を盗聴することだけではなく、ネットワーク通信でやり取りされるデータを修正し、送信元のパーティになり代わってアクションを起こす独自のドキュメントをデータに挿入することができます。com にアクセスし、ログイン情報を求める SWF を表示した場合、介入者攻撃を行う攻撃者がほぼ同一の独自の SWF を使って、ユーザーのログイン情報を本来の受信者に送るだけではなく、攻撃者自身にも送るケースが考えられます。しかし、接続が HTTPS で保護されている場合は、介入者攻撃で修正された SWF をクライアントが受け取ったときにその SWF が拒否され、攻撃が失敗します。他に考えられる同様の攻撃として、サーバーの識別に使用される DNS などのシステムの脆弱性を利用し、SWF を提供するサイトになりすまして行う攻撃があります。"認証" と呼ばれる HTTPS のもう 1 つの機能では、サーバーの識別検証に SSL 証明書を使用して、このような攻撃を阻止します。ここでは、介入者攻撃についてのみ説明しますが、この説明は介入者攻撃となりすまし攻撃の両方に当てはまります。HTTPS 経由で SWF を提供し、永続共有オブジェクトをその SWF から記述する場合、記述した共有オブジェクト内のデータには、元の SWF と基本的にはユーザーだけがアクセスできるようにすることが望まれます。たとえば、口座情報や金融データなどの機密情報を、永続共有オブジェクトに記録する場合があります。このような状況で、たとえばユーザーの 1 人が介入者攻撃を受けた場合に、攻撃者がその共有オブジェクト内のデータにアクセスできないようにすることが求められます。攻撃者が送った SWF は、共有オブジェクトを読み取って、その内容を攻撃者に送り返すことができました。当然、こうした攻撃を行うのは簡単ではありません。既に作成した HTTPS SWF が、永続共有オブジェクトに機密情報を書き込んでいた場合でも、何者かがこうした攻撃でその情報へのアクセスを試みた可能性は非常に低いと考えられます。しかし、永続共有オブジェクトに機密データを格納する場合、今後このような攻撃を受ける可能性をできる限り排除するには、保護された共有オブジェクトの使用を検討してください。世界で最も広く普及しているソフトウェアの 1 つである Flash Player は、その豊富なメディア機能、安定性、および信頼性によって、非常に多くのコンピュータやデバイスに導入されています。Flash Player 8 では、表現力に富む新機能や向上したパフォーマンスに加え、何億ものユーザーが Web サーフィンを行う際の保護機能も強化されています。これは非常に重要なことです。
Flash Player は、ユーザーが個人情報を管理するのに役立つ信頼性の高いソフトウェアとして、セキュリティ専門家から高い支持を獲得し続けるでしょう
ここで紹介したセキュリティ機能の強化には、リスクがまったくないわけではありません。世界中でやり取りされる何百万もの SWF のごく一部が、作成者が予測しなかった形で、まったく意図せずに、これらの新しいユーザー保護機能の影響を受ける可能性があります。Macromedia では、このような可能性を軽視せず、セキュリティ機能の変更による利益と損失の比較に多大な時間を費やしました。Flash は、"いったん導入したらその後は安心して使用できる" という、高い評価を確立することができました。Flash Player の新規リリースでは、最も古いバージョンの Flash コンテンツでも、最初にパブリッシュされたときと同じように再生できます。ユーザーの信頼に値する製品でありつづけるために、今後も長期間にわたって Flash Player を機能豊富な安定したメディアとして提供できるように努力していきます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0基本アクションコンポーネントの使い方
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
データのロードに関するセキュリティ制約
ムービー間スクリプティングに関するセキュリティ制約
ローカル接続に関するセキュリティ制約
共有オブジェクトおよび各種設定の保存場所
印刷用に表示
この記事では、新しいセキュリティ制約に対応するための既存ムービーの修正方法、および、ポリシーファイル (詳細は、この記事内の「データローディングに関するセキュリティ制限」を参照) の使い方、さらにその他のセキュリティ変更点を紹介します。
セキュリティに関する変更の概要
ドメイン名を必要とする操作は、ドメインが完全に一致すること
com のようなサブドメイン名が異なるドメイン名は、今後一致しているとは判定されません。ドメイン名の参照には、サブドメイン名を含めたすべてのドメイン名のみ有効です。ただし、この場合、外部データを提供するサーバーには、ドメイン間を越えたローディングを許可するための XML ファイル「ポリシーファイル」を設置する必要があります。
著者について
Deneb は自ら現在問題になっているセキュリティの変更を実装しました。セキュリティの問題では深い自責の念に駆られましたが、Deneb 自身その 10 倍以上大変だったことは間違いありません。最近は、週末をサンフランシスコのベイエリアでハンググライダーに乗って過ごすようになりました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0基本アクションコンポーネントの使い方
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
データのロードに関するセキュリティ制約
ムービー間スクリプティングに関するセキュリティ制約
ローカル接続に関するセキュリティ制約
共有オブジェクトおよび各種設定の保存場所
データのロードに関するセキュリティ制約
新しいセキュリティ制約は、データの読み込みに関する次の操作に影響します。
ランタイム共有ライブラリから読み込まれるシンボル
リクエスト元のムービーが同一ドメイン以外にある URL を参照している。リクエスト元のムービーが HTTPS プロトコルを利用せずに配信されているにも関わらず HTTPS プロトコルを利用する URL をリクエストしている。
左: ドメインが完全に一致していない場合の警告ダイアログ
ユーザーが [許可] ボタンをクリックした場合、データロードの操作は、従来どおりに実行されます。[拒否] ボタンをクリックした場合は、データロードの操作を拒否することになります。データロード操作をリクエストするムービーのサイズが、このダイアログボックス (215 x 328 ピクセル) より小さい場合、ダイアログボックスは表示されることなく、[拒否] ボタンがクリックされたと同様に扱われます。ダイアログボックス内の [今後表示しない] をチェックしておくと、たとえムービーが小さくてダイアログボックスが表示されない場合でも Macromedia Flash Player が以降同様のダイアログが発生した場合の挙動を記憶します。
新しいセキュリティ制約がムービーに与える影響を確認するには
新しいセキュリティ制約の影響を受ける場合は、セキュリティ警告のダイアログボックスが表示されます。この場合、次の操作をおこなってください。
動作ログが保管されるディレクトリにファイル名「mm
cfg」のテキストファイルを作成して、つぎの一行を記述します。ブラウザを利用して、ムービーをテストします。txt ファイルが生成されているかを確認してください。txt ファイルが生成されていない場合、新しいセキュリティ制約の影響はありません。txt ファイルが生成されている場合は、ファイルの内容を確認してください。新しいセキュリティ制約の影響を受ける場合は、ファイル内につぎのような記述があります。
新しいセキュリティ制約に関する既存ムービーの修正方法
既存ムービーが正しく実行できない理由が、新しいセキュリティ制約のドメイン不一致の場合は、ムービーがアクセスしようとしているサーバーにポリシーファイルを設置することで、従来どおりの動作が実行できます。なお、ポリシーファイルの詳細については、次のセクションで解説します。つぎに既存ムービーの修正方法を示します。ムービーがデータをロードしようとしている参照先のサーバーを特定します。
参照先サーバーの特定には、前のセクションの mm
cfg に関する手順を使用します。
前のセクションの例の場合、参照先のサーバーは、store
XMLSocket サーバーにアクセスしているかどうかは、セキュリティの警告ダイアログボックス内に "[ドメイン名]" だけではなく、"[ドメイン名]:[ポート番号]" が表示されるかによって特定できます。xml" のファイル名で新規ファイルを作成します。xml ファイル内につぎのテキストをコピーします。com が参照元のフルドメインです。ポリシーファイルを作成したサーバーに対して複数のドメイン上に存在するムービーからのアクセスがある場合は、ポリシーファイル内に該当するドメインごとの <allow-access-from> タグを記述します。逆に、ひとつのムービーから複数のサーバー上のデータを参照する場合は、参照先のサーバーごとにポリシーファイルを作成します。この7つのステップを追うことで、既存ムービーを従来どおり動作させることができます。
新規作成するムービー用のポリシーファイル作成
ご覧いただいたように、ポリシーファイルは、既存コンテンツに対する便利な対処策として利用できますが、他にも重要な利用目的があります。ポリシーファイルは、サーバーに対するアクセスの各種パーミッションを設定するために使用でき、ポリシーファイルが設置されたサーバー内のドキュメントに対する参照を、特定のドメイン、あるいは、すべてのドメインに存在する Macromedia Flash ムービーから受け付けるといったことを設定できます。ポリシーファイルを使用すると詳細にアクセス権限をコントロールできるので、時刻表や weblog のコンテンツなどを XML フィードで公開する場合などに便利です。また、参照元ドメインを限定しないことをポリシーファイルに定義しておけば、サーバーサイドプロキシの必要なく XML データを第三者が作成する Flash ムービーに公開することも可能になります。
ポリシーファイルの基本
ポリシーファイルに参照元 Macromedia Flash ムービーに対するアクセスが許可されていることが確認できれば、データロードリクエストを処理します。
したがって、ポリシーファイルは必ず参照先サーバーのドキュメントルートディレクトリにファイル名「crossdomain
xml」を使用して配置してください。また、ポリシーファイルは、ムービーが参照に使用するあらゆる方法に対して有効です。IP アドレスを使用した参照、同一サーバーを参照する複数のドメイン名での参照、さらには、HTTP、HTTPS といった異種プロトコルを使用した参照、これらすべての参照に対して、ポリシーファイルはサーバーを包括的にコントロールします。XMLSocket サーバーへのアクセスは、通常同じドメイン内に存在する HTTP サーバーがコントロールしています。xml からポリシーファイルが配信されるようなケースです。
ポリシーファイルを配信する際には、このようなドメイン間転送を使用しないように注意してください (ただし、同一ドメイン内の転送は可能)
先述のセキュリティ警告ダイアログボックスは、Macromedia Flash Player 6以前のバージョン用に作成されたムービーが、参照先のサーバーにポリシーファイルが存在しないにもかかわらず、従来許可されていたドメインを越える参照をおこなうときに表示されます。したがって、参照先のサーバーにポリシーファイルを作成すれば、セキュリティ警告ダイアログボックスは表示されなくなります。このセキュリティ警告ダイアログボックスの設定は、ポリシーファイルがすべてのサーバーに設置されるまでの間、旧バージョン用に作成されたムービーとの互換性を保つための暫定的な措置です。したがって、ユーザーが任意でマクロメディアの推奨するセキュリティ方針をカスタマイズするために用意されているものではありません。今回のセキュリティ基準の変更が広く浸透し、ポリシーファイルがサーバーに設置されるようになれば、このセキュリティ警告ダイアログボックス自体の必要性がなくなります。また、Macromedia Flash Player 7 用に作成されたムービーの場合、あらたなセキュリティ基準に基づいてポリシーファイルとともにムービーがデプロイされるので、このダイアログボックスが表示されること自体ありません。
ポリシーファイルの構文
ポリシーファイルは、XML 形式で記述します。XML 内には、つぎのように注釈を入れることが許可されています。domain 属性の値には、つぎのいずれかが使用できます。12 ) IP アドレスを指定した場合、IP アドレスそのものを利用して配信されたムービーからのリクエストのみが許可されます。指定した IP アドレスに最終的にポイントされているドメイン名がムービーの配信時に使用されている場合は、アクセスが拒否されます。
ワイルドカードを使用したドメイン名 (例:*
com ) ワイルドカードは、ドメインの最初の部分 (サブドメイン部分) のみに使用できます。
ワイルドカードには、必ずアスタリスク(*) を使用し、ピリオド () で残りのドメイン名に結合します。com というワイルドカードを使用したドメイン名を指定した場合、com で終わるすべてのドメインから配信された Flash ムービーからのアクセスが許可されます。com からのアクセスはすべて有効です。com のようにサブドメインがないドメイン名にも有効です。完全なワイルドカード:* (アスタリスクひとつ) この場合、すべてのドメイン、および IP アドレスからのアクセスが許可されます。なおこの設定は、HTTPS サーバーに配置されたポリシーファイルのみにおいて有効です。ポリシーファイル内に <allow-access-from> タグが記述されていない場合、ポリシーファイルは、意図的にすべてのアクセスを拒否していると解釈します。このような意図的なアクセス拒否ポリシーファイルを用意するのと、ポリシーファイル自体を用意しないのとでは違いがあり、Macromedia Flash Player 6 以前用に作成されたムービーから意図的なアクセス拒否ポリシーファイルが存在するサーバーにロードをリクエストした場合は、セキュリティ警告ダイアログボックスが表示されません。つぎにポリシーファイルのサンプルを示します。
ポリシーファイルの安全性は
ポリシーファイルを使用することによって、デフォルトでは許可されていないドメインを越えたアクセスが可能になります。デフォルトのセキュリティ設定を上書きするわけですから、ポリシーファイルの役割りや動作に関しては、充分に理解するようにしてください。ポリシーファイル内にドメインを指定すると、指定したドメインに存在するすべてのサーバーに対して、ポリシーファイルが設置されたサーバー内のすべてのドキュメントへのアクセスを許可することになります。通常は、このような設定がパブリックなサーバーに求められています。サーバーからパブリックなドキュメントのみを提供する場合、サーバーへのドキュメントリクエストをおこなうドメインを制限せず、ファイルがいつでもダウンロードできるようにしておきます。このようなあらゆるドメインからのアクセスを許可する場合は、つぎのようにパブリックなアクセスを許可するポリシーファイルを配置してサーバーを公開します。一方、パスワード認証などといった認証システムを採用している場合や、ファイヤーウォールを設置して外部アクセスを制限しているようなサーバーの場合、パブリックアクセスを許可するポリシーファイルを配置することは賢明ではありません。仮にパブリックポリシーファイルをこれらの場面で使用すると、サーバー内のドキュメントは、サーバーが信頼するすべてのコンピュータ上にて実行される Macromedia Flash ムービーからアクセスできることになり、必ずしも信頼しないエンドユーザーに対してサーバー上のプライベートな情報を公開してしまう可能性があります。このようなケースでは、ポリシーファイル内に必ずアクセスが発生することが判っているドメインだけを指定します。com からのアクセスを許可するポリシーファイルを配置します。
また、Macromedia Flash ムービーがサーバー内のドキュメントにアクセスすることが全くなく、より一層安全にドキュメントを保護したい場合は、該当サーバーにすべてのアクセスを拒否するつぎのポリシーファイルを配置しておくと良いでしょう
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0基本アクションコンポーネントの使い方
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
データのロードに関するセキュリティ制約
ムービー間スクリプティングに関するセキュリティ制約
ローカル接続に関するセキュリティ制約
共有オブジェクトおよび各種設定の保存場所
ムービー間スクリプティングに関するセキュリティ制約
ムービー間をまたぐスクリプティングは、ムービー同士が同じドメインから配信された場合に限り実行するようデフォルトでは設定されています。ムービーは、任意の場所から配信されるムービーをロードすることが可能ですが、ムービー間のスクリプト制御や通信に関しては、セキュリティの制約が適用されます。
新しいセキュリティ制約
また、安全性が保証されていない HTTP プロトコルなどを利用して配信されたムービーからは、HTTPS 配信のムービーをスクリプト制御できません。以前のセキュリティ制約では、サブドメイン名を除いたスーパードメインが一致するムービー同士のスクリプト制御、および HTTP ムービーからの HTTPS ムービー制御が許可されています。通常グローバルオブジェクトは、暗示的に参照されています。また、グローバルオブジェクトには、_global プロパティを使用して参照されるグローバル変数が存在します。allowDomain メソッドを使用してムービー間スクリプティングのパーミッションを設定します。swf に記述されている場合に限り、このメソッドを実行します。allowDomain メソッドを呼び出すことによる動作の影響は、必ず把握するようにしてください。
com ドメインから配信されるすべてのムービーから www
com ドメインのすべてのムービーをスクリプト制御することができるようになります。allowDomain の同一ドメイン判定基準には、サブドメインを除いたスーパードメインが使用されます。com など) を持つすべてのムービーをスクリプト制御できます。allowDomain が使用する同一ドメイン判定基準には、サブドメインを含めたフルドメイン名が使用されます。com ドメインムービーからのアクセスのみが許可されます。ただし、この設定は、HTTPS で保護されているムービーとHTTPS 保護をうけないムービーとの間にスクリプト制御を許可すことになるので、マクロメディアは、このような設定をお勧めしません。HTTPS で保護されたムービーのスクリプト制御が必要な場合は、参照元、参照先の両方の Flash ムービーをHTTPS で保護することをお勧めします。
しかし、すべてのムービーを HTTPS から配信することが経済的な理由などから非現実的な場合は、System
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
フィルタのアニメーション化
ブレンドモードの使用
ビットマップの操作
テキストの操作
ActionScript を使用して、ムービークリップ、ボタン、またはテキストフィールドに各フィルタエフェクトを適用できます。
ActionScript を使用してインスタンスにフィルタを適用する場合は、置き換えマップフィルタや畳み込みフィルタも使用できます (これらのフィルタは Flash のユーザーインターフェイスからは使用できません)
フィルタはベクター定義に適用されるので、SWF ファイルにビットマップイメージを格納するという、ファイルサイズに関するオーバヘッドが生じません。ActionScript を記述して、テキストフィールドやムービークリップ、ボタンに適用している既存のフィルタを変更することも可能です。この時点で、ActionScript コードを使用して基本的なフィルタエフェクトを適用してみることもできます。Flash のドキュメントには多くの例 (上記を参照) がありますが、ここでは簡単な例としてベベルフィルタの適用から始めます。次の手順に従ってこのフィルタを適用してみてください。
ベベルフィルタを適用するには :
fla」という名前で作成します。グラフィックまたはイメージを含む新しいムービークリップを作成し、そのクリップに「my_mc」というインスタンス名を付けます。
// ベベルフィルタを定義
0 によるアニメーション化、フィルタ適用、描画]-[フィルタエフェクトのアニメーション化]-[フィルタパッケージの操作][制御]-[ムービープレビュー] を選択してドキュメントをテストします。ただし、フィルタの適用時、一部のフィルタには異なる情報が必要です。たとえば、カラーマトリックスフィルタには配列が必要です。カラーマトリックスフィルタを使用して、次の例のように、インスタンスの明度を変更できます。
カラーマトリックスフィルタの適用 :
fla」という名前で保存します。ロードが完了し、イメージをステージの中央に配置した後で、カラーマトリックスフィルタを使用して、インスタンスの明度を 100% に設定します。[制御]-[ムービープレビュー] を選択してドキュメントをテストします。フィルタの適用後、ActionScript を使用してプロパティの調節やフィルタのアニメーション化のようなフィルタの操作を行うことができます。詳細については、次のセクションを参照してください。ただし、それらのフィルタは Flash のユーザーインターフェイスからは使用できません。それら 2 つのフィルタとは、畳み込みフィルタと置き換えマップフィルタです。filters プロパティを使用することによって、アクセスできます。この処理では、ムービークリップに現在関連付けられている各フィルタオブジェクトが格納されている配列が返されます。複数のフィルタをオブジェクトのフィルタ配列に追加することによって、複数のエフェクトを適用できます。エフェクトはそれらが配列内で列挙されている順序で適用されます。重要なのは、filters プロパティの設定では、渡されたフィルタ配列を複製し (次の例を参照)、参照としてフィルタを格納しないことです。filters プロパティを取得すると、配列のコピーが返されます。このアプローチの問題点は、次のようなコードが正常に動作しないことです。// このコードは動作しない。前のコードは、フィルタ配列のコピーを返すので、コピーを修正することになります。次の例は、オブジェクトの既存のフィルタリストの末尾に、ぼかしフィルタを追加します。// このコードは動作する。このコードの利点は、あるオブジェクトからフィルタをコピーし、それらを修正し、別のオブジェクトに適用できることです。その際、元のオブジェクトのフィルタへの影響を心配する必要はありません。filters プロパティを使用することによって、アクセスできます。複数のフィルタをオブジェクトのフィルタ配列に追加することによって、複数のエフェクトを適用できます。フィルタはそれらが配列内で列挙されている順序で適用されます。この処理では、ムービークリップに現在関連付けられている各フィルタオブジェクトが格納されている配列が返されます。各フィルタには、そのフィルタ固有のプロパティのセットがあります。フィルタは、通常の配列オブジェクトのようにアクセスして、変更できますが、filters プロパティを使用してフィルタの設定や取得を行うと、filters オブジェクトの参照ではなく、複製が返されます。重要なのは、filters プロパティの設定では、渡されたフィルタ配列を複製し (次の例を参照)、参照としてフィルタを格納しないことです。filters プロパティを取得すると、配列の新しいコピーが返されます。これによって、あるオブジェクトからフィルタをコピーし、それらを修正し、別のオブジェクトに適用できます。その際、元のオブジェクトのフィルタへの影響を心配する必要はありません。このアプローチの問題点は、次のようなコードが正常に動作しないことです。// 正常に動作しない。前のコードは、フィルタ配列のコピーを返すので、コピーを修正することになります。// 正常に動作する。次の例は、ステージ上のマウスポインタの位置に応じて、イメージにぼかしを適用します。水平または垂直方向にマウスポインタを動かすと、その動きに応じて、ぼかしフィルタの blurX および blurY プロパティが調整されます。fla」という名前で保存します。
// ぼかしフィルタを適用
// ムービークリップをステージに配置
// マウスの動きに応じてぼかしフィルタを調整
前のコードは 3 つのセクションに分けられます。2 番目のセクションは、2 つのムービークリップを作成し、ネストしたクリップの 1 つにイメージをロードします。3 番目のセクションは、ステージ上のマウスポインタの動きに応じて、ぼかしを調整します。x 軸に沿ってマウスポインタを動かすと、ぼかしフィルタの blurX プロパティが調整されます。y 軸に沿ってマウスポインタを動かすと、フィルタの blurY プロパティが調整されます。ステージの左上隅に向かってマウスポインタを近づけると、ムービークリップに適用されるぼかし量が減少します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
メモ : この学習ガイドは、Flash のグラフィックエフェクトについて紹介し、ユーザーのスキルアップのためのツールを提供します。これらの新しいグラフィックエフェクトは、Flash のクリエイティブな作品の外観に変化をもたらすものであり、実際の Flash プロジェクトに対して多くの新しいデザインの可能性を開きます。いくつかの新しい描画機能とビデオ機能に加え、これらの新しいグラフィックエフェクトによって、プロジェクトのルックアンドフィールの表現力を高める機能が提供されます。ここでは、これらの重要な新しい機能のいくつかを要約します。グラフィックエフェクトフィルタ : フィルタを使用すると、ムービークリップおよびテキストに視覚効果を適用して、より効果的なデザインを作成することができます。フィルタによって、オブジェクトを光らせたり、ドロップシャドウを加えて立体感を出したり、その他のさまざまなエフェクトやエフェクトの組み合わせを適用することができます。ブレンドモード : ブレンドモードを使用してさまざまな合成効果を作成することによって、ステージ上のオブジェクトのイメージとその下にあるオブジェクトのイメージとの組み合わせ方を変更できます。ビットマップスムージング : ステージ上のビットマップイメージを大幅に拡大または縮小した場合の画質が向上しました。ランタイムビットマップキャッシュ : ランタイムビットマップキャッシュは、静的ムービークリップ (たとえば背景イメージ) またはボタンシンボルがランタイムにビットマップとしてキャッシュされるように指定することによって、再生のパフォーマンスを最適化する機能です。ムービークリップをビットマップとしてキャッシュすると、Flash Player でイメージの再描画処理を実行し続ける必要がなくなり、再生のパフォーマンスが大幅に向上する場合があります。両方のバージョンで、描画ツールおよび機能が強化され、新しいテキストレンダリング機能が追加されています。
この記事に必要なもの
この学習ガイドに沿って操作を実際に行うには、次のソフトウェアをインストールする必要があります。Flash ワークスペースの使用方法を理解しており、Flash ファイルでの作業について基礎知識があることが必要です。また、コードを使用したグラフィックエフェクトの作成に関するセクションでは、ActionScript について中級レベルの知識があることが必要です。フィルタを使用すると、テキスト、ボタン、およびムービークリップにさまざまな視覚効果を追加できます。フィルタは、ドロップシャドウ、ぼかし、グロー、およびベベルをグラフィックエレメントに適用する場合によく使用されます。Flash に固有の機能として、モーショントゥイーンを使って、適用するフィルタをアニメーション化することができます。たとえば、ドロップシャドウ付きのボール (球) を作成する場合、タイムラインの最初のフレームから最後のフレームまでドロップシャドウの位置を変えて、オブジェクトの 1 つの側から反対側に移動する光源の外観をシミュレートすることができます。フィルタを適用した後にも、フィルタのオプションや順序をいつでも変更して、いろいろな組み合わせ効果を試すことができます。プロパティインスペクタでは、フィルタの有効と無効を切り替えることや、フィルタを削除することができます。フィルタを削除すると、オブジェクトは元の外観に戻ります。特定のオブジェクトを選択すると、そのオブジェクトに適用したフィルタが表示され、また、プロパティインスペクタ上でそのオブジェクトに対するフィルタリストが更新されます。
フィルタの適用
フィルタは、選択したオブジェクトに対してプロパティインスペクタから適用することができます。オブジェクトに新しいフィルタを追加するたびに、プロパティインスペクタでそのオブジェクトに適用されたフィルタのリストにフィルタが追加されます。1 つのオブジェクトに複数のフィルタを適用することも、以前に適用したフィルタを削除することもできます。図 1 に、各種フィルタがムービークリップインスタンスの外観にどのようなエフェクトを与えるかを示します。
フィルタエフェクトの例
フィルタが SWF ファイルのパフォーマンスにどのような影響を与える可能性があるかの情報については、Flash LiveDocs の次のセクションを参照してください。0 によるアニメーション化、フィルタ適用、描画]-[フィルタエフェクトのアニメーション化]-[エラー処理、パフォーマンスおよびフィルタについて]
フィルタを適用するには :
フィルタを適用するムービークリップ、ボタン、またはテキストオブジェクトをステージ上で選択します。フィルタを適用できるのは、テキスト、ボタン、およびムービークリップオブジェクトのみです。プロパティインスペクタで [フィルタ] タブをクリックします。
[フィルタの追加] (+) ボタンをクリックし、[フィルタ] ポップアップメニューからフィルタを選択します (図 2 を参照)
選択するフィルタがオブジェクトに適用され、フィルタ設定のコントロールがプロパティインスペクタに表示されます。
プロパティインスペクタの [フィルタの追加] メニュー
目的の外観を得るまで、さまざまな設定を試すことができます。ドロップシャドウの適用 ([フィルタとブレンドの使用]-[フィルタの適用]-[ドロップシャドウの適用])ぼかしの適用 ([フィルタとブレンドの使用]-[フィルタの適用]-[ぼかしの適用])グローの適用 ([フィルタとブレンドの使用]-[フィルタの適用]-[グローの適用])ベベルの適用 ([フィルタとブレンドの使用]-[フィルタの適用]-[ベベルの適用])グラデーショングローの適用 ([フィルタとブレンドの使用]-[フィルタの適用]-[グラデーショングローの適用])グラデーションベベルの適用 ([フィルタとブレンドの使用]-[フィルタの適用]-[グラデーションベベルの適用])カラー調整フィルタの適用 ([フィルタとブレンドの使用]-[フィルタの適用]-[[カラー調整] フィルタの適用])
フィルタを削除するには :
フィルタを削除するムービークリップまたはテキストオブジェクトを選択します。プロパティインスペクタで [フィルタ] タブをクリックします。適用されたフィルタのリストで、削除するフィルタを選択します。[フィルタを削除] (-) ボタンをクリックしてフィルタを削除します。フィルタ設定ライブラリを作成すると、同じフィルタまたはフィルタのセットをオブジェクトに対して簡単に適用できます。プロパティインスペクタで作成したプリセットフィルタは、[フィルタ]-[プリセット] メニューの [フィルタ] タブに保存されます。プリセットは、削除することや名前を変更することもできます。
オブジェクトに適用されたフィルタを有効または無効にするには :
プロパティインスペクタのフィルタリストで、フィルタ名の隣にある有効化アイコンまたは無効化アイコンをクリックします。メモ : フィルタリストで Alt キーを押しながら有効化アイコンをクリックすると、リスト内にある他のフィルタの有効状態を切り替えることができます。Alt キーを押しながら無効化アイコンをクリックすると、選択したフィルタが有効になり、リストの他のフィルタがすべて無効になります。
オブジェクトに適用されたすべてのフィルタを有効または無効にするには :
プロパティインスペクタで [フィルタの追加] (+) ボタンをクリックし、ポップアップメニューから [すべてを有効にする] または [すべてを無効にする] を選択します。メモ : フィルタリストで Ctrl キーを押しながら有効化アイコンまたは無効化アイコンをクリックすると、リストのすべてのフィルタを有効または無効にすることができます。この時点で、基本的なフィルタエフェクトを自分で適用してみることもできます。Flash のドキュメントには多くの例 (上記を参照) がありますが、ここでは簡単な例としてドロップシャドウフィルタの適用から始めます。次の手順に従ってこのフィルタを適用してみてください。
オブジェクトにプリセットフィルタを適用するには :
プリセットフィルタを適用するムービークリップ、ボタン、またはテキストオブジェクトを選択します。プロパティインスペクタで [フィルタ] タブをクリックします。[フィルタの追加] (+) ボタンをクリックし、[フィルタ] ポップアップメニューから [プリセット] を選択します。[プリセット] メニューの下部にある、利用できるフィルタのリストから、適用するプリセットフィルタを選択します。メモ : オブジェクトにプリセットフィルタを適用する場合、選択したオブジェクトに現在適用されているフィルタは、適用するプリセットで使用されているフィルタによって置き換えられます。
傾斜したドロップシャドウの作成
[ドロップシャドウ] フィルタの [オブジェクトを隠す] オプションを使用すると、オブジェクトのシャドウを傾斜して、よりリアルな外観を作成することができます (図 3 を参照)
このエフェクトを作成するには、ムービークリップ、ボタン、またはテキストオブジェクトの複製を作成し、複製にドロップシャドウを適用して、自由変形ツールを使って複製オブジェクトのシャドウを傾斜する必要があります。[ドロップシャドウ] フィルタを傾斜して、よりリアルな外観のシャドウを作成する。
傾斜したドロップシャドウを作成するには :
シャドウを傾斜するムービークリップまたはテキストオブジェクトを選択します。ソースムービークリップまたはテキストオブジェクトを複製します ([編集]-[複製])複製したオブジェクトを選択し、自由変形ツールを使って傾斜します ([修正]-[変形]-[回転と傾斜])複製したムービークリップまたはテキストオブジェクトに [ドロップシャドウ] フィルタを適用し、[オブジェクトを隠す] チェックボックスをオンにします。複製したオブジェクトは非表示になり、傾斜したシャドウのみが表示されます。[ドロップシャドウ] フィルタの設定と傾斜したドロップシャドウの角度を調整し、目的に合った外観を作成します。ActionScript を使用して、ムービークリップ、ボタン、またはテキストフィールドに各フィルタエフェクトを適用できます。
ActionScript を使用してインスタンスにフィルタを適用する場合は、置き換えマップフィルタや畳み込みフィルタも使用できます (これらのフィルタは Flash のユーザーインターフェイスからは使用できません)
フィルタはベクター定義に適用されるので、SWF ファイルにビットマップイメージを格納するという、ファイルサイズに関するオーバヘッドが生じません。ActionScript を記述して、テキストフィールドやムービークリップ、ボタンに適用している既存のフィルタを変更することも可能です。この時点で、ActionScript コードを使用して基本的なフィルタエフェクトを適用してみることもできます。Flash のドキュメントには多くの例 (上記を参照) がありますが、ここでは簡単な例としてベベルフィルタの適用から始めます。次の手順に従ってこのフィルタを適用してみてください。
ベベルフィルタを適用するには :
fla」という名前で作成します。グラフィックまたはイメージを含む新しいムービークリップを作成し、そのクリップに「my_mc」というインスタンス名を付けます。
// ベベルフィルタを定義
0 によるアニメーション化、フィルタ適用、描画]-[フィルタエフェクトのアニメーション化]-[フィルタパッケージの操作][制御]-[ムービープレビュー] を選択してドキュメントをテストします。ただし、フィルタの適用時、一部のフィルタには異なる情報が必要です。たとえば、カラーマトリックスフィルタには配列が必要です。カラーマトリックスフィルタを使用して、次の例のように、インスタンスの明度を変更できます。
カラーマトリックスフィルタの適用 :
fla」という名前で保存します。ロードが完了し、イメージをステージの中央に配置した後で、カラーマトリックスフィルタを使用して、インスタンスの明度を 100% に設定します。[制御]-[ムービープレビュー] を選択してドキュメントをテストします。フィルタの適用後、ActionScript を使用してプロパティの調節やフィルタのアニメーション化のようなフィルタの操作を行うことができます。詳細については、次のセクションを参照してください。ただし、それらのフィルタは Flash のユーザーインターフェイスからは使用できません。それら 2 つのフィルタとは、畳み込みフィルタと置き換えマップフィルタです。filters プロパティを使用することによって、アクセスできます。この処理では、ムービークリップに現在関連付けられている各フィルタオブジェクトが格納されている配列が返されます。複数のフィルタをオブジェクトのフィルタ配列に追加することによって、複数のエフェクトを適用できます。エフェクトはそれらが配列内で列挙されている順序で適用されます。重要なのは、filters プロパティの設定では、渡されたフィルタ配列を複製し (次の例を参照)、参照としてフィルタを格納しないことです。filters プロパティを取得すると、配列のコピーが返されます。このアプローチの問題点は、次のようなコードが正常に動作しないことです。// このコードは動作しない。前のコードは、フィルタ配列のコピーを返すので、コピーを修正することになります。次の例は、オブジェクトの既存のフィルタリストの末尾に、ぼかしフィルタを追加します。// このコードは動作する。このコードの利点は、あるオブジェクトからフィルタをコピーし、それらを修正し、別のオブジェクトに適用できることです。その際、元のオブジェクトのフィルタへの影響を心配する必要はありません。filters プロパティを使用することによって、アクセスできます。複数のフィルタをオブジェクトのフィルタ配列に追加することによって、複数のエフェクトを適用できます。フィルタはそれらが配列内で列挙されている順序で適用されます。この処理では、ムービークリップに現在関連付けられている各フィルタオブジェクトが格納されている配列が返されます。各フィルタには、そのフィルタ固有のプロパティのセットがあります。フィルタは、通常の配列オブジェクトのようにアクセスして、変更できますが、filters プロパティを使用してフィルタの設定や取得を行うと、filters オブジェクトの参照ではなく、複製が返されます。重要なのは、filters プロパティの設定では、渡されたフィルタ配列を複製し (次の例を参照)、参照としてフィルタを格納しないことです。filters プロパティを取得すると、配列の新しいコピーが返されます。これによって、あるオブジェクトからフィルタをコピーし、それらを修正し、別のオブジェクトに適用できます。その際、元のオブジェクトのフィルタへの影響を心配する必要はありません。このアプローチの問題点は、次のようなコードが正常に動作しないことです。// 正常に動作しない。前のコードは、フィルタ配列のコピーを返すので、コピーを修正することになります。// 正常に動作する。次の例は、ステージ上のマウスポインタの位置に応じて、イメージにぼかしを適用します。水平または垂直方向にマウスポインタを動かすと、その動きに応じて、ぼかしフィルタの blurX および blurY プロパティが調整されます。fla」という名前で保存します。
// ぼかしフィルタを適用
// ムービークリップをステージに配置
// マウスの動きに応じてぼかしフィルタを調整
前のコードは 3 つのセクションに分けられます。2 番目のセクションは、2 つのムービークリップを作成し、ネストしたクリップの 1 つにイメージをロードします。3 番目のセクションは、ステージ上のマウスポインタの動きに応じて、ぼかしを調整します。x 軸に沿ってマウスポインタを動かすと、ぼかしフィルタの blurX プロパティが調整されます。y 軸に沿ってマウスポインタを動かすと、フィルタの blurY プロパティが調整されます。ステージの左上隅に向かってマウスポインタを近づけると、ムービークリップに適用されるぼかし量が減少します。
フィルタのアニメーション化
フィルタを適用したムービークリップをアニメーション化できます。トゥイーンによって結合された個々のキーフレーム上のオブジェクトは、中間フレーム上でトゥイーンされた、対応するフィルタのパラメータを持ちます。一方のフィルタに対応する同じタイプのフィルタがトゥイーンの反対側にない場合は、一致するフィルタが自動的に追加され、アニメーションシーケンスの最後にもエフェクトが適用されるようになります。
Flash ユーザーインターフェイスを使用してフィルタをアニメーション化するには :
fla」という名前で保存します。フレーム 1 のステージ上でムービークリップインスタンスを作成または追加します。インスタンスを選択し、[フィルタ] タブを開きます。[フィルタの追加] ボタンをクリックし、ポップアップメニューから [グロー] を選択します。タイムライン上でフレーム 15 を選択し、F6 キーを押して新しいキーフレームを挿入します。ムービークリップインスタンスを再度選択し、[フィルタ] タブを開きます。[制御]-[ムービープレビュー] を選択して、アニメーション化したフィルタをテストします。Flash では、トゥイーンの一方の端にフィルタがないことや、フィルタの適用順序が異なることが原因で、モーショントゥイーンが誤動作することはありません。たとえば、ドロップシャドウフィルタを使ってモーショントゥイーンを作成し、トゥイーンの最初のフレームにノックアウトのあるドロップシャドウが適用され、最後のフレームにシャドウ (内側) が適用されていると、モーショントゥイーン内でフィルタの使用法に一貫性がないため、設定が修正されます。この場合、トゥイーンの最初のフレームで使用されたフィルタ設定 (ノックアウトのあるドロップシャドウ) が適用されます。これによって、面白いアニメーション効果を Flash アプリケーションに適用できます。最初の例では、グローフィルタをムービークリップインスタンスに適用します。onEnterFrame イベントハンドラを使用して、ムービークリップに適用されるグローの量をアニメーション化します。fla」という名前で保存します。ステージ上にグラフィックを描画し、[修正]-[シンボルに変換] を選択します。ムービークリップシンボルに名前を付け、[OK] をクリックします。ステージ上でムービークリップインスタンスを選択し、プロパティインスペクタ内の [インスタンス名] テキストボックスに「my_mc」と入力します。こののコードは、ステージ上のムービークリップインスタンスにグローフィルタを適用し、フィルタエフェクトをアニメーション化する onEnterFrame イベントハンドラを定義しています。アニメーションが 30 より大きいか等しくなる、または、10 より小さいか等しくなると、反転します。ここでは、Flash ファイル内のムービークリップにフィルタを適用するときに覚えておく必要のある重要な事項を挙げます。オブジェクトに適用するフィルタのタイプ、数、および品質は、再生時に SWF ファイルのパフォーマンスに影響を与えます。オブジェクトに適用するフィルタの数が多いほど、作成した視覚効果を正しく表示するために Flash Player で必要となる計算処理の回数が増えます。したがって、1 つのオブジェクトに適用されるフィルタの数が多くなりすぎないようにする必要があります。実行時の実際の影響は、フィルタが適用されている画面領域、プレーヤーがフィルタを再描画する頻度によって大きく異なります。プレーヤーは、フィルタが適用されたムービークリップをビットマップとして自動的にキャッシュするため、ムービークリップの各フレームを再描画する必要はありません。ムービークリップが回転、サイズの変更、または外観の変更によって修正されるとき、プレーヤーはクリップとそのエフェクトを再描画します。ムービークリップが変換 (移動) されても、再描画は行われません。ビットマップキャッシュの詳細については、ランタイムビットマップキャッシュに関するセクションを参照してください。各フィルタには、適用されたフィルタの強さと品質を調整できるコントロールが含まれています。低い設定を使用すると、処理速度の遅いコンピュータでもパフォーマンスが向上します。さまざまなコンピュータで再生するためのコンテンツを作成する場合や、ユーザーが使用できるコンピュータの処理能力がわからない場合は、再生のパフォーマンスを最大化するために、品質レベルを低に設定します。
ブレンドモードの使用
ブレンドモードを使用すると、複合イメージを作成できます。複合とは、複数の重なるオブジェクトの透明度またはカラーインタラクションを変化させるプロセスです。ブレンドを使用すると、重なるムービークリップでカラーをブレンドして固有のエフェクトを作成できます。また、オブジェクトとイメージの透明度に関する制御も可能になります。ブレンドモードを使用することで、ハイライトやシャドウの下にあるイメージの詳細が透けて見えるようにすることや、彩度の低いイメージの彩度を上げることができます。ブレンドモードには次のエレメントが含まれます。[ブレンドカラー] は、ブレンドモードに適用されるカラーです。[透明度] は、ブレンドモードに適用される透明度です。[ベースカラー] は、ブレンドカラーの下のピクセルのカラーです。[結果のカラー] は、ベースカラー上のブレンドのエフェクトの結果です。ブレンドモードはブレンドを適用するオブジェクトのカラーと基になるカラーの両方に依存するので、さまざまなカラーを試して結果を確認する必要があります。目的のエフェクトを得るには、さまざまなブレンドモードを試してみてください。Flash には、次のブレンドモードが用意されています。[標準] を選択すると、カラーが通常に適用され、ベースカラーを操作することはできません。[レイヤー] を選択すると、カラーは通常にブレンドされますが、ブレンド前に 100% の不透明度でブレンドオブジェクトがあらかじめ複合されます。これによって、ブレンドオブジェクトのサブクリップが互いに重なり合ってにじむのを防止できます。[比較 (暗)] を選択すると、ブレンドカラーよりも明るい領域のみが置き換えられます。ブレンドカラーよりも暗い領域は変更されません。[乗算] を選択すると、ブレンドカラーによってベースカラーを乗算し、より暗い色が作成されます。[比較 (明)] を選択すると、ブレンドカラーよりも暗いピクセルのみが置き換えられます。ブレンドカラーよりも明るい領域は変更されません。[スクリーン] を選択すると、ベースカラーによってブレンドカラーの逆のカラーを乗算し、白くするエフェクトが作成されます。[オーバーレイ] を選択すると、ベースカラーに応じてカラーが乗算またはスクリーンされます。[ハードライト] を選択すると、ブレンドモードカラーに応じてカラーが乗算または選別されます。このエフェクトは、オブジェクトにスポットライトを当てることに似ています。[差の絶対値] を選択すると、どちらの明るさの値がより高いかによって、ベースカラーからブレンドカラーが減算されるか、ブレンドカラーからベースカラーが減算されます。このエフェクトは、カラーの反転に似ています。[反転] を選択すると、ベースカラーが反転されます。[アルファ] を選択すると、アルファマスクが適用されます。[消去] を選択すると、背景イメージのベースカラーも含めて、すべてのベースカラーのピクセルが削除されます。メモ : 消去およびアルファブレンドモードでは、[標準] 以外のブレンドモードが親ムービークリップに適用される必要があります。
ブレンドモードの例
図 4 は、各種ブレンドモードがイメージの外観に与える影響を示しています。基になるイメージのカラー、および適用するブレンドモードのタイプによって、ブレンドモードのエフェクトは大きく異なるものになる可能性があります。
ブレンドモードの例
ブレンドモードの適用
ムービークリップで、選択したムービークリップにブレンドを適用するには、プロパティインスペクタを使用します。
ムービークリップにブレンドモードを適用するには :
ブレンドモードを適用する、ステージ上のムービークリップインスタンスを選択します。プロパティインスペクタの [カラー] ポップアップメニューを使って、ムービークリップインスタンスのカラーと透明度を調整します。ムービークリップのプロパティインスペクタで、[ブレンド] ポップアップメニューからブレンドモードを選択します。選択したムービークリップのインスタンスにブレンドモードが適用されます。目的のエフェクトを作成するための適切なブレンドモードを選択したかどうかを確認します。意図したとおりのエフェクトを得るために、ムービークリップのカラーと透明度の設定をさまざまに変更してみたり、さまざまなブレンドモードを試してみてください。[Flash ユーザーガイド]-[シンボル、インスタンス、およびライブラリアセットの使用]-[インスタンスプロパティの変更]-[インスタンスのカラーと透明度の変更]たとえば、次のコードを使用して、各種ブレンドモードを適用できます。[制御]-[ムービープレビュー] を選択してドキュメントをテストします。各種ブレンドモードがイメージにどのように適用されるかを確認するには、次の例を使用してください。次の例は、動的なイメージをロードし、ステージ上のコンボボックスからブレンドモードを選択して、各種ブレンドモードをイメージに適用します。fla」という名前で保存します。この ActionScript コードは、ブレンドモードの各タイプを含むコンボボックスを作成し、ユーザーが、動的にロードされたイメージ上で各ブレンドモードの効果を確認できるようにします。リスナーオブジェクトは、単一の onLoadInit というイベントリスナーを定義します。このリスナーは、イメージのロードが完了し、Flash で初期化されると起動します。現在コンボボックスインスタンスで選択されているブレンドモードが、blendModeType_mc ムービークリップに適用されます。続くコードは、MovieClipLoader インスタンスが、ステージ上のムービークリップに特定のイメージをロードするように設定します。最後のコードは、コンボボックスインスタンスで新しいアイテムを選択すると、そのブレンドモードが適用されるように、blendMode_cb コンボボックスインスタンスのリスナーを定義します。[制御]-[ムービープレビュー] を選択してドキュメントをテストします。
ビットマップの操作
BitmapData クラスでは、任意のサイズの透明または不透明のビットマップイメージを作成し、実行時にさまざまな方法で操作できます。このデータは、完全に不透明なビットマップも、アルファチャンネルデータを含む透明なビットマップも表現できます。各 32 ビット整数は、ビットマップ内の 1 つのピクセルのプロパティを決定します。次の手順は、ステージに JPEG イメージを動的にロードし、BitmapData クラスを使用して、テレビのノイズ画面のようなノイズ効果を作成します。x 軸および y 軸に沿ってマウスポインタを動かすと、一定の間隔でノイズが描画される様子が変化します。fla」という名前で保存します。このコードは、status_txt という名前のインスタンスを含むテキストフィールドを作成します。noise() メソッドの high パラメータと low パラメータは、ステージ上のマウスポインタの現在の位置を計算することによって指定されます。[制御]-[ムービープレビュー] を選択してドキュメントをテストします。マウスポインタをステージの x 軸に沿って動かすと low パラメータが変わり、y 軸に沿って動かすと high パラメータが変わります。Flash 内のデザインのサイズが大きくなるにつれて、アプリケーションを作成している場合であれ、複雑なスクリプトで記述されたアニメーションを作成している場合であれ、パフォーマンスや最適化について考慮する必要が生じてきます。静的な状態を維持するコンテンツ (矩形のムービークリップなど) がある場合、Flash ではコンテンツが最適化されません。そのため、矩形のムービークリップの位置を変更したり、その周りのエレメントを変更した場合、Flash Player 7 以前では、矩形全体が再描画されます。ムービークリップやボタンはサーフェスであり、基本的にはインスタンスのベクターデータのビットマップバージョンです。このデータは、SWF ファイルの処理中に大きく変更されることはありません。そのため、キャッシュがオンになったインスタンスは、SWF ファイルの再生中に頻繁に再描画されないので、SWF ファイルをすばやくレンダリングできます。ビットマップの高さまたは幅が 2880 ピクセルより大きい。
ビットマップが割り当てに失敗した場合 (メモリ不足エラー)
必ずしもビットマップキャッシュを適用する必要はありません。適用すると、状況によっては SWF ファイルのパフォーマンスに悪影響が出るためです。また、実行時の RAM 使用率がわずかに増加するのは、プレーヤーがベクターデータとキャッシュされたビットマップの両方をメモリに保持する必要があるためです。ビットマップキャッシュを適用する必要のある状況の詳細については、Flash LiveDocs の次のセクションを参照してください。メモ : サーフェスが再作成されるときに、ベクターデータを更新できます。そのため、サーフェスにキャッシュされたベクターデータは、SWF ファイル全体を通して同じになっている必要はありません。
ムービークリップのビットマップキャッシュを指定するには :
ステージで、ムービークリップまたはボタンシンボルを選択します。シンボルのプロパティインスペクタで、[ランタイムビットマップキャッシュを使用する] チェックボックスをオンにします。ActionScript を使用してキャッシュとスクロールを有効にし、背景を制御することができます。プロパティインスペクタを使用して、ムービークリップインスタンスのキャッシュを有効にすることができます。ActionScript を使用しない場合は、プロパティインスペクタで [ランタイムビットマップキャッシュを使用する] オプションを代わりに選択します。ActionScript を使用する場合は、ボタンおよびムービークリップインスタンスの 3 つの新しいプロパティを使用できます。SWF ファイルをテストすると、複雑なベクターアニメーションがより速くレンダリングされることがわかります。
ムービークリップをキャッシュするには :
fla」という名前を付けます。プロパティインスペクタ ([ウィンドウ]-[プロパティ]-[プロパティ]) の [フレームレート] テキストボックスに「24」と入力します。複雑なベクターグラフィックを FLA ファイルに作成または読み込みます。Flash のインストール時に作成された次のディレクトリ内にある完成済みソースファイルに、このサンプルとなる複雑なベクターデータグラフィックが用意されています。ベクターグラフィックを選択し、[修正]-[シンボルに変換] を選択します。[名前] テキストボックスに「star」と入力し、(ダイアログボックスが拡張されていなければ) [詳細] をクリックします。[OK] をクリックして、リンケージ識別子 Star が設定されたムービークリップシンボルを作成します。[制御]-[ムービープレビュー] を選択してドキュメントをテストします。ステージのどこかをクリックしてビットマップキャッシュを有効にします。1 秒間に 1 フレームくらいでアニメーション表示されていたのが、表示がスムーズになってインスタンスがステージ上のあちらこちらでアニメーション表示されるようになったことに注目してください。前の例で行ったようにキャッシュのオンとオフを切り替えると、キャッシュされたデータが解放されます。このコードは Button インスタンスに対しても適用できます。メモ : キャッシュをテキストフィールドに直接適用することはできません。この機能を利用するには、ムービークリップ内にテキストを配置する必要があります。
テキストの操作
Flash におけるフォントのレンダリングは、テキストを SWF ファイルに表示する方法と、実行時にどのようにレンダリング (または描画) するのかを制御します。Flash 8 では、通常のアンチエイリアスと高度なアンチエイリアスの 2 種類が用意されています。FlashType では、テキストフィールドに高度なアンチエイリアスを適用したときなどに、小~中サイズのフォントのテキストが読みやすくクリアに表示されるよう、高度なレンダリング技術が使用されています。この機能強化によって、埋め込みテキストはデバイステキストと同レベルの品質で表示され、フォントは別のプラットフォームでも同じように表示されるようになります。アンチエイリアスによって、テキストを滑らかにし、画面に表示される文字のエッジがぎざぎざにならないようにすることができます。これは、小さいサイズでテキストを表示するときに特に有効です。ユーザーが Flash Player 7 以降を使用している場合、静止テキスト、ダイナミックテキスト、およびテキスト入力でアンチエイリアスがサポートされます。メモ : Flash 8 で従来の FLA ファイルを開いても、テキストが自動的に [アンチエイリアス (読みやすさ優先)] オプションに更新されることはありません。FlashType レンダリング技術を利用するには、個々のテキストフィールドを選択して、手動でアンチエイリアスの設定を変更する必要があります。高度なアンチエイリアス機能およびカスタムアンチエイリアス機能は、次の機能をサポートします。
テキストの拡大 / 縮小と回転
225 ポイントまでのすべてのフォント (プレーン、ボールド、イタリック)
高度なアンチエイリアス機能およびカスタムアンチエイリアス機能は、次の機能をサポートしていません。
傾斜または反転テキスト
PNG ファイルフォーマットへのファイルの書き出し
メモ : テキストがアニメーション表示されるときは、プレーヤーが高度なアンチエイリアスをオフにし、動いているテキストの表示を改善します。アニメーション表示が終わると、アンチエイリアスはオンに戻ります。サブピクセルのレンダリングが高度なアンチエイリアスが適用されたフィールドに対しても無効になるのは、それらのフィールドに対してビットマップキャッシュ、フィルタの適用、または BitmapData オブジェクトへの描画が行われる場合です。Flash 8 では 5 種類のフォントレンダリングオプションを使用できます。オプションを選択するには、テキストフィールドを選択し、プロパティインスペクタを開きます。[フォントのレンダリング方法] ポップアップメニューからオプションを選択します。デバイスフォント : SWF ファイルのサイズが小さくなります。このオプションでは、現在エンドユーザーのコンピュータにインストールされているフォントを使用してレンダリングします。ビットマップテキスト (アンチエイリアスなし) : このオプションでは、アンチエイリアスが適用されず、テキストのエッジがシャープになります。また、フォントのアウトラインが SWF ファイルに含まれるため、SWF ファイルのサイズが大きくなります。アンチエイリアス (読みやすさ優先) : 滑らかなアニメーション表示が可能なアンチエイリアステキストが生成されます。テキストのアニメーション表示の際に整列とアンチエイリアスが適用されないため、場合によってはテキストのアニメーション表示が高速にもなります。大きいフォントを多くの文字に使用する場合や拡大 / 縮小フォントを使用する場合は、パフォーマンスは改善されません。このオプションでは、フォントのアウトラインが SWF ファイルに含まれるため、SWF ファイルのサイズが大きくなります。アンチエイリアス (読みやすさ優先) : このオプションには、高度なアンチエイリアスエンジンが使用されます。このオプションを使用すると、最も読みやすい最高品質のテキストが得られます。このオプションでは、フォントのアウトラインだけでなく、特別なアンチエイリアス情報も SWF ファイルに含まれるため、SWF ファイルのサイズが最も大きくなります。カスタムアンチエイリアス : このオプションは、[アンチエイリアス (読みやすさ優先)] と同じですが、アンチエイリアスパラメータを目で確認しながら手動で操作し、特別な表示を実現できます。このオプションは、新しいフォントや一般的でないフォントの最適な表示を達成するために使用できます。Flash Player 7 またはそれ以前のバージョンで使用するように作成された FLA ファイルを開くと、テキストのプロパティインスペクタによって、そのアンチエイリアスオプションが、Flash MX 2004 と同等のアンチエイリアスオプションに設定されます。以前のバージョンの FLA ファイルからのテキストは、[アンチエイリアス (読みやすさ優先)] および [カスタムアンチエイリアス] の場合を除いて、任意のテキストとすることができます。テキストツールを使用して、ステージ上に新しいテキストフィールドを作成します。ステージをクリックし、テキストフィールドにテキストを入力します。[アンチエイリアス (読みやすさ優先)] または [カスタムアンチエイリアス] オプションを適用するテキストフィールドを選択します。プロパティインスペクタで、[フォントのレンダリング方法] ポップアップメニューから [アンチエイリアス (読みやすさ優先)] または [カスタムアンチエイリアス] オプションを選択します。ヒント : 非常に大きいフォント (48 ポイント以上) に対して高度なアンチエイリアスを使用することはお勧めしません。この方法は、テキストフィールドの外観、コンテンツ、書式に対して、より詳細な制御を必要とする場合に不可欠です。normal : 通常のテキストのアンチエイリアスを適用します。高度なアンチエイリアスに設定すると、小さいフォントを非常に高品質でレンダリングできます。この定数は、小さいフォントのテキストが多いアプリケーションで使用する場合に最適です。fla」という名前で保存します。これら 2 つのムービークリップは、通常のアンチエイリアスと高度なアンチエイリアスを切り替えるのに使用します。[ライブラリ] パネルを開き、パネルの右上隅にあるオプションメニューから [新しいフォント] を選択します。[フォントシンボルプロパティ] ダイアログボックスが表示されます。このダイアログボックスでは、SWF ファイルに埋め込むフォントを (フォントスタイルとフォントサイズも含む) 選択できます。
ドキュメントのライブラリおよびプロパティインスペクタの [フォント] ドロップダウンメニューに表示されるフォント名を割り当てることもできます (ステージ上でテキストフィールドを選択している場合)
[フォント] ドロップダウンメニューから、Arial フォントを選択します。[ボールド] および [イタリック] オプションが選択されていないことを確認してください。サイズを 10 ピクセルに設定します。[ライブラリ] パネルで、フォントシンボルを右クリックし、コンテキストメニューから [リンケージ] を選択します。[リンケージプロパティ] ダイアログボックスが表示されます。前のコードは 4 つの重要な領域に分けられます。コードの最初のブロックでは新しい TextFormat オブジェクトを作成します。このオブジェクトでは、このすぐ後に作成されるテキストフィールドで使用されるフォントおよびフォントサイズが指定されます。指定されているフォント Arial-10 は、先ほど埋め込んだフォントシンボルのリンケージ識別子です。コードの 2 番目のブロックでは、インスタンス名 my_txt という新しいテキストフィールドが作成されます。フォントが正しく埋め込まれるように、このテキストフィールドインスタンスについて embedFonts を true に設定する必要があります。このコードではまた、新しいテキストフィールドのテキストフォーマットとして、前に作成した TextFormat オブジェクトを設定します。コードの 3 番目のブロックでは、ステージ上のテキストフィールドに外部テキストファイルの内容を流し込む LoadVars インスタンスが定義されています。
ドキュメントが完全にロードされたら (ただし未解析)、ファイルの内容全体が、ステージに表示できるよう my_txt
text プロパティにコピーされます。ユーザーがいずれかのボタンをクリックしてマウスボタンを離すと、ステージ上のテキストフィールドのアンチエイリアスの種類が変わります。FLA ファイルの変更を保存します。ムービークリップをクリックすると、アンチエイリアスの種類が通常 (normal) のアンチエイリアス (デフォルト) から高度な (advanced) アンチエイリアスに切り替わります。テキストフィールドに小さいフォントサイズでフォントを表示する場合は、高度なアンチエイリアスに設定するとテキストの読みやすさが大きく向上します。ヒント : 高度なアンチエイリアスに設定すると、小さいフォントを非常に高品質でレンダリングできます。この定数は、小さいフォントのテキストが多いアプリケーションで使用する場合に最適です。非常に大きいフォント (48 ポイント以上) に対して高度なアンチエイリアスを使用することはお勧めしません。アンチエイリアステキストの書式設定の詳細については、Flash LiveDocs の次のセクションを参照してください。0 の学習]-[テキストとストリングの操作]-[テキストのレイアウトとフォーマットについて]-[グリッドフィットタイプの使用]0 の学習]-[テキストとストリングの操作]-[テキストのレイアウトとフォーマットについて]-[アンチエイリアステキストのフォーマットについて]
高度なリソース
Flash のグラフィックエフェクトで何ができるかをさらに掘り下げて学習する場合は、この記事より高度な内容を扱った次のリソースを参照してください。
Flash デベロッパーセンターのグラフィックエフェクト*に関するトピック
著者について
IMDは、ユーザがMacromedia製品の使用方法を習得するために役立つオンラインヘルプシステム、マニュアル、チュートリアル、および例を著しています。
これまで、新興メディアエージェンシーや進歩的な企業クライアントと協同し、先進的なアプリケーション、ゲーム、マルチメディアコンテンツを開発
コーディングに対する高い技能とインターフェイスデザイン、ユーザビリティ、マーケティング、ビジネスロジックに関する知識を組み合わせることで、これまでに世界中から高い評価を獲得し、数々の著名業界賞を受賞
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この機能を用いると、面に3次元の凹凸を加えたように表現することができます。面を塗る画像は「テクスチャ」ともいい、それを分割して貼付ける操作は「マッピング」と呼ばれます(図001)[*1]
図001■テクスチャを三角形に分割してマッピング
ひとつの画像(上図)を、数多くの三角形に分けて変形(下図
左右の図は分割された三角形のアウトラインを表示)
布地のはためくような効果を得る。drawTriangles()メソッドで三角形に分割する前に、単純にインスタンスをテクスチャ(ビットマップ)で塗ってみます。第1引数には、塗りに用いるビットマップのインスタンスを渡します[*2]メソッドの第1引数には、[ライブラリ]のビットマップを指定することができます。そのビットマップには、[ビットマッププロパティ]ダイアログボックスで[クラス]に任意の名前を設定します(サンプルでは"Pen"としました)[*3]
図002■[ビットマッププロパティ]ダイアログボックスで[クラス]を入力
[ライブラリ]のオプションポップアップメニューから[プロパティ]で[ビットマッププロパティ]のダイアログボックスを開く。
[クラス]に識別子(半角英数字の名前)を入力
ですから、ビットマップのインスタンスを生成するには、[クラス]に入力したクラス名(Pen)をコンストラクタメソッドとして、以下のようにnew演算子で呼出します。なお、コンストラクタの引数には、幅と高さを意味するふたつの数値を指定します。この場合の値はともに0で構いません。
メソッドは、塗りの対象となるインスタンスのSprite
あとは、Spriteインスタンスに描画メソッドでシェィプを描けば、その塗りにビットマップが適用されます。スクリプト001■タイムライン上のSpriteインスタンスに矩形を描いてビットマップで塗る。
// [ライブラリ]のビットマップからインスタンスを生成
// テクスチャで塗りを設定
// 画像サイズで矩形を描く。図003■描画された矩形をビットマップで塗る。
[*3] クラスが定義されていないと、自動生成される旨の警告が表示されます(図004)
とくにクラスを定義しない場合には、[OK]ボタンをクリックします。
図004■クラス定義が自動生成される旨を伝える警告
とくにクラスを定義しない場合には、[OK]ボタンをクリック
図005■デフォルトではビットマップイメージが繰返し塗られる。beginBitmapFill()メソッドのデフォルトでは、描画された領域にビットマップのイメージがタイル状に繰返し塗られる。初めに述べたとおり、テクスチャを複数の三角形に分割して、変形したうえで合成することにより、3次元の表現が可能になります。3つの引数には、分割する三角形の頂点座標や頂点番号、テクスチャのマッピングの仕方(uvtデータ)などの情報を指定します。
分割する三角形の数を増やせば、複雑で多彩な変形ができます(前掲図001参照)
インスタンスの生成やデータ型の指定が少し変わっていますので、先に簡単に説明しておきましょう
Vectorインスタンスには、配列と同じように、複数の値にインデックスをつけて納められます。配列と違うのは、第1にエレメントのデータ型がひとつに限定されます。そして第2に、エレメントのインデックスは連番でなければなりません。Vectorクラスのコンスラクタメソッドは、以下のようなシンタックスでインスタンスを生成します[*7]
コンストラクタの後のドット()に続けて、山括弧<>の中にエレメントのデータ型を指定します。なお、エレメントのデータ型は「ベース型」と呼ばれます。インスタンスを代入する変数宣言のデータ型にも、山括弧<>でベース型を指定しなければなりません。Vectorインスタンスのエレメントにアクセスするには、配列と同様に配列アクセス演算子[]を用います。ベース型が整数の新規VectorインスタンスmyVectorに対してエレメントを追加したり、取出したりするには、つぎのように配列と同じ要領で処理します。
そこでつぎに、これら3つの引数の指定の仕方を説明していきましょう
三角形が最低限のひとつであれば、3頂点のxyの値計6つをVectorインスタンスのエレメントとして加えます。この場合、第2および第3引数は指定しなくても構いません。
図006■テクスチャ左上半分の三角形の座標値
なお、以下のフレームアクションでは、わかりやすいように3頂点の座標をVector
指定した3頂点で描かれる三角形にビットマップの塗りが適用されます(図007)
図007■左上半分の三角形をテクスチャで塗る。push()メソッドにより指定した3頂点で描かれる三角形にビットマップの塗りが適用される。
たとえば、前掲スクリプト002に右下半分の三角形を追加するなら、第1引数として渡すVectorインスタンスにVector
push()メソッドでその3つの頂点座標を加えます。左上の三角形からxy座標を10ピクセルずつ離して描く場合には、つぎのようなスクリプトを追加します。
// 右下半分の三角形の3頂点座標を追加
もっとも、描かれたふたつの三角形は、描画の形状は分かれたものの、ビットマップは一様にタイル状に塗られます(図008)
そのため、ビットマップの塗りに対して、ふたつの三角形でマスクをかけたような表現になります。図008■三角形の左上半分に右下半分を加える。ビットマップの塗りに、ふたつの三角形でマスクをかけたような描画になる。drawTriangles()メソッドの第3引数には、第1引数の三角形の頂点座標にビットマップを変形して貼付ける、テクスチャマッピングの仕方が指定できます。第1引数と同じ、三角形の頂点に対応した座標を渡します。また、このふたつの値はそれぞれuとvで表し、uv座標と呼ばれます[*8]
図009■テクスチャマッピングを指定するuv座標
以下のフレームアクション(スクリプト003)は、左上半分と右下半分のふたつに分かれた三角形に対して、ビットマップも同じようにふたつに分割してマッピングします(図010)
なお、第2引数は使いませんので、無指定を示すnullを渡します。
図010■ふたつの分割された三角形に合わせてテクスチャマッピング
頂点番号は、上図010の記載にもとづきます。drawTriangles()メソッドを3次元の表現に利用するときは、ひとつの面を複数の三角形に分割して、テクスチャをマッピングします。その場合、前掲スクリプト003とは異なり、複数の三角形は頂点を共有して、互いに接しているのが通常です。第3引数のuvtデータは、もともとふたつの三角形が頂点のuv座標をふたつ共有していますので、とくに変更はありません。
これでふたつの三角形が接したかたちで、テクスチャがマッピングされます(図011)
drawTriangles()メソッドの第1引数に渡される右下隅の座標(図011の頂点3)は変えていませんので、右下半分の三角形は少し右下に伸ばされたイメージになります。
図011■ふたつの三角形の2頂点を一致させてテクスチャマッピング
右下隅の頂点座標は変わらないので、右下半分の三角形のテクスチャは少し引き伸ばされている。ふたつの引数に指定する頂点の座標値をまとめると、下表002のとおりです。しかし、前のスクリプトでは、第1引数と第3引数のVectorインスタンスは、スクリプト003と同じく、それぞれふたつの三角形の6頂点分の各12エレメントを相変わらずもっています。
ふたつの引数でそれぞれ同じ座標値を2度指定することは、書く手間もさることながら、Graphics
つまり、それぞれの引数のVectorインスタンスには、表002に掲載した計4頂点の各8エレメントだけ格納すればよいということです。しかし、頂点を列挙しただけでは、各三角形がどの頂点3つで構成されるのかわかりません。そこで、それらの三角形の頂点の組合わせを、第2引数の頂点番号として指定します。第1引数のVectorインスタンスに頂点座標を表002の順で加えた場合には、それぞれに表002の頂点番号0から3が与えられるのです。前掲図011のようにテクスチャマッピングを行うなら、ふたつの三角形の頂点番号の組は「0-1-2」と「1-2-3」になります。
3つの頂点番号の整数の組を、整数がベース型のVectorインスタンスに必要な三角形の数だけ加えて、Graphics
そのフレームアクションが、つぎのスクリプト004になります(図012)
// 三角形の頂点座標を加える(第1引数)
// 三角形の頂点番号の組合わせを加える(第2引数
// テクスチャマッピングのuv座標を加える(第3引数)
図012■2頂点を接したふたつの三角形にテクスチャマッピング
[*8] 第3引数の名称とされたuvtデータのtは、オプションとなる(省略可能な)3番目の座標値です。
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
02 任意の座標にテクスチャをマッピングする。03 三角形の重ね順を制御する。
図001■テクスチャを動的にマッピング
正方形の画像(左図)の角をドラッグして移動すると、その位置に合わせてテクスチャが任意の四角形(右図)に変形される。
まず準備として、ドラッグする4隅のポイントをMovieClipシンボルで作成し、それらをタイムラインに配置します(図002)
4つのインスタンスの位置は、マッピングするテクスチャ(ビットマップ)の大きさに合わせておきます。ドラッグするポイントをMovieClipシンボルでつくり、ビットマップ画像の4隅の位置に合わせてタイムラインに配置する。
インスタンスをドラッグするための処理は、MovieClipシンボルにフレームアクションとして記述しておきます(スクリプト001)
マウスイベントの扱いは、本稿のテーマから外れますので、説明を省きます[*1]
スクリプト001■ドラッグするポイントのMovieClipシンボルに記述したフレームアクション
ポイントのインスタンスをドラッグすると、メインタイムラインに定義したxTransform()関数が呼出されて、[出力]パネルに確認用の文字列が表示されます(図003)
これで準備はできました。
あとは、メインタイムラインのフレームアクションで、関数xTransform()にテクスチャマッピングの処理を定義すればよいでしょう
図003■ポイントをドラッグするとメインタイムラインの関数が呼出される。ポイントのインスタンスをドラッグすると、メインタイムラインに定義したxTransform()関数が呼出される。この関数に、テクスチャマッピングの処理を加える。0を制す」および「マウスイベント」をお読みください。
rootプロパティを参照してアクセスする場合、プロパティはMovieClipクラスでキャストする必要があります(「rootプロパティでメインタイムラインの関数にアクセスできない」参照)
02 任意の座標にテクスチャをマッピングする。ポイントのインスタンスをドラッグしている間、メインタイムラインの関数xTransform()が呼出されます。ですから、そのたびに新たなテクスチャマッピングを行えばよいということです。処理内容を簡単にするため、今回も正方形のビットマップを対角線でふたつに分けます。
図004■テクスチャの頂点番号とuv座標
正方形のビットマップを対角線でふたつに分けて、Z状に頂点番号を振る。
uv座標は図のとおり
以下のフレームアクション(スクリプト002)の前半は、Part 1でご紹介したスクリプト004と基本的に変わりません。スクリプト002■ドラッグしたポイントの座標に合わせてテクスチャをマッピングする。
// 三角形の頂点番号の組合わせ(第2引数)
ふたつだけ補足しておきます。ひとつは、xTransform()関数定義の直前に、フレームアクションから関数を呼出していることです。このステートメントがないと、ポイントのインスタンスをドラッグするまでxTransform()関数が呼出されず、初期位置にテクスチャがマッピングされないからです。これを行わないと、以前の描画は残ったままテクスチャが重ね塗りされてしまいます。ですから、新たにマッピングする前に、毎回このメソッドで描画を消去しておく必要があるのです。clear()メソッドを呼出さないと以前の描画が消えない。clear()メソッドで毎回描画を消さないと、以前のテクスチャが残ったまま重ね塗りされる。
[ムービープレビュー]で4隅のポイントをドラッグすると、その位置座標に合わせて、動的にテクスチャがマッピングされます(図006)
図006■ドラッグした4隅のポイントに合わせてテクスチャマッピング
4隅のポイントをドラッグすると、その位置座標に合わせてテクスチャが動的にマッピングされる。03 三角形の重ね順を制御する。
ここで、マッピングされるふたつの三角形の重ね順を確かめてみましょう
ですから、左上半分の三角形が先に描かれ、その手前に右下半分が描画されるということです(図007)
図007■左上より右下の三角形が手前に描画される。左上の三角形は、右下のポリゴンの手前には描画されない。
左上と右下のポイントとで、ドラッグした方の三角形を前面に描画するようスクリプトを修正してみましょう
まず、ドラッグされているインスタンスがわからなければなりません。
関数xTransform()を定義するメインタイムラインのフレームアクションでは、4つのポイントごとに頂点番号のVectorインスタンスを用意しておき、各ポイントのインスタンス名からそのうちのひとつを取出す仕組みにしましょう
そのために新たにindicesをObject型の変数として宣言し、各インスタンス名のプロパティにそれぞれのVectorインスタンスを設定します。したがって、ポイントのインスタンスが変数my_mcに入っているなら、そのポイントに対応した頂点番号のVectorインスタンスをつぎのようにして取出すことができます。以上の修正を加えたメインタイムラインのフレームアクションは、以下のスクリプト003のとおりです。
ポイントのインスタンスから呼出されるxTransform()関数にインスタンスの参照が渡されますので、そのインスタンス名によりGraphics
これで、左上のポイントのインスタンスをドラッグすれば、左上半分の三角形が手前に描画されるようになりました(図009)
スクリプト003■左上と右下のポイントでドラッグした方の三角形を手前にする。図009■左上のポイントをドラッグすると左上半分の三角形が手前に描画される。
ドラッグしたポイントのインスタンス名により、Graphics
[*3] テクスチャは対角線でふたつに分けられているだけですので、左上半分と右下半分の三角形のどちらを前面にするかが問題です。つまり、重ね順が問われるのは左上と右下のポイントです。右上と左下のポイントは2分割した対角線になるため、一方を他方の手前に描画することはできません。
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
イメージの表示
ライブラリに属するイメージの操作
ロードしたイメージの操作
印刷用に表示
この記事では、イメージ API の基本的な使用方法を示し、いくつかの機能について説明します。このチュートリアルをすべて実行するには、次のソフトウェアおよびファイルがインストールされている必要があります。
著者について
Guy は世界中の Flash 業界で開催されるイベントで数々のプレゼンテーションを行っています。また、多くの賞も獲得しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
イメージの表示
ライブラリに属するイメージの操作
ロードしたイメージの操作
このクラスのインスタンスを新規作成すると、メモリ上に空のイメージが作成され、それを土台にして BitmapData クラスの各種メソッドを使用した操作ができます。ただし、このクラスを使用するには、扱うビットマップについて熟知しておく必要があります。ビットマップはデジタルイメージ形式の一種で、カラー値のグリッドによってイメージを表現します。グリッド内の個々のセルがそれぞれ 1 つのピクセルを表し、指定されたカラーでレンダラーが各ピクセルを描画することにより、イメージが形成されます。つまり、どのピクセルのカラーもそれぞれ 32 ビット長のバイナリ数値として格納されていることになります。
32 ビットイメージ (いわゆる "トゥルーカラー" イメージ) を構成する個々のピクセルは約 1670 万種類のカラーを表現できます ("トゥルーカラー" という呼称は、人間の視覚が約 1670 万種類のカラーを識別できることに由来します)
カラーには 4 つのカラーチャンネルが含まれています。この 4 つとは、よく知られた赤、緑、青の 3 原色のチャンネルに加え、カラーの透明度を表現するために使用されるアルファチャンネルです。
16 進数のカラー値
このように各チャンネルの値は、必要に応じて 0 を補うことにより 2 桁で表記します。これにより、1 つの 16 進数値は常に 8 桁で表されることになります。先頭の 2 桁はアルファチャンネルで、この 2 つの場合はいずれも最大の強さ (FF) にしましたが、これは、最大の強さ (FF) が透明度なしを意味し、強さゼロ (00) が完全な透明を意味します。人間が特定のカラーを覚えておく場合、16 進数値よりも、アルファ、赤、緑、青 (ARGB) の各 10 進数値のほうが都合がよいことがあります。そうした場合のために、ARGB から 16 進数値への変換方法を知っておくと役に立ちます。これを使用するには次のようにします。何度も新規インスタンスを作成する場合は、最初に次のようにしてパッケージを読み込んでおくと、作成のたびにクラスの完全修飾パスを記述する必要がなくなります。この場合、クラスのインスタンスを作成するときは次のようなコードを記述するだけで済みます。fillColor 引数には、そのビットマップ内のピクセルに対するデフォルトの 32 ビットカラーを指定します。省略すると、ビットマップは透明度の情報なしでメモリに格納され、各ピクセルのデフォルトは白 (0xFFFFFFFF) となります。たとえば、幅 100 ピクセル、高さ 100 ピクセルで完全に不透明 (透明度ゼロ) な黒のイメージは、次のようなコードで作成できます。この制約よりも大きい BitmapData インスタンスを作成しようとすると、ビットマップは作成されません。これは、クライアントの RAM を使い切るような Flash ムービーを作成できないようにするために設定されています。BitmapData クラスのインスタンスを作成した後は、さまざまなメソッドを使用してビットマップを操作できます。たとえば、フィルタ効果の適用、特定領域のカラーの塗りつぶし、カラーパレットの修正、特定領域の透明化などが可能であり、可能性は限りなく広がります。ただし、この記事では、使用方法の基本を確実に身に付けるための基礎的な事項を説明するにとどめます。BitmapData オブジェクトのインスタンスは、1 つしかない場合でも再生環境のメモリを急速に消費する可能性があります。したがって、不要になった BitmapData オブジェクトはすぐに開放して、ビットマップ用に割り当てられたメモリを他に使用できるようにするのが正しい方法です。これは次のようにして使用します。Flash ムービーがリソースを浪費しないよう、常に整理を心がけてください。
使用しなくなったビットマップのメモリはすぐに開放しましょう
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
イメージの表示
ライブラリに属するイメージの操作
ロードしたイメージの操作
イメージの表示
BitmapData クラスのインスタンスはメモリ上に格納されており、表示のための操作を実行するまでは目に見えることはありません。表示する際には、レンダリング可能にするためにビットマップをステージにアタッチする必要があります。attachBitmap メソッドを次のように使用することで、任意のムービークリップ内に表示できます。
ムービークリップにアタッチしたビットマップを削除する方法はないので、ビットマップの表示だけを目的とした空のムービークリップを専用に作成しておくとよいでしょう
専用のムービークリップにアタッチしたビットマップは、次のように後でムービークリップを削除することにより削除できます。ビットマップをムービークリップにアタッチした後は、そのムービークリップに変更を加えると自動的に表示が更新されます。変更のたびにビットマップをアタッチし直す必要はありません。BitmapData クラスの非常に便利な点の 1 つに、インスタンス名を持つあらゆるオブジェクト (ムービークリップ、ビデオオブジェクト、テキストフィールドなど) の表示状態のスナップショットからビットマップを作成する機能があります。これを使用して、ストリーミングビデオ、Web カメラ、ムービークリップなどのフレームの静止イメージを作成することもできます。
ステージ上にあるムービークリップなどのインスタンスからビットマップを作成するには、BitmapData
これはオブジェクトの現在の表示状態をビットマップ表現で描画するメソッドで、デフォルトではビットマップオブジェクトに何の変換も適用されません。つまり、たとえば 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 パラメータとして指定します。
// ムービークリップと同じサイズで透明なビットマップを作成
// ステージ上に表示されたままのイメージで描画
ステージ上の表示とは異なる形でムービークリップのスナップショットを取得する (たとえば、表示の半分のサイズにする) 場合は、次のように、ムービークリップの変換マトリックスを取得してから変更を加え、意図したとおりの変換が適用時に発生するようにします。
// ムービークリップの半分のサイズで透明なビットマップを作成
// ムービークリップの変換マトリックスを取得
ムービークリップの変換マトリックスに変更を加え、ビットマップへの適用時には
描画サイズが半分になるようにする。
// 半分のサイズでムービークリップのスナップショットを作成
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事では、イメージ API の基本的な使用方法を示し、いくつかの機能について説明します。このチュートリアルをすべて実行するには、次のソフトウェアおよびファイルがインストールされている必要があります。このクラスのインスタンスを新規作成すると、メモリ上に空のイメージが作成され、それを土台にして BitmapData クラスの各種メソッドを使用した操作ができます。ただし、このクラスを使用するには、扱うビットマップについて熟知しておく必要があります。ビットマップはデジタルイメージ形式の一種で、カラー値のグリッドによってイメージを表現します。グリッド内の個々のセルがそれぞれ 1 つのピクセルを表し、指定されたカラーでレンダラーが各ピクセルを描画することにより、イメージが形成されます。つまり、どのピクセルのカラーもそれぞれ 32 ビット長のバイナリ数値として格納されていることになります。
32 ビットイメージ (いわゆる "トゥルーカラー" イメージ) を構成する個々のピクセルは約 1670 万種類のカラーを表現できます ("トゥルーカラー" という呼称は、人間の視覚が約 1670 万種類のカラーを識別できることに由来します)
カラーには 4 つのカラーチャンネルが含まれています。この 4 つとは、よく知られた赤、緑、青の 3 原色のチャンネルに加え、カラーの透明度を表現するために使用されるアルファチャンネルです。
16 進数のカラー値
このように各チャンネルの値は、必要に応じて 0 を補うことにより 2 桁で表記します。これにより、1 つの 16 進数値は常に 8 桁で表されることになります。先頭の 2 桁はアルファチャンネルで、この 2 つの場合はいずれも最大の強さ (FF) にしましたが、これは、最大の強さ (FF) が透明度なしを意味し、強さゼロ (00) が完全な透明を意味します。人間が特定のカラーを覚えておく場合、16 進数値よりも、アルファ、赤、緑、青 (ARGB) の各 10 進数値のほうが都合がよいことがあります。そうした場合のために、ARGB から 16 進数値への変換方法を知っておくと役に立ちます。これを使用するには次のようにします。何度も新規インスタンスを作成する場合は、最初に次のようにしてパッケージを読み込んでおくと、作成のたびにクラスの完全修飾パスを記述する必要がなくなります。この場合、クラスのインスタンスを作成するときは次のようなコードを記述するだけで済みます。fillColor 引数には、そのビットマップ内のピクセルに対するデフォルトの 32 ビットカラーを指定します。省略すると、ビットマップは透明度の情報なしでメモリに格納され、各ピクセルのデフォルトは白 (0xFFFFFFFF) となります。たとえば、幅 100 ピクセル、高さ 100 ピクセルで完全に不透明 (透明度ゼロ) な黒のイメージは、次のようなコードで作成できます。この制約よりも大きい BitmapData インスタンスを作成しようとすると、ビットマップは作成されません。これは、クライアントの RAM を使い切るような Flash ムービーを作成できないようにするために設定されています。BitmapData クラスのインスタンスを作成した後は、さまざまなメソッドを使用してビットマップを操作できます。たとえば、フィルタ効果の適用、特定領域のカラーの塗りつぶし、カラーパレットの修正、特定領域の透明化などが可能であり、可能性は限りなく広がります。ただし、この記事では、使用方法の基本を確実に身に付けるための基礎的な事項を説明するにとどめます。BitmapData オブジェクトのインスタンスは、1 つしかない場合でも再生環境のメモリを急速に消費する可能性があります。したがって、不要になった BitmapData オブジェクトはすぐに開放して、ビットマップ用に割り当てられたメモリを他に使用できるようにするのが正しい方法です。これは次のようにして使用します。Flash ムービーがリソースを浪費しないよう、常に整理を心がけてください。
使用しなくなったビットマップのメモリはすぐに開放しましょう
イメージの表示
BitmapData クラスのインスタンスはメモリ上に格納されており、表示のための操作を実行するまでは目に見えることはありません。表示する際には、レンダリング可能にするためにビットマップをステージにアタッチする必要があります。attachBitmap メソッドを次のように使用することで、任意のムービークリップ内に表示できます。
ムービークリップにアタッチしたビットマップを削除する方法はないので、ビットマップの表示だけを目的とした空のムービークリップを専用に作成しておくとよいでしょう
専用のムービークリップにアタッチしたビットマップは、次のように後でムービークリップを削除することにより削除できます。ビットマップをムービークリップにアタッチした後は、そのムービークリップに変更を加えると自動的に表示が更新されます。変更のたびにビットマップをアタッチし直す必要はありません。BitmapData クラスの非常に便利な点の 1 つに、インスタンス名を持つあらゆるオブジェクト (ムービークリップ、ビデオオブジェクト、テキストフィールドなど) の表示状態のスナップショットからビットマップを作成する機能があります。これを使用して、ストリーミングビデオ、Web カメラ、ムービークリップなどのフレームの静止イメージを作成することもできます。
ステージ上にあるムービークリップなどのインスタンスからビットマップを作成するには、BitmapData