アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » DEVELOPER STAGE » 特集 » Flashのフレームワーク「Progression3」を始めてみよう! » 第4回 Progression3でWebサイトを作る(前編)

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

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

お待たせしました! いよいよ今回より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/

コメント

  • とおりすがり

    筆者はちゃんと自身の記事に従って動くかどうか確かめるべきですよ!!
    単純な間違い多いっしょ

    まず、ButtonのasファイルはButtonフォルダに入れましょう。

    flaファイルのライブラリにあるBtn_Infoを
    Btn_Informationに変更しましょう。クラスもです。
    asファイル、クラス名もBtn_Information.asで作りましょう。
    Btn_Infoはいりません。

    同様にBtn_Garelly→Btn_Galleryにしましょう。

    筆者の単純なスペルミスですねw


    ボタン画像に書かれてる文字がスペルおかしかったので気づきましたよw
    progression使う以前の問題です、確認は。

    Commented : #2  じぇす (2009/07/23, 14:02)

  • ボタンの設置の部分で躓いています。。。

    初めましてas3.0&プログレッション3.0初心者です。
    ボタンの設置の箇所でムービープレビューすると
    シンタックスエラーが表示されます。
    ボタンのコマンドを消し背景とロゴだけにすると
    エラーもなく表示されるのですが。。。。
    書かれている通りやっているつもりなので、
    どこがおかしいのかもわからず途方にくれて
    おります。。助けてください。
    文法が間違っているらしき所を下記にコピーします。
    よろしくお願いします。

    protected override function _onLoad():void {
    //インスタンスの作成
    var backImage:BackImage=new BackImage();
    var logo:Logo=new Logo();
    var btn_Informaition:Btn_Information=new Btn_Information();
    var btn_Gallery:Btn_Gallery=new Btn_Gallery();
    var btn_About:Btn_About=new Btn_About();
    // 実行したいコマンドを登録します。
    addCommand(
     new Prop(logo,{x:50,y:30}),
     new AddChild(progression.container,backImage),
     new AddChild(progression.container,logo)
     new Prop(btn_Information,{x:50,y:450}),
     new Prop(btn_Gallery,{ x:300,y:450}),
     new Prop(btn_About,{x:550,y:450}),
     new AddChild(progression.container,btn_Information),
     new AddChild(progression.container,btn_Gallery),
     new AddChild(progression.container,btn_About)

    Commented : #1  ニタ (2009/07/03, 21:19)

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス