外部イメージの利用/シンボル/ライブラリ

外部イメージを背景として使う

ここでは, カメラ, ペイントツールなど外部で用意したイメージをFlash で使うことを試しましょう.

1. 携帯のカメラで写真を撮ってメールに添付で送る, または, Webから適当なイメージをダウンロードする(フリー, 素材, 画像などで検索しましょう) ことによって, 画像ファイルを用意します.
2. アプリケーション>プレビューを利用して, 適当な部分を切り出し, 適当なサイズ, 解像度で保存します. 携帯Flashの画面は何ピクセル×何ピクセルでしたっけ? 形式は JPEGまたはPNGにしましょう(他の形式でうまくいくかどうか試してみてもいいでしょう)
3. .fla を用意します.
4. Flash → ファイル > 読み込み > ライブラリに読み込みで画像ファイルをライブラリに読み込みます.
5. 1フレーム目にいることを確認した上で, Flash → ウィンドウ > ライブラリでライブラリを表示して, ライブラリに登録された画像をステージにドラッグします. この際, 新しい背景専用のレイヤーを作って, そのレイヤーにドラッグする方がいいでしょう.
6. 別のフレームに別の画像を置くとどうなるでしょう?

課題

ブロック崩し零号機で, 背景に画像を使おう.

外部イメージをMovieClip(の材料)として使う

次のサンプルで, 緑のball2を外部のイメージに置き換えてみましょう.

var mcball:MovieClip = this.createEmptyMovieClip("ballname",this.getNextHighestDepth());

//mcball の初速度
var vx1:Number=1;
var vy1:Number=2;
var vxa:Number=1;
var vya:Number=2;
var vxb:Number=1;
var vyb:Number=2;

mcball.lineStyle(4,0x0000ff, 100, true, "none", "round","mitter",1);
mcball.moveTo(-1,0);
mcball.lineTo(+1,0);
mcball._x=1;
mcball._y=2;


//var mcballa:MovieClip = this.attachMovie("ball2","ballaname",this.getNextHighestDepth());

var mcballa:MovieClip = this.createEmptyMovieClip("ballaname",this.getNextHighestDepth());
mcballa.lineStyle(8,0x00ff00, 100, true, "none", "round","mitter",1);
mcballa.moveTo(-1,0);
mcballa.lineTo(+1,0);

mcballa._x=30;
mcballa._y=2;

//var mcballb:MovieClip = this.attachMovie("ball2","ballbname",this.getNextHighestDepth());

var mcballb:MovieClip = this.createEmptyMovieClip("ballbname",this.getNextHighestDepth());
mcballb.lineStyle(8,0xff0000, 100, true, "none", "round","mitter",1);
mcballb.moveTo(-1,0);
mcballb.lineTo(+1,0);

mcballb._x=50;
mcballb._y=10;



mcball.onEnterFrame=function(){
		this._x+=vx1;
		this._y+=vy1;
}

mcballa.onEnterFrame=function(){
		this._x+=vxa;
		this._y+=vya;
}

mcballb.onEnterFrame=function(){
		this._x+=vxb;
		this._y+=vyb;
}

イメージをMovieClip(の材料)として使ってみましょう (透過gif, 透過png, アニメーションgifを使ったアプリのプレビューで, 理解できない現象に出会うことがあります. エミュレータのバグ? とりあえず使わないでおくと無難かも)

1. 携帯のカメラで写真を撮ってメールに添付で送る, または, Webから適当なイメージをダウンロードする(フリー, 素材, 画像などで検索しましょう) ことによって, 画像ファイルを用意します.
2. アプリケーション>プレビューを利用して, 適当な部分を切り出し, 適当なサイズ, 解像度で保存します. 携帯Flashの画面は何ピクセル×何ピクセルでしたっけ? 形式は JPEGまたはPNGにしましょう(他の形式でうまくいくかどうか試してみてもいいでしょう)
3. Flash → ファイル > 読み込み > ライブラリに読み込みで画像ファイルをライブラリに読み込みます.
4. ライブラリの内容はウィンドウ>ライブラリで確認できます.
5. .fla を開きます.
6. ライブラリの中のビットマップをステージにドラッグした後, 修正>シンボルに変換します. このダイアログで, 画像のどの点(中央, 左上隅など)をローカル座標系の原点として扱うかを指定できます.
7. シンボルに変換ダイアログで, またはライブラリのシンボルのプロパティ(右クリックででます)で,
   • 名前: 何でもいい(シンボル1のままでいい)
   • 種類: ムービークリップ
   • ActionScript用に書き出し: チェック
   • 1フレーム目に書き出し: チェック
   • 識別子(リンケージ名): ball2 (などmain.asに応じて)
   • クラス: まだ空欄でいい
