「小さな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メーリングリスト*にご参加ください。
著者について
com*でブログを運営しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
キーイングについて
ビデオの読み込みウィザードによるFLVファイルの作成
FLVファイルからのSWFファイルの作成
印刷用に表示
Dreamweaver 8の製品ページにある「お客様の成功事例」というポッドでは、いくつかのビデオを提供しています。これらのビデオを再生してみてください。これらのビデオのおもしろい点は、暗い中間色の背景は、実際には私がインタビューを受けた場所の背景と異なることです。この背景は、ビデオ処理の編集段階(後処理)で追加されたものです。ビデオカメラマンは、一般に「グリーンスクリーン」と呼ばれる鮮やかな緑色の背景の前で私たちを撮影してから、特定の色調の緑色をマスクするキーイングと呼ばれる処理を行い、その色をもっと見映えのするものに置き換えます。このチュートリアルでは、私の顔が映ったビデオ(図2参照)を使用して、Flash 8で「トーキングヘッド」ビデオを作成する方法について説明します。メモ: キーイング用フィルタを備えたApple Final Cut Proなどのノンリニアエディタの使い方を知っていれば、ここで説明する内容を理解することができます。ここで前置きしておきますが、このチュートリアルは初級者レベルの内容です。ビデオのキーイングは、非常に複雑な作業を要する場合があります。実際、この作業だけを説明しているデジタルビデオの解説書も数多くあります。
キーイングに詳しい方の多くは、このチュートリアルを読んでまず「自分ならもっと別の方法で行う」という感想を持つでしょう
おそらくそのとおりでしょうし、私が通常行う方法とも多くの点が異なります。しかし、ここでは何かを出発点とする必要があります。そのために、このチュートリアルでは、まず基本的なワークフローについて説明することにします。ビデオアプリケーションを持っていなくても、ビデオの編集方法を学ぶつもりがなくても、問題ありません。
しかし、近い将来、アルファチャンネル対応のFlashビデオを作成することが必要になるでしょう
そうした万一の場合に備えて、このチュートリアルでは、QuickTimeムービーまたはFLVファイルを使った作業に取り掛かる前に、ビデオエディタの機能について説明します。このチュートリアルでは、次のソフトウェアおよびファイルのインストールが必要です。
トライアルのダウンロード
このチュートリアルは、これらのアプリケーションの初級者から中級者までを対象としています。
著者について
FlashおよびFlashテクノロジーに関するいくつかの著作でベストセラー作家になっています。comでは常連執筆者として活躍しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
このイベントは、国内外の一流アーティストや新進クリエイターを紹介することを目的とした日本発デジタルアートの祭典です。0」という作品を制作しました。これは、イベントに出展・参加している企業やクリエイターのプロフィールを紹介するインタラクティブコンテンツです。従来までは、参加者を紹介するツールといえばリーフレットやパンフレットのみでしたが、DAF2008では初の試みとしてインタラクティブコンテンツも提供することにチャレンジしたのです。0」が一体どのようなものなのか、その操作模様の映像をご覧下さい。0」ではFlashコンテンツをマウス操作の代わりに手で操作することができます。近未来的な表現にこだわり、プロジェクターの映像を映せる特殊なアクリル板(完全透明)を表示画面として使用しています。0で開発した3Dコンテンツを表示させ、立体的に見えるようにしています。コンテンツの操作方法は、ユーザビリティを考慮して、タッチディスプレイ的な仕様にしました。3D空間をゆっくりと移動する写真をタッチすると、写真が大きくなり、プロフィールが現れます。この画面内で、手を「左→右」「右→左」へと動かすと、プロフィールが水平移動して次のプロフィールが現れます。そして、再度画面をタッチすると3D空間へと戻ります。また、3D空間での写真の並び方は複数パターン用意し、プロフィール紹介から戻る際、ランダムに切り替わるようにしています。さらに、ライブ・映像・インタラクティブといったカテゴリー別に一覧表示できるようにもなっています。この作品名にもある「Ubiq’window(ユビックウインドウ)」とは、仏国立科学研究所の技術から生まれたインタラクティブ・ソリューションです。ショウウインドウなどのガラス面、アクリル板、空間、プロジェクター、プラズマ・液晶テレビなど、さまざまなものをタッチディスプレイ&インタラクティブソリューションに変える画期的な装置です。Flashはオーサリングの自由度が高く、ビジュアル的に優れたインタラクティブコンテンツを制作することが可能です。Ubiq’windowの操作特性をより引き出すことができるコンテンツの開発ツールとして、Flashはまさに最適なツールだと言えます。0」制作する上で配慮したことを以下に紹介しておきます。ハードウェア的には、このタッチ操作はマウス操作として検知するので、Flashでもマウスイベントなどで処理することになります。たとえば、ロールオーバー/ロールアウトのイベントとマウスダウンの共存が難しい点です。感度の調整やタッチの割り当てなど、Ubiq'window側での設定にもよりますが、基本的に「画面に指が触れるとマウスダウン」という設定にした場合、ロールオーバー/ロールアウトは指を触れた時/放した時となり、瞬間的なイベントになってしまいます。ロールオーバーやロールアウトを優先させることもできますが、その場合は別途マウスダウンとなる操作をUbiq'window側で設定する必要があります。今回のコンテンツでは、「3D空間上の写真に触れると、ポンっと大きくなって音が鳴り、画面をなぞれば次々に写真が大きくなっていく」という仕様を実装したかったので、ロールオーバー/ロールアウトはどうしても使う必要がありました。また、「写真を選択するとプロフィール画面へと切り替わる」ということも仕様上必要な機能でした。ただし、CLICKは「画面から指を離した時」に実行されるものなので、このままではROLL_OUTのマウスイベントが使えません。とはいえ、ロールオーバー時に大きくなった写真をロールアウト時に元のサイズに戻すといった「ユーザーが画面に触りたくなる演出」はどうしても必要でした。そこで、ラジオボタンの仕様(1つを選択すると、他は非選択状態になる)を参考に、「写真のいずれかに指が触れて大きくなれば、他のものは元の大きさに戻る」というやり方で似たような効果を演出しました。このようにUbiq’windowならではの「クセ」を見越してFlashの仕様設計を行い、ユーザー操作にストレスが生じないよう注意する必要があります。その他に操作面で気をつけることとして、タッチできるオブジェクトには限界があるということです。これはUbiq’windowに限らず他のインターフェイスにも言えることですが、タッチするオブジェクトがあまりに小さいと、それらを高速で動かした場合にとらえることが難しくなりタッチできません。ボタンのようにタッチされることを目的としたオブジェクトは経験上、最低でも実機上のサイズで5×5cmぐらいはあった方がよさそうです。
2)「直接触れて動かす」ということ
実際にUbiq'windowに触ってみると分かるのですが、手で触れて操作するためか、PCで操作するよりも「自分が触れて動かしている」感が強く出ます。小さいオブジェクトを動かす時は軽く、大きいオブジェクトを動かす時は重たく感じます。そのため、見た目にも操作的にも気持ちよい動きを目指すとUbiq’windowの特性をより生かせると思います。0」では、3D空間の写真をチョンっと押すと勢いよく写真が奥へ飛んで行きプロフィール画面へと切り替わります。またプロフィール画面では左右にドラッグするように画面をなぞると、放り投げられたように作品写真と説明文が飛んでいき、新たに次のものが現れるといった動きをします。Tweenerは「どこからどこまでの範囲を何秒で移動」といった動きを簡単な記述で行うことができる、非常に便利なライブラリです。0」ライブラリを使用しています。Paprevision3Dを使うのは今回が初めての案件でしたが、サンプルなども充実しているので特に大きな問題もなく使用することができました。しかし当時のマシンスペックが低かったことや魅力的な用途を見いだせなかったこともありそれ程振るいませんでした。しかし、ここに来てやっと時代が追いついた感があります。今後のFlashによる3D表現の展開が非常に楽しみです。3)長時間の利用を念頭にする。0」はDAFの会場に常駐設置されるインターフェイスとして制作を行いました。Webコンテンツとの大きな違いの一つは「長時間運用される」ということです。開場時間である11時から21時の間、一度も再起動させることなくコンテンツを動かし続ける必要があります。ここで念頭に置いたことは次の2つです。長時間動かし続けてもフリーズしたり、挙動がおかしくならないようにする。何も操作をしていない時も飽きないように変化をつける。1つ目は運用上特に注意すべき部分です。途中で動きがもたついたり、フリーズしてマシンを再起動となっては目も当てられません。また、コンテンツの内容上、作品などの画像枚数が大小合わせて200枚近くあり、Papervision3Dのコンテンツはマシンに負荷のかかるため、さらに注意が必要です。そこでプログラム全体とフローを注意深く見直して一覧化し、作成した変数やイベントは役目を終えたら確実に削除、「alpha=0」のものは非表示化するなどして、動作の安定化と軽量化を徹底しました。その結果、実機でFPS60前後、使用メモリを40MB以下にまで抑えることができ、10時間の運用でも十分耐えられるものとなりました。
また、万が一に備えて、Flashプロジェクタを閉じなくても済むよう、違和感なく全てのオブジェクトをクリアして再設定を行うリセット機能も付けました(結局使うことはありませんでしたが)
2つ目ですが、常時設置していると、「操作した後、トップ画面の3D空間に戻さずにそのまま放置される」「しばらくの間、誰も触らない」ということもあります。当日は説明スタッフが常駐していましたので手動で元に戻すこともできましたが、「一定時間操作がなければ3D空間に戻る」「3D空間の写真配置を自動的に変更する」といった機能も付けました。これら2点は、同一ユーザーの閲覧時間が比較的短く、ユーザーごとにコンテンツのトップを表示させることができるWebコンテンツではさほど重要視されない部分かもしれません。
しかし、Ubiq'windowに限らず、常駐設置のコンテンツを制作するときには念頭に入れておく必要があるでしょう
4)キオスク端末としてのデザイン
WebサイトのようなPC上でのコンテンツでは、一般的に左上にメニューなどの注目してほしいものを配置するのがセオリーです。しかし、実際に触れるコンテンツととなると、その性質上、レイアウトやデザインは少し異なってきます。0」では検索して調べる際に使用するカテゴリメニューを画面下に配置して小さい子供でも選択できるようにしています。またプロフィール画面から3D空間に戻る場合は、画面上のどこをタッチしても戻れるようにしています。ただし、何でもかんでも下に配置すれば良いというわけではなく、逆に見づらくなる場合もあります。ユーザー対象を念頭におき、レイアウトにこだわらないインタフェイスデザインを心がけることが重要です。このように、Ubiq’windowのようなキオスク端末を制作する場合は、PC上で動かすコンテンツとは異なる仕様であることに十分注意し、実機による入念なテストも行う必要があります。装置が提供するインタラクティブな特性上、Flashでコンテンツが制作されることが多いようです。0」のようなプロフィール紹介のほかに、絵を書く、鍵盤を表示させ音楽を作る、プリントボタンを設定して印刷出力、インターネット回線を通じてデータを送受信するなど、インタラクティブツールとして制作するコンテンツにより可能性は無限大です。さらに双方向のコミュニケーションをさせることにより、面白さは格段にあがります。たとえば、ショーウインドウにUbiq’windowとカメラを設置し、操作する人の顔を撮影して髪型を変える・めがねをかけるといった使い方をすると、操作する人との距離感がグッと縮まりコミュニケーションの質が上がります。現在、弊社ではそのようなツールの開発を進めています。完成後には、弊社サイトで紹介したいと思っています。
ハードとソフトの両方に専門的な知識が必要とされるので、コンテンツ制作を含めた形で販売をしております)
著者について
映像/Web/インタラクティブなど、メディア全般の企画・制作を行っている。
今回のUbiq'windowのプロジェクトには、プロデューサー兼ハードウエアテクニカルを担当
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
タイムラインを使用してアプリケーションの状態を管理する。アプリケーション開発者にとって、タイムラインという概念はあまり聞き慣れないものかと思います。通常、タイムラインはデザイナーやアニメーション作成者にのみ有用であると考えられがちですが、タイムラインはアプリケーションの各種状態を管理する非常に便利なツールでもあります。スマートボタンのようにマウスと連動した小さな状態変化の管理から、ウィザードやタブ付きコンテンツのような大きな状態変化の管理まで幅広く利用することが可能です。ムービークリップは、それぞれに独立したタイムラインを持ち、タイムラインは、常に再生または停止のどちらかの状態にあります。タイムラインに1フレームしか存在しない場合を除き、stop () アクションの指示があるまでタイムラインは再生 (ループ再生) を続けます。デザイン系の Macromedia Flash コンテンツの場合、タイムラインを再生し続けて使用することが多いのですが、開発者向けのタイムライン使用では、タイムラインを再生せず各フレームにアプリケーションの様々な状態を保持しておくことがほとんどです。
メインタイムラインにおける状態管理
キーフレームの挿入
新規にファイルを開くと、1フレーム目にキーフレームの入ったメインタイムラインが表示されます。1フレーム目に表示されている白抜き丸がキーフレームであることを意味します。この丸が塗りつぶされている場合は、キーフレームにシェープやムービークリップ、ボタンなどといったビジュアルコンテンツが含まれていることを表します。
ビジュアルコンテンツとアクションスクリプトが混在するようなムービーの場合、アクションを記述する専用レイヤーを作成しておくと良いでしょう
キーフレームにビジュアルコンテンツとアクションを混在させることは可能ですが、仮にレイヤーが 20 あるようなムービーの場合、アクションスクリプトがばらばらに記述されていると混乱を招く恐れがあります。
メニューから [挿入]-[レイヤー] を選択して、新規レイヤーを作成してみましょう
レイヤー名をダブルクリックして、「Actions」や「Script」といったアクションスクリプト記述用のレイヤーであることがわかるような名称に変更します。最後に、鍵のアイコンの下にある黒丸をクリックしてレイヤーをロックし、誤ってビジュアルコンテンツをアクション専用レイヤーに配置することを防ぎます。キーフレームを新規作成するには、目的のレイヤーでキーフレームを作成するフレームを選択して、メニューから [挿入]-[キーフレーム] を選択するか、F6 キーを押します。連続して複数キーフレームを作成する場合は、F6 キーを連続して押してください。フレームとキーフレームには重要な違いがあるので、必ずこれを把握するようにしてください。上図のように「Layer 1」の1フレーム目を選択して、メニューから [挿入]-[フレーム] を連続して選択するか、F5 キーを連続して押してフレームを追加します。キーフレームと違いフレームには、丸印が入っていないことを確認してください。ただし、キーフレーム後の最後のフレームには四角印が表示され、これらが一つのフレーム群であることを示します。仮に「Layer 1」の3フレーム目だけにコンテンツを配置しようとしても、1フレーム目から4フレーム目まですべてのフレームに同じコンテンツが配置されます。3フレーム目に、2フレーム目と異なったコンテンツを配置する場合は、3フレーム目をキーフレームにしておきます。
フレームラベルの設置
特定のフレームを参照するには、フレームラベルを使用すると便利です。フレームをフレーム番号で参照することは可能ですが、コンテンツ開発中にキーフレームを削除や編集することによって、フレーム番号を使用した参照が非力であることにお気づきになると思います。フレームラベルを設置するには、キーフレームを選択してプロパティインスペクタでラベル名を入力します。状態を変化させる。Macromedia Flash では、タイムライン上に複数フレームが存在する場合、自動的に再生を開始して stop() アクションが適用されるまでループし続けるようにデフォルト設定されています。よって、アプリケーションの状態管理を目的としてタイムラインを使用する場合は、最初のキーフレームに stop() アクションを記述しておきます。例えば、タブ制御のインターフェイスを作成する場合、タブをクリックすると、ビジュアルコンテンツや各種情報が配置された他の状態に対応する所定のキーフレームに進むようにしておきます。
「最新情報」「製品」「サービス」「about us」の4つの状態 (タブ) があるような場合には、「サービス」タブにつぎのようなアクションスクリプトを記述しておきます:
ムービークリップの使用
つぎに、Flash ムービーでメニュー項目を作成してみます。
ここでは、(1) 通常の表示状態、(2) ハイライトされた表示状態 (カーソルが項目上にある場合)、(3) 選択されている場合の表示状態、(4) 項目が選択できない場合の4つの表示状態を想定してみましょう
それぞれの状態での見栄え例として、つぎのような表示を設定します:
メニューから [挿入]-[新規シンボル] を選択します。シンボルに名前 (例: スマートボタン MC) を付け、[タイプ] 項目が [ムービー] になっていることを確認してから [OK] ボタンをクリックします。新規ムービーにレイヤー、キーフレーム、フレームラベル、アクションスクリプトを設定してください。つぎに、1フレーム目にキーフレームを挿入して、ムービークリップが「normal」状態に戻るたびにこれから記述するアクションスクリプトが実行されるのを防ぎます。
1フレーム目につぎのアクションスクリプトを記述します:
こうしておけば、動作を稼動、非稼動にする「enable」、「disable」ユーザー定義関数は外部のロジックから制御することが可能になります。普段選択可能な項目を一時的に選択不可能にする場合などに便利です。さらに、ここではムービークリップの「enabled」プロパティを使用していることに注目してください。) このプロパティを使用すれば、ムービークリップのキー入力やボタンイベントへの連動を簡単に制御することができます。これで、メニュー内に複数メニュー項目がある場合でも、想定通りの動作が行われるようになりました。ごらん頂いたように、キーフレームを使用して各種状態を管理すると、開発者にとってメンテナンスしやすいインターフェイス制御が可能になります。
筆者について
また、パブリックスピーチ、トレーニング、コンサルティング等業務も引き受けています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ビデオのキャプチャとエンコーディング
ビデオの同期とキャプションの追加
ビデオ標準の概要
印刷用に表示
注意:この習得ガイドでは、Flashビデオの概要について説明し、スキルの向上に役立つツールを紹介します。取り上げる素材の多くは、Flash製品ドキュメンテーションに含まれているものです。Flashビデオを使用すると、ほとんどのユーザが表示可能な形式で、ビデオをWebページに簡単に配置できます。このガイドでは、Flashビデオの作成方法や配置方法に関する情報など、Flashビデオの概要について説明します。この習得ガイドに従って学習を進めるには、次のソフトウェアをインストールする必要があります。
Flashビデオを作成するためのチェックリスト
次のステップは、Flashビデオコンテンツを作成してオンラインでパブリッシュする方法を示しています。オンデマンド(録画済み)ビデオとライブビデオでは、ビデオの作成方法およびパブリッシュ方法が異なります。
オンデマンドFlashビデオを作成するには:
ビデオを用意します。デジタルビデオカメラを使って自分でキャプチャするか、または他のユーザから入手します。配信メカニズムを決定します。「Flashビデオの配信オプション」を参照してください。「ビデオのキャプチャとエンコーディング」を参照してください。ビデオをWebページに追加し、そのページをWebにパブリッシュします。
ビデオとWebについて
ビデオとインターネットは、非常に相性の良い組み合わせのように思われます。ビデオは日々の視覚的体験を最も忠実に再現するメディアであり、インターネットは興味深いコンテンツに満ちた広大な遊び場です。そのため、データ、コンテンツおよびインタラクティブなコントロールとビデオを統合し、テレビとビデオの組み合わせでは得られないリッチなエクスペリエンスを提供している魅力的なWebサイトが多数存在すると思われるかもしれません。残念ながら、Web上に公開された初期のビデオコンテンツの多くは、コンピュータのモニタ上で再生される四角形のコンテンツにすぎませんでした。また、通常は別のポップアップウィンドウで表示されたため、生成元のWebサイトのページが隠されることも少なくありませんでした。これらのビデオ映像の多くはサイズが小さく画質も悪かったため、全体的なエクスペリエンスは良いものではありませんでした。これまでデザイナーは、次のような技術的な課題により、ビデオコンテンツの潜在的な能力を十分に引き出すことができませんでした。
帯域幅の制約
ビデオは大量のデータを必要とする表現形式であり、短いビデオクリップでも数メガバイトの表示データが必要になります。ブロードバンドの発展により、この技術的障害が大幅に軽減されました。ビデオコンテンツをWeb経由で受信するのに必要な帯域幅を確保できるサイトビジターが増えていますが、多くのビジターにとってファイルサイズは依然として問題になりうるものです。
Web用ビデオのオーサリングの複雑さ
インタラクティビティを実現したり、ナビゲーションコントロールを作成したり、ビデオと他のリッチメディアコンテンツを融合したりするためのツールセットはまだ標準化されていません。また、ビデオ再生用のクライアントがビジターのシステムにあらかじめインストールされていることはほとんどありません。そのため、ビジターの多くは、まずサイトの利用を中断してプラグインやサードパーティのアプリケーションをダウンロードしてからでないとビデオを表示できません。
ビデオと他のWebコンテンツを効果的に統合する手段の欠如
Web用のビデオ形式の大部分は、四角形のウィンドウでビデオを再生すること以外のリッチなメディア機能を備えていません。幸いにも、こうした問題はFlashビデオによって克服できます。Flashビデオでは、ビデオコンテンツがコンテキストに従ってシームレスに提供されます。ビデオについて詳しくは、「ビデオ標準の概要」を参照してください。Flashビデオには、データ、グラフィック、サウンドおよび動的なインタラクティブコントロールとビデオを融合して、ビジターを夢中にさせるリッチなエクスペリエンスを実現するのに役立つ、技術面およびクリエイティブな面でのメリットがあります。Flashを使用してビデオをオンラインで提供することの利点として以下が挙げられます。
普及率の高さ
2002年にFlashビデオが登場して以来、Flash Playerは最も多くインストールされているインターネット用ビデオクライアントとなり、インターネットに接続されているパーソナルコンピュータの96%以上で使用されています。また、Flash Playerは様々なプラットフォームやオペレーティングシステム上で動作します。この普及率の高さにより、ほとんどのビジターは追加のプラグインをダウンロードせずにFlashビデオを表示できます。したがって、開発、テストおよびサポートのコストを低く抑えながら、より多くのユーザにコンテンツを提供することができます。
自由にカスタマイズできるコントロール
FlashビデオはWebサイトにシームレスに統合できます。また、ビデオコンテンツに新しい「スキン」を追加してブランドをカスタマイズしたり、独自のビデオ再生コントロールをデザインしたりできます。さらに、ビデオのサイズや縦横比を設定したり、データソースに応じてビデオを動的に変化させることもできます。
コンテキストに沿ったリッチでインタラクティブなビデオ
Flashビデオは、ユーザを夢中にさせるインタラクティブなエクスペリエンスを提供します。FlashではFlashビデオが単に別のメディアの種類として扱われるため、SWFファイル内の他のオブジェクトと同様に、ビデオコンテンツに対してレイヤー処理やスクリプト処理を実行したり、ビデオコンテンツを制御したりできます。別のポップアップウィンドウでビデオを再生するのとは違い、Flashビデオでは、コンテンツと一体化した円滑な視聴体験をユーザに提供できます。次の図は、Flashビデオをテキストやグラフィックと同期させた高度なWebページの例です。青の点線で囲まれた領域にはSWFファイルが表示され、赤の点線で囲まれた領域にはFlashビデオ(FLV)ファイルがSWFコンテンツの一部として表示されます。SWFファイルには、グラフィック、テキスト、クライアントロジック(ビデオコントロールの作成ロジックなど)、 および外部のFLVファイルへの参照を含めることができます。FLVファイルに含まれる主な要素はオーディオとビデオです。
FLVファイルはSWFファイル内で再生されます(図1を参照)
Flashビデオの機能とビデオ作成ツールについて
魅力的なFlashビデオエクスペリエンスを作成および配信するために使用できるツール、機能、サーバおよびサービスを次の一覧に示します。Flashビデオの読み込みウィザード:ビデオをFlashに読み込むには、ファイル/読み込み/ビデオの読み込みを選択します。ビデオの読み込みダイアログの案内に従って、ビデオファイルをFLV形式に変換し、FLVPlaybackコンポーネントを設定します。ビデオのエンコーディングおよびキューポイントのXMLへの書き出し:Flashビデオの読み込みウィザードまたはFlash CS3 Video Encoderユーティリティを使用して、エンコーディングオプションとキューポイント設定をXMLファイルに書き出すことができます。このXML設定は、同じメカニズムを使用して読み込むことができます。これにより、一貫性のある方法で簡単にビデオを作成できます。0ファイル内のFLVPlaybackコンポーネントと同期して動作するキャプションを表示できます。「ビデオの同期とキャプションの追加」を参照してください。0 FLVPlaybackコンポーネントには、外部ビデオのプレビュー、複数のビデオを表示した状態でのサイズ調整、フルスクリーンモードなど、サイズ調整やレイアウトのための拡張機能が組み込まれています。QuickTime書き出しプラグインは、このプラグインをサポートするサードパーティのビデオ編集アプリケーションからの書き出し時にオーディオとビデオをFLVファイル形式にエンコードするのに使用します。
追加のアプリケーション、サーバおよびビデオサービス機能
Flash Player 6またはそれ以降のバージョンへのオーディオおよびビデオのストリーミングに使用します。このサービスでは、高いパフォーマンスと世界規模のスケーラビリティが要求されるストリーミングビデオのためのホスティング環境が提供されます。このツールを使用すると、WebページにFlashビデオを簡単に配置できます。ビデオプレーヤーのカスタマイズオプションや「スキンの適用」オプションも、比較的少数ですが用意されています。
Flashビデオ配信オプションについて
サイトでFlashビデオを使用するには、まずビデオの配信方法を決定する必要があります。主な配信オプションは、プログレッシブダウンロードとストリーミングビデオの2つです (両者の重要な違いの1つは、FLVファイルはデフォルトでプログレッシブにダウンロードされるということです。注意:この他にFlashタイムラインにビデオを埋め込む方法もありますが、オーディオトラックを含まない非常に短いビデオクリップの場合以外はお勧めしません。配信オプションの決定方法については、表1を参照してください。左側の列は配信条件を、右側の列は推奨される配信オプションをそれぞれ示しています。2つのオプションにマークがついている場合は、どちらのオプションも推奨されるということを意味します。
クリップの長さが5秒未満
クリップの長さが30秒超
見込み視聴者数が少ない。見込み視聴者数が普通または多い。
直ちに再生を開始
知的所有権の保護
ライブビデオのストリーミング
ビジターの帯域幅に応じた可変ストリーミングレート
SMILを使用したファイル選択の制御
配信オプションについて詳しくは、「Flashビデオの配信オプション」を参照してください。配信オプションを決定したら、使用するオーサリングツールを選択します。ビデオをサイトにすばやく簡単に配置する必要があり、簡単なビデオコントロール(再生、停止、一時停止、前方スキップ、後方スキップ)以外のインタラクティブなエレメントを必要としない場合は、ビデオをDreamweaverに直接読み込む方法が最も適しています。よりインタラクティブなエクスペリエンスを構築したり、ビデオのルックアンドフィールを大幅にカスタマイズする必要がある場合は、Flash CS3のビデオ機能を使用してください。オーサリングオプションについて詳しくは、「WebページへのFlashビデオの追加」を参照してください。
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ビデオのキャプチャとエンコーディング
ビデオの同期とキャプションの追加
ビデオ標準の概要
ビデオのキャプチャとエンコーディング
オンデマンド(録画済み)ビデオをWebページに追加するには、ビデオを用意してエンコードする必要があります。このセクションでは、オンデマンドビデオのエンコード方法について説明します。また、Flashビデオのエンコード形式に関する背景知識や、ビデオをキャプチャする際に最良の結果を得る方法についても説明します。このセクションでは、FLV以外の形式で保存されたビデオがすでに用意されていることを前提に説明を進めます。よく使われているビデオ編集ツールの多くは、デジタルビデオカメラからビデオを直接キャプチャする機能を備えています。ビデオのキャプチャに関するヒントについては、「ビデオキャプチャで良好な結果を得る方法」を参照してください。既存のビデオをFLV形式に変換(エンコード)する方法について詳しくは、この後の「Flashビデオ(FLV)ファイルのエンコーディングと作成」セクションを参照してください。Flashには、ビデオクリップをFLV形式にエンコードするためのビデオエンコーディングソリューションがいくつか用意されています。
Flashビデオの読み込みウィザード
Flashビデオの読み込みウィザードでは、読み込み時にビデオクリップをFlashビデオ(FLV)形式にエンコードできます。ただし、ビデオの読み込みウィザードには、一度に1つしかビデオクリップをエンコードできないという制限があり、エンコードの処理には高い負荷や長い時間がかかります。Encoderでは、ビデオおよびオーディオコンテンツのエンコーディングオプションを選択できるだけでなく、エンコードするビデオクリップにキューポイントを埋め込み、切抜きとカットコントロールを使用してビデオを編集できます。1がインストールされているコンピュータでは、FLV QuickTime書き出しプラグインがサポートしているビデオ編集アプリケーションから、このプラグインを使用してFLVファイルを書き出すことができます。書き出したFLVファイルは、その後Flashに直接読み込んでFlashドキュメント内で使用できます。FLV書き出しプラグインは次のビデオ編集アプリケーションをサポートしています。FLV書き出しプラグインでは、ビデオおよびオーディオコンテンツを書き出すときに、フレームレート、ビットレート、品質などのエンコーディングオプションを選択できます。FLVファイルはFlashに直接読み込むことができ、読み込み後にビデオをエンコードし直す必要はありません。コーデックとは、エンコード中のビデオファイルの圧縮方法と再生中のビデオファイルの解凍方法を制御する圧縮/解凍アルゴリズムです。ビデオを使用するFlashコンテンツを作成する場合は、VP6ビデオコーデックが推奨のビデオコーデックです。VP6では、小さいファイルサイズを維持しながら、最善の組み合わせのビデオ品質を得ることができます。
コンテンツ(SWF)のバージョン(パブリッシュするバージョン)
ビデオキャプチャで良好な結果を得る方法
エンコーダの効率には、元になるビデオの物理的な特性だけでなく様々な要素が影響し、ひいてはビデオ再生時のユーザエクスペリエンスに関係してきます。エンコーディング処理において重要な意味を持つ要素は、ソース品質とフレームモーションの2つです。ビデオのソース品質は、ビデオカメラの録画ボタンを押した瞬間に決まります。高品質のソースビデオを作成し、圧縮後の最終的なビデオの品質を最大限に高めるために役立つ基本的なガイドラインを次に示します。カメラが揺れないように三脚を使用します。カメラが安定していないと、ビデオのイメージの大部分が動くことになり、したがってフレームごとに値が変化するピクセルの割合が高くなります。カメラをしっかりと設置すれば、フレームごとに値が変化するピクセルの数を減らすことができ、圧縮率を高く(データレートを低く)した場合の品質が向上します。効果的なライティングテクニックを使用します。ハイエンドのカメラを使用し、三脚で固定したとしても、光量が不足していればイメージの品質はやはり低くなります。低光量フィルタや光量ゲインフィルタを使用すると、イメージにビデオノイズが生じます。このノイズはフレームごとに異なるため、コーデックでの圧縮時に良好な品質を得ることが難しくなり、ビデオノイズを補うために、許容できる最大限(またはそれ以上)のデータレートを使用する必要に迫られる可能性があります。できるだけ高性能のカメラを使用します。低品位のカメラ、特に、アナログ信号を磁気テープ(VHS、Hi-8など)に記録するタイプのアマチュア用の機器では、録画したビデオに非常に多くのアナログノイズが混入します。デジタルカメラの場合も、ムービーモードでは画質に制約があり、ビデオクリップのノイズは概して多くなります。たとえ三脚で固定し、最高のライティングで撮影したとしても、カメラの性能によるノイズは避けられません。与えられた条件の中で最善を尽くします。ハイエンドのデジタルカメラ、デジタルBetacamカムコーダおよび35mmフィルムカメラでは、ライティングが良好でカメラを三脚に固定していれば、明瞭なイメージが得られます。そのような場合には圧縮率も最適となり、低いデータレートと高い画質を両立できます。とはいえ、業務用の機器、三脚および最高のライティング状態をいつも用意できるわけではありませんが、ビデオソースの品質がよいほど、また、ソースに含まれるノイズが少ないほど、より低いデータレートで高品質の再生用ファイルを作成できるということを常に意識する必要があります。ファイルをエンコードする際の元データには、可能な限り非圧縮形式を使用します。圧縮済みのデジタルビデオ形式をFLV形式に変換すると、圧縮時に使用したエンコーダに起因するビデオノイズが混入する可能性があります。別のコンプレッサによってすでに適用されているエンコーディングアルゴリズムにより、ビデオの品質、フレームサイズおよびレートはすでに低下した状態になっています。また、そのコンプレッサに特有のデジタル処理によるノイズが含まれている可能性もあります。そのようなノイズはFLVのエンコーディング処理に影響し、場合によっては、より高いデータレートを使用しないとファイルの再生品質を確保できなくなることもあります。フレームモーションも、エンコーディング処理への影響を考慮する必要がある要素です。これは、あるフレームと別のフレームの間で変化するピクセルの割合のことです。ピクセルの変化は、人物や物体の動き、カメラエフェクトや後処理エフェクトによって生じます。
人物や物体の動き:レンズの前を通りかかる人物、風に揺れる木の葉、走り過ぎる自動車、顔の大幅なクローズアップなど
カメラエフェクト:カメラのパン、ズーム、手持ちでの撮影などでは、フレーム間に100%近いピクセルの変化が生じます。後処理エフェクト:ディゾルブ、フェード、ワイプ、その他の複雑なビデオエフェクトでは、フレーム間に高い割合でピクセルの変化が生じます。ビデオクリップ内のモーションが大きいほど、より多くの情報をエンコーダで圧縮する必要があります。動きの比較的少ないクリップでは(話す人物の顔など)、フレーム間のピクセルの変化はさほど大きくありません。ビデオコンプレッサは、何らかの方式に基づいてフレームを削除してから、まったく圧縮していない一連のフレームをエンコードします。それらの非圧縮フレーム(キーフレーム)は、削除したフレームを再生時に計算して「再構築」するために使用されます。
オンデマンドビデオのエンコードに関するベストプラクティス
オンデマンドビデオをエンコードする際は、様々な要素のバランスをとる必要があります(モーションの再現性、ファイルサイズ、目標帯域幅、フレームレート、キーフレーム間隔、ビデオのピクセル寸法など)
こうした要素のいくつかについては、Flashビデオのエンコード時に値を指定できます。また、このセクションではいくつかの設定項目について、一般的な用語を使って説明しています。その他の設定に関する技術について詳しくは、「ビデオ標準の概要」を参照してください。この記事には、推奨される設定の一覧表*があります。ビデオをインターネット配信用のFlashビデオに圧縮する際の参考になる一般的なガイドラインを次に示します。目標帯域幅(データレート)が高ければ高いほど、より動きの激しいビデオ、より大きいファイルサイズ、より高いフレームレート、より大きいピクセル寸法に対応できます。ビデオ内の動きが少ないほど、ファイルサイズを小さくでき、より低い目標帯域幅に対応できます。目標帯域幅を下げるには、キーフレームレートを下げます。キーフレームレートを低くすると(例:6秒あたり1キーフレーム)、イメージのシャープさや鮮明さが落ちますが、要求される帯域幅も低くなります。動きが激しい場合は、キーフレームレート、フレームレートおよびデータレートの3つを引き上げる必要があります。動きの速いクリップでは、より多くの情報をプレーヤーに伝送する必要があり、低い帯域幅での配信には適していません。ファイル内にエンコードして含める必要がある非圧縮のキーフレームの数が多くなるためです。帯域幅が限られている場合、高いフレームレートと高い画質を保つには、フレームサイズを小さくします。エンコードするビデオソースをビデオカメラから直接読み取る場合は、必ずデインターレース処理をオンにし、Flash Video Encoderは上位フィールドに設定します。インターレース形式のビデオでは、このオプションを設定することで、ビデオのエンコーディングと再生のパフォーマンスが向上します。
ビットレートについて
ビットレートとは、1秒間に転送されるデータの量です。Flashビデオをエンコードする際には、エンコード処理で使用するビットレートを指定します。ビットレートは視聴者の環境に応じて選択する必要があります。例えば、大半のビジターが56kbpsのモデムを使用すると考えられる場合、2Mbpsのビットレートでエンコードしたビデオは提供できません。
キーフレームについて
Flashビデオは、一連のキーフレーム(ビデオから一定間隔で抽出したフルフレームの非圧縮イメージ)としてエンコードされます。各キーフレームの後には、キーフレームのピクセルを変更してその次のキーフレームとの間にデルタフレームを生成するために使用される情報が配置されます。再生時にキーフレームを基にしてデルタフレームを再現する処理は、デコーダによって行われます。キーフレーム間隔とは、あるキーフレームから次のキーフレームまでの間にあるデルタフレームの数です。キーフレーム間隔を大きくするほど、削除したフレームをデコーダで再現する処理は困難になります。また、キーフレーム間隔があまりにも大きい場合、データレートが不足し、十分なビットデータを圧縮および送信できなくなることがあります。したがって、動きの激しいビデオクリップでキーフレーム間隔を大きくとると、視聴者には画質が非常に低く感じられます。視聴者のシーク操作やスクラブ操作を認めるような形でFlashビデオのコンテンツを提供する場合、再生中にストリームが早送りされるため、キーフレームは特に重要となります。プログレッシブビデオ内の特定の位置へのシークを可能にするには、各位置を示すナビゲーションキューポイント(タイムコード)をエンコード時に埋め込む必要があります。ナビゲーションキューポイントを埋め込んだ場合、エンコーダは指定されたタイムコードの位置にキーフレーム全体を配置します。これは、正確なシークを可能にするために必要な処理です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ビデオのキャプチャとエンコーディング
ビデオの同期とキャプションの追加
ビデオ標準の概要
テレビの画面に表示される映像は、カラーテレビが登場した1950年代に策定された標準規格に従っています。一般的には、NTSCは米国や日本で標準として採用されており、PALは欧州、オーストラリア、中東およびアジア地域で採用されています。コンピュータのモニタに表示する場合に関しては、いずれのビデオ標準も最適とは言えません。
Web配信向けに最適化しようとする際には、それぞれに異なる問題がともないます(表3はそれらをまとめたものです)
フレームサイズ:NTSCとPALではイメージサイズが異なり、また、いずれもコンピュータのモニタに表示できるイメージサイズと異なります。フレームレート:NTSCとPALではイメージの表示に使用されるフレームレートが異なり、また、いずれもコンピュータのモニタで使用されるフレームレートと異なります。ピクセル縦横比:NTSCとPALのピクセル縦横比は共通(D1縦横比と呼ばれる長方形)ですが、これはコンピュータのモニタで使用される縦横比(正方形)と異なります。ディスプレイ:NTSCとPALでは「インターレース」処理により2回のフィールドに分けてイメージが表示されますが、コンピュータのモニタではイメージが1回で「プログレッシブ」表示されます。
ビデオの標準規格の相違点
(非常に大きい)
伝統的なテレビ画面は水平の走査線の集まりによって構成されますが、コンピュータのモニタは水平および垂直のピクセルの集まりによって構成されます。現在のコンピュータで使われているモニタの垂直解像度(ピクセル数で表されます)は、これらよりはるかに高い(768ピクセル、1024ピクセルなど)のが普通なので、モニタ全体に表示するには、再生時に垂直方向の拡大処理が必要です。このデフォルトのビデオサイズは、一般にD1と呼ばれています。ただし、DV(デジタルビデオ)ソースの素材をキャプチャすると720×480のフレームになります。D1仕様とDV仕様では垂直方向のピクセル数が6個しか違いませんが、多くの圧縮アルゴリズムは(DV圧縮も含め)、イメージのピクセル寸法が16の倍数である場合に最も効率よく機能します。そのため、DV形式ではD1解像度から6ピクセルを削除し、ネイティブ解像度を16の倍数にしています。PALビデオのイメージについては、フレームのサイズはビデオソースに関係なく常に720×576ピクセルです。PALの垂直解像度576は16の倍数なので、DV圧縮の場合でも変わりません。基本的にビデオとは、イメージを次々に高速に切り替えて画面上に表示することにより、イメージが動いているような印象を与えるものです。1秒間に表示されるフレーム数は「フレームレート」と呼ばれ、ムービーの再生速度はfps(1秒あたりのフレーム数)で表されます。フレームレートが高いほど、イメージシーケンスの表示に使用される1秒あたりのフレーム数は多くなり、モーションがスムーズになります。ただし、フレームレートを高めると、ビデオの表示に大量のデータが必要となり、結果的により大きな帯域幅が必要となります。この切りの悪い数値は白黒テレビ信号の名残です。
かつて白黒テレビからカラーテレビに移行した際、既存のテレビ受像機の後方互換性を保証するために、同じ29
97fpsのレートが踏襲されました。
1秒間に30フレームが表示されるのは確かなのですが、厳密な時間にすると0
1%だけ遅いため、フレームレートの値としては29
Flashビデオのような形式の圧縮されたビデオを扱う場合、フレームレートがビデオの画質に影響する可能性があります。この影響は、ビデオとそのコンテンツのエンコード方法によって左右され、予測するのが困難です。フレームレートを低くすると、表面的には、エンコードするコンテンツが少なくなります。その結果、理論的には、画質が向上するか、ファイルサイズが小さくなります。ただし、その一方で、フレーム間のピクセルの変化が目立つようになる可能性が高くなります。その場合は、より多くのデータをエンコードする必要があります。データレートを維持したままフレームレートを低くすると、ビデオの動きがぎこちなく見え、十分にスムーズな表示にならないことがあります。フレームレートを下げる場合は、元のフレームレートを整数で割った値にするのが望ましいと考えられます。
ビデオの長さが10分を超える場合、29
97fpsレートまたはこのフレームレートを整数で割った値(29
98fpsなど)に従わないと、オーディオとの同期のずれが目立つようになります。D1/DV NTSCおよびPALの仕様では正方形でない(D1縦横比と呼ばれる)ピクセルが指定されていますが、コンピュータのモニタでは正方形のピクセルが使用されます。D1ピクセルは横長です。したがって、D1ビデオイメージをコンピュータのモニタに表示すると、イメージの縦方向がつぶれ、俳優がずんぐりした体型に見えます。
このイメージを放送用モニタで見た場合は、ピクセルが横長になっているため、次の図のように正常に表示されます(図2を参照)
ビデオモニタに表示したイメージ(左)とコンピュータのモニタに表示したイメージ(右)
この理由により、コンピュータのモニタ上で表示されることが前提のビデオイメージは、伸縮してピクセルの縦横比を修正し、正しい4:3の縦横比にする必要があります。ほとんどのビデオ編集アプリケーションでは、コンピュータのモニタ上にレンダリングする際にリアルタイムでビデオイメージを伸縮することにより、ピクセル縦横比の食い違いを吸収しています。これは、編集したイメージが最終的にはテレビのモニタで表示されることになるからです。ビデオファイル自体のピクセルを伸縮してしまうと、その操作によって無用な歪みがわずかに生じる可能性があります。しかし、Webでの表示が前提の場合、このようにリアルタイムで補正するのは合理的ではありません。正方形ピクセルのモニタで表示されることが前提のビデオシーケンスならば、実際のデータを伸縮加工してピクセルの縦横比を補正する方が適切です。ビデオイメージでは、2つのインターレースフィールドを組み合わせて1つのフレームが構成されます。この方式はテレビが発明された時代の技術的制約に起因するものです。当時は、フレーム全体を1回で「プログレッシブ」に(上から下へと連続的に)モニタ上に表示すると、イメージが表示された後に画面上から消し去られていくように見えてしまい、点滅が発生するのを避けられませんでした。そこで、イメージを2つのフィールド(半分ずつの情報)に分け、交互に表示することにより、ちらつきを排除しました。この旧来の技術は、ビデオやコンピュータが使われるデジタル時代においては非常にわずらわしい弊害となったため、新しい高品位テレビのビデオ規格では、インターレースではなくプログレッシブ表示(イメージを1回で上から下へと連続的に表示)する方法が採用されています。一度に表示される走査線の集まりは、フィールドと呼ばれます。2つのフィールドはそれぞれ、上位フィールド(フィールド1、奇数フィールド、トップフィールド)および下位フィールド(フィールド2、偶数フィールド、ボトムフィールド)などと呼ばれていますが、標準的な用語は確立されていません。これらすべての用語が、2つのインターレースビデオフィールドを表します。
テレビ映像が表示されるときには、2つのフィールドがすばやく連続的に表示されて重なり合います(図3を参照)
2つのビデオフィールドからなるインターレースビデオ
実際のビデオ素材において、インターレースの2つのフィールドは非常によく似ていることが多く、そのような場合は、コンピュータのモニタ上でビデオフレームを見ても表示上の不都合は特に感じられません。しかし、動きの激しい、目まぐるしく変化する素材(カメラ自体やフレームに映る人物などの動きが速い場合)では、コンピュータのモニタ上に2つのフィールドを同時に表示するとフィールドの副作用が非常によく目立ち、ゴーストが発生したような画質に見えます。これは、タイミングが異なる2つの瞬間を組み合わせて1つのフレームが構成されているためです。したがって、コンピュータのモニタ上に鮮明なビデオを表示するには、デインターレース処理によって2つのフィールドのいずれかを排除することが不可欠です。各フレームに含まれる情報の半分を捨てて、残った情報を二重化したり、補間したりすることになります。NTSCの場合、この処理によって、30の異なるタイミングを表す30個のフレームが得られます。
その結果、はるかに鮮明なビデオイメージになります(図4を参照)
ビデオ静止画のインターレースのフレーム(左)とデインターレース処理後のフレーム(右)
デジタルテレビ向けの新しいビデオ規格では、インターレースを避けて、プログレッシブスキャンの表示技術が優先的に採用されています。プログレッシブスキャンのビデオカメラの多くは、プログレッシブスキャンからインターレースビデオに切り替える機能を持ち、インターレースあり/なしの両方を含む様々なフレームレートに対応しています。プログレッシブビデオの素材を扱う場合、Webで配信する前にビデオクリップをデインターレース処理する必要はありません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
サイトは、2008年10月5日にさいたまスーパーアリーナにて番組のために収録された同グループのライブ映像を、12台のカメラから閲覧でき、さらにユーザー自身のスイッチングでオリジナルのライブ映像に紡ぎ合わせることのできる、インタラクティブなコンテンツとなっています。これまでサイトでライブ映像を使う場合は、番組ディレクターによってあらかじめ編集されパッケージ化された形式での提供方法が一般的でした。今回の試みは、ユーザー自身がその制作プロセスに参加し、できあがったコンテンツを楽しむことができるという、Webだからこそ実現できた新たなコンテンツの楽しみ方の提案です。RADOHEADは、最新アルバム「In Rainbows」をネット上で販売し、ユーザー自身にその購入価格を決定させたり、同アルバム収録曲「Reckoner」のリミックスを一般公募するなど、音楽流通のありかたに対して常にアグレッシブな姿勢を取っています。一方でWOWOWは、ライブ番組制作・放送のプロフェッショナルであり、非常に高いクオリティのライブ映像資産を保持しており、その新たな活用方法を模索していました。今回は番組プロモーションを通じて、Webに対する両者の価値観が一致することで実現できた、とても幸せなプロジェクトだと思います。僕は制作を担当させてもらったのですが、従来の放送や音楽プロモーションの枠組みを超えた企画で、具体的なアウトプットを任せてもらえたのは本当に貴重で興味深い経験でした。本記事では、このサイトを制作するにあたって工夫(というか苦労)した点を、主に技術面から説明します。
技術的な仕組み
ライブ感を獲得するために
今回のコンテンツで一番大事にしたかったのは「ライブ感」です。通常、Webで再生される映像は、プログレッシブ再生でもストリーミング再生でも、再生バッファが足りなくなった時点で一時停止してしまいます。しかし、今回に限ってはライブの臨場感を獲得するために、一度演奏が始まったら最後まで途切れることなく再生され続けることが大事だと考えました。たとえカメラを切り替えても、そこでバッファリングが挟まることなく再生が続くようにしたかったのです。この要件を実現するためにはどうしたらいいのか、いくつかの方法を検討しました。
再生方法の検討
一番簡単なのは、12個の映像を同時に再生しておいて、ユーザーが選んだものだけを表示する方法です。しかし、12個の映像をプリロードすると膨大なファイルサイズになるし、ストリーミングするにしても膨大な帯域幅が必要になり、どちらも現状の一般的なユーザー回線状況を考えると非現実的です。また映像の再生負荷もかなり高くなることが予想されます。もう1つ思いつくのは、FMSなどのストリーミングサーバを活用して、12個の映像のスイッチングをサーバ側でダイナミックに行い、ユーザーには1本のストリーミング映像として配信する方法です。今回はFMSを使うことができなかったため、検証するに至りませんでしたが、有効そうな気はします。スイッチングに対して、実際どの程度のタイムラグが出るのか興味があるので、もし誰か試みた方がいらっしゃいましたらぜひ教えてください。ただ、音を途切れさせずに映像を繋ぐのがちょっと難しいかな、と予想します。このようにいくつか検討した上で今回僕が取った方法は、以下の2つです。音を確実に途切れさせないために、サウンドとサムネイル映像に関しては、プリロードしておく。スイッチングした際に大きく表示する映像に関しては、スイッチングした映像の該当する時間部分をダイナミックにロードする。
具体策1:サウンドとサムネイル映像のプリロード
サウンドと画面下部のサムネイル映像に関しては、最初に完全に読み込まない限り、途切れさせずに再生することを保証するのは難しいと判断し、コンテンツの本編が始まる前に全てプリロードするようにしました。これで途切れず再生するための基盤を得ることができたのですが、その弊害として最初に読み込むファイルサイズがとても大きくなってしまい、本編開始までの待ち時間が結構長くなってしまいました。この待ち時間を退屈させないために演出面で工夫することを考えました。ライブが始まる直前の「会場がRADIOHEADメンバー登場を待ちわびている」状態の映像をイントロムービーとして再生するようにしました。
会場の期待感や高揚感をPCの前のユーザーとも共有できたらいいなと思いつつ
プリロード時の待ち時間を退屈させないために、ライブ開始直前の雰囲気が伝わる映像を再生しています。
具体策2:スイッチング映像のダイナミックなロード
一方、スイッチングした高解像度の映像を最も効率的に配信する方法は、スイッチングしたカメラの映像の
必要な秒数の部分のみを逐一ロードし再生する。というものだと考えました。「スイッチングしたカメラの映像」をロードするというのは簡単ですが、「必要な秒数の部分のみをロードする」というのが難問です。
通常、映像ファイルは常にその某頭からしかロードすることができません(YouTubeのように、シークした時点からプログレッシブ再生できるような強力なサーバ側のシステムが用意できるのであれば話は別ですが)
この問題を解決するために、各カメラ映像を0
5秒単位で分割したファイルにする。というちょっと強引な方法をとりました。
こうして分割したファイル群を用意しておけば、例えば「10カメの30
5秒目から再生したい」という時でも、該当する映像ファイルから順に読み込んで再生していくことができます。また、ユーザーがカメラを切り替えた際にも、すぐに新しいカメラの映像ファイルの読み込みに切り替えることができます。
各カメラ映像を0
5秒単位で分割したファイルにして、ユーザーのアクションに応じて該当する部分のファイルをダイナミックにロードしています。ただ、この方法にも難点が2つあります。1つは、各映像ファイルの再生時間が圧倒的に短いため、映像エンコードの圧縮効率が悪く、画質の割にファイルサイズが大きくなってしまうという問題です。これは基本的に回避のしようがないのですが、エンコードする元素材の黒味を気持ち強めにしたり、映像の上に細かくドットを打ったレイヤーを敷くことでブロックノイズを目立たせなくするなどして、視覚的に画質の劣化感を軽減するような処置を施しました。もう1つの問題点は、バッファリングのための一時停止を禁忌としている都合で、回線のコンディションによっては読み込みが追いつかなくなってしまう可能性があることです。ファイルの読み込みが間に合わない場合は、代替映像としてサムネイル映像を無理やり拡大したものを再生するため、モザイク状の映像になってしまいます。これについても根本的な解決方法は無いのですが、少なくとも日本国内であればブロードバンド環境が一般的な回線環境だと考えて問題ないだろうと想定し、最低1Mbpsの回線であればモザイク化することなく映像を再生できるよう、映像の圧縮率を調整しました。また、コンテンツの開始時にユーザーが画質を選択できるようにし、あまりにモザイク状態が継続するようであれば画質を下げたバージョンで閲覧できるようにしました。
システムとデザイン
以上、今回の要件を実現するために、映像ファイルの構成とそのロードの仕方で、少し特殊な方法をとっているというお話でした。今回のように複数台のカメラを同時に回した映像素材を扱う機会は、普通なかなか無いような気がするので、いつこの記事が役に立つのかという疑問が沸かないこともないですが、少なくとも上記のような細かい検討を行って開発していることは何かの参考になるかもしれません。僕が一番重要だと考えるのは、今回で言えば「ライブ感」がこのサイトを成立させるための根幹となる要素だと考え、その一点を追求するための技術的な工夫を重ねているところです。全体のゴールを見定め、見失わずに制作を進めることができるのであれば、そのサイトの強度というか純度を結構高いところまで持って行くことができるんじゃないかと思います。
著者について
主にFlashを用いて、さまざまなインタラクティブコンテンツ制作に携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0書き方教室 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0書き方教室
0を発展させたものです。しかし、同時にクラスの構成やイベントの扱いが変わり、個々のプロパティやメソッドにも細かな点で違いがあります。
0コンポーネントリファレンスガイド」 をよく調べないと、意図した動作が実現できない場合も少なくないでしょう
0の新たな考え方やこれまでと異なる点を確認していきます。0何が変わる。」をご参照ください。
サンプルファイルのダウンロード
スクリプトを設定したMovieClipインスタンスが、マウスポインタの方向に追随して回転します。図01-001: マウスポインタを追いかけてインスタンスが回転する。座標から角度を取得するには、Mathクラスの関数を使って簡単な計算をする必要があります。
すると、マウスポインタを追いかけて回転するインスタンスには、つぎのようなMovieClipアクションを設定すればよいでしょう*2 *3
メインタイムラインには、つぎのようなフレームアクションで関数getAngle()を定義します。
座標から角度を取得するには、Math
このメソッドには、注意点がふたつあります。第1に、引 数の順序が、y座標、x座標となることです。第2に、返される角度はラジアン値です。これで、サンプルスクリプトは完成です。0の仕様では、インスタンスにスクリプトを記述することができません。したがって、この処理をフレームアクションに移行する必要があります。0の厳密な型指定を用いることにします。変数に対しては、その宣言時にデータ型を指定します。また、関数(function)の引数や戻り値についても、データ型を指定することができます。*3 マウスポインタに追随してインスタンスを回転するスクリプトについて詳しくは、F-siteセミナー「MovieClipのターゲットパスとプロパティ」をご参照ください。
0のフレームアクション
0は、インスタンスにスクリプトを記述できません。したがって、少なくともフレームアクションにする必要があります。Flash MXでは、イベントハンドラメソッドの採用により、フレームアクションにイベントハンドラが書けるようになりました。使えばSWFの書出し時にエラーが発生してしまいます。しかし、フレームアクションでは第1フレームに書きさえすれば、最初に処理されます。イベントハンドラメソッドを使ってフレームアクションに書替えたスクリプトはつぎのとおりです。
スクリプト02-001 マウスポインタに追随してインスタンスを回転するフレームアクション
0に書替えることが可能になります。
// イベントハンドラメソッドを名前のない関数で設定
// イベントハンドラメソッドそのものを関数として定義
前者は名前のない関数、後者が名前のある関数による定義です。ふたつの関数(function)の違いについては、「名前のない関数(匿名関数/関数リテラル)」をご参照ください。
0の最小限のフレームアクション
0で動くように修正するだけでしたら、さほど手間はかかりません。0で動作します。第1は、イベントハンドラ メソッドに替えて、イベントリスナーを使うことです。0では変わりました。これらの修正を施したのが、つぎのスクリプトです。
0で記述された最小限のフレームアクション
0では、クラスが大規模な階層構造になりました。0のイベントハンドラメソッドは、インスタンスに設定すればイベントを受取って処理することができました。0では、予めインスタンスにイベントリスナーを登録する必要があります。インスタンスはイベントを受取ったら、直接その処理はせずに、登録されたリス ナーに扱いを委ねます。これは一見、まだるこしい手続きに感じられるかもしれません。しかし、たとえば企業でお客様電話窓口があった場合、さまざまな問合せや要望、クレームが寄せられます。それらを、その窓口の部署自らが処理してい たら、とても対応しきれません。
通常は、その処理を適切な部署に回付することでしょう
窓口は情報の受付と担当部門への通知に専念することで、企業として さまざまな声を受止め、かつそれらを必要に応じて専門的に処理することが可能になるのです。イベントリスナーというのは、役割分担に適した仕組みです。大規模なプロジェクトや複雑な処理を、企業の部門分けのように、適切な単位に小分けして 分担できることがその利点です。もっとも、今回のサンプルは、文法的な確認が主眼ですので、ごく単純な場合です。アニメーションを処理するための enterFrameイベントに、リスナーをひとつだけ登録して処理しています。
スクリプト03-001で、インスタンスはフレームアクションを設定しているMovieClip自身ですから、省略しています(thisをターゲットにしても構いません)
関数は、名前のない関数で指定しました*7
このスクリプト03-001の記述方法は、入力の手間を省いた必要最小限の書き方です。後で、もう少し応用しやすく、ミスも防げる記述の仕方をご紹介します。つぎに、プロパティの名前を修正します。0のプロパティには、名前の先頭にアンダースコア「_」がつきません。また一部には、アンダースコア(「_」)を取るだけではなく、名称の変わったプロパティもあります。mouseYプロパティに名前が変わります。
0へのプロパティ名変更の例
*6 スーパークラスとサブクラスとのつがりを「継承」と呼びます。0の継承について」をご参照ください。*7 名前のない関数については、注釈[*5]に引用した「名前のない関数(匿名関数/関数リテラル)」をご参照ください。同名のプロパティが、他のクラスに存在することもあります。
0の標準的なフレームアクション
前述のスクリプト03-001は、動作するための最小限の記述です。後々の応用や拡張を考えると、不十分な点がふたつあります。
0の標準的なフレームアクションに書替えてみましょう
0の標準的なフレームアクションに修正
第1に、このままではイベントリスナーが必要なくなったとき、削除することができません。addEventListenerメソッドに指定するとき、関数には予め名前をつけて定義しておく方が、望ましいということになります。したがって、イベントリスナーに設定するfunctionを、まず通常の名前のある関数として定義します。定義したタイムライン上では、関数はその名前で参照することができます。
0では、クラスが大規模な階層構造になりました」
それらのクラスは、「パッケージ」という機能により、カテゴリー分けされています。パッケージは、ディスクのフォルダ/ディレクトリと同じツリー構造になっていて、パスで表します。
ただし、パスの区切り文字はスラッシュ(/)ではなく、ドット(ディスク内でファイルを分類・整理して格納するフォルダと同じ役割を、このパッケージが果たします。
パッケージのクラスを使うためには、スクリプトの冒頭でimportステートメントを記述して、パッケージ(flash
MovieClipクラスの(スーパークラスも含めた)プロパティやメソッドにアクセスしているほか、イベントを管理しそのイベントについての情報を保持するflash
したがって、これらのクラスをimportステートメントで、スクリプトの冒頭に宣言する必要があるのです*10
もっとも、スクリプト03-001は、importステートメントを記述することなく、正しく動作しています。ですから、スクリプトをフレームアクションに記述し、ActionScript定義済みのおもなクラスを使うかぎりにおいて、importステートメントは必ずしも書かなくても構いません。けれども、フレームアクションでなくクラスを外部ファイルに定義する場合や、ActionScriptに定義されていない自作あるいは他の人が作成したクラスを利用する場合、さらには自動的にimportされる以外のクラスを用いる場合などに、importの必要性を忘れてあわてる可能性があります。そうならないためには、少なくともimport宣言が必要であることをつねに意識すべきで、またそれを徹底するためにあえてimportステートメントを記述することも有効だと思われます。さらに、もうひとつ追加したいことがあります。ですから、直接文字列で指定した場合と、動作結果は変わりません。第1は、綴りミスでエラーが返されることです。
たとえば、すべて大文字でなければいけない定数の記述に、小文字を交えてEvent
ところが、文字列の場合には、"EnterFrame"と書いても、何のエラーを生じることもなく、ただ単に動かなくなります。ENTER_FRAME定数を使う利点の第2は、イベントリスナーとして指定した関数に渡される引数のデータ型が明らかになることです。Eventクラスの定数を指定したということは、イベントリスナーは引数としてEventインスタンスを受取ります。ですから、当然引数は、Eventで型指定されます。
これがたとえば、マウスクリックを受取りたい場合であれば、イベントはMouseEvent
すると、イベントリスナーの関数は、引数をMouseEventで型指定すればよいとわかります。以上3つの点を考慮してスクリプト03-001を修正すると、つぎのようになります。
0で記述した標準的なフレームアクション
DisplayObjectクラスのインスタンスには、ユーザーがカスタム関数を定義することはできません。*12 マウスイベントについいては、「マウスイベント」をご参照ください。*13 このようにデータ型を変換することは「キャスト」と呼ばれます。詳しくは、「rootプロパティでメインタイムラインの関数にアクセスできない」をご参照ください。0でクラスを定義してみます。そして、クラス名を決めます。
そうしたら、ファイルをこのクラス名(拡張子は
つぎに、Flashドキュメントファイルに切替えて、回転させるMovieClipシンボルに今作成したクラスを割当てます(クラス定義のスクリプ トは、それが済んでから続けて作成します)
[ライブラリ]パネルでMovieClipシンボルをクリックしたら、パネルのオプションポップアップメ ニューから[プロパティ]を選択します。
[シンボルプロパティ]ダイアログボックスが開きますので、[リンケージ]の[アクションスクリプトに書き出し] にチェックをつけ、[識別子]に半角英数字で任意の名前を入力したうえで*14、[AS 2
0クラス]に割当てるクラス名を入力
0クラスを定義します。
スクリプトの記述場所
クラス名と同一
クラス名と同一(省略可)
コンストラクタ関数の前にvar宣言
引数と戻り値の型指定可能
0のクラス定義
クラスはclassステートメントで始まり、クラス名を記述した後、コードブロック全体を波括弧{}で括ります。コードブロックには、プロパティ(変数)とメソッド(関数)を定義します。クラスには、クラスと同名の関数(function)を必ず定義しなければなりません。
これはクラスのインスタンスを作成するときに呼出される特別なfunctionで、「コンストラクタ関数」と呼ばれます*15
0クラス定義ファイルは、ファイル名とクラス名、およびクラスに定義するコンストラクタ関数名がすべて同一とされ、つぎのようなスタイルを採ります。
// インスタンス生成時の初期化処理
0クラス定義は完成です。ただし、ひとつ追加すべきことがあります。そうすると、MovieClipクラスのプロパティやメソッドは使えないことになってしまいます。そうならないためには、MovieClipクラスを ベースとして継承し、そのクラスを拡張(extend)するかたちでプロパティやメソッドを追加することが必要です。そこで用いられるのがextendsステートメントで、その後に指定されたクラス(MovieClip)をスーパークラスとして継承(拡張)することを意味します。
[制御] > [ムービープレビュー]で、ムービーが動作することを確認しましょう
動作したらさらに、Flashドキュメントのメインタイムライン(_root)に記述したフレームアクション(スクリプト01- 002)も、クラスとして定義します。この フレームアクションも、基本的にクラスMyMathのコードブロックにカット&ペーストするだけです。
他のクラスを継承(extends)する必要はありません(コンストラクタ関数の定義は、省略しました*15)
0でメインタイムラインのスクリプトをクラス定義
ここでも、またひとつだけ追加があります。クラスのメソッド(プロパティも同様)には、ふたつのアクセスの仕方があります。オーソドックスなのは、クラスのインスタンスをnew演算子で作成してから、インスタンスをターゲットにメソッドを呼出すスタイルです。もうひとつは、クラスを直接参照してメソッドを呼出すスタイルです。たとえば、Mathクラスのメソッドがその典型です。どちらのスタイルで呼出すかは、それぞれのメソッドによって決まっています。
ランダムな浮動小数値を返すMath
なお、staticステートメントは、プロパティに対しても用いることができます。静的メソッド内で参照するプロパティは、static宣言されている必要があります。メインタイムラインのフレームアクション(スクリプト01-002)をクラス定義(スクリプト05-002)に変更しましたので、スクリプト05- 001のgetAngle()関数呼出しのステートメントは、それに合わせて修正する必要があります。0のクラス定義が完成しました。
0クラス定義を修正
*15 実際にはクラスにコンストラクタ関数を記述しなくても、クラスは正常に書出されます。
「クラスファイル内にコンストラクタ関数を明示的に宣言していない場 合、つまり、クラスと同じ名前の関数を作成していない場合は、コンパイラによって空のコンストラクタ関数が自動的に作成され」るからです(Flash 8オンラインヘルプ[ActionScript 2
0のクラス定義を行ってみましょう
0クラス定義に書替えます。as)で保存しておきます。[ライブラリ]のオプションポップアップメニューから [プロパティ]を選択して、[シンボルプロパティ]ダイアログボックスを開きます。0と同じくclassキーワードでクラスを定義し、クラスと同名のコンストラクタ関数を設定する必要があります。0では、さらにpackageキーワードを用いて、「パッケージ」の中にクラスを定義します。
「パッケージ」は、クラスをフォルダ/ディレクトリのようにグループ分けする機能です*16
パッケージ名は、指定しないことも可能です。
// インスタンス生成時の初期化処理
MovieClipシンボルにクラスを設定する場合には、クラスに対する外部からのアクセスを可能にするための属性キーワードpublicをclassキーワードの前に添える必要があります。0クラス定義は、つぎのようになります。[制御] > [ムービープレビュー]で動作が確認できたら、メインタイムラインの関数定義のフレームアクション(スクリプト01-002)を、クラス定義に書替えます。flaファイルと同階層に保存します。0クラスの書き方どおりです。0クラス定義の場合と同じです。0クラスMyMathの定義は、つぎのような内容になります。
0でメインタイムラインのスクリプトをクラス定義
スクリプトは、varのままでも、とくに問題なく動作します。0クラス定義は一応完成です。
0クラス定義を修正
今回のサンプルでは、MovieClipシンボルは1フレームで、フレームアクションをクラスに書替えましたので、スクリプトもなくなりました。
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
マップビュー:サテライト・ハイブリッドとの切り替え
ジオコーディング:住所から経緯度への変換
印刷用に表示
このAPIは、皆さんが開発するFlashアプリケーションに、精密な地図情報とその関連機能を統合できるようにすることを目的に開発されています。Maps APIは、皆さんのコードと容易に統合できるよう、パッケージ化されたFlashコンポーネントとして配布されています。より供給されるので、デベロッパーはサーバなどを用意することなく、単にコンポーネントを組み込むだけで済みます。この記事では、コンポーネントのインストール手順(MXPとしてパッケージされたV2コンポーネントの手順)を説明した後、コピー&ペーストで利用できるコードサンプルを紹介することにします。
これらを利用すれば、ユーザの操作でズーム・スクロールができ、しかもYahoo
Local Searchから得た検索結果が表示されるような地図ベースのアプリケーションが、わずかな時間で開発できるようになります。Maps APIには手軽に使用できるAPIコールが数多く用意されている点です。Mapsの優れた機能性は、わずか数行のコードを理解するだけで利用できるのです。しかも、12段階のズームレベルが用意されているので、可能性は無限に広がります。この記事を読み進める前に、次のソフトウェアとファイルをインストールする必要があります。
へのログイン)
この記事のサンプルコードに関する注意事項
この記事のいたる所で、内容の充実したYahoo
この記事で紹介するサンプルコードはコピー&ペーストで再利用できます。これらのコードは、すぐ利用できるようになっていますが、ご自分の好みにあわせて新たな要素を追加することもお勧めします。サンプルコードを実装するには、FLAファイルの1フレーム目に該当コードを追加してください。コンポーネントとActionScriptのために、それぞれ別のレイヤーを用意することを推奨します。この記事の各節に対して、新しいFLAファイルを用意するようにしてください。各サンプルはこのことを前提に解説されています。これは、どの機能についての解説が行われているかを容易に理解できるようにするためです。
著者について
ボストン大学フィルム&TV学科、コミュニケーション学の学位を所有するFreedman氏は、マルチメディアに関する豊富な教養と、コンテンツ管理、サーバサイドスクリプティング、データベースおよびインタラクティブデザインに対するエキスパートレベルの知識を持ち合わせ、 最近ではeBay、eBay中国およびFidelityのホームページの一部をはじめとする、露出度の高いサイトのダイナミックFlashコンテンツ制作を手掛けています。comを参照してください。
に入社するために愛妻Jamieとともに晴れの多いカリフォルニア州サンタクララに移住
ただし、大好きなボストン・レッドソックスが再びワールドシリーズを制する場面に立ち会うために、レッドソックス戦の年間観戦シートをキープし、頻繁に東海岸へも足を伸ばしています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
マップビュー:サテライト・ハイブリッドとの切り替え
ジオコーディング:住所から経緯度への変換
オーバーレイは、地図の上に気象予報図が重ねられた状態を想像すると分かりやすいかも知れません。つまり、地図上に重ねられ、単一のレイヤー内に収められた、複数のマーカーとムービークリップを管理するためのコンテナがオーバーレイです。オーバーレイのデータは、地図とは別に管理されます。一度オーバーレイを初期化しておけば、オン・オフの切り替えはプログラムから制御できます。Localのデータベースと各種サービスへの窓口がユーザに提供できます。オーバーレイのインスタンスはグローバル変数に保存することを推奨します。こうすることで、オーバーレイのインスタンスが以下のサンプルの機能でも利用できるようになります。マーカーを利用する場合、ユーザがスクロールできるようにしておくと親切なので、PanToolを追加しておくことをお勧めします。ここでは、地元のコンテンツを対象とするので、デフォルトの都市としてシカゴを設定することにします。すでに解説したように、オリジナルのボタンを作成する場合は、添付されたコンポーネントまたはオリジナルのグラフィック要素が利用できます。さらに、上記のアドレスが解決された際に、地図にズームインするためのイベントを追加しておきます。ローカルコンテンツを利用する場合、指定の場所に近ければ近くなるほど、より関連性の高い検索結果が得られます。Localデータベースの検索(ここでは検索条件がコードに組み込まれています)が完了すると、結果データがオーバーレイ内のマーカーとともに表示されます。
これらのマーカーは住所や評判データ、Yahoo
Localの詳細データなどが備わったローカル情報を示しているので、ユーザには、表示中の地図エリアに関する有用な情報の提供が可能になります(図3参照)
地図のズーム処理が完了した時点、あるいはユーザが送信ボタンをクリックするたびに、アプリケーションが searchLocal(): を呼び出すようにしておきます。
Localのコンテンツが備わった地図表示(マーカー内に住所と評価データあり)
最初の使用時には、変数を設定する必要があります。ここでは、シカゴを対象都市として選んだので、ピザをデフォルトの検索条件にしておくことにします。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
このAPIは、皆さんが開発するFlashアプリケーションに、精密な地図情報とその関連機能を統合できるようにすることを目的に開発されています。Maps APIは、皆さんのコードと容易に統合できるよう、パッケージ化されたFlashコンポーネントとして配布されています。より供給されるので、デベロッパーはサーバなどを用意することなく、単にコンポーネントを組み込むだけで済みます。この記事では、コンポーネントのインストール手順(MXPとしてパッケージされたV2コンポーネントの手順)を説明した後、コピー&ペーストで利用できるコードサンプルを紹介することにします。
これらを利用すれば、ユーザの操作でズーム・スクロールができ、しかもYahoo
Local Searchから得た検索結果が表示されるような地図ベースのアプリケーションが、わずかな時間で開発できるようになります。Maps APIには手軽に使用できるAPIコールが数多く用意されている点です。Mapsの優れた機能性は、わずか数行のコードを理解するだけで利用できるのです。しかも、12段階のズームレベルが用意されているので、可能性は無限に広がります。この記事を読み進める前に、次のソフトウェアとファイルをインストールする必要があります。
へのログイン)
この記事のサンプルコードに関する注意事項
この記事のいたる所で、内容の充実したYahoo
この記事で紹介するサンプルコードはコピー&ペーストで再利用できます。これらのコードは、すぐ利用できるようになっていますが、ご自分の好みにあわせて新たな要素を追加することもお勧めします。サンプルコードを実装するには、FLAファイルの1フレーム目に該当コードを追加してください。コンポーネントとActionScriptのために、それぞれ別のレイヤーを用意することを推奨します。この記事の各節に対して、新しいFLAファイルを用意するようにしてください。各サンプルはこのことを前提に解説されています。これは、どの機能についての解説が行われているかを容易に理解できるようにするためです。では、順番に話を進めることにします。
コンポーネントのインストール
この際、最新版の拡張マネージャのダウンロードを求められることがあります。インストール条件に合意し、「OK」をクリックすると、APIがインストールされます。コンポーネントパネルの一覧に、YahooMapコンポーネントが表示されます。
ステージの準備
Flashファイルを新規作成します。YahooMapコンポーネントをステージ上にドラッグし、このコンポーネントが選択されたままの状態にしておきます。ステージ上のYahooMapコンポーネントが選択された状態でプロパティパネルを開き、YahooMapコンポーネントのインスタンス名をmyMapに設定します。
(この記事内のコードは、すべて、地図のインスタンスを「myMap」として参照
プロパティパネルに数値を入力するか、自由変形ツール(Q)を利用してコンポーネントのサイズを500 x 400ピクセルに変更します。プロパティパネルに戻り、「パラメータ」タブを選択します。世界がここから広がります。Maps APIを使うことで、どのような世界が広がるかを確認してください。
ツールとウィジェット:地図の制御
ツールとは、表示中のコンテンツに関する、より多くの制御性を提供するために追加できる、一連のビヘイビアのことです。地図に対するユーザ操作の中で、最も頻繁に用いられるのがスクロール(パンニング)です。PanToolクラスをインポートして、このインスタンスを地図初期化時に作成すると、クリック&ドラッグ操作であらゆる方向に地図をスクロールできるようになります。また、スクロール用のクラスを追加すると、クリックとダブルクリックの機能も加わり、クリックの場合は表示の中心がその場所に移動し、ダブルクリックの場合はその場所にズームインします。注意:節ごとに新しいFLAファイルを用意するようにしてください。本チュートリアルの各サンプルは、新しいFLAファイルに作成されることを前提に解説されています。これは、どの機能についての解説が行われているかを、容易に理解できるようにするためです。NavigatorWidgetは必要度の高いズームバーと、スーパー「ミニマップ」ナビゲーションツールを組み合わせたクールなインタフェースです。ミニマップでは、ごくわずかな大きさのウィンドウ内に、とても広範な地図データが表示されます。ミニマップはより大きな地図に対する精密なナビゲーションのようなものです。
ミニマップの中心にはドラッグ可能なボックスがあります(一部では「ホッケーパック」とも呼ばれています)
ユーザがこのボックスを上に移動すると、表示対象の地図が上へと移動します(他の方向も同じように動作します)
なお、ミニマップ中心のボックスは、常にコンポーネント全体の縦横比と同じ比率で表示されます。このウィジェットは地図の右上部に表示されます。Flashスタイルを踏襲した、このウィジェットでは、ステート切り替え時の表示がアニメーション化されています。マップビューの変更に関しては後ほどサンプルを使って詳しく解説しますが、SatelliteControlWidgetを使えば、手軽にマップビューを切り替えるためのクールな手段がユーザに提供できます。このサンプルは、ウィジェットのインスタンスを変数に保存しなくても、インスタンスが作成できることを示すものです。この方法にはコード量を節約できるというメリットがあるものの、このウィジェットのメソッドが呼び出しにくくなるという短所があります。
マップビュー:サテライト・ハイブリッドとの切り替え
Maps Flash APIには、デフォルトの地図タイルに加え、サテライトタイルとハイブリッドタイルも用意されています。ここでは、3つのマップビューを表示・切り替えるための、手軽な3つの方法を紹介することにします。マップのデフォルトビューは、コンポーネントが初めて読み込まれた段階で設定できます。ステージ上に配置したコンポーネントを選択してから「パラメータ」タブを開き、「Map View Type」のリストから、使用したいビューを選択します。コンポーネントは、初めて作成される段階で、このパラメータの値を読み取り、ユーザに設定通りの体験を提供します。この場合、地図は一旦デフォルトのタイプで読み込まれてから、初期化時に指定しておいたマップビュータイプで再描画されます。APIには、コンポーネント外部からマップビュータイプを切り替えるためのオプションも用意されています。オリジナルのボタンを作成・添付すれば、アプリケーションの地図以外の部分との統一がとれたユーザインタフェース要素を利用して地図を制御できます。この配列に対してループ処理を行います。ループ処理の中では、カウンタの値とマップビュータイプを引数に makeButton 関数を呼び出します。この場面で、オリジナルのボタンを作成・添付します。
次に示す makeButton のような関数をコーディングすれば、コンパクトで軽量なボタンが作成できます(図2参照)
yまたはxの値を増加させれば、ボタンの縦または横方向の配置が調整できます。この際、関数の外でy、x変数の値を設定することを忘れないようにしてください。
地図に対するボタンの追加
このサンプルにおいて筆者は、 _buttonX 変数を利用してアプリケーションの上部を横断するようにボタンをレイアウトしています。こうすることで、ユーザがボタンをクリックすると、それぞれに対応したマップビューに切り替わります。なお、ボタンの状態は簡単な条件文を利用しても追跡可能です。選択されたマップビュータイプは、そのボタンのテキストが太字で表示されます。
オリジナルボタンを利用して、他の地図機能を制御する方法について詳しくは、Yahoo
オーバーレイは、地図の上に気象予報図が重ねられた状態を想像すると分かりやすいかも知れません。つまり、地図上に重ねられ、単一のレイヤー内に収められた、複数のマーカーとムービークリップを管理するためのコンテナがオーバーレイです。オーバーレイのデータは、地図とは別に管理されます。一度オーバーレイを初期化しておけば、オン・オフの切り替えはプログラムから制御できます。Localのデータベースと各種サービスへの窓口がユーザに提供できます。オーバーレイのインスタンスはグローバル変数に保存することを推奨します。こうすることで、オーバーレイのインスタンスが以下のサンプルの機能でも利用できるようになります。マーカーを利用する場合、ユーザがスクロールできるようにしておくと親切なので、PanToolを追加しておくことをお勧めします。ここでは、地元のコンテンツを対象とするので、デフォルトの都市としてシカゴを設定することにします。すでに解説したように、オリジナルのボタンを作成する場合は、添付されたコンポーネントまたはオリジナルのグラフィック要素が利用できます。さらに、上記のアドレスが解決された際に、地図にズームインするためのイベントを追加しておきます。ローカルコンテンツを利用する場合、指定の場所に近ければ近くなるほど、より関連性の高い検索結果が得られます。Localデータベースの検索(ここでは検索条件がコードに組み込まれています)が完了すると、結果データがオーバーレイ内のマーカーとともに表示されます。
これらのマーカーは住所や評判データ、Yahoo
Localの詳細データなどが備わったローカル情報を示しているので、ユーザには、表示中の地図エリアに関する有用な情報の提供が可能になります(図3参照)
地図のズーム処理が完了した時点、あるいはユーザが送信ボタンをクリックするたびに、アプリケーションが searchLocal(): を呼び出すようにしておきます。
Localのコンテンツが備わった地図表示(マーカー内に住所と評価データあり)
最初の使用時には、変数を設定する必要があります。ここでは、シカゴを対象都市として選んだので、ピザをデフォルトの検索条件にしておくことにします。
ジオコーディング:住所から経緯度への変換
地図データにとって重要なのがジオコーディング変換であり、 地図エンジンの中核を構成しているといえます。FlashとAjaxのどちらを利用する場合でも、地図アプリケーションは世界中の場所を特定するために、必ず何らかの形のジオコーディングを利用しています。また、住所の特定、ドライブルートの選定、交通渋滞情報の表示といった地図上の主要機能のためにもジオコーディングが利用されています。ここで紹介しているFlash地図では、経度と緯度(以下、経緯度)の情報をアプリケーション内のポイント座標(x と y)に変換しています。また、ユーザがアプリケーション上のどの位置にスクロール・ズームしたかを調べる際には、ポイント座標から経緯度へというように、先程とは逆の変換を行います。この記事の最後のサンプルでは、地図の中心点から経緯度を得る方法について解説します。このテクニックは、オリジナルアプリケーションの開発時に重宝するはずです。地図上にポイントをプロットするようなアプリケーションを開発する場合(マーカーを追加する際など)、これらのポイントを保管するためにオリジナルのRSS(地図ポイントの場合はgeoRSSとも呼びます)、XMLおよびデータベースを作成することが想定されます。パフォーマンスと効率の面から考えると、経緯度の情報を保存する方が、その都度住所の文字列を処理してから保存するより賢明といえます。また、メソッドに住所文字列ではなく経緯度を渡す方が、プログラミングを利用して地図を制御する際に、より多くのオプションが広がるというメリットもあります。まず、任意のポイントを経緯度オブジェクトに変換する LatLon クラスを読み込みます。地図が初期化された時点の中心点を取得するには、地図を初期化する段階で getCenter() を使用します。このメソッドからは、緯度・経度の、逆の並び順でポイントの値が返されます。つまり、x, yはある地点の水平、垂直方向のそれぞれの値を示しますが、緯度・経度の場合は緯度が垂直方向、経度が水平方向というように、値の並びが逆になる点に注意が必要です。ユーザの操作や動きに基づいて発生させることができるイベントは、他にもいくつかあります。また、 getCenter() から返されたオブジェクトで、新しい LatLon オブジェクトを作成すると、これらのポイントを緯度と経度に変換することができます。この際、正しいポイントを取得するために、値の並び順を変えなければならないことに注意してください。また、 trace() メソッドを追加しておけば、出力ウィンドウに緯度・経度を表示させることができます。
次のステップ
この記事のコードサンプルを参照することで、地図機能を盛り込んだアプリケーション開発に入りやすくなるのではないかと思います。本記事のテクニカルレビューを務めたZach Gravesに、この場を借りて御礼を申し上げます。
著者について
ボストン大学フィルム&TV学科、コミュニケーション学の学位を所有するFreedman氏は、マルチメディアに関する豊富な教養と、コンテンツ管理、サーバサイドスクリプティング、データベースおよびインタラクティブデザインに対するエキスパートレベルの知識を持ち合わせ、 最近ではeBay、eBay中国およびFidelityのホームページの一部をはじめとする、露出度の高いサイトのダイナミックFlashコンテンツ制作を手掛けています。comを参照してください。
に入社するために愛妻Jamieとともに晴れの多いカリフォルニア州サンタクララに移住
ただし、大好きなボストン・レッドソックスが再びワールドシリーズを制する場面に立ち会うために、レッドソックス戦の年間観戦シートをキープし、頻繁に東海岸へも足を伸ばしています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
入門および新機能ビデオチュートリアル
簡単な数式を使用して、推力と速度の効果を再現し、物体のリアルなアニメーションを作成します。
タイムライン派が注目するFlash CS5新機能ガイドツアー
タイムライン派アニメーター視点で、Flash CS5の新機能を紹介します。
swfファイルの容量を軽くするためのコツを紹介しましょう
最終回となる今回は実際に手を動かしてみましょう
テーマは、気楽に作れる「待ち受け時計」にしたいと思います。ActionScript 3の作法を身に付け、深い理解によってFlashオブジェクトに対するこれまでの考え方を変えることで、学習プロセスがさらにスムーズになります。
0エラーアーカイブス」より抜粋して紹介
このチュートリアルでは、Flash Catalyst ベータ版にて基本的なインタラクティブ デザインを習得できます。私たちは、動画コンテンツを提供する上で、動画閲覧環境における問題点を改善し、どのようなユーザーでも利用できるように取り組んでいます。本記事では、その取り組みについて説明します。このチュートリアルでは、Photoshop でデザインされたファイルを使用したインタラクティブなポートフォリオを作成します。本記事では、技術賞を授賞した「PRGEAIR」の開発者である青木大輔さんに、PRGEAIRの機能と使い方を解説していただきます。本記事では、FlashとPhotoshopの連携をもっとスムーズに、もっと便利にするスクリプト集を紹介します。
セミナーレポート Flashコンテンツをゲームプラットフォームへ展開する技術、ビジネス
このセミナーでは、Flashのコンテンツをコンシューマー・ゲーム機で表示させるサードパーティーエンジン「Scaleform」の技術、そしてそれを利用した事例として、任天堂Wii向けのエデュケーション系ゲーム「あいうえ・おーちゃん」について、制作の舞台裏が紹介されました。2行のスクリプトで3次元の消失点をコントロールする。今回は、いわば視線の方向が決まる「消失点」を、2行のスクリプトで動かしてみます。0の初級者向けの解説です。本記事では、PHPを使ったオリジナルCMSを実装した試行錯誤の過程と技術的なポイントを解説します。本記事では、画像ソースを解析してQRコードのビット列を生成するクラスを使った処理にについて紹介します。FlashでSVG形式のベクターグラフィックを利用する。本記事では、FlashでSVG形式のベクターグラフィックを利用する方法を解説します。モーションエフェクトをプログラムで作成し、Flashプロジェクトでムービークリップを簡単に移動、サイズ変更、トランジションおよびフェードする方法を学びます。
Flashのパターン描画ツールとスプレーブラシを使用した複雑な幾何学パターンの生成
0への移行に関するヒント
最新バージョンのActionScriptを使用して初めてFlashアプリケーションを構築するときに陥りやすい問題を回避するために、これら15のヒントを適用します。
初期状態でも使いやすいように配慮されている Flash
より効率的な環境にカスタマイズする方法を解説します。この機能を用いると、面に3次元の凹凸を加えたように表現することができます。
ボーンツールを活用したインタラクションの作成
ボーンツールによるボーン(インバースキネマティック)の作成と、IKArmatureクラスを用いたインバースキネマティックの制御の方法について、解説していきます。
0におけるパフォーマンス向上のヒント
0のスクリプティングで、パフォーマンスを高めるテクニックについて解説します。そのパフォーマンスを引出すポイントからスタートし、さまざまな小ネタをアラカルトで紹介します。
0でも活用できるでしょう
「ちょっとしたニーズを満たす機能をライブラリ化すれば、みんな便利かも」と思い、他の人でも簡単に機能を実装できるように汎用性をもたせたライブラリ「Recorder Lib」を作成しました。0」という作品は、デジタルアートフェスティバル東京2008に出展・参加している企業やクリエイターのプロフィールを紹介するインタラクティブコンテンツです。高性能な最新のグラフィックスプログラミング言語の概要を紹介するとともに、画像やベクトルグラフィックスをはじめとする様々な表示オブジェクトに、フィルタ、ブレンド、面の塗りを適用する方法を解説します。収録されたRADIOHEADのライブ映像を、12台のカメラから閲覧でき、さらにユーザー自身のスイッチングでオリジナルのライブ映像に紡ぎ合わせることのできる、インタラクティブなコンテンツ制作にあたって工夫(というか苦労)した点を、主に技術面から説明します。そこで、Matrix3Dクラスの変換行列を使い、マウスポインタの位置に合わせて3次元座標空間で平面を回転させるサンプルスクリプトについて解説します。アドビ特集」にスピーカーとして参加した際に、「イベント会場内で携帯電話から参加できるようなコンテンツを発表しよう」という企画をもとに開発したシステムです。comの概要と仕組みについて解説します。この記事では、Matrixクラスについて簡単なサンプルスクリプトをご紹介しながら解説していきます。
0 書き方教室
0の新たな考え方やこれまでと異なる点を確認していきます。
0 (そうめん) で非同期処理をスマートに
ActionScript Thread Library は、タスクシステムと Java のスレッドモデルをベースとした「疑似スレッド」を実現するライブラリで、複雑で冗長になりがちな、イベント処理や非同期処理、リアルタイム処理を、分かりやすくスマートに記述することを可能にします。
jp :「自分で花火を作って、打ち上げる」花火大会の仕組み
花火を作ったり、登録したり、打ち上げたりと、自分で好きなように花火大会を演出することができるのがFirework
jpの醍醐味です。それでは、どのようにして自分でデザインした花火を打ち上げているのか、その考え方と構造を解説していきます。
将来を見据えた、新たなHTML内SWF埋め込み用コードの考察
~パワードスーツが作りたいあなたへ~2万円でつくるマスタースレイブシステム
この記事では、Adobe Flash CS3を利用して、直感的な操作を体感できるフィジカルコンピューティングの世界に触れていただこうと思います。この記事では、HTMLコンテンツとFlashコンテンツを統合する方法を紹介します。
in:リアルな書き味と消し味を実現するテクニック
in」は、“黒板に落書き”という学生の頃に誰もが体験したことをWeb上で味わうことのできるお絵かきサービスです。
~コンポーネントやライブラリを利用する~
今回は、検索機能を追加し、条件を絞って店舗情報を探せるようにする手順をご紹介します。
~ウィンドウをカスタマイズする~
第三回となる本チュートリアルでは、ウィンドウの形をカスタマイズする方法をご紹介します。
~ホットペッパーAPIを利用する~
本チュートリアルでは、WebサービスとしてリクルートWebサービスの「ホットペッパーWebサービス」が提供するAPIを利用し、飲食店の店舗情報を取得、表示するAIRアプリケーションを作成します。本チュートリアルでは、FlashによるAIRアプリケーションの開発に必要な開発環境やAIRアプリケーション実行環境の準備、簡単なアプリケーションの作成から実行までの一連の流れをご紹介します。
伝(つて) まち・ひと・もの アーカイブプロジェクト
「伝(つて) まち・ひと・もの アーカイブプロジェクト」は、中部学院大学短期大学部経営情報学科による「地域人の育成を目指す」取り組みの一つとして立ち上げられたwebサイトです。
0の使用による、サーバ側ASPスクリプトを使用したMySQLデータの取得
XMLとサーバ側ASPスクリプトを使用してMySQLデータベースからデータを引き出すFlashアプリケーションの作成方法について説明します。
ラクラクかんたん
高性能な物理演算をFlash内で利用することができます。0向けに内容をバージョンアップしたものです。複数のビデオを1つのショーケースにまとめます。編集は簡単で、各ムービーのチャプター用にビジュアルサブナビゲーションと編集可能なキャプションも用意されています。制御された環境下で複数のユーザを対象にFlash Playerのインストール・使用状況を管理する、ITプロフェッショナルまたは管理専門職に役立つ、最新の情報を紹介します。
2007年を振り返り、クリエイティブ表現、テクノロジー、奇抜なアイデアといったさ まざまな点で突出したベストFlashサイトを紹介しましょう
パート2では、シンボル、アニメーションを作成し、バナーを機能させる簡単なActionScriptを作成します。0の世界を体験していただきたいと思います。
HTMLベースのAIRアプリケーション開発環境のセットアップ
HTMLベースのAIRアプリケーション開発環境のセットアップを解説します。0バージョンの相違点について学習します。
0への移行に関するヒント
最新バージョンのActionScriptを使用して初めてFlashアプリケーションを構築するときに陥りやすい問題を回避するために、これら15のヒントを適用します。
0を使った写真やビデオの反射効果
0ベースのカスタムクラスを作る方法を解説します。
Flash内のフレームにディープリンク 〜特定のページに直接リンクする〜
この記事では、FlashサイトあるいはFlashヘッダやナビゲーションの特定のパートに個別のURLでアクセスする方法を解説します。
0基本アクションコンポーネントの使い方
0ドキュメント用の基本的なアクション集
標準のUIボタンコンポーネントと組み合わせることで、インタラクティブなコンテンツがノンスクリプトで制作可能です。0用コンポーネントの作成方法をご紹介します。
キャプションがサポートされるFLVPlaybackコンポーネントスキンを使用したFlashビデオのキャプション設定*
Captionateまたはキューポイントを使用してFlashビデオプロジェクトにキャプションを追加し、それらのキャプションをSWFファイルで表示します。
これまでのデベロッパースポットライト*
その他のイベントを見る。
次のステップ
アドビRSSフィードについて*
製品間の連携*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0を使用したプログラミング-表示リストのプログラミング
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
0を使用したプログラミング
表示リストのプログラミング
0で作成される各アプリケーションには、表示リストと呼ばれる表示されるオブジェクトの階層があります。表示リストには、アプリケーション内のすべての表示可能なエレメントが含まれます。表示エレメントは、以下のグループの1つまたは複数に分類されます。ステージ:ステージは、表示オブジェクトのベースとなるコンテナです。各アプリケーションには1つのステージオブジェクトがあり、画面上のすべての表示オブジェクトが格納されます。ステージは最上位レベルのコンテナであり、表示リスト階層の最上位レベルにあります。Flash Playerは、HTMLページでSWFファイルを開くときに、そのクラスのコンストラクタ関数を呼び出し、作成されるインスタンス(常に表示オブジェクトタイプです)はステージオブジェクトの子として追加されます。0では、アプリケーションにおいて画面に表示されるすべてのエレメントのタイプは表示オブジェクトです。これらの様々なクラスは、ベクターシェイプ、ムービークリップ、テキストフィールドなどの異なるタイプの表示オブジェクトを表します。表示オブジェクトコンテナ:表示オブジェクトコンテナは特殊なタイプの表示オブジェクトであり、それ自体が視覚表現を持ち、さらに表示オブジェクトである子オブジェクトを含むこともできます。作成できるのは、定義された視覚表現を持つ特定の表示オブジェクトのインスタンスだけです。ActionScriptアプリケーションの表示リストには、アプリケーション内のすべての表示可能なオブジェクトが含まれます。表示リストは階層構造またはツリー構造と考えることができ、ステージは他のすべてのコンテンツの背面にあるオブジェクトです。
ステージには、SWFファイルのメインクラスのインスタンスが含まれます(例えば、Flash SWFのメインタイムラインや、Flex SWFのアプリケーションコンポーネントなど)
一方、メインオブジェクトは1つまたは複数の表示オブジェクトまたは表示オブジェクトコンテナを含むことができ、すべてのコンテナは追加の子オブジェクトを含むことができます。次の図は、SWFの表示リスト階層の例を示しています。子コンテンツ(コンテナの内部にあるすべての表示オブジェクト)は、常に親コンテナの前面に表示されます。表示オブジェクトコンテナに複数の子表示オブジェクトが含まれる場合、それらは順番に前面へと積み重ねられていき、表示オブジェクトコンテナがその順序を把握しています。
表示オブジェクトコンテナ内部の子表示オブジェクトの順序は、表示オブジェクトの深度、重ね順またはインデックスとして記述されることがよくあります(各表示オブジェクトの深度は整数のインデックスとして格納されるので、配列のインデックスのように、最も下の子が位置0、次が位置1などのようになります)
表示リスト上の表示オブジェクトについては様々なことを実行できますが、このクイックスタートでは、表示リストを使用して実行できる以下の一般的なタスクについて説明します。
表示リストへのオブジェクトの追加
表示リストでのオブジェクトの深度の変更
表示リストからのオブジェクトの削除
表示リストへのオブジェクトの追加
最もよく行われる操作は、表示リストに表示オブジェクトを追加することです。そのためには、子表示オブジェクトを作成し、コンテナのaddChild()メソッドを呼び出して、表示オブジェクトコンテナに子を追加します。デフォルトでは、表示オブジェクトはコンテナの子の前面に追加されます。子オブジェクトをスタック内の別の場所に挿入したい場合は、addChildAt()メソッドを代わりに使用できます。次の例では、3つの表示オブジェクト(Shapeクラスのインスタンス)を作成し、それをcontainerという名前のオブジェクトの子として表示リストに追加しています。オブジェクトを表示リストに追加するプロセスは、メインコードリストの中で行われます。このコンテンツを視聴するには Flash が必要です。この例のソースファイルをダウンロードするには、ここをクリックするか、またはFlashアプリケーションを右クリックして、コンテキストメニューから「ソースのダウンロード」を選択します。上記のSWFでは作成された3つのシェイプを示しており、表示リストの位置が描画方法にどのように影響するのかを示しています。リスト内の位置0にある円はその他のシェイプの下にあり、位置2にある三角形は一番上にあります。トップへ戻る。
表示リストでのオブジェクトの深度の変更
親コンテナのオブジェクトのスタック内で表示オブジェクトを前方または後方に移動する(深度を変更する)ための手法がいくつかあります。また、swapChildren()メソッド(両方の子オブジェクトへの参照がある場合)またはswapChildrenAt()メソッド(それぞれの子のインデックス位置がわかっている場合)を使用して、コンテナの2つの子オブジェクトの深度を交換することができます。オブジェクトのインデックスを知る必要がある場合、コンテナのgetChildIndex()メソッドを使用できます。または、インデックスがわかっていて、オブジェクトへの参照が必要な場合、getChildAt()メソッドを使用できます。
この例では、5つのシェイプを作成します(2つの円、2つの四角形、および1つの三角形)
任意のシェイプをクリックすると、選択されたラジオボタンの値("最背面に移動"、"背面に移動"、"前面に移動"、または"最前面に移動")に応じて、表示リスト上の深度が変更されます。getChildAt()を使用して、クリックされたオブジェクトよりも1つ小さいインデックスを持つオブジェクト(背面に移動する場合)、またはクリックされたオブジェクトよりも1つ大きいインデックスを持つオブジェクト(前面に移動する場合)への参照を取得します。また、短くするために、コードリストでは、最も関連性があるコード部分のみ表示しています。完全なソースを表示するには、Flashアプリケーションを右クリックして、「ソースのダウンロード」を選択します。このコンテンツを視聴するには Flash が必要です。この例のソースファイルをダウンロードするには、ここをクリックするか、またはFlashアプリケーションを右クリックして、コンテキストメニューから「ソースのダウンロード」を選択します。トップへ戻る。
表示リストからのオブジェクトの削除
実行できるその他のタスクとしては、表示リストからの表示オブジェクトの削除があります。コンテナの子リストから表示オブジェクトを削除するには、コンテナのremoveChild()メソッドを呼び出し、削除する表示オブジェクトをパラメータとして渡します。次の例は、表示リストからの子表示オブジェクトの削除を示しています。この例では、SWFのメインクラスのインスタンスに添付された9個の四角形(表示オブジェクト)があり、星型の表示オブジェクトがそれらの1つの下に隠されています。
任意の四角形をクリックすると、表示オブジェクトコンテナのremoveChild()メソッドが呼び出され、四角形がパラメータとして渡され、表示リストから四角形が削除されます(その結果、画面から四角形が削除され、星が四角形の下に隠れているかそうでないかがわかります)
注意:次のコードリストでは、最も関連性があるコード部分のみ表示しています。完全なソースを表示するには、Flashアプリケーションを右クリックして、「ソースのダウンロード」を選択します。このコンテンツを視聴するには Flash が必要です。この例のソースファイルをダウンロードするには、ここをクリックするか、またはFlashアプリケーションを右クリックして、コンテキストメニューから「ソースのダウンロード」を選択します。トップへ戻る。0のプログラミング』の"表示のプログラミング"を基に作成されています。このトピックについて詳しくは、次のリソースを参照してください。0のプログラミング』の"表示のプログラミングの基本"0のプログラミング』の"コア表示クラス"0のプログラミング』の"表示オブジェクトの操作"
関連するFlashクイックスタート
フォントの埋め込み*
表示リストのプログラミング
シンボルとドキュメントクラスの使用
配列を使用したプログラミング*
Vectorクラスを使用したプログラミング
著者について
Webアプリケーションをプログラミングしたり、Webアプリケーションについて執筆したり、Webアプリケーションについて教えていないときは、キッチン用品を集めたり、3人の子供たちとレゴの専門的技能やスターウォーズの雑学的知識のレベルを競ったり、その他の同じくらい重要なことをして過ごしています。
次のステップ
アドビRSSフィードについて*
製品間の連携*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
アドビ-Flashクイックスタート:シンボルとドキュメントクラスの使用
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
0を使用したプログラミング
シンボルとドキュメントクラスの使用
ActionScriptコードは、アクションパネルに入力されると、現在選択されているFLAファイルのフレームにリンクされます。SWFファイルは、コードの複雑さの一因ですが、タイムラインのフレーム上のコードであるフレームスクリプトによってのみ存在するコードからコンパイルできます。ただし、フレームスクリプトコードの使用にはいくつか難点があります。複雑さが増すので、コードの整理と管理がいっそう困難になります。以前に作成されたFLAのコードに対する拡張ができません。コードをFlexプロジェクトに簡単に移行できません。コードの変更はFLA内でのみ可能です。FLAファイルの作業を行えるのは、一度に1ユーザだけです。外部ファイルはオーサリングツールがなくても編集でき、そのためデザイナーとデベロッパーが協力して作業できます。形式化された構造はコードの品質向上も促進し、将来のFlashプロジェクトとFlexプロジェクトでの再利用が容易になります。
カスタムクラスの使用
そのためには、選択してあるすべてのステージアイテムの選択を解除し、プロパティパネルを開きます。このパネルには、背景色やフレームレートなど、ドキュメントに関連する設定が含まれます。また、「ドキュメントクラス」フィールドもあります。このフィールドに、AS拡張子を除いた外部ファイルの名前を設定します。このファイルには、AS拡張子より前のファイル名と一致する名前のパブリッククラスが含まれる必要があります。flaという名前で保存します。
Flashまたは任意のテキストエディタを使用して新しいASファイルを作成し、FLAファイルと同じディレクトリにMyClass
asという名前で保存します。asに次のコードを入力します。flaのプロパティパネルで、「ドキュメントクラス」フィールドに「MyClass」を設定して保存します。*名前空間の他の読み込みと同様に、タイムライン上で記述されるコードには必要ありません。
外部ファイルでは自動的に読み込まれないため、flash
*名前空間のクラスを使用する外部ActionScriptファイルのコンパイルを正常に行うには、読み込みステートメントが不可欠です。トップへ戻る。
デフォルトでは、Flashドキュメントのライブラリ内のムービークリップシンボルのインスタンスは、動的には作成できません(つまり、ActionScriptから作成されます)
これは、ActionScriptで使用するために書き出される各シンボルにより、SWFファイルのサイズが大きくなるためです。ライブラリパネルでシンボルを選択し、シンボルプロパティダイアログボックスを開きます。これにより、「クラス」フィールドと「基本クラス」フィールドが使用可能になります。デフォルトのままにするか、またはそれぞれに適切な名前を入力します。「OK」ボタンをクリックして、変更を保存します。シンボルがビヘイビアとしてカスタムクラスを使用するよう指定するには、パッケージ名を含めたクラスの完全な名前をこのフィールドに入力します。ActionScriptでシンボルのインスタンスを作成できる必要はあるがビヘイビアを追加する必要はない場合は、クラス名をそのままにしておくことができます。リンケージ設定を変更すると、Flashは、「クラス」フィールドで指定されているクラスの定義を外部ActionScriptファイルで検索します。定義が見つからない場合は、警告が表示されます。MovieClipクラスの機能以外の追加ビヘイビアが必要ない場合は、この警告を無視して構いません。クラスは自動的に生成されます。自動的に生成されるクラスは、次のような内容になります。
基本クラスの値のデフォルトはflash
外部クラスの機能を使用する自動的に生成されるクラスを使用しない場合は、このデフォルトを使用します。基本クラスは拡張と同じ意味ではありません。それ自体が別のクラスを拡張するカスタムクラスを指定する場合、そのスーパークラスを基本クラスとして指定する必要はありません。
ただし、例えば機能は同じでスキンが異なる2つのシンボルRedFishとBlueFishが必要な場合は、オーサリングツールを使用して異なる外観を作成した後、それらの基本クラスをFishに設定し、外部のFish
asファイルのFishクラスを使用して両方の魚に機能を提供します。カスタムクラスを作成するときは、自動的に生成されるクラスと同じ構造の外部ファイルを作成し、適切なプロパティとメソッドをそのクラスに追加します。例えば、幅が50ピクセルで高さが50ピクセルの円を含むムービークリップシンボルがあり、このシンボルをCircleという名前のクラスでActionScriptに書き出すよう指定するものとします。
次のコードは、FLAファイルと同じディレクトリに保存されるCircle
次のコードは、Flashドキュメントのフレーム1のキーフレームに配置され、シンボルのインスタンスを作成して画面に表示します。このコードは、個別のアセットをステージにドラッグする方法の代わりとなる、ActionScriptベースのインスタンス化を示しています。この例では、ムービークリップのすべてのプロパティに加えて、Circleクラスで定義されているカスタムメソッドも持つ円が作成されます。トップへ戻る。
カスタムクラスの使用
タイムライントゥイーンは、数が増えると、作成と管理が困難になる場合があります。特に、最初のトゥイーンとアニメーションの開始が異なるフレームの場合です。外部クラスを使用すると、このプロセスを単純化し、変更が容易になります。例えば、雪が降るアニメーションの作成について考えてみます。可能性のあるワークフローの1つは、タイムライントゥイーンとフレームスクリプトを使用することです。この方法では、雪片のシンボルを作成し、舞い落ちてくるシンボルの一連のトゥイーンを提供します。その後、複数のインスタンスをステージの上部に横に並べて配置します。ムービーを実行すると、複数の雪片が舞い落ちてきます。この時点では、個々の雪片の外観とアニメーションがまったく同じなので、それほどリアルな降雪には見えません。個々の雪片を選択してアルファプロパティを変更することで、変化を付けることができます。また、雪片のシンボルを複製し、ゆっくり落ちてくる雪片や横に広がる雪片を新しく作成することもできます。ただし、この方法には欠点があります。最後の雪片を作成しているときに、最終キーフレームでアルファプロパティを0に設定すれば消えていく雪片を表現できることに気付いた場合、各雪片のムービークリップを変更する必要があります。オーサリングツールを使用してこのような方法で多様性を追加することは可能ですが、それによって得られるメリットは時間と手作業の精度に依存し、その後の変更はあっという間に時間のかかる困難な作業になってしまいます。複数の雪片のムービークリップを作成してそれぞれを異なるトゥイーンにする代わりに、ActionScriptに書き出すものを1つ作成し、そのシンボルプロパティでSnowflakeという名前のカスタムクラスを指定します。最後に、雪片のビヘイビアを定義するプロパティとメソッドを追加します。プログラムによるアニメーションは、オーサリングツールで作成される多数のトゥイーンの代わりに使用できます。雪が降るアニメーションを作成するには、黒い背景のFLAファイルに次のコードを追加します。このコンテンツを視聴するには Flash が必要です。この例のソースファイルをダウンロードするには、ここをクリックします。トップへ戻る。合計800個の雪片が作成され、それぞれの雪片は異なるサイズ、速度、および色の特性を持っています。また、外部クラスを変更すると、視覚表現に大きなエフェクトを付けることができます。結果的に、オーサリングツールを使用して手動で作成したものよりも、よりリアルな降雪に見えます。タイムラインを使用して作成されたアニメーションは、適用可能なイージングおよびフィルタを保持したまま、モーションXMLエレメントを使用してActionScriptに移行できます。これを行うには、トゥイーンを囲んでいる一連のフレームを選択し、Flashの「コマンド」メニューから「モーションXMLの書き出し」を選択します。書き出された基本的なXMLファイルは、次のようになります。ステージでオブジェクトを選択して「モーションXMLの読み込み」コマンドを実行するか、Animatorクラスを使用して、コードによってモーションXMLエレメントを表示オブジェクトに適用することにより、XMLをオーサリング環境に読み込み直すこともできます。次の例では、Animatorクラスを使用して、モーションXMLエレメントを、ステージ名ボックス上にある表示オブジェクトに割り当てています。トップへ戻る。
関連するFlashクイックスタート
フォントの埋め込み*
表示リストのプログラミング
シンボルとドキュメントクラスの使用
配列を使用したプログラミング*
Vectorクラスを使用したプログラミング
著者について
Buck DeForeは、アドビドキュメンテーションチーム所属の開発者兼ライターです。
次のステップ
アドビRSSフィードについて*
製品間の連携*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0を使用したプログラミング
Vectorクラスを使用したプログラミング
配列は、いくつかの変数をグループ化したコンテナのようなものです。1つの配列に、複数の異なる値を格納できます。配列に含まれる個々の値(配列の要素)を格納したり取り出したりできます。また、配列変数を直接操作することで、値をまとめて処理することもできます。配列の最も一般的なタイプは、インデックス付き配列です。これは、配列の値を選択するために数値インデックスを使用するものです。
Arrayクラス:任意のタイプの値を要素として持つインデックス付き配列
異なるタイプの値を同じ配列に格納することもできます。
Vectorクラス:要素がすべて同じクラスのインスタンスであるインデックス付き配列
同じデータタイプの複数の値を格納する場合、VectorクラスはArrayクラスに比べていくつかの利点があります。第1に、Vectorのすべての要素は同じデータタイプでなければならないので、ActionScriptコンパイラーはコードのコンパイル時にデータタイプをチェックできます。正しくないタイプの値を追加したり取得したりしようとするコードは、コンパイル時に発見できます。データタイプは実行時にもチェックされるので、コンパイル時にデータタイプをチェックできない場合でも、データタイプの制限は有効に働きます。タイプチェックの利点に加えて、Vectorクラスを使用するコードは、Arrayクラスを使用する同等のコードよりもかなり高速に動作します。これは大きな利点です。このクイックスタートでは、Vectorクラスの作成と操作の方法を解説します。以下のセクションでは、Vectorオブジェクトを操作するための一般的な作業について説明します。このクイックスタートを最大限に活用するには、次のサンプルファイルが必要です。このサンプルアーカイブには、次のファイルが含まれます。
fla:このクイックスタートの「Vectorインスタンス内の値のソート」で扱われているVector内のカスタムオブジェクトのソートを解説する例
この記事に必要な予備知識
Vectorオブジェクトは、特定のクラスの値だけを格納するインデックス付き配列です。ベースタイプは、Vector変数を宣言するときと、Vectorクラスのコンストラクターを呼び出してVectorオブジェクトを作成するときに指定します。当然のことながら、Vector変数に対して指定するベースクラスは、コンストラクターを呼び出すときに指定するベースタイプと一致する必要があります。Vectorインスタンスを作成する際に、ベースタイプを指定するには、タイプパラメーターシンタックスと呼ばれる形式でVectorクラス名に追加情報を指定します。このシンタックスは、Vectorクラスのコンストラクターを呼び出して実際にVectorオブジェクトを作成する場合にも使用します。原則として、Vectorというクラス名がコードに現れる場所では、必ずタイプパラメーターを使用します。もちろん、変数の宣言とインスタンスの構築を1行のコードにまとめることもできます。このクイックスタートの例では主にStringやNumberといった単純な組み込みクラスを使用していますが、Vectorのベースタイプとしては任意のクラスが使用できます。これには、ユーザーが定義したカスタムクラスも含まれます。例えば、MyClassという名前のクラスがコード内で定義されているとします。この場合、次のコードを使用して、すべての要素がMyClassのインスタンスであるVectorを作成できます。Vectorクラスのコンストラクターには、Vectorインスタンスの性質を指定するための2つのオプションのパラメーターがあります。デフォルトでは、Vectorは作成したときには空(要素の数が0)です。ただし、lengthパラメーターを渡すと、Vectorは指定した数の要素が作成された状態でインスタンス化されます。Vectorのサイズをあらかじめ指定しておく方が、要素を1つずつ作成するよりも高速なので、Vectorの要素数があらかじめわかっている場合は、lengthパラメーターの値を指定することをお勧めします。それ以外の場合、各要素の初期値はnullです。Vectorオブジェクトのもう1つの機能として、長さを固定することができます。すなわち、値を変更することはできますが、値を追加したり削除したりしてその総数を変更することはできなくなります。デフォルトでは、Vectorインスタンスの長さは固定されていません。これにより、Vectorを固定長にしたり、固定長の制限を外したりできます。Vectorオブジェクトに値を追加するのは、Arrayオブジェクトに値を追加するのに似ていますが、1つ追加の制限があります。すなわち、Vectorのインデックス位置4に値を追加するには、インデックス0~3に既に値が存在する必要があります。
このため、Vectorに新しい要素を追加する場合、Vectorオブジェクトのlengthプロパティに等しいインデックス位置にしか追加できません(Vectorの最初の要素のインデックスは0なので、lengthプロパティの値はVectorの最後の要素のインデックスよりも常に1だけ大きくなります)
次のコードリストは、この技法を示します。これらのメソッドには、引数として複数の値を渡すこともできます。この場合、すべての値が一度にVectorに追加されます。ただし、この方法は便利ですが、欠点もあります。push()またはunshift()メソッドを使用してVectorに値を追加した場合、コンパイラーは値のデータタイプが一致するかどうかをチェックできません。したがって、コードでpush()またはunshift()を使って間違ったタイプの値をVectorに追加しようとした場合、コードを実行するまでエラーは検出されません。Vectorオブジェクトから値を取得する方法は、Arrayオブジェクトから値を取得する方法と同じです。特定のインデックスの要素の値を取得するには、配列アクセス([])演算子を使って、必要な要素のインデックスを指定します。配列アクセス([])演算子は値を取得するだけで、値をVectorオブジェクトから削除しません。値を取得してVectorオブジェクトから削除するには、pop()メソッド(最後の要素を削除)またはshift()メソッド(要素0を削除して残りのすべての要素を1つ前に移動)を使用します。Vectorオブジェクトに対する操作のほとんどは、Arrayオブジェクトの場合と同じです。主な違いの1つとして、Vectorの要素をソートする方法が挙げられます。その代わりに、ソートされた値を含む同じベースタイプの新しいVectorを返します。このため、sort()メソッドを使用するには、ソートロジックを定義するカスタムソート関数を常に指定する必要があります。この例では、コードは基本的な数値ソートを実行し、小さい数が大きい数よりも前に配置されます。ソート関数は任意のデータタイプに対して定義できます。
次のステップ
0言語リファレンスの次のエントリを参照してください。
関連するFlashクイックスタート
フォントの埋め込み*
表示リストのプログラミング
シンボルとドキュメントクラスの使用
配列を使用したプログラミング*
Vectorクラスを使用したプログラミング
著者について
Paulはアドビ認定デベロッパーであり、インディアナ大学からインストラクショナルシステム技術に関する修士号を得ています。RIAとコードライブラリの開発*、RIA開発に関する執筆*、RIA開発に関する講演*を行う以外の時間には、写真を撮ったり、台所用品を集めたり、あるいはレゴの技術やスターウォーズに関する知識といった重要な分野で3人の子供たちに負けないように努力したりしています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ページとステートの処理
プロジェクト内でのポップアップウィンドウの作成
ステート間のトランジションのデザイン
配布用プロジェクトのパブリッシュ
印刷用に表示
Adobe Flash Catalystは、コーディングすることなしにアプリケーションインターフェイスとインタラクティブなコンテンツを迅速に作成するための、新しいプロ向けインタラクションデザインツールです。Flash Catalystを使用すれば、インタラクティブな広告、製品マニュアル、デザインポートフォリオ、リッチメディアアプリケーションのユーザーインターフェイスを作成できます。これから作業するサンプルプロジェクトは、EcoToursという仮想のWebサイトをベースにしています。チュートリアルを開始する前に、以下のスクリーンキャストを参照してEcoToursプロジェクトのスコープを把握しておいてください。このチュートリアルでは、静的なファイルを完全にインタラクティブでマルチメディアのインターフェイスにするためのあらゆるスキルとテクニックを扱います。具体的な学習内容は以下のとおりです。
静的ファイルをインタラクティブなユーザーインターフェイスに変換する方法
独立したステートとボタンコンポーネントを作成して、様々なステート間を移動できるようにします。Flash Catalystベータ版は、レイヤーを使用することで、様々なステート間でのアートワークの表示を管理します。特定のツアーステートでは、ツアーの詳細が表示されるポップアップ領域を作成します。この過程で、レイヤーの移動、サイズ変更、およびフェードなど、ページ間やステート間でのステートのトランジションに伴うデフォルトアクションとカスタムアクションの作成方法を学習します。
完成したプロジェクトをプレビューしてSWFファイルにパブリッシュする方法
このチュートリアルを効果的に学習するには、以下のソフトウェアとファイルが必要になります。このZIPアーカイブには以下のファイルが含まれます。
2つのコンパイル済みビルド(1つはWeb展開用、もう1つはローカル実行用)
この記事に必要な予備知識
著者について
のオーナーかつビジュアルコミュニケーションデザイナーかつ教育コンサルタント
Macromedia、アドビ システムズ社、Appleなどの企業を相手に10年以上の経験を持ち、マーケティングおよびプロダクトチームと協力して、世界レベルの教育プロダクト、カリキュラム、ラーニングコンテンツの作成に尽力してきました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
日食などの天文現象を世界各地からインターネットで中継している非営利団体「ライブ
ユニバース」は、2005年4月9日 (土) 午前5時から午前8時 (日本時間) に、パナマと太平洋上の 2 地点で観測された金環・皆既日食をインターネットで中継しました。
この日食中継プロジェクト「LIVE
日食の模様がインターネットでライブ中継されるまで
この時は、配信サーバ1台のシンプルな構成で、同時アクセス数 731、総アクセス数 5000を記録しました。(詳細は、RBB TODAYの記事をご覧ください) 今回はさらに規模を拡大して、配信サーバを多段に配置し、オリジンサーバ1台、クライアント配信用のエッジサーバ3台という構成で行いました。このオリジンサーバは、エッジサーバに配信するためのサーバで、クライアントからのアクセスは受け付けないようにしています。このように多段構成にすることで、より多くのクライアントに安定した配信を提供できます。この構成は、FCS のサーバサイドスクリプトを利用して実現することができます。クライアントからのアクセス要求を複数のサーバに振り分ける「サーバロードバランス」は、有限会社クロスエッジ・システムズが作成したプレイヤのアクションスクリプトによって実現しています。もし接続したサーバからのレスポンスが20秒以上帰ってこなかった場合、もう1台のサーバに接続するという仕組みになっています。このようにプレイヤのアクションスクリプトとDNSを利用すれば、ロードバランサーの機器を導入するよりも安価で確実に負荷を分散することができます。com」の 2 台のサーバに振り分ける設定をする。
大規模配信と謳いながら、「実際は、配信サーバ 2 台しか使っていないのか
」と疑問に思われるかもしれませんが、あえてサーバの台数を少なくしたのは、FCS が限界に近づいたときの挙動や配信限界値を測定したいと考えたためです。また、FCS 1 台あたりでどれだけのクライアント数、トラフィックに耐えられるかというデータは、商用サービスを念頭に置いた際、貴重な情報となり得ます。これらは、実験だからこそできたのだと思います。
エンコーダ、サーバのスペック
マクロメディアのサイトに掲載されている必要なシステム条件 と比較すると、ややオーバースペック気味ではありますが、参考までにエンコーダ、サーバに使用したマシンのスペックを紹介します。
ライブエンコーダは、今回の配信用に作成したエンコーディング用カスタム SWF を使用
フェイルオーバーの順番は、しかし、rtmp はメジャーなプロトコルではなく、ファイアウォールでポートを閉じているケースが多いと想定されます。フェイルオーバーすると、接続までに時間がかかってしまうので、一番目に rtmpt (http トンネリング) にアクセスするように設定しました。rtmpt は、rtmp パケットを http パケットでカプセル化しているため、配信効率が下がる上、サーバの負荷が高まってしまうのが懸念されましたが、実験ということであえて採用しました。FCS が出力するログは、アクセスログとアプリケーションログの 2 種類ありますが、どちらもバイナリ形式(表示内容: クライアントのアクセス情報
ログ出力を有効にする方法: FCS のサーバ設定ファイルの一つである Vhost
この画面には、同時接続クライアント数や、総アクセス数、拒否されたクライアント数、データの入出量がリアルタイムに表示されます。これは、現在のサーバステータスを表示しますが、ログとして格納されるわけではないので、推移までは分かりません。そこで、今回の実験のために株式会社 アゼスト が作成したサーバモニタリングツールを使用しました。このツールは、サーバ管理 API を利用してサーバステータスを 10 秒おきにログとして格納するので、このログを元にステータスの推移グラフを作成することができます。
当日のアクセス状況
マクロメディアのトップページでの告知や、Yahoo
のトップページ、新聞などで取り上げられたおかげで、休日の早朝という状況にもかかわらず、予想以上にアクセスが殺到しました。なお、1クライアントあたりのビットレートは 300Kbps なので、1Gbps 近くのトラフィックを送出したことになります。
トップページに掲載された中継告知
今回の実験のポイントであった4点については、次のような結果でした。特にトラブルもなく配信できました。また、大量にアクセスが来たときのレスポンスが悪く、Windowsサーバにリトライしたクライアントが続出してしまったようです。最大同時接続数は、749でした。おそらく何かボトルネックがあって、リソースを十分使えていないように見えます。
FCSのメモリ使用率
多段構成による配信 (スプリッティング)
エッジサーバにアクセスが集中しても、特にトラブルもなく配信できました。事前のラボテストでは均等に割り振られていることを確認できましたが、実際には、FCS 1 と FCS 2 のパフォーマンスの違いにより、アクセス数に開きが出てしまいました。これは、FCS 1 にアクセスしたものの、20 秒以内にレスポンスがなく、タイムアウトのため FCS 2 に割り振られたと推測できます。FCS に関する情報が少ない中で大規模配信実験を行うのは、非常に苦労しましたが、実験参加者の多大な協力のおかげで成功することができました。ただ、Linux 版の FCS のパフォーマンスが十分に発揮されなかったのが非常に気になります。今回使用したマシンには、最低限のセキュリティ対策は施しましたが、FCS に特化したチューニングは行っていないので、どのようなパラメータのチューニングがパフォーマンス向上に繋がるのか模索していきたいと考えています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
中継映像をライブエンコーディング
印刷用に表示
クライアントである関西テレビ(KTV)では1996年から大阪国際女子マラソンをあらゆる技術を使ってインターネットに配信しています。
エンコーダからサーバへの接続については、スタジオに設置したエンコーダから、INS1500 を経由して2ヶ所の中継サーバに接続し、そこから国内に複数拠点要している配信拠点のエッジサーバ(エンドユーザにストリーミングを配信するサーバ)にライブストリームをスプリッティング
各サーバへのユーザーナビゲーションついては、GTM(グローバルトラフィックマネージャ)でネットワークの混雑状況やサーバの負荷状況をみてダイナミックにサーバの割り当てを実施することにより、安定的な配信を実現しました。なお、今回は過去の大阪国際女子マラソンの配信実績を考慮し、お客様の要望の沿うべく最大同時アクセス時において 2Gbps を超える配信が可能となるよう配信サーバの割り当てを実施しました。
関西テレビからクライアントまでの配信図
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
クライアントである関西テレビ(KTV)では1996年から大阪国際女子マラソンをあらゆる技術を使ってインターネットに配信しています。
エンコーダからサーバへの接続については、スタジオに設置したエンコーダから、INS1500 を経由して2ヶ所の中継サーバに接続し、そこから国内に複数拠点要している配信拠点のエッジサーバ(エンドユーザにストリーミングを配信するサーバ)にライブストリームをスプリッティング
各サーバへのユーザーナビゲーションついては、GTM(グローバルトラフィックマネージャ)でネットワークの混雑状況やサーバの負荷状況をみてダイナミックにサーバの割り当てを実施することにより、安定的な配信を実現しました。なお、今回は過去の大阪国際女子マラソンの配信実績を考慮し、お客様の要望の沿うべく最大同時アクセス時において 2Gbps を超える配信が可能となるよう配信サーバの割り当てを実施しました。
関西テレビからクライアントまでの配信図
中継映像をライブエンコーディング
エンコーダの設定については、クライアントからの要望で「テロップ等の文字が読めること」、「実況の音声が明瞭に聞こえること」、「各選手の表情がわかること」の3つを特に考慮し、動きの滑らかさよりも品質を重視した設定を選びました。ライブエンコーダ(オリジナルで作成したエンコーディング用カスタム SWF)はブロードメディア CDN の「Flash Video ストリーミング」サービスにて標準提供しており、インプットの映像、中継サーバからの映像、エッジサーバからの映像を切り替えて確認することが可能となっており、その場でクライアント側のクオリティチェックをしながらエンコードパラメータを確認しました。
ライブエンコーダの画面
また、今回はライブ配信の直後にオンデマンドでリプレイを公開致しました。
ライブ用にエンコードしたものをサーバ側でアーカイブする方法も検討しましたが、リアルタイムに
flv ファイルをライブとほぼリアルタイムに作成し、作成後、直ぐにFTPにてブロードメディア CDN のオンデマンド用のサーバにアップロードして対応しました。
(オンデマンドは当日のみのサービスで現在は終了しています)
関西テレビのスタジオから配信
フルFlashで作成されたインターフェイス
今回の大阪国際女子マラソン特設サイトはレース順位や選手の情報等、Flash を駆使して作成されております。このようなマラソン中継等に代表されるイベントサイトは、通常に比べ、数倍から数十倍といった突発的なアクセスが想定され、従来では、なかなか目的の Web サイトにアクセスすることが難しく、最終的にストリーミングを見ることが出来ないといったこともありますが、これらの Web サイトの高負荷に備えるべく、画像や Flash 部分にブロードメディア CDN の「オブジェクト配信」サービスを導入させて頂きました。TV 放送時にサイトの URL を告知した際、予想通りイベントサイトにアクセスが集中しましたが、オブジェクト配信の導入により、エンドユーザにとってストレス無く安定的なパフォーマンスで Web ページの閲覧が可能となりました。「ページのデザインに際しては、動画配信に Flash を用いる事のメリットを活かし、動画や情報をユーザが自在に扱えるような、高度なインターフェイスを目指しました。結果として、ページ内で自由に配置できるフローティングウィンドウ形式を実現できました。また、動画のプログレスバーによるシーク、ウィンドウ折り畳み/展開のアニメーション、適時更新される順位情報をクリックして選手情報を表示できるなど、操作性を考慮した機能を柔軟に設計することが出来ました。今回は Flash Video を活用した初の試みという事もあり、準備から本番まで様々考慮する点がありましたが、クライアント側の視聴に影響するようなトラブルも無く、Flash Video のライブストリーミングとしては国内最大規模のライブ配信を実現できました。今後もブロードメディア CDN では、ライブストリーミングをはじめとした配信サービスで、イベントの中継をトータルにサポートしていきます。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ファイルオブジェクトを使用したビデオオンデマンドおよびMP3再生 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
クライアントサイドの設定の確認
印刷用に表示
ファイルオブジェクトを使用したビデオオンデマンドおよびMP3再生
Flash Media Server 2は、従来のストリーミングメディア配信機能と、メディアを作成してユーザに配信するための柔軟な開発環境を組み合わせた独自のメディアサーバです。ビデオオンデマンド、Webイベントのライブブロードキャスト、MP3ストリーミングなどの従来のメディア配信機能に加え、ビデオブログ、ビデオメッセージング、およびマルチメディアチャット環境などのリッチなメディア通信アプリケーションを提供します。この機能を使用すると、サーバ上の定義済みサンドボックスへのリアルタイムによる読込み/書込みが可能なため、Flash Remotingを使わずにコンテンツ管理システムおよびデータベースアプリケーションを構築できます。これはファイルオブジェクトアプリケーションを使用した単純な例ですが、さらに拡張が可能です。この記事では、Flash Professional 8を使用して作成した定義済みのコンポーネントを使ってFLVおよびMP3をオンデマンドで表示する単純なアプリケーションについて説明します。このアプリケーションは、開発者がサーバ上に指定した場所からFLVおよびMP3を自動的に取得しますが、他の用途のために拡張可能です。例えば、JPEGを使用したフォトアルバム用にこのアプリケーションをカスタマイズするには、JPEGを呼び出すように単にフィルタを定義し直します。これは、XML駆動の再生リストに代わる手法です。このチュートリアルでは、次のソフトウェアおよびファイルのインストールが必要です。
チュートリアルおよびサンプルファイル:
基礎知識の習得については、次を参照してください。0のクラス構造およびオブジェクト指向プログラミングの基礎を理解している必要があります。これらの知識の習得については、次を参照してください。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ファイルオブジェクトを使用したビデオオンデマンドおよびMP3再生 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
クライアントサイドの設定の確認
ファイルオブジェクトを使用したビデオオンデマンドおよびMP3再生
クライアントサイドの設定の確認
このクライアントサイドの設定は、基本的なOOPの原理を使用して既存のコンポーネントとともに構築されているのでシンプルです。クライアントサイドのフレームワークは、OnDemandPlayerフォルダに置かれた次のファイルで構成されています。FLAは、次の3つの基本的なコントロールで構成されています。これらのクライアントサイドコンポーネントの接続は非常にシンプルです。重要なポイントについて説明します。
スケーラブルなアプリケーションにOOPの原理を使用する際の一般的なベストプラクティスとして、ムービークリップをクラスとして添付します(図2を参照)
flaに添付する方法がわからない場合は、ライブラリを確認してください。これは #includeファイルの使用に相当しますが、ライブラリからムービークリップを添付するだけで、さらに管理しやすくなります。
サーバとの接続
サーバとのファイルアクセスハンドシェイクは、基本的なmakeConnection関数を使用して設定します。
フォルダディレクトリのパブリッシュ
ストリームの長さの取得
ascファイルから情報を取得する必要があります。
ファイルオブジェクトのリストの取得
クライアントサイドで、ストリーム名に加えて、配列のファイルオブジェクトに関するその他の情報を収集する必要があります。オブジェクトretValに含まれるのはストリーム名だけではありません。これは、サーバサイドでリストコマンドを使用して収集できる詳細情報の一例です。
高度なリソース
Flash Media Serverのファイルアクセス機能とファイルオブジェクト機能を使用する方法は、XML駆動のデータリストに代わって内容を表示する簡単な方法です。この記事で示した例は、サーバ上にあるメディアを閲覧するだけの簡単な使用例です。他のアプリケーションでは、XMLの拡張性と構造を、簡単なファイルアクセスと組み合わせて、Flash Media Serverオンデマンドアプリケーション用の最適な方法として使用できます。このアプリケーションを使用すると、FlashビデオとMP3メディアコレクション全体をサーバ上に簡単にドロップして、コレクションをストリーミングできます。私自身、開発者として困難な問題に直面したときには、この貴重なリソースを頼りにしています。ただし、Googleによる単純な検索を使用しているので、質問内容については注意が必要です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Adobe Flash Player 10は、軽量なブラウザープラグインで、一貫性のある魅力的なユーザー体験、驚きのオーディオ/ビデオ再生を提供するリッチなインターネットアプリケーションランタイムとして、さまざまなプラットフォームに広く普及しています。これは、オープンテクノロジとオープンソースコミュニティの参加によって構築される次世代のAdobe Flashプラットフォームの基礎となるものです。Adobe Flash Player を利用すれば、どのオペレーティングシステムやブラウザーでも同じように動作する、安全かつ表現力豊かな高性能アプリケーションを提供でき、企業のITポリシーに従うよう、どのようなインストール体験が提供されるかを細かく制御することも可能であることを説明します。検索エンジンがSWFコンテンツをクロールしてインデックスに登録できるようにするための課題と、検索ランキングの順位を上げるために今すぐ実行できる方法を解説します。このプレゼンテーションでは、SWFAddressライブラリを使ってSWFファイル内の直接リンクやディープリンクを実現する方法を解説します。SWFアプリケーションをスキャンしてセキュリティの脆弱性を検出するWindows用の無料のツールについて説明します。
Flash Player 10の最新機能に関する情報を入手:さらにクリエイティブな表現、映像パフォーマンスの向上、およびコミュニティからの要望による機能拡張
このアップデートでの小規模な変更により、SWFコンテンツに影響を与えずにセキュリティを強化できること、および今後の製品アップデート情報を入手する方法について説明します。Flash Playerで動作するWebアプリケーションのセキュリティを確保するためのガイドラインを紹介します。今すぐダウンロード ›リリースノートを読む ›必要システム構成の確認 ›問題発生の詳細* ›Flash Player 10のセキュリティアーキテクチャが、ユーザへの信頼されたコンテンツの配信にどのように役立つかを学習します。しかし、それに伴って一部の Flash コンテンツが閲覧できないというトラブルが報告されています。バージョン関係のトラブルでお困りのコンテンツ制作者の方は、ぜひご一読ください。使いやすく、代替コンテンツにも対応でき、しかも、Web標準規格をサポートするだけでなく、JavaScriptデベロッパーに包括的なAPIをも提供する、最新の埋め込み・検知メカニズムの使用法を紹介します。に提供し、Flashファイル フォーマット(SWF)のインデックス作成用検索機能を強化した今回の発表について学びます。
264ビデオおよびAACオーディオのサポートについての説明
Flash Player 9の最新の機能で作成したFlash互換ビデオ、コンテンツ、およびアプリケーションの高度なユーザエクスペリエンスを実現します。Flash Player 10でのセキュリティに関する変更に伴って、互換性を確保するために既存のコンテンツを変更する必要があるかどうかを検討します。Flash Playerで動作するWebアプリケーションのセキュリティを確保するためのガイドラインを紹介します。Flash Playerがお使いのマシンに関して収集する情報の正確なリストと、その安全性について説明します。
セキュリティに関する記事を表示する*
使いやすく、代替コンテンツにも対応でき、しかも、Web標準規格をサポートするだけでなく、JavaScriptデベロッパーに包括的なAPIをも提供する、最新の埋め込み・検知メカニズムの使用法を紹介します。制御された環境下で複数のユーザを対象にFlash Playerのインストール・使用状況を管理する、ITプロフェッショナルまたは管理専門職に役立つ、最新の情報を紹介します。検知とインストールに関する記事を表示する。
普及率の高さ
開発者、設計者、ビデオプロフェッショナル向けに強化された機能など、SWFコンテンツの様々なタイプの作成者が利用できる多数の新機能について説明します。次世代のアプリケーション、コンテンツ、ビデオのためのプレーヤーの改良点について説明します。エンドユーザーからソフトウェアエンジニアまで-特定用途のためにプレーヤーにライセンスを付与する方法を説明します。
デベロッパー向け機能
SWFファイルの代替コンテンツの提供
Webコンテンツの総合的なユーザ体験と検索エンジンとの親和性を高める方法を紹介します。新しいユーザーインタラクションの要件を解説します。その制限、存在理由、および協調して動作するコンテンツの作成方法を説明します。0 APIで直接のエンドツーエンドRTMFP接続を管理する方法について解説します。新しい公開バグシステムを紹介します。高性能な最新のグラフィックスプログラミング言語の概要を紹介するとともに、画像やベクトルグラフィックスをはじめとする様々な表示オブジェクトに、フィルタ、ブレンド、面の塗りを適用する方法を解説します。Flex 3のランタイム共有ライブラリを使用して、RIAのダウンロード時間を短縮し、起動時間を改善します。0コードを最適化することでパフォーマンスを向上させるのに役立つソリューションとツールを紹介します。
ガベージコレクションについて*
アドビとMozillaは、Tamarinオープンソースプロジェクトで提携することで、アプリケーション、コンテンツ、ビデオを作成するための標準言語の導入が促進されることを期待しています。
次のステップ
アドビRSSフィードについて*
アクティブコンテンツ/IEの変更
企業への導入
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
SWFファイルの代替コンテンツの提供 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
SWFファイルの代替コンテンツの提供
これまでHTMLページにSWFファイルを埋め込む際には、Adobe Flash Player向けのリッチメディアコンテンツをパブリッシュする仕組みの一環として、2重のタグ*を用いる方法が多用されてきました。この方法の一番の欠点といえば、最近のWeb標準との準拠性に欠ける旧式のベンダ固有のマークアップが用いられるということです。また、この方法ではマークアップ内に代替コンテンツを含めることもできません。この問題を解決するために開発されたのが、リッチメディアコンテンツをWebページに埋め込む際に、標準規格との親和性にも優れたいくつかの方法を提供するSWFObject 2*です。SWFObject 2は、プラグインなしでWebを閲覧するユーザのための代替コンテンツの使用や、検索エンジンが当該コンテンツをインデックスしやすくするための支援策、さらには、ビジターをFlash Playerのダウンロードページに誘導することにも対応しています。SWFObject 2には、Flash Player向けのリッチメディアコンテンツを埋め込む方法としてスタティックパブリッシングとダイナミックパブリッシングの2種類が用意されています。どちらのパブリッシング方法でも代替コンテンツは利用できるものの、用いられるテクニックには違いがあります。スタティックパブリッシングではHTMLのobject要素*が用いられ、SWFコンテンツと所定の代替コンテンツのどちらを表示するかを、ブラウザが判断できるようにします。2つのパブリッシング方法には幾分の違いがあります。例えば、仮にエンドユーザのブラウザにFlash PlayerがインストールされているもののJavaScriptが無効化されているようなケースでは、スタティックパブリッシングはリッチメディアコンテンツを表示できるもののダイナミックパブリッシングではこのコンテンツを表示することができません。また、どのパブリッシング方法を利用するかによって、代替コンテンツとSWFコンテンツ(サポートされている場合のみ)では検索エンジンが解釈する内容に違いが出ることもあります。このチュートリアルではWebコンテンツの総合的なユーザ体験と検索精度を高める上で有効な、代替コンテンツの使用法について解説します。このチュートリアルを完了するには、次に挙げるソフトウェアまたはファイルをインストールする必要があります。
任意のコードエディタ
この記事に必要な予備知識
また、Web制作者の多くはJavaScriptに依存するパブリッシュ方法を使用していますが、サイトビジターの約6%*は必要なスクリプティングサポートを擁していないことにも注意が必要です。しかも、この統計はパソコンを使用するユーザに限られたものです。デバイス機器の多くにはインターネットにアクセスするための何らかの機能が装備されていますが、現在のところ、Flash Player 9を装備して出荷されているものは限定的です。他のデバイスではより古いバージョンのFlash Playerがサポートされていたり、最悪の場合、Flashプラグイン向けのコンテンツが一切サポートされないものもあります。サイトビジターにこのロゴを見せたいと思う方は居られないはずです。
サポート対象外のコンテンツを示すiPhone上のロゴ
このような問題に対するベストプラクティス的な解決策を提供するのが、代替コンテンツです(フォールバックコンテンツとも呼びます)
」という点滅表示のテキストが含まれたbanner
swfファイルが表示されるはずです(図2参照)
このコンテンツを視聴するには Flash が必要です。
デスクトップのWebブラウザで表示したSWFバナー
検索エンジンに対しては図4のコンテンツが提示されます。このコンテンツはテキストブラウザを利用しているユーザおよび画像を無効化しながらWebをブラウズするユーザにも表示されます。
画像が無効化されたブラウザに表示される代替テキスト
サンプルのExample 1には、説明用のaltテキストが代替コンテンツとして設定された、1つの画像が配置されています。次にその体裁を示します。ここでは単純な例を取り上げたものの、積み木のようなロゴやプラグインのダウンロードを求める指示またはメディアがないことを示すアイコンが表示されたり、コンテンツが一切表示されないといった事態を回避することが、いかに簡単であるかはお分かりいただけるはずです。どのような代替コンテンツを用意すべきかは、プロジェクトによって異なります。リッチメディアプロジェクトの場合は、まずFlash Player向けのリッチメディアコンテンツを制作し、これを適切なHTMLコンテンツに変換するのが最も実用的な手段と言えます。この際には最新鋭のテクノロジサポートを利用しないユーザ、および検索エンジンにとって、どのコンテンツが重要であるかを見極める必要があります。リッチメディアコンテンツをHTMLに置き替える際には、見出し、テキスト、リンク、画像、および簡単なフォームといった概念を、念頭におくようにしてください。また、様々な種類のリッチメディアコンテンツをどのように置き替え・変換するかも判断する必要があります。この作業にはかなりのチャレンジが伴うこともあります。例えば、ビデオの場合はストーリーボードの概念にならって、いくつかの主要シーンのキャプチャ画像とそれらの手短な説明文を配置する方法があります。htmlファイルを開くと、図5のビデオコンテンツが表示されるはずです。Flash Playerに対応していしない環境のユーザには、図6に示す代替コンテンツが表示されます。
Flash非対応のブラウザ環境で表示したスタティックコンテンツ
検索エンジンや、テキストブラウザを利用しているユーザおよび画像を無効化しながらWebをブラウズしているユーザには、一段と簡潔なコンテンツが表示されます(図7参照)
画像が無効化されたブラウザで表示した代替コンテンツ
Example 2のコードには、各エントリが専用の画像とテキストから構成された、番号付きリストとその3つのエントリが含まれています。原則的には、可能な限り、メインのコンテンツ、機能性およびナビゲーションを常に維持できるように努めることが重要です。また、ビジュアル的なアイデンティティやWebページのレイアウトを崩さないようにするために、追加のスタイル規則を作成することが望ましいケースもあります。
代替コンテンツは、必ずしもテクノロジサポートが万全ではないターゲットユーザに対して、何かを伝えるための機会と捉えると良いでしょう
では、Flash Playerをインストールしていないビジターにはどのように対応すれば良いのでしょうか
このようなケースでは、最新バージョンのプラグインを簡単にダウンロードできるようにすることが勧められます。これまで、この目標を達成するまでに様々な努力がなされてきました。例えば、Flash Player向けに制作されたリッチメディアコンテンツの従来のパブリッシング方法では、最新バージョンのFlash Playerのダウンロード方法に関して、標準的なものが存在していませんでした。
次のようなマークアップでは、プラグインのダウンロードが必要なことを示すパズルピースのアイコンまた、次のようなマークアップの場合は、この2種類は組み合わせて使用することも可能です。前者の方法は、古くなったFlashプラグインをアップグレードするためのFlash Player内蔵の機能であり、これを利用することでアドビのWebサイトにアクセスすることなく最新バージョンにアップグレードすることができます。この機能によって、統一された次のダウンロードダイアログボックス(図10参照)が表示されます。Express Installは確認のためのポップアップウィンドウを表示するので、このオプション機能をWeb制作者が有効化することも可能です。後者の代替コンテンツを用いた方法では、面倒にならないFlash Playerダウンロード方法を提供できます。なお、このマークアップはFlash Playerダウンロードリンクとそのダウンロードアイコンをデフォルトで提供するものであり、これらはWeb制作者によってカスタマイズできる点に注意が必要です。例えば、代替コンテンツに数行の説明を追加して、当該インタラクティブコンテンツおよびオーディオビジュアル体験を閲覧するために最新バージョンのFlash Playerが必要であることを案内したり、あわせてダウンロードページへのリンクを提供することも可能です。SWFObject 2のダイナミックパブリッシングを使用する場合は、より最新のJavaScriptサポートが必要になることも追記することをお勧めします。
検索エンジンにも優しいコンテンツの作成
これまで何年もの間、検索エンジン最適化*(SEO)のベンダおよびコンサルタントの大半は、Flash Playerを多用するWebサイトの開発を避けるようアドバイスしていました。これは、SWFファイルが、検索エンジンにインデックス可能な内容を提供していなかったためです。また、パブリッシュ方法として2重タグ*の手法が多用されていたため、代替コンテンツもほとんど使われていませんでした。しかし、SWFObjectやUFOといった、より最近のFlash埋め込み方法が登場したことにより、検索エンジン向けのダイナミックパブリッシングを使用した代替HTMLコンテンツの提供が、とても有効であることが確認されています。をはじめとする大手の検索エンジンベンダと連携し、Flashコンテンツのインデックス対応性を高めることに着手しました。この結果、これらのサイトでも、SWFファイル上のテキスト情報やリンクが、あたかも実際のビジターがアプリケーションの様々なステートをフォローしているかのように、インデックス化されるようになっています。
では、代替コンテンツを使用して検索エンジンがコンテンツをインデックス化できるようにすることのメリットと理由を考えてみましょう
理由はいつくもあります。まず、一部の検索エンジンがFlashコンテンツをインデックス化できないことが挙げられます。次に、通常、SWFファイルにはマルチメディアコンテンツが多用されているため、引き続き多くのコンテンツが検索エンジンには認識できないことが挙げられます。したがって、既に代替コンテンツを利用して最新鋭テクノロジ非対応のユーザに説明用のコンテンツを提供し、Flash Playerのダウンロードページを手軽に見つけられるようにしているのであれば、ごくわずかな手順を追うだけで、いわば「一石三鳥」の状態を達成することができます。3つ目は、これが任意の選択肢として与えられるわけではないということです。検索エンジンは、Flashコンテンツと代替コンテンツの両方をインデックス化する恐れがあります。)Web制作者の立場では、コンテンツの重複は、より多くのユーザをターゲットにしたWebコンテンツが制作できるという点でベストプラクティスであると捉えられていますが、検索エンジンベンダの立場からみた場合は、どの項目を検索結果に含めれば良いかなどの判断、あるいは、どのようにしてインデックス化が悪用されるのを防ぐかといったことに関して(クローキング*)、様々な課題が投げかけられることになります。検索エンジンとの相性に優れたコンテンツを作成するには、この二面性を念頭におくことが重要です。ここでは、HTMLコンテンツにFlashコンテンツが十分反映されていることを確認するようにし、後は検索エンジンに何が最適な検索結果であるかの判断を委ねるようにします。例えば、代替コンテンツでは次の点に注意するようにします。リッチメディアコンテンツ内のリンクと完全に一致するリンクを使用する。マルチメディアコンテンツの内容を表すテキストコンテンツや画像を追加する。所定のユーザ体験を実現するために何が必要であるかと、Flash Playerをどこからダウンロードできるかについての説明文を追加する。HTMLには階層的な構造と暗示的なセマンティックが採用されているため、HTMLコンテンツはいくつかの点でリッチメディアコンテンツより豊富なメリットを提供します。これらはいずれも、Webコンテンツにその骨格と意味を与えることから、検索エンジンとの相性に優れたコンテンツを作成するにあたっても重要な要素になります。HTMLには、次に示すように有意味なタグが豊富に用意されています。例えば、検索エンジンは見出しを自動的に認識することができます。これは当該テキストがh1タグに囲まれているからです。
したがって、メインの見出しにはh1要素を使用し、それ以外のサブ見出しにはh2~h6要素を使用するように心がけると良いでしょう
本文のようなテキストコンテンツは、次に示すように段落タグの中に配置するようにします。ナビゲーションバーおよびメインメニューはリスト項目として表現されるので、これらは順不同のリスト項目として、ul要素を用いて定義するようにします。次に示すように、ナビゲーションの各項目はリスト項目にリンクを埋め込む形で表現されます。タグを使用すること以外に、タグに用意されている属性に注目することも重要です。altおよびtitleといった属性には、必ず意味が分かりやすい値を設定するようにします。各HTML要素の意味とそれに用意されている属性の詳細については、SitePoint*などのリソースを参照するようにしてください。なお、検索エンジン最適化(SEO)はそれ自体が高度な専門分野であるとともに、常に変化するトピックであるということに注意する必要があります。適切な構造と意味合いが含まれた代替コンテンツの使用は、SEOへの適用性を高めるための良好な基礎となります。Webサイトのランキングは、最終的には、この基礎が用いられていることと他の様々な要素の組み合わせによって判断されます。
次のステップ
SWFObject 2の使用法について詳しくは、以下のリソースを参照してください。また、検索エンジン各社が提供する以下のWebオーサリングガイドラインも参照するようにしてください。WebサイトやWebアプリケーションの作成・開発を始める上で有用なチュートリアルやリソースへのリンクが多数掲載されています。
著者について
BobbyはWeb標準とAdobe Flashの大ファンであり、時折これらのトピックについての執筆物を個人のWebサイト*またはオンラインマガジンで公開しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
正しく Flash コンテンツを表示するには、クライアントのブラウザに適切なバージョンの Flash Player がインストールされている必要があります。そこで、ユーザー環境を判別するためのスクリプトを記述する必要がでてきますが、複数の OS 上の様々なブラウザで動作確認しながらスクリプトを開発するのは容易なことではありません。対応のされていないサイトでは、Flash Player 8 の公開に伴い、最新のプレーヤーをインストールしても環境が不十分であると判定され、ユーザーが目的の Flash コンテンツへたどり着けなくなってしまいます。また、Flash 8 からも、パブリッシュ時に、同様のスクリプトを埋め込んだ HTML ファイルを生成するオプションを選ぶことができるようになりました。Flash 8 からパブリッシュ時に埋め込むことのできるバージョン検地スクリプトにも同様の問題がありますが、同じ方法で対応することができます。まず、すでにブラウザスクリプトによるバージョン検出をしていて、それを Flash Player 8 に対応させる必要がある場合について簡単に触れておきます。そうすると、ユーザーはその先へ進むことができません。たとえ最新版を再インストールしてみたとしても、インストールされるのはやっぱり Flash Player 8 だからです。
このような場合は、7 よりも新しいバージョンのプレーヤーのことが考慮されているか調べてみましょう
このコードを修正する手っ取り早い方法は、バージョン8のための条件を一行足すことです、しかし、それでは次のバージョンがリリースされたら、結局また修正です。
バージョン検出方法の比較
クライアント側でのスクリプトによる検出
他の方法に比べ、クライアント環境のいろいろな情報が取得できる。クライアントの環境構成に応じて表示するコンテンツを切り替えることができる。スクリプトの実行が設定上許可されていない場合は使えない。
プレーヤーのバージョンを取得するスクリプトが記述された専用の SWF ファイルを使用
検出結果により URL のリダイレクトを行いコンテンツを表示
サーバー側での検出
最近のブラウザ環境では、スクリプトによるリダイレクトの許可されないケースが一般的になってきました。また、サーバー側での検出により取得できる情報はごく限られています。その際、スクリプトの実行が許可されていないユーザーのため noscript タグブロックによる代替コンテンツを指定すると、全てのケースをカバーすることが出来ます。
サンプルファイルの使用
ちなみに、Flash 8 からパブリッシュ時にオプションで埋め込まれる検出用スクリプトも基本的に同じものです。html というファイルとして提供されています。サンプルファイルの構成は以下のようになっています。
必要なバージョンがインストールされていた場合の正規コンテンツ
必要なバージョンがインストールされていない場合の代替コンテンツ
スクリプトの実行が許可されていない場合の代替コンテンツ
コピー先の HTML ファイルに、既にスクリプトが記述されていたら、関数名が被っていないか確認をしておきましょう
3つのうち、最初の script ブロックは変数の定義に使われています。ここで、チェックの対象となるプレーヤーのメジャーバージョン、マイナーバージョン、リビジョンをそれぞれ指定できるようになっています。これは、クライアント環境に応じてコンテンツを切り替えられるようにするためです。さて、この script ブロックでは、初めに必要なバージョンがインストールされているかを判定します。サンプルから下の行をコピーしてください。引数には、先ほど script ブロックで定義したものが使われています。この結果を使って、以下のように表示するコンテンツを切り替えます。
必要なバージョンがインストールされていた場合の正規コンテンツ
必要なバージョンがインストールされていない場合の代替コンテンツ
上記、2のパートでは目的の Flash コンテンツを埋め込むタグを記述します。swf を置き換えるだけで使うことができます。サンプルでは、下記のとおりごくごく簡単なものしか提供されていませんので、対象のユーザーに合わせたコンテンツを表示するように変更してください。
最後に、スクリプトが使用できない環境のために、noscript ブロックを記述します(4のパート)
このパートの内容は、3のパートのものと同じで構わないでしょう
ユーザーが必要なバージョンのプレーヤーを持っていないことを検出したら、代替コンテンツを表示し、プレーヤーの更新/インストールを促します。このとき、プレーヤーを更新する手段には以下のような選択肢があります。ブラウザの機能に任せる。最近のブラウザは概ね必要なプラグインが見つからないと自動的に CAB や XPI ファイルを取得してインストールを開始する機能を持っています。しかし、ブラウザによっては、プラグインの存在のみを検出し、バージョンチェックを行わないものもあります。従って、Flash コンテンツの正しい表示は保証の限りではありません。
基本的には、他の手段を使用しましょう
ダウンロードセンターへ誘導
ユーザーをダウンロードセンターへ案内すると、ユーザー環境が自動的に判定され、適切なインストール手順が開始されます。この方法は、様々な環境で使用することができるのでお勧めです。ダウンロードセンターへの誘導には、下の画像にリンクを張るようにしてください。
ダウンロードセンターへのリンク画像
リンク画像ファイルの取得や使用上の注意等については、以下のURLを参照してください。スムーズなインストール体験を実現する新しいインストール手段です。可能であれば是非採用してください。」画面と同様、サイト内の体験に見えるような形でのインストールを行うことが可能になります。
著者について
上条 晃宏: マクロメディアで Flash プラットフォーム上のユーザー体験やアーキテクチャデザインのコンサルティングを担当、数多くの Flash / Flex プロジェクトに携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
エンドユーザーの環境に必要なバージョンの Flash Player がインストールされていなかった場合、いままではユーザーを Macromedia サイトのダウンロードページへ誘導する必要がありました。しかし、これでは、せっかくサイトを訪問してくれたユーザーを、一時的にでも他のサイトに逃がしてしまうことになります。また、インストールのためにブラウザを終了したら、ユーザーに積極的に再訪問を促す手段はありませんでした。インストールを行うページやインストール後に表示されるページ等は自由に設定することができ、ブラウザを一旦終了する必要のある場合でも、インストールの引き金となった Flash コンテンツのあるページに戻すことができます。更新処理は Action Sctript から呼び出すため、更新の開始を任意のタイミングで行うようなデザインが可能です。さらに、インストールが終了した時に表示されるページや、インストールを中断した際の動作等もカスタマイズできます。ちなみに、提供されているサンプルをそのまま利用すると、インストール終了時にはインストールを開始したページに戻るようになっています。ただし、ローカルのドキュメントから Express Install を実行する場合には、元のドキュメントに戻らないケースがあります。
サンプルファイルの使用方法
AutoUpdaterLoaderClip の大きさは、インストール中に表示される情報パネルと同じになっているため、そのまま分かりやすい目安として使うことができます。ここで、このファイルの基本的な使い方をまとめておきます。実際の更新処理を呼び出すためのスクリプトです。基本的に、このファイルを変更する必要はありません。
上の説明にもあるように、 AutoUpdater ムービークリップを配置すれば、このファイルは自動的に読み込まれるので、ムービーの制作時にも直接意識する必要はないでしょう
なお、このファイルは、忘れずに FLA ファイルと同じディレクトリにコピーするようにしましょう
as も同様にコピーする必要があります。このファイルを使って、Flash Player の更新状況に応じて呼び出されるいくつかのコールバック関数をカスタマイズすることができます。これにより、よりユーザーフレンドリーなインストール体験をデザインすることが可能になります。現在、定義可能な状況は、ダウンロードが終了したとき、キャンセルされたとき、失敗したときの3つです。
// インストールが完了したケース
// ユーザーがインストールをキャンセルしたケース
// 標準ではユーザーには何も表示されない。
// インストーラのダウンロードに失敗したケース
// 標準ではユーザーには何も表示されない。
インストール画面のデザイン
ここでは、簡単な画面デザイン上の注意点を記述しておきます。まず、インストールを行う Flash コンテンツの大きさは 215x138 ピクセルよりも大きくする必要があります。これは、インストール情報パネルを表示するためです。
その状態が、エンドユーザーから違和感のない画面デザインであることが望ましいでしょう
html というサンプル HTML ファイルが提供されていますのでご参照ください。次に、インストール後に表示されるページを指定しています。標準では、インストールを開始したドキュメントを指しています。インストール後に他のページを表示したい場合は、ここでターゲットの URL を指定します。次は、インストール完了時に自動的に閉じるウインドウを指定するための記述です。これは IE のみに有効です。
(他のブラウザは全てのウインドウを閉じるため)
著者について
上条 晃宏: マクロメディアで Flash プラットフォーム上のユーザー体験やアーキテクチャデザインのコンサルティングを担当、数多くの Flash / Flex プロジェクトに携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
今回のアップデートは、これまでに明らかになっているFlash Playerの脆弱性を軽減するものです。今回のセキュリティ強化の実施により、既存のFlashコンテンツに影響を及ぼす可能性があります。コンテンツ提供者の方々は、4月のセキュリティアップデータ内容に目を通して自身のコンテンツに影響があるかどうかをチェックし、もし影響がある場合にはスムーズに移行できるように、当記事で紹介している対応手順に沿ってご自身のSWFファイルへの対応をお願いいたします。この記事では、4月のセキュリティアップデータ内容の概要を説明し、関連した情報へのリンクを紹介しています。以下の状況に当てはまる方は、該当記事を読んでください。Webサービス提供者としてリモートドメイン上のコンテンツへのアクセスを許可している。アドビ システムズ社ではセキュリティ情報を随時公開しており、そのお知らせをメールで受け取ることが可能です。すべてのソケット接続において、常にソケットポリシーファイルが必要となる。2007年12月に行われたFlash Player 9,0,115,0のセキュリティアップデート時にはソケットポリシーファイルに関する変更が行われましたが、その変更への対応はコンテンツ提供者の任意によるオプション的なものでした。今回のセキュリティアップデートではこの変更への対応が義務化となります。ソケットポリシーファイルは、ソケット接続時に利用するポリシーファイルです。xml」ファイルで、他のドメインのSWFがそのサーバ上のコンテンツをロードできるかどうかを定義するためのポリシーファイルです。今後のセキュリティアップデートでは、HTTPポリシーファイルを利用したソケットアクセスができなくなり、またソケットポリシーファイルに関 するルールの変更が行われます。今後のセキュリティアップデートでは、これらの警告はコンテンツのエラーとなり、古いソケットポリシールールに沿ったSWFファイルは機能しなくなる可能性があります。ソケットマスターポリシーファイル:このファイルは固定のTCPポート番号843から提供されます。ポート番号を固定しているのは、ホストからソケットポリシーファイルを提供する際に標準的なポートを使用し、管理しやすくするためです。ソケットメタポリシー:これは「ポリシーに対するポリシー」です。ソケットメタポリシーを使用することで、サーバ管理者はサーバ上にあるどのファイルが許可されたソケットポリシーファイルなのかを指定することができます。厳密なソケットルール:ソケット接続時にソケットポリシーファイルを必須とするルールのことです。
<影響を受ける状況>
xmlファイルを利用して、同じホストの1024以上のポート番号を使ってソケット接続を行っている。SWFが、自身のホストにXMLSocket や Socket接続してポリシーファイルをロードするが、そのポリシーファイルの許可ドメインリスト内に自身のドメインが含まれていない。0 以降でソケットが機能しないで詳しく解説しています。この変更をオプション的に採用しているFlash Player 9,0,115,0のユーザーがいることを考えると、彼らをDNSリバインディング攻撃から守るためにも、ホスト管理者の方には素早い対応を期待します。この義務化された変更に対応するには、ホストソケットへの接続を許可するソケットポリシーファイルを作成する必要があります。このソケットポリシーファイルは、ソケットマスターポリシーのポート番号843か、ソケット接続の行き先となるポート番号から提供されます。ソケットポリシーファイルには、ソケット接続を許可するすべてのドメインが含まれていなければなりません。もちろん、自身のドメインもです。ソケットマスターポリシーファイルでソケットポリシーファイルを提供する場合は、必ずソケットポリシーファイルを配置する範囲を記したメタポリシーを含めるようにしてください。自身のコンテンツに対策を施したら、文書番号233457にある方法で適切に行われいているかどうかを確かめてください。
ドメイン間でヘッダを送信するにはポリシーファイルが必須
4月のセキュリティアップデートでは、新しいセキュリティ機能が追加され、SWFが他のドメインにヘッダを送信する前にクロスドメインポリシーファイルによるチェックが行われます。これにより、他のドメインのコンテンツから送られてくる悪意あるHTTPヘッダからWebサイトを守るようにします。また、UPnP問題の可能性を軽減するための機能でもあります。UPnP問題とは、ルータが予期せぬヘッダ値を的確に処理できなくなることです。SWF が他のホストにヘッダを送信できるようにするには、SWF自身のホストがヘッダを送るホストからポリシーファイルの形式に沿って明確な許可を得なければなりません。既存のポリシーファイルモデルでも、同じファイルロケーションやActionScript APIを使えば利用することもできますが、新しいシンタックスが必要となります。引き続きFlash Playerでは、ブラックリスト以外のヘッダであればSWFのホストへの送信を許可し、必要に応じてブロックリストへと登録していきます。今回の新しいセキュリティ機能の結果、クロスドメインポリシーファイルのルールに則っていれば、Flash Player 9,0,115,0のブラックリストに追加されたHTTPヘッダはブラックリストから除外されます。
<影響を受ける状況>
以下の状況において影響があります。
他のドメインにホストされているFlashベースのアプリケーションにサービスを提供しようとしているWebサービス
該当するコンテンツ提供者は、ヘッダの送信先であるサイト上のヘッダポリシータグがポリシーファイルに含まれるようにしてください。
アドビ システムズ社としては、今後行われるクロスドメインポリシーファイルの変更に備えて、crossdomain
xmlファイル内にメタポリシータグを含めておくことを強くおすすめします。Flash Player 9,0,115,0では、メタポリシーファイルはオプション的な扱いでしたが、将来的には義務化となり、従っていないコンテンツはセキュリティエラーとなります。この変更により、古いバージョンで書き出されたSWFの挙動が、現在のセキュリティモデルに対応するようになり、結果としてデフォルト状態でよりセキュリティが確保されるようになります。
<影響を受ける状況>
")を使っているコンテンツで以下の状況に当てはまる場合は影響を受ける可能性があります。SWFがバージョン7以前の形式で書き出されている。HTMLとSWFが異なるドメイン、あるいは同じドメイン内でも異なるホストネームから提供されている。")を使用している。また、以下のケースも影響を受ける可能性があります。バージョン8以降の形式で書き出されたSWFであっても、リモートで読み込むSWFがバージョン7以前の形式で書き出されている。
もし、あなた自身がSWFを管理して いるならば、この許可設定を行ってもいいでしょう
コンテンツ制作者が意図しないスクリプトが実行されるのを防ぐために、ブラウザインタラクション用に設計されたAPI以外のものは、「javascript:」系URLを利用することができなくなります。今回の変更は、禁止にすることでより髙いセキュリティを確保するためのものです。
このタイプの問題で引き起こされる脆弱性の例として、Loader
load()を呼び出すように設計されたSWFを想定してください。このSWFは、クエリ文字列パラメータによってURLを外部から渡される可能性があります。この手の攻撃を防ぐには、 入力検証*を行うのが一番の防御策ですが、意外と忘れられています。セキュリティ情報APSA07-06にあるように、ネットワークAPIに関する今回の変更によって、不適切な入力検証にから引き起こされるクロスサイトスクリプティング攻撃を軽減することができます。
<影響を受ける状況>
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flash Player、インストール方法、機能、および特定のネットワーク環境のニーズに合わせた制御方法について説明します。このドキュメントは、制御された環境で複数のユーザに対してFlash Playerのインストールまたは使用を管理するITプロフェッショナルまたは管理専門職を対象としています。Flash Playerをデプロイするには、最初にデプロイするためのライセンスを取得する必要があります。再配布ライセンスは無償で、オンラインライセンシング申し込みから取得できます。
このガイドの内容
第3章 – 管理者設定:この章では、エンドユーザのマシンにファイルを作成および配置して、セキュリティ、プライバシー、ディスク空き容量の使用などに関連した機能を管理するさまざまな方法について説明します。
この章にはプライバシーおよびセキュリティ設定(mms
第4章 – ユーザ構成設定:この章では、エンドユーザがコンピュータでFlash Playerを実行したときにプライバシーとセキュリティ設定に指定できるオプションについて説明します。この章には、ユーザ設定、プライバシーオプション、ローカルストレージオプション、更新オプション、セキュリティオプション、ユーザのFlashPlayerTrustディレクトリへのアクセスに関するセクションが含まれています。第5章 – セキュリティに関する考慮事項:Flash Playerのインストール時にユーザのコンピュータのセキュリティと整合性を保つことは重要なので、この章ではセキュリティの概要、特にFlash Playerをデプロイする管理者に関係がある要素を重点的に説明します。Adobeでは、これらのセキュリティ上の問題、およびその他の問題に関する多数のWebページ、ホワイトペーパー、他の書籍の章、TechNotesなどを作成しています。この章ではセキュリティの概要について説明し、ローカルコンテンツのセキュリティサンドボックス、以前のFlash Playerセキュリティモデルとの互換性、および異なるドメインからのデータのロードについて説明します。セキュリティに関するその他のリソースのリストも含まれています。
次のステップ
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Macromedia Flash Player 8 に施されたパフォーマンス強化は、アルファビデオのサポートやドロップシャドウフィルタエフェクトほど目立つ新機能ではないものの、何もせずに今すぐ利用できるという点で特筆に値します。今回のパフォーマンス強化に大きく貢献したのは、ActionScript の処理効率を強化しつつプレーヤーの消費メモリ量の削減を実現する、新たなガベッジコレクション手法です。これらの改良点を総合すると、Flash Player 8 でコンテンツ / アプリケーションを閲覧した場合はパフォーマンスが約 5 割も向上するケースが見られます。
新たなガベッジコレクタがもたらすパフォーマンス強化
Flash アプリケーションの規模と複雑さが増大するにつれ、Flash Player 7 のガベッジコレクタが利用するリファレンスカウントアルゴリズムは、その能力の限界に達し始めていました。そこで最新のプレーヤーでは、単なるリファレンスカウントから分散型のリファレンスカウントに移行することで、Flash Player のリファレンスカウント量を約 9 割削減することに成功しています。Flash Player 7 のリファレンスカウントがもたらすオーバーヘッドは総処理時間の約 2 割にも達し、大規模アプリケーションの表示処理が一時中断されるような結果を招いていました。新しいガベッジコレクタは、このオーバーヘッドを総処理の約 1 ~ 2% にまで削減します。また、Flash Player 8 は、まず不要オブジェクトに印を付け、別のステップで実際の削除処理を行う、漸次型のガベッジコレクションを採用しています。これにより、削除処理は処理のないサイクルが発生した時点で行われるようになります。効率良いガベッジコレクションは、メモリ消費量の能率化にも直結しています。
Flash Player 7 のガベッジコレクション手法は、常にほぼ一定のメモリ消費を必要としていましたが、漸次型のガベッジコレクションを採用する Flash Player 8 の場合、処理のないサイクルが発生するごとにまとまったメモリ領域が解放されるので、メモリが固まりで消費される傾向にあります (図 1 参照)
サンプルテスト実行時の Windows メモリ消費状況を示すグラフ
サンプルテスト実行時の Mac OS メモリ消費状況を示すグラフ
新しいガベッジコレクタとメモリ消費量の削減が効果を発揮し、既存コンテンツの大半は Flash Player 8 で実行することで、再コンパイルの必要なくスピードアップできます。新しいガベッジコレクタは、コンテンツやアプリケーションの全体的なパフォーマンスを向上させることができますが、特定のエリアに対しては、逆にパフォーマンスに悪影響を及ぼす場合もあります。これはメモリ消費の管理方法が変更されていることに起因しています。この結果、旧バージョンと Flash Player 8 を比較する場合、マイクロベンチマークテストや単に特定機能のパフォーマンスだけを測定する小規模ベンチマークテストは役に立たないと言えます。例えば、ある公式の解を求める数学的なルーティンを処理するマイクロベンチマークテストがあり、これをプレーヤーで 5 回連続して実行したとします。この記事の最後に収録している Flash Player マイクロベンチマークテスト結果のサンプルを一度ご覧ください。ここでは、アプリケーションの総合的なパフォーマンスを強化することが重要であり、必ずしも個別のマイクロベンチマークに囚われないことに注意が必要です。もちろん、マイクロベンチマークテストは我々が仕様変更に伴う悪影響の有無を確認する上で重要です。しかし、ここで注意しなければならないのは、今回リファレンスアプリケーションのベンチマークをテストの一貫として含めることで、総合的なパフォーマンスの影響を確認するための、より包括的なテストを作成している点です。
Mac に特化したパフォーマンスチューニング
今回のリリースでは、Mac のプレーヤーパフォーマンス強化に多大な時間と労力をつぎ込み、動作の安定とともに、Windows と Mac OS 間のパフォーマンス差を解消することに重点を置きました。また、Mac に特化した改善としてレンダリングルーティンの中核部分を最適化することにも、多大な時間を費やしました。プレーヤーは OpenGL をフルサポートするわけではありませんが、画面にパーツをより高速に表示させるために、特定の OpenGL 機能を利用します。OpenGL を利用することにより、ビデオやアニメーションの再生が改善されるとともに、横方向の再描画線の表示頻度が減少します。この改良機能は Safari 上での表示の全体的なパフォーマンス強化に貢献しますが、ガベッジコレクションの仕様変更同様に、一部のケースでは逆にパフォーマンスが悪化する場面もあり得ます。
今回のパフォーマンス改善が Safari に限定されている点が気になる方もおられることでしょう
これは、今回の機能の必須条件として、ブラウザがユーザーの指示による新規タブの作成やタブの切り替えを、プレーヤーに通知できる必要があったからです。今回のリリース時点では、この機能をサポートする Mac 用ブラウザは Safari に限定されていました。