前回は、
シーンの作成
まず、
// シーンを作成します。
var gallery:SceneObject = new SceneObject();
// シーンに名前を設定します。
gallery.name = "gallery";
// シーンをルートに追加します。
manager.root.addScene( gallery );
子シーンの作成
続いて、
作成するシーンは、
// americanシーンを作成します。
var american:SceneObject = new SceneObject();
// シーンの名前を設定します。
american.name = "american";
// シーンをgalleryに追加します。
gallery.addScene( american );
// frenchシーンを作成します。
var french:SceneObject = new SceneObject();
// シーンの名前を設定します。
french.name = "french";
// シーンをgalleryに追加します。
gallery.addScene( french);
// mameシーンを作成します。
var mame:SceneObject = new SceneObject();
// シーンの名前を設定します。
mame.name = "mame";
// シーンをgalleryに追加します。
gallery.addScene( mame);
これで、
ボタンの作成
それでは、
![図1 シーンパスの設定 図1 シーンパスの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_01.png)
ロールオーバーの設定
「GalleryButton」
![図2 ロールオーバーの設定 図2 ロールオーバーの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_02.png)
ボタンの表示
ボタンの設定が完了したら、
![図3 「GalleryButton」ボタンの設置 図3 「GalleryButton」ボタンの設置](/assets/images/design/serial/01/progression4/0006/thumb/TH800_03.png)
設置が完了したら、
![図4 ボタン表示確認 図4 ボタン表示確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_04.png)
表示されている
![図5 シーン遷移確認 図5 シーン遷移確認](/assets/images/design/serial/01/progression4/0006/thumb/TH400_05.png)
表示オブジェクトのアニメーション設定
続いて、
簡単なアニメーションの設定を行いましょう。
![図6 レイヤーの設定 図6 レイヤーの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_06.png)
次に、
![図7 アニメーションの設定 図7 アニメーションの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_07.png)
表示設定
設定が完了したら、
// galleryPageを作成します。
var galleryPage:GalleryPage = new GalleryPage();
galleryPage.x = 151;
galleryPage.y = 114;
次に、
// galleryPage の表示設定を行います。
gallery.onSceneLoad = function():void {
this.addCommand(
new AddChild( this.container , galleryPage )
);
}
// galleryPage の削除設定を行います。
gallery.onSceneUnload = function():void {
this.addCommand(
new RemoveChild( this.container , galleryPage )
);
}
「gallery」
![図8 「GalleryPage」表示確認 図8 「GalleryPage」表示確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_08.png)
ボタンの設定
「gallery」
AmericanButton
まず
![図9 シーンパスの設定 図9 シーンパスの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_09.png)
ここでは、
FrenchButton
次に、
![図10 シーンパスの設定 図10 シーンパスの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_10.png)
MameButton
最後に
![図11 シーンパスの設定 図11 シーンパスの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_11.png)
ボタンの表示
ボタンの設定が完了したら、
表示設定の前には、
// ボタンインスタンスを生成します。
var americanButton:AmericanButton = new AmericanButton();
americanButton.x = 150;
americanButton.y = 161;
// ボタンインスタンスを生成します。
var frenchButton:FrenchButton = new FrenchButton();
frenchButton.x = 270;
frenchButton.y = 161;
// ボタンインスタンスを生成します。
var mameButton:MameButton = new MameButton();
mameButton.x = 390;
mameButton.y = 161;
表示設定の際に使用するイベントハンドラメソッドは
// galleryPage の表示設定を行います。
gallery.onSceneLoad = function():void {
this.addCommand(
new AddChild( this.container , galleryPage ),
new AddChild( this.container , americanButton ),
new AddChild( this.container , frenchButton ),
new AddChild( this.container , mameButton )
);
}
ボタンの削除処理も
// galleryPage の削除設定を行います。
gallery.onSceneUnload = function():void {
this.addCommand(
new RemoveChild( this.container , galleryPage ),
new RemoveChild( this.container , americanButton ),
new RemoveChild( this.container , frenchButton ),
new RemoveChild( this.container , mameButton )
);
}
設定が完了したら、
![図12 画像の確認 図12 画像の確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_12.png)
表示されているボタンをクリックすると、
![図13 ログの確認 図13 ログの確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_13.png)
表示オブジェクトの設定
「動物の詳細」
まずは
// インスタンスを生成します。
var photoBG:PhotoBG = new PhotoBG();
photoBG.x = 0;
photoBG.y = 0;
// インスタンスを生成します。
var photoBase:PhotoBase = new PhotoBase();
photoBase.x = 100;
photoBase.y = 20;
// インスタンスを生成します。
var closeButton:CloseButton = new CloseButton();
closeButton.x = 507;
closeButton.y = 30;
// インスタンスを生成します。
var backButton:BackButton = new BackButton();
backButton.x = 30;
backButton.y = 220;
// インスタンスを生成します。
var nextButton:NextButton = new NextButton();
nextButton.x = 570;
nextButton.y = 220;
// インスタンスを生成します。
var americanPhoto:AmericanPhoto = new AmericanPhoto();
americanPhoto.x = 120;
americanPhoto.y = 40;
// インスタンスを生成します。
var americanText:AmericanText = new AmericanText();
americanText.x = 119;
americanText.y = 354;
次に、
// americanシーンの表示オブジェクトの表示設定を行います。
american.onSceneLoad = function():void {
this.addCommand(
new AddChild( this.container , photoBG ),
new AddChild( this.container , closeButton ),
new AddChild( this.container , photoBase ),
new AddChild( this.container , backButton ),
new AddChild( this.container , nextButton ),
new AddChild( this.container , americanPhoto ),
new AddChild( this.container , americanText )
);
}
続いて、
// americanシーンの表示オブジェクトの削除設定を行います。
american.onSceneUnload = function():void {
this.addCommand(
new RemoveChild( this.container , photoBG ),
new RemoveChild( this.container , closeButton ),
new RemoveChild( this.container , photoBase ),
new RemoveChild( this.container , backButton ),
new RemoveChild( this.container , nextButton ),
new RemoveChild( this.container , americanPhoto ),
new RemoveChild( this.container , americanText )
);
}
ここまで設定が完了したら、
![図14 表示オブジェクト確認 図14 表示オブジェクト確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_14.png)
表示オブジェクトの削除設定
表示オブジェクトの削除処理は設定しましたが、
![図15 シーンパスの設定 図15 シーンパスの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_15.png)
設定が完了したら、
![図16 「CloseButton」の遷移確認 図16 「CloseButton」の遷移確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_16.png)
上位シーンでの削除処理
「american」
「gallery」
// 共通部分の表示オブジェクトの削除処理を行います。
gallery.onSceneInit = function():void {
this.addCommand(
new RemoveChild( this.container , photoBG ),
new RemoveChild( this.container , closeButton ),
new RemoveChild( this.container , photoBase ),
new RemoveChild( this.container , backButton ),
new RemoveChild( this.container , nextButton )
);
}
「american」
// americanシーンの表示オブジェクトの削除設定を行います。
american.onSceneUnload = function():void {
this.addCommand(
new RemoveChild( this.container , americanPhoto ),
new RemoveChild( this.container , americanText )
);
}
設定が完了したら、
「american」
// インスタンスを生成します。
var frenchPhoto:FrenchPhoto = new FrenchPhoto ();
frenchPhoto.x = 120;
frenchPhoto.y = 40;
// インスタンスを生成します。
var frenchText:FrenchText = new FrenchText ();
frenchText.x = 119;
frenchText.y = 354;
// frenchシーンの表示オブジェクトの表示設定を行います。
french.onSceneLoad = function():void {
this.addCommand(
new AddChild( this.container , photoBG ),
new AddChild( this.container , closeButton ),
new AddChild( this.container , photoBase ),
new AddChild( this.container , backButton ),
new AddChild( this.container , nextButton ),
new AddChild( this.container , frenchPhoto ),
new AddChild( this.container , frenchText )
);
}
// frenchシーンの表示オブジェクトの削除設定を行います。
french.onSceneUnload = function():void {
this.addCommand(
new RemoveChild( this.container , frenchPhoto ),
new RemoveChild( this.container , frenchText )
);
}
// インスタンスを生成します。
var mamePhoto:MamePhoto = new MamePhoto ();
mamePhoto.x = 120;
mamePhoto.y = 40;
// インスタンスを生成します。
var mameText:MameText = new MameText ();
mameText.x = 119;
mameText.y = 354;
// mameシーンの表示オブジェクトの表示設定を行います。
mame.onSceneLoad = function():void {
this.addCommand(
new AddChild( this.container , photoBG ),
new AddChild( this.container , closeButton ),
new AddChild( this.container , photoBase ),
new AddChild( this.container , backButton ),
new AddChild( this.container , nextButton ),
new AddChild( this.container , mamePhoto),
new AddChild( this.container , mameText)
);
}
// mameシーンの表示オブジェクトの削除設定を行います。
mame.onSceneUnload = function():void {
this.addCommand(
new RemoveChild( this.container , mamePhoto),
new RemoveChild( this.container , mameText)
);
}
設定が完了したら、
![図17 「french」表示オブジェクトの確認 図17 「french」表示オブジェクトの確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_17.png)
![図18 「mame」表示オブジェクトの確認 図18 「mame」表示オブジェクトの確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_18.png)
ボタンの設定
今は、
まず、
「scenePath」
「RollOverButton」
![図19 「BackButton」の設定 図19 「BackButton」の設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_19.png)
次に
![図20 「NextButton」の設定 図20 「NextButton」の設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_20.png)
設定が完了したら、
「BackButton」
まず、
// americanシーンの表示オブジェクトの表示設定を行います。
american.onSceneLoad = function():void {
// scenePath の設定を行います。
backButton.back.scenePath = "/index/gallery/mame";
nextButton.next.scenePath = "/index/gallery/french";
this.addCommand(
new AddChild( this.container , photoBG ),
new AddChild( this.container , closeButton ),
new AddChild( this.container , photoBase ),
new AddChild( this.container , backButton ),
new AddChild( this.container , nextButton ),
new AddChild( this.container , americanPhoto ),
new AddChild( this.container , americanText )
);
}
続いて
// frenchシーンの表示オブジェクトの表示設定を行います。
french.onSceneLoad = function():void {
// scenePath の設定を行います。
backButton.back.scenePath = "/index/gallery/american";
nextButton.next.scenePath = "/index/gallery/mame";
this.addCommand(
new AddChild( this.container , photoBG ),
new AddChild( this.container , closeButton ),
new AddChild( this.container , photoBase ),
new AddChild( this.container , backButton ),
new AddChild( this.container , nextButton ),
new AddChild( this.container , frenchPhoto ),
new AddChild( this.container , frenchText )
);
}
最後に、
// mameシーンの表示オブジェクトの表示設定を行います。
mame.onSceneLoad = function():void {
// scenePath の設定を行います。
backButton.back.scenePath = "/index/gallery/french";
nextButton.next.scenePath = "/index/gallery/american";
this.addCommand(
new AddChild( this.container , photoBG ),
new AddChild( this.container , closeButton ),
new AddChild( this.container , photoBase ),
new AddChild( this.container , backButton ),
new AddChild( this.container , nextButton ),
new AddChild( this.container , mamePhoto ),
new AddChild( this.container , mameText )
);
}
設定が完了したら、
![図21 シーン遷移の確認 図21 シーン遷移の確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_21.png)
プリローダーの作成
最後にプリローダーを作成しましょう。[Project_
「Preloader」
読み込み中に表示するテキストをステージに貼り付けましょう。
![図22 固定文字の設定 図22 固定文字の設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_22.png)
「init」
![図23 読み込み失敗時の文言 図23 読み込み失敗時の文言](/assets/images/design/serial/01/progression4/0006/thumb/TH800_23.png)
次に読み込み状態を示す
![図24 「ProgressBar」の作成 図24 「ProgressBar」の作成](/assets/images/design/serial/01/progression4/0006/thumb/TH800_24.png)
続いて、
![図25 「ProgressPer」の作成 図25 「ProgressBar」の作成](/assets/images/design/serial/01/progression4/0006/thumb/TH800_25.png)
作成したシンボルをステージに貼り付けていきましょう。タイムライン上に
![図26 「ProgressBar」の設置 図26 「ProgressBar」の設置](/assets/images/design/serial/01/progression4/0006/thumb/TH800_26.png)
読み込み状態に合わせて、
![図27 読み込み中アニメーションの設定 図27 読み込み中アニメーションの設定](/assets/images/design/serial/01/progression4/0006/thumb/TH800_27.png)
読み込みが完了すると、
![図28 「ProgressBar」を表示しない 図28 「ProgressBar」を表示しない](/assets/images/design/serial/01/progression4/0006/thumb/TH800_28.png)
続いて、
「ProgressPer」
![図29 「ProgressPer」の設置 図29 「ProgressPer」の設置](/assets/images/design/serial/01/progression4/0006/thumb/TH800_29.png)
読み込み状態をパーセントで表示するために、
読み込み開始から読み込み完了までは、
// フレーム毎にテキストの値を変更します。
addEventListener( Event.ENTER_FRAME , perText );
function perText( e:Event ):void {
// 現在フレームが50を超えたら、イベントリスナーを削除します。
if( currentFrame > 50 ) {
removeEventListener( Event.ENTER_FRAME , perText );
}
// ProgressPerにパーセンテージを設定します。
pp.per.text = String( currentFrame * 2 - 2 ) + "%";
}
設定が完了したら、
![図30 プリローダー確認 図30 プリローダー確認](/assets/images/design/serial/01/progression4/0006/thumb/TH800_30.png)
プリローダーの読み込み状態が100%になると、
まとめ
タイムラインスタイルでの制作は以上になります。今回の制作では、
なお、