Adobe
製品
Acrobat
Creative Cloud
Creative Suite
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
その他の製品一覧
ソリューション
デジタルマーケティング
デジタルメディア
教育
金融機関
Web Experience Management
その他のソリューション
ラーニング サポート ダウンロード 会社情報
ご購入
アドビストア 安心のサポート& サービス
アカデミックストア 学生、教職員、個人向け
アドビライセンスストア 中小企業向け
ボリュームライセンスについて 企業、教育機関、官公庁向け
販売パートナー
キャンペーン情報
検索
 
情報 サインイン
ようこそ、 さん カート 注文状況 マイアカウント
マイアカウント
注文状況
アカウント情報の変更
コミュニケーションの設定を変更
サインアウト
サインインの目的 お客様のアカウントや体験版ダウンロード、製品の拡張機能、コミュニティエリアへのアクセスなどを管理するため
Adobe
製品 セクション ご購入   検索  
ソリューション 会社情報
サポート ラーニング
サインイン サインアウト 注文状況 マイアカウント
先行予約の提供開始予定日Date. 商品が発送されるまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。 先行予約の提供開始予定日Date. ダウンロードの準備が整うまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。
個数:
ご購入には学生・教職員個人版の購入資格の確認が必要です。
小計
カートの中身を見る
Adobe Developer Connection / Flashデベロッパーセンター /

Progression Framework 2 初級編:ActionScriptを書かずにFlashサイトを簡単に構築する

著者 松竹 誠(Mk-10:cellfusion)

松竹 誠(Mk-10:cellfusion)
  • Ryukyu Inc.

Content

  • ステップ1:パーツの作成<サイトコンテンツのパーツをムービークリップに変換する
  • ステップ2:InOutMovieコンポーネントで各ページにアニメーションを実装する
  • ステップ3:RollOverButtonコンポーネントで各ボタンにシーン移動機能を追加する
  • ステップ4: ImageBoxコンポーネントを使って写真を外部から読み込む
  • ステップ5:EasyCasting機能でサイトのシーン表示をコントロールする

作成日

15 January 2008

ページ ツール

Facebookでシェア
Twitterでツイート
LinkedInでシェア
ブックマーク
印刷

タグ

必要条件

ユーザーレベル

初級

必要な製品

  • Flash Professional CS3 (Download trial)

サンプルファイル

  • prog2BeginerSample.zip (14732 KB)

その他の要件

Progression Framework 2

  • http://progression.libspark.org/trac

Progression Framework 2とは

Progression Framework 2は、Flashを使用したWebサイト開発に最適なActionScript 3.0用フレームワークです。Progression Framework 2を使用すれば、複雑なリンク構造を持つHTMLベースのWebサイトと同等のコンテンツを Flashでも簡単に開発できます。また、Flashコンテンツではなかなか対応が難しい「ページごとのURL発行」「右クリックメニューによるナビゲーション」などにも対応しているため、非常に高いユーザビリティを持つFlashコンテンツを素早く開発することができます。

本記事では、Progression Framework 2の機能の中から、初心者向けに実装されたEasyCasting機能(コンポーネントを使用してProgression Framework 2の機能をムービークリップに実装する機能)を使って、ActionScriptをまったく書かずにサイトを作成する方法を紹介します。図1が作成するサンプルサイトです。

サンプルサイトは、3つの部分から構成されています。左端のフッタ、中央のページ、右端のナビゲーション。ナビゲーションのボタンをクリックすると中央のページが切り替わります。また、GALLERYページでは写真のサムネイルが並び、サムネイルをクリックすると拡大写真がページ中央に表示されます
図 1. サンプルサイトは、3つの部分から構成されています。左端のフッタ、中央のページ、右端のナビゲーション。ナビゲーションのボタンをクリックすると中央のページが切り替わります。また、GALLERYページでは写真のサムネイルが並び、サムネイルをクリックすると拡大写真がページ中央に表示されます

サンプルファイル

サンプルのサイト構造
図 2. サンプルのサイト構造

