AS3でステージのリサイズに対応したメニューの作成
ウィンドウをリサイズしたときにイージングでついてくる。
menu_mcにロールオーバーで完全に出てくる。&ロールアウトで半分隠れる。
メニューバー内のボタンも動く。
のような動きをAS3で作ってみました。
ActionScript 3.0 入門ノート のEaseingSimpleというものを参考にさせていただきながら作りました。
サンプル
//ActionScript//////////////////////////////////////////////////////////////////
var easeObj:EaseingSimple = new EaseingSimple(menu_mc);
//Stage.width&Heightの設定
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
//menuの初期座標の設定
var menux:uint = w/2;
var menuy:uint = h + menu_mc.height/10;
//EaseingSimpleを使用して、menuを初期座標へイージング
easeObj.easeTo(menux, menuy);
//menu_mcのscaleModeの設定と、リサイズ時のリスナー設定
menu_mc.stage.scaleMode = StageScaleMode.NO_SCALE;
menu_mc.stage.align = StageAlign.TOP_LEFT;
menu_mc.stage.addEventListener(Event.RESIZE, onStageResize);
//menu_mcにロールオーバーしたときのリスナー設定
menu_mc.addEventListener(MouseEvent.MOUSE_OVER , menuon);
menu_mc.addEventListener(MouseEvent.MOUSE_OUT , menuoff);
//menu内のボタンのリスナー設定
menu_mc.m1_btn.addEventListener(MouseEvent.CLICK,m1);
menu_mc.m2_btn.addEventListener(MouseEvent.CLICK,m2);
//onStageResize()の定義
function onStageResize (event:Event):void {
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
menux = w/2;
menuy = h + menu_mc.height/10;
easeObj.easeTo(menux, menuy);
}
//menuon()の定義
function menuon (event:MouseEvent):void {
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
menux = w/2;
menuy = h - menu_mc.height/2;
easeObj.easeTo(menux, menuy);
}
//menuoff()の定義
function menuoff (event:MouseEvent):void {
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
menux = w/2;
menuy = h + menu_mc.height/10;
easeObj.easeTo(menux, menuy);
}
//m1()の定義
//function m1...
//m2()の定義
//function m2 ...
//EaseingSimple.as//////////////////////////////////////////////////////////////////
package {
import flash.display.MovieClip;
import flash.geom.Point;
import flash.events.Event;
public class EaseingSimple {
var my_mc:MovieClip;
var endPoint:Point;
//コンストラクタ
function EaseingSimple(mc:MovieClip) {
my_mc = mc;
}
//イーズ開始
public function easeTo(end_x:Number, end_y:Number):void {
endPoint = new Point(end_x, end_y);
my_mc.addEventListener(Event.ENTER_FRAME, easeStep);
}
//繰り返しステップ
private function easeStep(event:Event):void {
var mcPoint:Point = new Point(my_mc.x, my_mc.y);
//2点間の距離
var distance:Number = Point.distance(mcPoint, endPoint);
if (distance>1) {
var tmpPoint:Point = getTmpPoint();
my_mc.x = tmpPoint.x;
my_mc.y = tmpPoint.y;
} else {
my_mc.x = endPoint.x;
my_mc.y = endPoint.y;
my_mc.removeEventListener(Event.ENTER_FRAME, easeStep);
}
}
//座標計算
private function getTmpPoint():Point {
var tmpX:Number = my_mc.x + (endPoint.x - my_mc.x) *0.3;
var tmpY:Number = my_mc.y + (endPoint.y - my_mc.y) *0.3;
var tmpPoint:Point = new Point(tmpX,tmpY);
return tmpPoint;
}
//イーズ中断
public function stop():void {
my_mc.removeEventListener(Event.ENTER_FRAME, easeStep);
}
}
}
menu_mcにロールオーバーで完全に出てくる。&ロールアウトで半分隠れる。
メニューバー内のボタンも動く。
のような動きをAS3で作ってみました。
ActionScript 3.0 入門ノート のEaseingSimpleというものを参考にさせていただきながら作りました。
サンプル
//ActionScript//////////////////////////////////////////////////////////////////
var easeObj:EaseingSimple = new EaseingSimple(menu_mc);
//Stage.width&Heightの設定
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
//menuの初期座標の設定
var menux:uint = w/2;
var menuy:uint = h + menu_mc.height/10;
//EaseingSimpleを使用して、menuを初期座標へイージング
easeObj.easeTo(menux, menuy);
//menu_mcのscaleModeの設定と、リサイズ時のリスナー設定
menu_mc.stage.scaleMode = StageScaleMode.NO_SCALE;
menu_mc.stage.align = StageAlign.TOP_LEFT;
menu_mc.stage.addEventListener(Event.RESIZE, onStageResize);
//menu_mcにロールオーバーしたときのリスナー設定
menu_mc.addEventListener(MouseEvent.MOUSE_OVER , menuon);
menu_mc.addEventListener(MouseEvent.MOUSE_OUT , menuoff);
//menu内のボタンのリスナー設定
menu_mc.m1_btn.addEventListener(MouseEvent.CLICK,m1);
menu_mc.m2_btn.addEventListener(MouseEvent.CLICK,m2);
//onStageResize()の定義
function onStageResize (event:Event):void {
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
menux = w/2;
menuy = h + menu_mc.height/10;
easeObj.easeTo(menux, menuy);
}
//menuon()の定義
function menuon (event:MouseEvent):void {
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
menux = w/2;
menuy = h - menu_mc.height/2;
easeObj.easeTo(menux, menuy);
}
//menuoff()の定義
function menuoff (event:MouseEvent):void {
var w:uint = stage.stageWidth;
var h:uint = stage.stageHeight;
menux = w/2;
menuy = h + menu_mc.height/10;
easeObj.easeTo(menux, menuy);
}
//m1()の定義
//function m1...
//m2()の定義
//function m2 ...
//EaseingSimple.as//////////////////////////////////////////////////////////////////
package {
import flash.display.MovieClip;
import flash.geom.Point;
import flash.events.Event;
public class EaseingSimple {
var my_mc:MovieClip;
var endPoint:Point;
//コンストラクタ
function EaseingSimple(mc:MovieClip) {
my_mc = mc;
}
//イーズ開始
public function easeTo(end_x:Number, end_y:Number):void {
endPoint = new Point(end_x, end_y);
my_mc.addEventListener(Event.ENTER_FRAME, easeStep);
}
//繰り返しステップ
private function easeStep(event:Event):void {
var mcPoint:Point = new Point(my_mc.x, my_mc.y);
//2点間の距離
var distance:Number = Point.distance(mcPoint, endPoint);
if (distance>1) {
var tmpPoint:Point = getTmpPoint();
my_mc.x = tmpPoint.x;
my_mc.y = tmpPoint.y;
} else {
my_mc.x = endPoint.x;
my_mc.y = endPoint.y;
my_mc.removeEventListener(Event.ENTER_FRAME, easeStep);
}
}
//座標計算
private function getTmpPoint():Point {
var tmpX:Number = my_mc.x + (endPoint.x - my_mc.x) *0.3;
var tmpY:Number = my_mc.y + (endPoint.y - my_mc.y) *0.3;
var tmpPoint:Point = new Point(tmpX,tmpY);
return tmpPoint;
}
//イーズ中断
public function stop():void {
my_mc.removeEventListener(Event.ENTER_FRAME, easeStep);
}
}
}