MovieClip

カスタムクラスで読み込んだムービークリップに加速度をつけて移動させる

『Math.random() を使ってランダムに色を変える方法』で利用したBall.asを今回も使ってステージにボールを配置します。
X軸はステージの1/5の位置に配置し、Y軸をステージの真ん中に配置させます。（サイズ50と青色を指定）

//Ball.asを読み込み
var ball:Ball = new Ball(50, 0x0000ff);
addChild(ball);
ball.x = stage.stageWidth / 5;
ball.y = stage.stageHeight / 2;

これでステージにボールが表示されるようになったと思いますので、次にボールを動かすスクリプトを書きます。
今までやってきたムービークリップの動かし方にさらに加速度のプログラムを足します。

Continue reading

ステージに配置したムービークリップにTransitionManagerクラスを使ってトランジション効果をつける

[1-8]でフェードインさせるアクションスクリプトとよく似た感じになりますが、TransitionManagerクラスを使用すればもっと違う表現の効果をあたえることができます。

タイムライン上にあるアクションスクリプトに、まずTweenクラスとeasingクラスをインポートさせ、使えるようにします。
（[3-4]同様）

//クラスのインポート
import fl.transitions.*;
import fl.transitions.easing.*;

[3-3]でカクスタムクラスを使ってステージ上にムービークリップを配置しているアクションスクリプトのBallをimgに変更してステージに表示させます。
（[1-8]同様にステージにimg_mcのムービークリップを用意している前提です）

Continue reading

ステージに配置したムービークリップにTweenクラスを使ってトゥイーンさせる

[3-3]でステージに配置したムービークリップにトゥイーンモーションを指定してます。

タイムライン上にあるアクションスクリプトに、まずTweenクラスとeasingクラスをインポートさせ、使えるようにします。

//クラスのインポート
import fl.transitions.Tween;
import fl.transitions.easing.*;

Tweenクラスに関しては、もっと奥が深いので今回は取り合えず簡単に使えるやり方にします。
詳しくはもっと勉強してからと言うことで…

[3-3]でカクスタムクラスを使ってステージ上にムービークリップを配置してますので、さらにTweenクラス用のアクションスクリプトを追記します。

// モーション設定
var mcTween:Tween;
mcTween = new Tween(my_mc, "y", Bounce.easeOut, 0, (stage.stageHeight - my_mc.height/2), 5, true);

変数mcTweenをTweenクラスを指定して宣言し、new演算子でTweenクラスでトゥイーンさせる処理を書きます。
順番としては
①トゥイーンさせるインスタンス名
②変化させたいプロパティ
③アニメーションの種類
④開始値
⑤終了値
⑥継続時間
⑦継続時間の単位
になります。
アニメーションの種類に関しては、あとでまとめます。

Continue reading

カスタムクラスを使ってステージにムービークリップを配置

いままでは、タイムライン上（flaファイル）に直接アクションスクリプトを記述してきましたが、今回はasファイル（カスタムクラス）を使って外部からアクションスクリプトを書いていきます。

カスタムクラスを使って外部からアクションスクリプトを書く場合には、いくつかルールがあります。
パッケージ名、クラス名、インスタンスの変数、コンストラクタの定義、メソッドの定義を条件に応じて記述しなくてはなりません。

//パッケージ名
package {
	//インポートするクラス
	import flash.display.MovieClip;
	import flash.events.Event;
	//クラス定義
	public class asファイル名と同じ {
		//変数の宣言
		//コンストラクタの定義
		//メソッド定義
	}
}

パッケージ名とは、クラスが属するパッケージを示します。
パッケージ名を省略すると、デフォルトパッケージと見なされます。その場合はasファイルはflaファイルと同じ階層に置かなくてはなりません。

クラス名とは、クラスの名前ですが、アクションスクリプトでは、このクラス名とasファイル名が同じにする必要があります。

インスタンスの変数とは、クラスで使う変数となりますが、外部のクラスから変数にプロパティとしてアクセスするには、publicを指定しなくてなりません。

コンストラクタの定義とは、実行させたいプログラムを動かす為の定義となります。
これもインスタンスの変数と同様にpublicが必要になります。

メソッドの定義とは、簡単に言うと実行するプウログラム本体になります。

Continue reading

クラス（リンケージ）参照でランダムにムービークリップを呼び出す

あらかじめライブラリーに表示させたいムービークリップを用意し、プロパティーでリンケージのクラス名に順番を付けて用意します。（例：img_mc1）

用意できたら、ムービークリップの順番を配列に置き換えます。

//配列
var myImg:Array = new Array();
myImg[0] = "img_mc1"
myImg[1] = "img_mc2"
myImg[2] = "img_mc3"

次にランダムで表示させる為のプログラムを用意します。
ランダムで表示させる為には、変数NoにMath.randomを使って、配列の数をランダムに置き換えまる感じになります。

var No = Math.floor(Math.random()* myImg.length);

さらに、ランダムで置き換えられた変数Noを使って、ステージ上にムービークリップを表示させます。

Continue reading

クラス（リンケージ）参照でムービークリップを動かす

あらかじめライブラリーに表示させたいムービークリップを用意し、プロパティーでリンケージのクラス名を付けます。（例：ball_mc）