Progression Framework 2を使って、このサンプルサイトを制作する手順をステップバイステップで解説していきます。なお、本記事のサンプル「prog2BeginerSample.zip」では、各ステップのフォルダがあり、ステップで作成したflaファイルが入っています。各ステップフォルダ内のmain_start.flaを開いて進めてください。main.flaは、それぞれのステップでの作業終了後のファイルです。実際にどのような構造になっているかを確認しながら読み進めて行くと理解しやすいでしょう。

Progression Framework 2のインストール

Progression Framework 2は、Progressionのサイトからダウンロードできます。必ず最新版を利用してください。本記事執筆時点(2007年12月末)での最新版は「Progression Framework 2.0.0 Beta 2」です。ソースコードと拡張機能を mxp 形式のファイルで配布しているため、インストールには別途Adobe Extension Managerが必要です。以下の手順でインストールしてください。

  1. Progression Framework 2のフルパッケージをダウンロードします。※ソースコードアーカイブは必要ありません。
  2. ダウンロードしたProgression2-Mac.mxp(Mac OSの場合)をダブルクリックして、インストール作業を開始します。
  3. インストール中に出てくるフォルダ選択画面では、Flash CS3をインストールした際にできるConfigrationフォルダを指定します。下記ディレクトリを参考にしてください。
    Windows : C:/Program Files/Adobe/Adobe Flash CS3/ja/Configuration/
    Mac OSX : /Applications/Adobe Flash CS3/Configuration/
  4. インストールが完了するとAdobe Extension Manager上にProgression Frameworkが表示されます(図3)。
Adobe Extension Manager上にProgression Frameworkが表示されます
図 2. Adobe Extension Manager上にProgression Frameworkが表示されます
  1. インストール中にFlashを起動していた場合は、再起動します。以上でインストールは完了です。

ステップ1:パーツの作成<サイトコンテンツのパーツをムービークリップに変換する

まずは、サイトコンテンツの各パーツをムービークリップ化します。本記事のサンプルファイルのlayoutフォルダ内には、各ページのデザインのJPEGファイルが入っています。これらデザイン画像を参考にして、各パーツを作成していきます。スペースの都合で、すべてのパーツについて解説することができないので、ここではナビゲーションパーツとインデックスページを作成します。

  1. メニューの「ファイル /新規」を選び、Flash ファイル(AS3.0)で新規ファイルを作成します。
サイズを765×480ピクセル、フレームレートを24fpsに設定します
図 4. サイズを765×480ピクセル、フレームレートを24fpsに設定します
  1. メニューから「ファイル/読み込み/ステージに読み込み」を選び、 layoutフォルダ内のprog2_top.jpgを読み込んで配置します。
  2. 読み込んだ画像を選択して、メニューから「 修正/シンボルに変換 」を選び、グラフィックシンボルに変換してアルファ値を50%にセットします(図5)。
file
半透明にしたデザイン画像を参考にしながら、パーツを作成します
図 5. 半透明にしたデザイン画像を参考にしながら、パーツを作成します
  1. まずはナビゲーションに必要なボタンパーツを作成します。メインのタイムラインにNavigationレイヤーを作成します。サンプルのpartsフォルダ内にあるbg_navi_main.jpgを読み込んで「ButtonBackground」という名前でグラフィックシンボルに変換します。
  2. ButtonBackgroundグラフィックシンボルの高さを480ピクセルに変更して、デザイン画像に合わせて配置します。デザイン画像を参考にしながら、ナビゲーションのボタンを作成していきます。ボタンの作成が完了したら、各ボタンを選択して、 ムービークリップに変換します(図6)。
file
file
ボタンのレイヤー構造は図のようにし、ムービークリップに変換します
図 6. ボタンのレイヤー構造は図のようにし、ムービークリップに変換します
  1. ルートに戻ってナビゲーションのパーツをすべて選択し、 「Navigation」という名前のムービークリップにまとめます(図7)。