8. スクリーン上にあるシンボルball2のインスタンスを削除します. ライブラリにはball2が残っていることを確かめます.
9. main.asで,

   
   var mcballa:MovieClip = this.createEmptyMovieClip("ballaname",this.getNextHighestDepth());
   mcballa.lineStyle(8,0x00ff00, 100, true, "none", "round","mitter",1);
   mcballa.moveTo(-1,0);
   mcballa.lineTo(+1,0);
   

   というmcball2を作成している(描いている)部分を消去し, かわりに

   
   var mcballa:MovieClip = this.attachMovie("ball2","ballaname",this.getNextHighestDepth());
   

   とする. ライブラリ中のシンボル ball2 を, mcballaというMovieClipにつかうということ.
10. 同様にball2をmcballbに使おう. シンボルは複数のインスタンスに使える.

課題

ブロック崩し零号機で, ボールに外部の画像を使おう.

MovieClipの階層構造

今までは, 「ステージに直接」, 直線や円弧を描いたり, 外部画像を貼りつけたりしてきました. これは正確に言うと, ステージに直接attachされたMovieClipを操作していたということです. ActionScriptでは, MovieClipを別のMovieClipの一部分として使う, すなわちMovieClipの間の階層構造を作ることができます. 親MovieClip.createEmptyMovieClip()や親MovieClip.attachMovie()などのように, 子MovieClipを作ります. 子MovieClipの_x,_yは, 親の原点に対する相対座標です. 例です.

var mcparent:MovieClip = this.createEmptyMovieClip("mcpname",this.getNextHighestDepth());
var mcchild1:MovieClip = mcparent.createEmptyMovieClip("mcc1name",mcparent.getNextHighestDepth());
var mcchild2:MovieClip = mcparent.createEmptyMovieClip("mcc2name",mcparent.getNextHighestDepth());

mcparent.lineStyle(20,0x00ff00, 100, true, "none", "round","mitter",1);
mcparent.moveTo(-1,0);
mcparent.lineTo(+1,0);

mcparent._x=100;
mcparent._y=0;
var vxp:Number=0;
var vyp:Number=1;
mcparent.onEnterFrame=function(){
	mcparent._x+=vxp;
	mcparent._y+=vyp;
}

mcchild1.lineStyle(20,0x0000ff, 100, true, "none", "round","mitter",1);
mcchild1.moveTo(-1,0);
mcchild1.lineTo(+1,0);
mcchild1._x=20;
mcchild1._y=0;
var mcc1count:Number=0;
mcchild1.onEnterFrame=function(){
	if(mcc1count==0){
		this._visible=false;
		mcc1count=1;
	} else {
		this._visible=true;
		mcc1count=0;
	}
};

mcchild2.lineStyle(20,0xff0000, 100, true, "none", "round","mitter",1);
mcchild2.moveTo(-1,0);
mcchild2.lineTo(+1,0);
mcchild2._x=-20;
mcchild2._y=0;
var mcc2count:Number=0;
mcchild2.onEnterFrame=function(){
	if(mcc2count==0){
		this._x-=10;
		mcc2count=1;
	} else {
		this._x+=10;
		mcc2count=0;
	}
};

課題

ブロック崩し零号機で, ボールに子MovieClipを利用して, ボール自体がアニメーションしながら進むようにしよう.

課題

ブロック崩し零号機で, attachMovieを使って, ボールの一部にシンボルを使おう.