Flashのフレームワーク「Progression3」を始めてみよう!

第4回 Progression3でWebサイトを作る(前編)

この記事を読むのに必要な時間:およそ 9 分

お待たせしました! いよいよ今回よりProgression3を利用してWebサイトの作成を行っていきます。

今回は非常に簡単なサンプルサイトの作成となりますが,それでも非常に少ない労力でフルFlashのWebサイトが作成できるということを実感していただければ幸いです。

冗長となってしまうのを避けるため,既に用意してある素材を元に制作します。

以下より,元素材となるプロジェクトファイル一式をダウンロードしてください。

それでは始めてみましょう。

まず,サイト全体をどのような構成にするかを考えます。

この作業は,Progressionのシーン機能をどのような構造にするかを決定するために必要な作業です。

今回は以下のような構造で作成することとします。1項目を1つのシーンとし,前編では子シーンまでを作成します。

図1 今回作成するWEBサイトの構造

今回作成するWEBサイトの構造

キャストクラスの準備

キャストクラスの作成

早速ですが,インデックスシーンを作成していきましょう。そのためにキャストクラスを作成します。今回は簡単に作成するために,各キャストクラスの見た目はFlashのファイルに用意されているムービークリップを使用します。

最初に作成するのは以下のパーツです。

  • 背景
  • ロゴ
  • ボタン

背景とロゴはCastSprite,ボタンはCastButtonを継承したクラスを作成します。

さて,早速キャストクラスを作成していきますが,ここで連載第2回の方法と同様にTemplatesフォルダに入っているテンプレートファイルからコピーをしてキャストクラスを作成します。

TemplatesフォルダのMyCastSprite.asをコピーしてstageフォルダへペーストしてください。

図2 キャストスプライトの作成

図2 キャストスプライトの作成

その後,MyCastSprite.asのファイル名をBackImage.asと名前を変更し,パッケージ名をmyproject.stage,クラス名,コンストラクタをBackImageと変更します。

package myproject.stage 
{
  import jp.progression.casts.*;
  import jp.progression.commands.*;
  import jp.progression.events.*;
  import jp.progression.loader.*;
  import jp.progression.*;
  import jp.progression.scenes.*;

  /*======================================================================*//**
  * BackImage クラス
  */
  public class BackImage extends CastSprite
  {
  
    /*======================================================================*//**
    * コンストラクタ
    */
    public function BackImage( initObject:Object = null ) 
    {
      super( initObject );
    }
以下略

Flashファイルのムービークリップとの関連づけ

これで,クラスファイルの用意はできましたが,このクラスファイルをFlashに用意してあるムービークリップへ関連付ける必要があります。

Flashファイルのライブラリパネル内のstageフォルダにBackImageというムービークリップがありますので,そのムービークリップを右クリックして,メニューの中にあるプロパティを選択するか,ライブラリパネルの下にあるiボタンをクリックしてください。

するとシンボルプロパティというダイアログボックスが開きますので,ActionScriptに書き出し,最初のフレームに書き出しにチェックを入れ,クラスにmyproject.stage.BackImageと記入し,OKを押してください。ここで警告が出てしまう場合はクラスのスペルが間違っていないかをチェックしてください。合っていれば無警告でダイアログが閉じます。

図3 用意されているムービークリップにクラスを関連付ける

図3 用意されているムービークリップにクラスを関連付ける

これで一つのキャストオブジェクトの用意が完了したことになります。

上記と同様に,ロゴを作成してください。ロゴはCastSprite,クラス名はLogo,フラッシュのムービークリップはstageフォルダ内のLogoです。

次にボタンの作成を行います。

ボタンの場合はMyCastButton.asをコピーして作ります。パッケージ名はmyproject.buttonsとしてください。

フラッシュファイルのライブラリの中のbuttonsフォルダに入っているムービークリップに各々上記と同様の設定をします。

著者プロフィール

楢山哲弘(ならやまのりひろ)

3年前に上京してきた北海道出身のFlasher。

開発スピードを上げるため,Progressionに傾倒中。そのため,ブログではProgressionについての言及が多くなっている。

URLhttp://narayama.heteml.jp/