file
file
ナビゲーション全体を1つのムービークリップにまとめて、レイヤー構造を管理しやすいように図のように変更します
図 7. ナビゲーション全体を1つのムービークリップにまとめて、レイヤー構造を管理しやすいように図のように変更します
  1. PROFILE、GALLERY、CONTACTの各ページについても、上記のようにデザイン画像を読み込んで作成していきます。ページのムービークリップのレイヤー構造は自由に作っていただいてかまいません。唯一のルールとして、Progression Framework 2でコントロールするパーツは必ずムービークリップシンボルに変換しておくことです。このルール以外に決まりごとはないので自分のやりやすいように作成してください。すべてのパーツを作成したflaファイルが サンプルのstep1フォルダ内にあるmain.flaです。次のステップからは、このflaファイルをもとに進めていきます。今回のサンプルで使用するムービークリップを全部作成すると、ライブラリパネルは図8のようになります。
サンプルで使用するすべてのムービークリップ
図 8. サンプルで使用するすべてのムービークリップ

リンケージ設定(書き出し設定)

先ほど作成したパーツを Progression(ActionScript)で制御できるようにするには、リンケージ設定を行う必要があります。ナビゲーションのCONTACTボタンを例に、リンケージ設定手順を説明します。

  1. ライブラリパネルのContactButtonを選択して、右クリックメニューのリンケージを選択します。
  2. リンケージプロパティダイアログが表示されるので、「リンケージ:ActionScriptに書き出し」チェックボックスをオンにします。オンにすると自動で図9のようになるのでそのままでリンケージ設定は終了です。
リンケージプロパティダイアログで「リンケージ:ActionScriptに書き出し」チェックボックスをオンにします
図 9. リンケージプロパティダイアログで「リンケージ:ActionScriptに書き出し」チェックボックスをオンにします
  1. サムネイルや各ボタンなどのパーツやコンタクトページ、各写真の詳細ページなども同じようにリンケージ設定を行います(図10)。ただ、Photo1はリンケージ設定を行う必要はありません。
図のようにリンケージ設定を行います
図 10. 図のようにリンケージ設定を行います

ステップ2:InOutMovieコンポーネントで各ページにアニメーションを実装する

Progressionコンポーネント

Progression Framework 2をインストールすると、「Progression Casts」「Progression Commands」「Progression Loader」といったコンポーネント群もインストールされます(図11)。これらのProgressionコンポーネントをムービークリップ内に設置するだけで、ムービークリップの表示・非表示時にアニメーションを実装したり、シーン移動機能のついたボタンを作成したりすることができます。

Progression Framework 2をインストールすると追加されるコンポーネント群
図 11. Progression Framework 2をインストールすると追加されるコンポーネント群

本記事のサンプルサイトでは、ページ遷移の際、ページがフェードイン/フェードアウトしながら切り替わるようになています。このフェードイン/フェードアウトアニメーションは、Progression Castsコンポーネント群の中のInOutMovieコンポーネントを使って実装しています。

InOutMovieコンポーネント

InOutMovieコンポーネントには、以下の表にあるパラメータが用意されています。このコンポーネントをムービークリップにドラッグ&ドロップで設置するだけで、そのムービークリップの表示時と非表示時に再生するフレームアニメーションを設定できます。

アイコン パラメータ 内容
アイコン IN点 ムービークリップを表示する際に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
OUT点 ムービークリップを非表示にする際に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
ツールヒント バージョン2.0.0 Beta 2では実装されていないため、使用できません。

各ページのフェードイン/フェードアウトアニメーションを設定

TopPageムービークリップ(Indexページ)を例に、 InOutMovieコンポーネントを使ってアニメーションを追加する方法を解説します。まずは、TopPageムービークリップの表示時と非表示時のフレームアニメーションを作成します(図12)。表示時用アニメーションの開始位置にフレームラベル「in」を、終了位置に「stop」ラベルを設定します。非表示アニメーションの停止位置に「out」ラベルを設定します。この例では、「stop」ラベルが、非表示アニメーションの開始位置でもあります。

