Progression4 メニュー5個のサイトの簡単なサンプル
Progression4で、メニューが5個あるwebサイトの簡単なサンプルを作成しました
参考
http://wonderfl.net/code/dd0c34e42c13ed26f2252a69809c79e47709980a
http://wonderfl.net/code/7e242b3283f68af7e4b4f7e9b9819fad9733aecf
/**
* Copyright yoshimax ( http://wonderfl.net/user/yoshimax )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/gV8f
*/
// Progression4で、メニューが5個あるwebサイトの簡単なサンプルを作成しました
// 参考
// http://wonderfl.net/code/dd0c34e42c13ed26f2252a69809c79e47709980a
// http://wonderfl.net/code/7e242b3283f68af7e4b4f7e9b9819fad9733aecf
package {
import flash.display.*;
import jp.progression.config.*;
import jp.progression.debug.*;
import jp.progression.*;
public class Index extends Sprite {
public var manager:Progression;
public function Index() {
Progression.initialize( new BasicAppConfig() );
manager = new Progression( "index", stage, IndexScene );
Debugger.addTarget( manager );
manager.goto( manager.root.sceneId );
}
}
}
import flash.net.*;
import flash.system.*;
import flash.display.Sprite;
import flash.text.*;
import jp.progression.casts.*;
import jp.progression.casts.buttons.*;
import jp.progression.commands.display.*;
import jp.progression.commands.lists.*;
import jp.progression.commands.net.*;
import jp.progression.commands.tweens.*;
import jp.progression.commands.managers.Goto;
import jp.progression.commands.*;
import jp.progression.data.*;
import jp.progression.events.*;
import jp.progression.scenes.*;
import jp.progression.executors.ExecutorObjectState;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.MouseEvent;
import caurina.transitions.Tweener;
import caurina.transitions.properties.*;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();
class IndexScene extends SceneObject {
private var page1:SceneObject;
private var page2:SceneObject;
private var page3:SceneObject;
private var page4:SceneObject;
private var page5:SceneObject;
public function IndexScene() {
// シーン1を作成
page1 = addScene(new SceneObject("page1"));
page1.onSceneInit = function():void {
var r:Resource = getResourceById("http://assets.wonderfl.net/images/related_images/0/00/0080/0080cd61d25c2bad87d11c67f3b2e6272be1a9f7");
var photo1:Bitmap = new Bitmap( r.toBitmapData() );
photo1.alpha = 0;
photo1.x = -466;
photo1.name = "photo1";
Tweener.addTween(photo1, {_Blur_blurX:50, _Blur_blurY:0, time:0});
Tweener.updateTime();
Tweener.addTween(photo1, {_Blur_blurX:0, _Blur_blurY:0, time:2.4});
this.addCommand(
new AddChildAt(container, photo1, 0),
[
new DoTweener(photo1, { alpha:1, time:2 } ),
new DoTweener(photo1, { x:0, time:2 } )
]
)
};
page1.onSceneUnload = function():void {
var photo1:Bitmap = Bitmap(container.getChildByName("photo1"));
Tweener.addTween(photo1, {x: 466, time:2, delay:0, transition: "liner", onCompleteParams:[this],onComplete: function(obj:*):void{ var com:Command = new RemoveChildByName(container, "photo1"); com.execute(); }});
};
// シーン2を作成
page2 = addScene(new SceneObject("page2"));
page2.onSceneInit = function():void {
var r:Resource = getResourceById("http://assets.wonderfl.net/images/related_images/c/c1/c1b9/c1b9744d910cc38c08a7fe64b81d6c1dc84a2511");
var photo2:Bitmap = new Bitmap( r.toBitmapData() );
photo2.alpha = 0;
photo2.x = -466;
photo2.name = "photo2";
Tweener.addTween(photo2, {_Blur_blurX:50, _Blur_blurY:0, _Blur_quality:3, time:0});
Tweener.updateTime();
Tweener.addTween(photo2, {_Blur_blurX:0, _Blur_blurY:0, _Blur_quality:3, time:2.4});
this.addCommand(
new AddChildAt(container, photo2, 0),
[
new DoTweener(photo2, { alpha:1, time:2 } ),
new DoTweener(photo2, { x:0, time:2 } )
]
)
};
page2.onSceneUnload = function():void {
var photo2:Bitmap = Bitmap(container.getChildByName("photo2"));
Tweener.addTween(photo2, {x: 466, time:2, delay:0, transition: "liner", onCompleteParams:[this],onComplete: function(obj:*):void{ var com:Command = new RemoveChildByName(container, "photo2"); com.execute(); }});
};
// シーン3を作成
page3 = addScene(new SceneObject("page3"));
page3.onSceneInit = function():void {
var r:Resource = getResourceById("http://assets.wonderfl.net/images/related_images/c/c6/c614/c6140b8a6ad34ce9abaf859e889eae4cb8a4cc74");
var photo3:Bitmap = new Bitmap( r.toBitmapData() );
photo3.alpha = 0;
photo3.x = -466;
photo3.name = "photo3";
Tweener.addTween(photo3, {_Blur_blurX:50, _Blur_blurY:0, time:0});
Tweener.updateTime();
Tweener.addTween(photo3, {_Blur_blurX:0, _Blur_blurY:0, time:2.4});
this.addCommand(
new AddChildAt(container, photo3, 0),
[
new DoTweener(photo3, { alpha:1, time:2 } ),
new DoTweener(photo3, { x:0, time:2 } )
]
)
};
page3.onSceneUnload = function():void {
var photo3:Bitmap = Bitmap(container.getChildByName("photo3"));
Tweener.addTween(photo3, {x: 466, time:2, delay:0, transition: "liner", onCompleteParams:[this],onComplete: function(obj:*):void{ var com:Command = new RemoveChildByName(container, "photo3"); com.execute(); }});
};
// シーン4を作成
page4 = addScene(new SceneObject("page4"));
page4.onSceneInit = function():void {
var r:Resource = getResourceById("http://assets.wonderfl.net/images/related_images/b/b1/b1e5/b1e5ce9134fcb0651277a8198c62ce2a256772a5");
var photo4:Bitmap = new Bitmap( r.toBitmapData() );
photo4.alpha = 0;
photo4.x = -466;
photo4.name = "photo4";
Tweener.addTween(photo4, {_Blur_blurX:50, _Blur_blurY:0, time:0});
Tweener.updateTime();
Tweener.addTween(photo4, {_Blur_blurX:0, _Blur_blurY:0, time:2.4});
this.addCommand(
new AddChildAt(container, photo4, 0),
[
new DoTweener(photo4, { alpha:1, time:2 } ),
new DoTweener(photo4, { x:0, time:2 } )
]
)
};
page4.onSceneUnload = function():void {
var photo4:Bitmap = Bitmap(container.getChildByName("photo4"));
Tweener.addTween(photo4, {x: 466, time:2, delay:0, transition: "liner", onCompleteParams:[this],onComplete: function(obj:*):void{ var com:Command = new RemoveChildByName(container, "photo4"); com.execute(); }});
};
// シーン5を作成
page5 = addScene(new SceneObject("page5"));
page5.onSceneInit = function():void {
var r:Resource = getResourceById("http://assets.wonderfl.net/images/related_images/b/bd/bdfd/bdfdb54754514904bddd9dd4e5079a3bf81511fc");
var photo5:Bitmap = new Bitmap( r.toBitmapData() );
photo5.alpha = 0;
photo5.x = -466;
photo5.name = "photo5";
Tweener.addTween(photo5, {_Blur_blurX:50, _Blur_blurY:0, time:0});
Tweener.updateTime();
Tweener.addTween(photo5, {_Blur_blurX:0, _Blur_blurY:0, time:2.4});
this.addCommand(
new AddChildAt(container, photo5, 0),
[
new DoTweener(photo5, { alpha:1, time:2 } ),
new DoTweener(photo5, { x:0, time:2 } )
]
)
};
page5.onSceneUnload = function():void {
var photo5:Bitmap = Bitmap(container.getChildByName("photo5"));
Tweener.addTween(photo5, {x: 466, time:2, delay:0, transition: "liner", onCompleteParams:[this],onComplete: function(obj:*):void{ var com:Command = new RemoveChildByName(container, "photo5"); com.execute(); }});
};
}
protected override function atSceneLoad():void {
//manager.root.stage.addEventListener(MouseEvent.CLICK, clickHandler);
// メニューボタンの作成
var context:LoaderContext = new LoaderContext(true);
var sceneChangeButton1:SceneChangeButton = new SceneChangeButton("1", { x:40, y:5 } );
var sceneChangeButton2:SceneChangeButton = new SceneChangeButton("2", { x:120, y:5 } );
var sceneChangeButton3:SceneChangeButton = new SceneChangeButton("3", { x:200, y:5 } );
var sceneChangeButton4:SceneChangeButton = new SceneChangeButton("4", { x:280, y:5 } );
var sceneChangeButton5:SceneChangeButton = new SceneChangeButton("5", { x:360, y:5 } );
// ボタンを押したときの移動先のシーンを設定
sceneChangeButton1.sceneId = page1.sceneId;
sceneChangeButton2.sceneId = page2.sceneId;
sceneChangeButton3.sceneId = page3.sceneId;
sceneChangeButton4.sceneId = page4.sceneId;
sceneChangeButton5.sceneId = page5.sceneId;
// メニューのボックスを作成
var buttonBox:ButtonBox = new ButtonBox();
// 各シーンで利用する画像を事前に読み込み、ボタンをボックスに配置して、ボックスを表示
addCommand(
new LoaderList(null,
new LoadBitmapData(new URLRequest("http://assets.wonderfl.net/images/related_images/0/00/0080/0080cd61d25c2bad87d11c67f3b2e6272be1a9f7"), { group:"photos" , cacheAsResource:true, context:context } ),
new LoadBitmapData(new URLRequest("http://assets.wonderfl.net/images/related_images/c/c1/c1b9/c1b9744d910cc38c08a7fe64b81d6c1dc84a2511"), { group:"photos", cacheAsResource:true, context:context } ),
new LoadBitmapData(new URLRequest("http://assets.wonderfl.net/images/related_images/c/c6/c614/c6140b8a6ad34ce9abaf859e889eae4cb8a4cc74"), { group:"photos" , cacheAsResource:true, context:context } ),
new LoadBitmapData(new URLRequest("http://assets.wonderfl.net/images/related_images/b/b1/b1e5/b1e5ce9134fcb0651277a8198c62ce2a256772a5"), { group:"photos", cacheAsResource:true, context:context } ),
new LoadBitmapData(new URLRequest("http://assets.wonderfl.net/images/related_images/b/bd/bdfd/bdfdb54754514904bddd9dd4e5079a3bf81511fc"), { group:"photos", cacheAsResource:true, context:context } ),
[
new AddChild(buttonBox, sceneChangeButton1),
new AddChild(buttonBox, sceneChangeButton2),
new AddChild(buttonBox, sceneChangeButton3),
new AddChild(buttonBox, sceneChangeButton4),
new AddChild(buttonBox, sceneChangeButton5)
],
new Prop(buttonBox, { y:400 } ),
new AddChildAt(container, buttonBox, 0)
));
}
// 最初に表示したいシーンに移動
protected override function atSceneInit():void {
addCommand(
new Goto(getSceneAt(0).sceneId)
// new Goto(new SceneId("/index/page1"))
);
}
}
// メニューの背景のボックス
class ButtonBox extends CastSprite {
public function ButtonBox(initObject:Object = null) {
super(initObject);
graphics.lineStyle(0, 0x000000);
graphics.beginFill(0x000000, 0.3);
graphics.drawRect(0, 0, 565, 40);
graphics.endFill();
}
}
// メニューのボタン
class SceneChangeButton extends CastButton {
public function SceneChangeButton(mes:String = "?",initObject:Object = null) {
super(initObject);
buttonMode = true;
useHandCursor = true;
//name = "btn" + mes;
// 枠を表示
graphics.lineStyle(1, 0x000000);
graphics.beginFill(0xffffff, 0.3);
graphics.drawRect(0, 0, 50, 30);
graphics.endFill();
// 文字を表示
var tf:TextField = addChild( new TextField() ) as TextField;
tf.defaultTextFormat = new TextFormat("Verdana", 18, 0xffffff);
tf.text = mes;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.selectable = false;
tf.x = 17;
tf.y = 2;
// シーンが変わった時にボタンを選択状態にしたいのでイベントを設定
super.addEventListener( CastMouseEvent.CAST_STATE_CHANGE, _castStateChange2, false, 0, true );
// super.addEventListener( CastMouseEvent.CAST_NAVIGATE_BEFORE, _castStateChange2, false, 0, true );
}
// シーンが変わった時にボタンの状態を変更
private function _castStateChange2( e:CastMouseEvent ):void {
switch ( state ) {
case 0 : { this.visible = true; break; }
case 1 : { this.visible = false; break; }
case 2 : { Tweener.addTween(this, {_tintBrightness :0.8, time:0.2, delay:0, transition: "linear"}); break; }
case 3 :
case 4 : { Tweener.addTween(this, {_tintBrightness :0, time:0.2, delay:0, transition: "linear"}); break; }
default : { }
}
}
// ボタンがロールオーバされた時の表示切り替え
protected override function atCastRollOver():void{
Tweener.addTween(this, {_tintBrightness :0.8, time:0.2, delay:0, transition: "linear"});
}
// ボタンがロールアウトされた時の表示切り替え
protected override function atCastRollOut():void{
// stateが2なら処理をしない
if(state != 2) Tweener.addTween(this, {_tintBrightness :0, time:0.2, delay:0, transition: "linear"});
}
}