new演算子を使ってムービークリップballに置き換え、addChildを使ってステージにムービークリップを配置します。

//ステージに配置
var ball:MovieClip = new ball_mc();
addChild(ball);
ball.x = stage.stageWidth / 2;
ball.y = stage.stageHeight / 2;

初期表示位置（スタート位置）をステージの真ん中に設定しました。

配列を利用して複数のボタンにリンクを付けてる

ムービークリップのボタンに飛び先となるURLを指定するのに配列を利用します。
配列にあらかじめ飛び先となるURLを格納して、添字を利用してループ処理を行うような感じになります。

//配列
var url:Array = new Array();
url[1] = "http://www.yahoo.co.jp";
url[2] = "http://www.google.co.jp";
url[3] = "http://www.addchild.net";

ここでは添字を1から始めてますが、本来なら配列は0からはじまることが定められてます。
しかしムービークリップのインスタンス名の数字と合わせる為に、このような手法を取っています。

配列の準備が出来れば、マウスダウンした時の処理をループさせます。

for(var i:int = 1; i < 4; i++){
	if(btn == this["btn_mc"+i]){
		var link:URLRequest = new URLRequest(url[i]);
		var target:String = "_self";
		navigateToURL(link,target);
	}
}

switchを利用することも出来ますが、今回はforを使ってプログラム処理を簡略化しています。
下記はswitchのプログラムです。

Continue reading

ボタンごとにマウスオーバー（オンマウス）のムービークリップを指定する – for編

[2-5]で使用したムービークリップのボタンとイメージムービークリップを連動さるアクションスクリプトをもっと簡略化した条件分岐（今回はfor）でプログラム処理をします。

マウスオーバー、マウスアウトした時の処理を[2-5]ではswitchを使って条件分岐をしていましたが、今回はforを使って条件分岐を行います。
forを使うことで、アクションスクリプトの簡略化にもつながります。

//マウスオーバー
function Over(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 0.7;
	//条件に合わしてイベントリスナー登録
	for(var i:int = 1; i < 4; i++){
    	if(btn == this["btn_mc"+i]){
        	this["img_mc"+i].addEventListener(Event.ENTER_FRAME,imgAlpha);
    	}
	}
}
//マウスアウト
function Out(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 1;
	//条件に合わしてイベントリスナー登録
	for(var i:int = 1; i < 4; i++){
    	if(btn == this["btn_mc"+i]){
        	this["img_mc"+i].addEventListener(Event.ENTER_FRAME,zero);
    	}
	}
}

オンマウス、マウスアウトした時に走るイベントリスナーをforを使ってループさせます。

Continue reading

ボタンごとにマウスオーバー（オンマウス）のムービークリップを指定する – switch編

複数のムービークリップのボタンと複数のイメージムービークリップを連動させ、条件分岐（今回はswitch）でプログラム処理を変えます。
複数のボタンの登録は[2-2]で使用したfor文を使い、ボタンとなるムービークリップのアクションスクリプトを書きます。
さらにステージ上にマウスオーバー時に動かすムービークリップを用意します。
今回は[1-8]で使用したムービークリップを使い、そのムービークリップの色違いを複数用意しステージに配置してインスタンス名を付けます。（今回はimg_mc1.img_mc2にしました）
インスタンス名を付ける時に[2-2]のようにインスタンス名の最後に1からの数字を付けます。

マウスオーバー時の処理とマウスアウト時の処理を変更していきます。
[2-2]で使用したアクションスクリプトのマウスオーバーとマウスアウトのプログラムにイメージムービークリップを表示させるプログラムを追加します。

//マウスオーバー
function Over(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 0.7;
	switch(btn){
		//1
		case btn_mc1:
		//マウスオーバーされたらイベントリスナー登録
		img_mc1.addEventListener(Event.ENTER_FRAME,imgAlpha);
		break;
		//2
		case btn_mc2:
		//マウスオーバーされたらイベントリスナー登録
		img_mc2.addEventListener(Event.ENTER_FRAME,imgAlpha);
		break;
	}
}
//マウスアウト
function Out(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 1;
	switch(btn){
		//1
		case btn_mc1:
		img_mc1.addEventListener(Event.ENTER_FRAME,zero);
		break;
		//2
		case btn_mc2:
		img_mc2.addEventListener(Event.ENTER_FRAME,zero);
		break;
	}
}

Continue reading

複数のムービークリップのボタン別にリンクを付ける

[2-3]で使用したアクションスクリプトでは、複数のムービークリップに対して一つのリンク先を付けてましが、今回は押されたムービークリップのボタンごとに、別々のリンク先を用意して、条件分岐でリンク先を変更させます。

[2-3]で使用したアクションスクリプトのクリック時、またはマウスダウン時のリスナー関数に条件分岐のプログラムを追加します。
今回使う条件分岐はswitchで、ターゲットのムービークリップごとに振り分けて、別々のリンク先を指定するような感じなります。

//押されたムービークリップで条件分岐
	switch(btn){
		//1
		case btn_mc1:
		var google:URLRequest = new URLRequest("http://www.google.co.jp");
		navigateToURL(google);
		break;
		//2
		case btn_mc2:
		var yahoo:URLRequest = new URLRequest("http://www.yahoo.co.jp");
		navigateToURL(yahoo);
	}

Continue reading