TopPageムービークリップの表示時と非表示時のフレームアニメーションとフレームラベル
図 12. TopPageムービークリップの表示時と非表示時のフレームアニメーションとフレームラベル

次に、Componentレイヤーに InOutMovieコンポーネントをドラッグ&ドロップで設置します(図13)。

file
TopPageムービークリップに InOutMovieコンポーネントをドラッグ&ドロップで設置したところ。コンポーネントのパラメータはデフォルトのままです
図 13. TopPageムービークリップに InOutMovieコンポーネントをドラッグ&ドロップで設置したところ。コンポーネントのパラメータはデフォルトのままです

以上で表示時と非表示時のアニメーション実装は完了です。その他のページにも同じようにInOutMovieコンポーネントを設置してアニメーションを追加します。

ステップ3:RollOverButtonコンポーネントで各ボタンにシーン移動機能を追加する

サンプルでは、ナビゲーションのボタンをクリックして、ページ遷移を行うようになっています。このページ遷移機能は、Progression Castsコンポーネント群の中のRollOverButtonコンポーネントを使って実装しています。また、RollOverButtonという名前が示す通り、このコンポーネントではマウスオーバー時やマウスクリック時のアニメーションも設定することができます。

RollOverButtonコンポーネント

RollOverButtonコンポーネントには、以下の表にあるパラメータが用意されています。このコンポーネントをムービークリップにドラッグ&ドロップで設置するだけで、そのムービークリップがボタンとして動作するようになります。

アイコン パラメータ 内容
アイコン CURRENT点 「移動先となるシーンパス」パラメータにかかれているシーンにいる時に表示するフレームを指定する。
DISABLE点 クリックできない状態の時に表示するフレームを指定する。
DOWN点 マウスクリック時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
OVER点  ロールオーバー時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
UP点  ボタンからマウスが離れた時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
移動先となるURL 移動先となるURLを指定する。
移動先となるシーンパス 移動先となるシーンのパスを指定する。シーンの設定については「外部XMLに各シーンごとの設定を書き込む」で詳しく説明します。
アクセスキー バージョン2.0.0 Beta 2では実装されていないため、使用できません。
ツールヒント バージョン2.0.0 Beta 2では実装されていないため、使用できません。

各ボタンの設定

ProfileButtonムービークリップ(PROFILEボタン)を例に、 RollOverButtonコンポーネントを使ってページ遷移機能を実装する方法を解説します。まずは、ProfileButtonムービークリップのフレームアニメーションを作成します(図14)。そして、上記のパラメータを参考に、マウスオーバー時やマウスクリック時のフレームラベルを設定します。

ProfileButtonムービークリップのフレームアニメーションとフレームラベル
図 14. ProfileButtonムービークリップのフレームアニメーションとフレームラベル

次に、ComponentレイヤーにRollOverButtonコンポーネントを設置します(図15)。

file
「移動先となるシーンパス」に「/index/profile」を入力して、その他のパラメータはデフォルトのままです
図 15. 「移動先となるシーンパス」に「/index/profile」を入力して、その他のパラメータはデフォルトのままです

以上で、ナビゲーションボタンへのページ遷移機能の実装は完了です。その他のボタンにも同じようにRollOverButtonコンポーネントを設置してアニメーションを実装します。

ステップ4: ImageBoxコンポーネントを使って写真を外部から読み込む

サンプルのGALLERYページでは、写真のサムネイルが並び、サムネイルをクリックすると拡大写真がページ中央に表示されるようになっています。拡大写真は、外部ファイルとして読み込んでいます。この外部画像ファイル読み込み機能は、Progression Castsコンポーネント群の中のImageBoxコンポーネントを使って実装しています。

ImageBoxコンポーネント

ImageBoxコンポーネントには、以下の表にあるパラメータが用意されています。このコンポーネントをムービークリップにドラッグ&ドロップで設置するだけで、そのムービークリップに指定した画像を読み込むことができます。

