インスタンスを移動する

Home>Flash>動画のつくりかた>インスタンスを移動する

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

画面上に「上」「下」「左」「右」「リセット」というボタンを用意し、それらがクリックされるとオブジェクトがその方向に移動する、というスクリプトです。

まず、移動させるオブジェクトを描画します。
ここでは、適当に四角形を用意します。
矩形ツールで四角形を描き、描画した四角形を選択して、「右クリック」->「シンボルに変換」にして、名前を適当につけます。

オブジェクトをシンボルに変換

ムービークリップにして「OK」

ステージ上にあるものは今設定したシンボルのインスタンスになります。「プロパティインスペクタ」を開き、このインスタンスに名前をつけます。ここでは「obj_mc」にします。

プロパティでobj_mcという名前にする

次に、上下左右、リセットのボタンを配置します。

矩形ツールで四角形を5つ描き、テキストツールで、その上に「上下左右、リセット」の文字を描画します。サイズ、色等は「プロパティインスペクタ」で設定します。

ボタンを描画する

各文字と矩形の両方を選択した状態で、「右クリック」->「シンボルに変換」をクリックして、シンボルにします。

ボタンをそれぞれシンボルにする

ステージ上のインスタンスに「プロパティインスペクタ」から名前を設定します。ここでは、right_btn、left_btn、up_btn、down_btn、reset_btnとします。

ボタンのインスタンスに名前を付ける

タイムラインの1フレーム目を「右クリック」->「アクション」をクリックすると、「アクションパネル」が開きます。ここに、ActionScriptを入力していきます。

まず、各ボタンをクリックしたときの判定を書きます。

right_btn.addEventListener( MouseEvent.CLICK, move_right)
left_btn.addEventListener( MouseEvent.CLICK, move_left)
up_btn.addEventListener( MouseEvent.CLICK, move_up)
down_btn.addEventListener( MouseEvent.CLICK, move_down)
reset_btn.addEventListener( MouseEvent.CLICK, move_reset)

最初の一行目は、right_btnというインスタンス上で、マウスの左クリックをしたら、move_rightという関数を呼び出す、という意味です。以下の4行も同様の意味になります。

次に、ボタンクリック後の処理を関数に書きます。

function move_right( e:MouseEvent ):void
{
if ( obj_mc.x > stage.stageWidth ){
obj_mc.x = 0
}else{
obj_mc.x+=10
}
}

function move_left( e:MouseEvent ):void
{
if ( obj_mc.x < 0 ){
obj_mc.x = stage.stageWidth
}else{
obj_mc.x-=10
}
}

function move_up( e:MouseEvent ):void
{
if ( obj_mc.y < 0 ){
obj_mc.y = stage.stageHeight
}else{
obj_mc.y-=5
}
}

function move_down( e:MouseEvent ):void
{
if ( obj_mc.y > stage.stageHeight ){
obj_mc.y =0
}else{
obj_mc.y+=5
}
}

function move_reset( e:MouseEvent ):void
{
obj_mc.x = 0
obj_mc.y = 0
}

function move_right(){~}で、move_right関数を設定しています。

if ( obj_mc.x > stage.stageWidth ) { obj_mc.x = 0 }は、オブジェクトのX座標がステージの幅よりも大きくなったら、X座標を0(ステージの左端)にセットしなおす、という命令です。

else { obj_mc.x+=10 }とは、ステージの右端までオブジェクトが移動していない場合は、10ピクセル右に移動する、という意味です。

このように、ステージの幅と高さを取得するには、以下のようにします。

stage.stageWidth --- ステージの幅を取得
stage.stageHeight --- ステージの高さを取得

サンプル

完成したサンプルは以下のように動作します。

関連リンク

よく読まれている記事

UpDate:2011-10-18