トップページ > Flash入門 > とりあえず(1)

画像を表示する

手持ちの画像を表示します。

とりあえず,新規のプロジェクトを作って,手持ちの画像を表示させるまでの流れをメモしておきます。 既に触れていますが,開発環境はFlash Developという無料ソフトウェアです。 Flashの記述にはAction Scriptという言語を使いますが,おおよそJavaに似た感触で書けると思います。 ActionScript 3.0 コンポーネント リファレンスガイドに一通りクラスなどの情報が書かれているようです。

新規プロジェクトを作成

Flash Developを起動し,ツールバーから[プロジェクト]→[新規プロジェクト]とクリック。

出てきたウィンドウで,プロジェクトの種類を選びます。 ここでは“Action Script3”を選択しておきます。 「名前」のところは適当に“test1”としました。 プロジェクトの保存先は「ブラウズ」ボタンを押して設定します。

初めて使用する場合は,ソースコードに記述されるauthorを聞かれますので,適当に入力しておきます。

“Main.as”というソースファイルは,上画像のように自動生成されます。 “Main()”と“init()”という関数がありますが,init()関数はコンストラクタのようなもので, Main()関数内ではそのコンストラクタを呼ぶ設定だけをしているようです。 init()関数の最初のところでremoveEventListener()という関数を呼んでいるので,最初の1度きり呼ばれる感じなのでしょうか・・・。

init()関数の最後にコメントで“// entry point”と書かれているので, それに従って,その下の行からずらずらとコードを書いていくことにします。

画像を読み込む

手持ちの画像を,作成したプロジェクト・ディレクトリの“src”ディレクトリに入れます。 今回は例として,“ClearBall_pink.png”という画像を使うことにします。

Flash Developの右側の欄で,srcディレクトリ中に“ClearBall_pink.png”が表示されていることを確認します。

ソースファイルに以下のような感じで書き足して,画像を表示します。 (全ソースコードはページ最後に掲載しています。)




以下,簡単な説明です。

パッケージ冒頭:Bitmapをインポート

//Bitmapを読み込む。
import flash.display.Bitmap;

画像オブジェクトはBitmapクラスとして扱われるようです。最初にimportしておきます。

Mainクラス冒頭:画像ファイルを読み込む

//==================================================
//画像ファイルを読み込む。
[Embed(source = "./ClearBall_pink.png")]
//"ballImg"というクラスを作る。このインスタンスが画像データそのもの。
public var ballImg:Class;
//==================================================

[Embed(...)]というメタデータタグと呼ばれる記述をつかって画像を読み込んでいます。 srcディレクトリ内にある○○○という画像データを読み込む場合は,
[Embed(source = "./○○○")]
と記述します。
読み込んだ画像ファイルはballImgという名前のクラスとして登録します。 この名前も任意です。

init()関数後半:画像ファイルの表示

//==============================================
//ballという名前で,画像データをインスタンス化
var ball:Bitmap = new ballImg();
//addChild()関数を呼んで,画面に表示。
addChild(ball)
//==============================================

既に読み込み済みの画像データを,“ball”という名前でインスタンス化します。 その後にaddChild()して,画面に表示しています。

 

全ソースコード

全ソースコードは以下の通りです。

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	//Bitmapを読み込む。
	import flash.display.Bitmap;

	/**
	 * ...
	 * @author NB
	 */

	public class Main extends Sprite 
	{	
		//==================================================
		//画像ファイルを読み込む。
		[Embed(source = "./ClearBall_pink.png")]
		//"ballImg"というクラスを作る。このインスタンスが画像データそのもの。
		public var ballImg:Class;
		//==================================================
		
		//main関数
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		//コンストラクタ
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point		
			//==============================================
			//ballという名前で,画像データをインスタンス化
			var ball:Bitmap = new ballImg();
			//addChild()関数を呼んで,画面に表示。
			addChild(ball)
			//==============================================
			
		}
		
	}
	
}

SWFファイルをビルドして表示する

最終的に生成されて画面表示に携わるファイルは“SWF(Small Web Format)”ファイルと呼ばれるものだそうです。 F5キーを押す,もしくは再生ボタンのマークのボタンをクリックして,SWFをビルドし,そのまま表示させることができます。




戻る  次へ