アイコン パラメータ 内容
アイコン ERROR点 画像の読み込みのエラー時に表示するフレームラベルを指定する。
LOAD点 画像の読み込み中に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
スムージング 画像をスムージング(滑らかに表示)するかどうかを指定する。
ピクセルにスナップ ピクセルに沿って配置をするかを指定する。
画像のURL 読み込む画像のURLを指定する。
縦横比の維持 画像の縦横比を維持するかどうかを指定する。
ツールヒント バージョン2.0.0 Beta 2では実装されていないため、使用できません。

各拡大写真を外部読み込みに設定

Photo1Pageムービークリップを例に、GALLERYページの拡大写真を外部読み込みにする方法を解説します。Photo1Pageムービークリップは、写真画像を入れ子にしたPhoto1ムービークリップと、拡大写真表示時に周りを暗くするための半透明の黒い矩形を入れ子にしたDetailBackgroundグラフィックシンボルで構成されています。サンプルではPhoto1ムービークリップ には直接画像が張られている状態なので、その画像を外部読み込みにするために ImageBoxコンポーネントで置き換えます。

file
ImageBoxコンポーネントを設置したら、パラメーターの「画像のURL」を「../assets/photo/photo1.jpg」に変更します。その他のパラメーターはデフォルトのままです
図 16. ImageBoxコンポーネントを設置したら、パラメーターの「画像のURL」を「../assets/photo/photo1.jpg」に変更します。その他のパラメーターはデフォルトのままです

ImageBoxコンポーネントで置き換えたら、次に、拡大写真をクリックするとGALLERYページに戻るようにしたいので、ParentButtonコンポーネントを使って、戻るボタン用のGalleryBackButtonムービークリップを作成します。

ParentButtonコンポーネント

ParentButtonコンポーネントには、以下の表にあるパラメータが用意されています。ParentButtonコンポーネントはRollOverButtonコンポーネントの派生で、一つ上の階層に戻る機能を実現します。

アイコン パラメータ 内容
アイコン CURRENT点 「移動先となるシーンパス」パラメータにかかれているシーンにいる時に表示するフレームを指定する。
DISABLE点 クリックできない状態の時に表示するフレームを指定する。
DOWN点 マウスクリック時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
OVER点  ロールオーバー時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
UP点  ボタンからマウスが離れた時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。
Progression識別子   
アクセスキー バージョン2.0.0 Beta 2では実装されていないため、使用できません。
ツールヒント バージョン2.0.0 Beta 2では実装されていないため、使用できません。

GALLERYページに戻るボタンを設定

GALLERYページに戻るボタンとなるGalleryBackButtonムービークリップには、ParentButtonコンポーネントを設置して、また、ロールオーバー時のグレーアウト効果のための矩形を作成します(図17)。

file
GalleryBackButtonムービークリップのタイムライン。upラベル時には半透明の矩形は完全に透明です。up時に透明の矩形がないとボタンとして機能しないので透明の矩形にしています
図 17. GalleryBackButtonムービークリップのタイムライン。upラベル時には半透明の矩形は完全に透明です。up時に透明の矩形がないとボタンとして機能しないので透明の矩形にしています

GalleryBackButtonムービークリップを作成したら、Photo1ムービークリップにGalleryBackButtonムービークリップの矩形とPhoto1の背景の矩形と合うように GalleryBackButton レイヤーに配置します(図18)。

file
GalleryBackButtonムービークリップの矩形とPhoto1の背景の矩形が重なるように配置します
図 18. GalleryBackButtonムービークリップの矩形とPhoto1の背景の矩形が重なるように配置します

Photo1Pageムービクリップにも表示・非表示のアニメーションを追加するので、InOutMovieコンポーネントを設置します(図19)。

Photo1PageムービクリップにもInOutMovieコンポーネントを設置します
図 19. Photo1PageムービクリップにもInOutMovieコンポーネントを設置します

各サムネイルにRollOverButtonコンポーネントを追加する

各サムネイルをクリックすると対応した拡大写真を表示したいので、各サムネイルにRollOverButtonコンポーネントを設置して、各写真のシーンのパス (/index/gallery/photo1)を設定します(図20)。

Photo1Pageムービクリップにも表示・非表示のアニメーションを追加するので、InOutMovieコンポーネントを設置します(図19)。

サムネイルのムービークリップにRollOverButtonコンポーネントを設置して、拡大写真のページへ遷移する機能を実装します
図 20. サムネイルのムービークリップにRollOverButtonコンポーネントを設置して、拡大写真のページへ遷移する機能を実装します

ステップ5:EasyCasting機能でサイトのシーン表示をコントロールする

コンテンツのパーツやページを作成し、コンポーネントで各種機能を実装した後は、EasyCasting機能を使ってサイト表示のコントロールを行います。EasyCasting機能では、XMLファイルでサイトの各シーンにどのパーツを表示するかなどを定義して、EasyCasting Loaderコンポーネントを使用してそのXMLファイルをSWFファイルに読み込みます。

XMLファイルの作成

Progression Framework 2で、使用するXMLのタグは以下の3種類です。

タグ 属性 内容
prml   htmlタグのように、必須となるタグ。
  version prmlのバージョンを記述します(現在は2.0.0)
scene   各シーンの設定をするタグです。
  name シーンの名前を設定する。この名前を使用して、RollOverButtonコンポーネントなどから移動するシーンを指定するので必ずユニークな名前を付ける必要があります。
  title Webブラウザに表示するタイトルを設定する。
cast   表示するオブジェクトの設定をするタグ。
ERROR点 cls 表示するクラス名を設定する。はじめに設定したリンケージ設定のクラス名で指定する。
  index 表示するオブジェクトの深度を設定する。数字が大きいほど上になる。

では、このタグを使って、簡単なサイトの構造例を書いてみましょう。

<?xml version="1.0" encoding="UTF-8" ?> <prml version="2.0.0"> <scene name="index" title="ALAN SMITHEE"> <cast cls="TopPage" index="5" /> <cast cls="Navigation" index="10" /> <cast cls="Footer" index="1" /> <scene name="profile" title="profile | ALAN SMITHEE"> <cast cls="ProfilePage" index="5" /> <cast cls="Navigation" index="10" /> <cast cls="Footer" index="1" /> </scene> </scene> </prml>

この例のサイト表示を説明すると、indexシーンとprofileシーンの2つのシーンがあって、indexシーンではTopPageを表示し、profileシーンではProfilePageを表示しています。各シーンでは共通してNavigationオブジェクトとFooterオブジェクトを表示します。1つのシーンでしか指定されていないオブジェクトは、指定されていないシーンに移動する際に自動で消去されます。sceneタグは入れ子にすることができるので、複雑な構造のサイトでも簡単に構造を作ることができますが、1つだけ注意点があります。prmlタグの直下にはsceneタグは1つしかおけないので、第一階層のsceneタグは1つだけになります。

では、今回のサンプルサイトのXMLファイルを作成します。サイト構造を再度確認しておきましょう。これを元にXMLファイルを作成し、ファイル名を「easycasting.xml」とします。

file

ParentButtonコンポーネントには、以下の表にあるパラメータが用意されています。ParentButtonコンポーネントは RollOverButtonコンポーネントの派生で、一つ上の階層に戻る機能を実現します。

<?xml version="1.0" encoding="UTF-8" ?> <prml version="2.0.0"> <scene name="index" title="ALAN SMITHEE"> <cast cls="TopPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> <scene name="profile" title="profile | ALAN SMITHEE"> <cast cls="ProfilePage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> <scene name="gallery" title="gallery | ALAN SMITHEE"> <cast cls="GalleryPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> <scene name="photo1"> <cast cls="Photo1Page" index="15" /> <cast cls="GalleryPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> <scene name="photo2"> <cast cls="Photo2Page" index="15" /> <cast cls="GalleryPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> <scene name="photo3"> <cast cls="Photo3Page" index="15" /> <cast cls="GalleryPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> <scene name="photo4"> <cast cls="Photo4Page" index="15" /> <cast cls="GalleryPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> <scene name="photo5"> <cast cls="Photo5Page" index="15" /> <cast cls="GalleryPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> <scene name="photo6"> <cast cls="Photo6Page" index="15" /> <cast cls="GalleryPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> </scene> <scene name="contact" title="contact | ALAN SMITHEE"> <cast cls="ContactPage" index="5" /> <cast cls="Navigation" index="20" /> <cast cls="Footer" index="1" /> </scene> </scene> </prml>

これで、XMLファイルでのシーンの設定は完了です。なお、今回はムービークリップのXY座標は Flash IDE上で調整しているため省略していますが、下記のようにXMLでXY座標を指定できます。

<cast cls="ContactPage" index="5" x="15" y="20" />

なお、xやyの属性が省略されている場合は、ステージの原点(左上)に配置されます。

次に、XMLファイルによるシーン設定を読み込むEasyCasting Loaderコンポーネントを配置します。

ノート : XML で指定したクラスがきちんとリンケージ設定されているか確かめましょう。リンケージ設定がされていない場合は、表示されません。

EasyCasting Loaderコンポーネント

EasyCasting Loaderコンポーネントには、以下の表にあるパラメータが用意されています。

アイコン パラメータ 内容
アイコン XMLファイルのURL サイトの構造を記したXMLファイルのURLを記述する。
XMLファイルの自動読み込み 自動で読み込むかどうか。
オンライン上でブラウザ  
キーボードショートカット  
シーン移動をロック  
シーン移動中は自動的に  

EasyCasting Loaderコンポーネントの設置

ルートにEasyCasting Loaderコンポーネントを設置します。

file
XMLファイルのURL」に先ほど作った「easycasting.xml」を指定して、その他のパラメーターはデフォルトのままにします
図 21. XMLファイルのURL」に先ほど作った「easycasting.xml」を指定して、その他のパラメーターはデフォルトのままにします

以上ですべての設定は完了です。メニューから「制御/ムービーのプレビュー 」を選んで、swfを書き出して、動作確認を行います。正常に動作したら、swfと easycasting.xmlとswfを埋め込んだhtmlファイルをサーバにアップします。

まとめ

Progression Framework 2はいかがでしたでしょうか。説明だけ読んでいるとちょっと複雑で面倒なように感じるかもしれませんが、実際に使ってみると今まで面倒だった基礎部分のほとんどをProgression Framework 2がカバーしてくれることがわかると思います。今回は初級編ということで一切ActionScriptを使わずに構築しましたが、中級編、上級編という形で今回とは違う実装方法について説明したいと思います。

製品

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • モバイルアプリ
  • Photoshop
  • Touch Apps

ソリューション

  • デジタルマーケティング
  • コンテンツオーサリング
  • Web Experience Management

業種別ソリューション

  • 教育
  • 金融機関

サポート

  • ヘルプ&サポート
  • 注文と返品
  • ダウンロードに関するヘルプ
  • ユーザー登録に関するヘルプ

ラーニング

  • ADC: Adobe Developer Center
  • Adobe TV
  • Design Magazine
  • Photoshop Magazine
  • Focus In

ご購入方法

  • アドビストア
  • アカデミックストア
  • アドビライセンスストア
  • ボリュームライセンスについて
  • 販売パートナー
  • キャンペーン情報

ダウンロード

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

会社情報

  • プレスルーム
  • パートナープログラム
  • 企業の社会的責任(英語)
  • 採用情報
  • 投資家の皆様へ(英語)
  • イベント&セミナー
  • Legal(英語)
  • セキュリティ
  • お問い合わせ
国・地域および言語の選択 日本(変更)
国・地域および言語の選択 閉じる

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

利用条件 | プライバシーポリシーとCookie (更新)

Reviewed by TRUSTe: site privacy statement