↑ホーム(よかひよかとき) へ

   使用頻度大のものをコピー&ペーストで使えるよう 「覚え書」 としたものです。 参考になれば喜。 動作確認は自責で。
  JavaScript の覚え書   Javaアプレット の覚え書   ActionScript3 および FlexによるSWF作成 の覚え書
  Perl の覚え書

  おもちゃ箱---HTML5作品(JavaScript)、Javaアプレット作品、FLASH作品(ActionScript) を多数置いています


よかひよかときの ActionScript3 および FlexによるSWF作成 の覚え書    .
 プログラム言語 ActionScript3 で作成したソースファイルを Flex3 でコンパイル
 することにより、swf ファイル を作成できます。 私のやり方の覚え書です。

(※ Flex3 のインストールのやり方は略。既にいろいろ紹介されていますので検索して準備してください。)


● ソースコードの作成とコンパイル
//================================================
// Sample.as というファイル名で、ソースコードを作成する場合
//================================================
package
{
    import flash.display.*;
    import flash.text.*;

    public class Sample extends Sprite
    {
        public function Sample()
        {
            (ここに、ActionScript でコードを記述する)
        }
    }
}


Flex3 でのコンパイルは、次のようにする。
mxmlc -default-size 900 600 -default-frame-rate=30 -default-background-color=0xFFFFFF Sample.as


● 実際には
○ 下のピンク内で、自分のやりたい部分を適宜コピーし貼り付けて使用できる。
 改変自由。
○ すべてのサンプルを一度に試すには、下のピンク部分をすべてそのままコピーし
 貼り付けて、 Sample.as  というファイル名で保存し、Flex3 でコンパイルする。
Flex3 でのコンパイルは、次のようにする。
mxmlc -default-size 900 600 -default-frame-rate=30 -default-background-color=0xFFFFFF Sample.as

 成功すれば、Sample.swf が作られる。 それを実行すれば右図
(実際はこの2倍サイズ)ができるはずである。
 「自分用の覚え書」ですので、ご自分の環境に合わせてご使用ください。
 (改変は自由です。 参考になれば喜。 動作確認は自責で。)



// Sample.as というファイル名で、ソースコードを作成する       
//(エンコードの種類を Unicode(UTF-8) として作成すれば日本語文字も可)
package
{
	import flash.display.*;
	import flash.text.*;			//(テキストフィールド)
	import flash.media.Sound;		//(サウンド)
	import flash.net.URLRequest;		//(外部ファイルから読み込み)
	import flash.events.*;			//(マウスイベント、キーイベント)
	import flash.events.TimerEvent;		//(タイマー)
	import flash.utils.Timer;		//(タイマー)

	//==========================================================================
	public class Sample extends Sprite
	{
		private var flag6:Boolean=false;			//(マウスイベント用)
		private var textName6:TextField=new TextField();	//(マウスイベント用)
		private var textName7:TextField=new TextField();	//(キーイベント用)
		private var textName8:TextField=new TextField();	//(タイマー用)
		private var flag9:Boolean=false;			//(ボタン用)
		private var textName9:TextField=new TextField();	//(ボタン用)

		//------------------------------------------------------------
		public function Sample()
		{
			// ■テキストフィールド-----------------------------------
			var textName1:TextField=new TextField();
			stage.addChild(textName1);
			textName1.x=10;			// 表示位置(x座標)
			textName1.y=10;			// 表示位置(y座標)
			textName1.width=200;		// 表示サイズ(幅)
			textName1.height=25;		// 表示サイズ(幅)
			textName1.text="Hello World.";

			var textName2:TextField=new TextField();
			stage.addChild(textName2);
			textName2.x=10;					// 表示位置(x座標)
			textName2.y=60;					// 表示位置(y座標)
			textName2.width=100;				// 表示サイズ(幅)
			textName2.height=80;				// 表示サイズ(幅)
			textName2.textColor=0xff0000;			// 文字色
			textName2.border=true;				// 枠の有無(true:有 false:無)
			textName2.borderColor=0xff0000;			// 枠の色
			textName2.background=true;			// 背景色の有無(true:有 false:無)
			textName2.backgroundColor=0x00ff00;		// 背景色
			textName2.multiline=true;			// 複数行表示
			textName2.wordWrap=true;			// 行の末尾に収まらない単語のとき、単語を丸ごと次の行に送る
			textName2.autoSize=TextFieldAutoSize.LEFT;	// width,heightがテキスト領域の幅に追従する
			textName2.text="はじめてのActionScript はいかがですか。はじめてのActionScript はいかがですか。";

			var textName3:TextField=new TextField();
			stage.addChild(textName3);
			textName3.x=10;					// 表示位置(x座標)
			textName3.y=200;				// 表示位置(y座標)
			textName3.width=220;				// 表示サイズ(幅)
			textName3.height=30;				// 表示サイズ(幅)
			textName3.border=true;				// 枠の有無(true:有 false:無)
			textName3.borderColor=0xff0000;			// 枠の色
			textName3.text="こんなやり方もあります。";
			var format3:TextFormat=new TextFormat();
			format3.size=16;				// 文字サイズ
			format3.color=0x0000ff;				// 文字色
			format3.font="Arial";				// 文字フォント
			format3.bold=true;				// 太字(デフォルトfalse)
			format3.italic=true;				// 斜体(デフォルトfalse)
			format3.underline=true;				// 下線(デフォルトfalse)
			format3.align="center";				// 表示位置の指定
			textName3.setTextFormat(format3);


			// ■図形(直線、曲線、多角形、円)を描く-----------------
			var shape:Shape=new Shape();
			stage.addChild(shape);
			var figName1:Graphics=shape.graphics;

			// 2点 A(x1, y1)、 B(x2, y2) を結ぶ直線を描く
			figName1.lineStyle(1, 0xff0000, 1.0);	//(線の太さ, 線色, 透明度)
			figName1.moveTo(220, 50);		// A点の座標(x1, y1)
			figName1.lineTo(320, 80);		// B点の座標(x2, y2)

			// 2点 A(x1, y1)、C(x3, y3) を結び、途中、点B(x2, y2) に近づいた曲線を描く
			figName1.lineStyle(1, 0x00ff00, 1.0);		//(線の太さ, 線色, 透明度)
			figName1.moveTo(140, 50);			// A点の座標(x1, y1)
			figName1.curveTo(200, 110, 250, 80);		// B点、C点の座標 (x2, y2, x3, y3)

			// 3点 A(x1, y1)、 B(x2, y2)、 C(x3, y3) を結ぶ多角形を描く
			figName1.lineStyle(1, 0x0044ff, 1.0);		//(線の太さ, 線色, 透明度)
			figName1.moveTo(270, 30);			// A点の座標
			figName1.lineTo(400, 110);			// B点の座標
			figName1.lineTo(250, 120);			// C点の座標
			figName1.lineTo(270, 30);			// A点の座標

			// 3点 A(x1, y1)、 B(x2, y2)、 C(x3, y3) を結ぶ多角形を描く
			figName1.lineStyle(1, 0x0044ff, 1.0);		//(線の太さ, 線色, 透明度)
			figName1.beginFill(0xff00ff, 1.0);		//(塗りつぶす色, 透明度)
			figName1.moveTo(430, 30);			// A点の座標
			figName1.lineTo(560, 110);			// B点の座標
			figName1.lineTo(410, 120);			// C点の座標
			figName1.lineTo(430, 30);			// A点の座標

			// 矩形を描く
			figName1.lineStyle(1, 0x0044ff, 1.0);		//(線の太さ, 線色, 透明度)
			figName1.beginFill(0xff00ff, 1.0);		//(塗りつぶす色, 透明度)
			figName1.drawRect(300, 130, 120, 75);		//(300,130)を左上として、幅120、高さ75 の矩形

			// 矩形を描く
			figName1.lineStyle(1, 0x0044ff, 1.0);		//(線の太さ, 線色, 透明度)
			figName1.beginFill(0xff00ff, 1.0);		//(塗りつぶす色, 透明度)
			figName1.drawRoundRect(460, 140, 80, 50, 10 , 10); //(460,140)を左上として幅 80、高さ 50 、角丸部分が 幅 10 高さ 10 でできる角丸矩形

			// 円を描く
			figName1.lineStyle(1, 0x0000ff, 1.0);		//(線の太さ, 線色, 透明度)
			figName1.beginFill(0xff00ff, 0.5);		//(塗りつぶす色, 透明度)
			figName1.drawCircle(640, 80 , 50);		//(中心のx座標,y座標,半径)

			// 楕円を描く
			figName1.lineStyle(1, 0xff00ff, 1.0);		//(線の太さ, 線色, 透明度)
			figName1.beginFill(0xffff00, 1.0);		//(塗りつぶす色, 透明度)
			figName1.drawEllipse(620, 140, 150, 70);	//(620,140)を左上として、幅150、高さ70 の楕円

			// 描いた絵を消すには、	figName1.clear();  とすれば、描いた絵がすべて消える。


			// ■イメージ(図、写真)を外部ファイルから読み込んで配置する-------
			//(img/sample.jpg を読み込んで配置する。 img/sample.jpg を自分で用意しておくこと)
			var image1URL:URLRequest=new URLRequest("img/sample.jpg");
			var image1:Loader=new Loader();
			image1.load(image1URL);
			stage.addChild(image1);
			image1.x=80;					// 配置する image1 の左上のx座標
			image1.y=220;					// 配置する image1 の左上のy座標
			image1.scaleX=0.4;				// 横倍率
			image1.scaleY=0.4;				// 縦倍率
			image1.rotation=30;				// 回転角(度)
			image1.alpha=0.8;				// 透明度


			// ■ビットマップ(1)-----------------------------------
			var bmpData1:BitmapData=new BitmapData(256, 50); // ビットマップのサイズ(幅、高さ)
			var bmp1:Bitmap=new Bitmap(bmpData1);
			bmp1.x=400;
			bmp1.y=400;
			stage.addChild(bmp1);

			for(var i:int=0; i<256*50; i++)
			{
				var px1:int=i%256;
				var py1:int=Math.floor(i/256);
				bmpData1.setPixel(px1, py1, 0x000100*px1+0x000001*py1); // セットピクセル
			}


			// ■ビットマップ(2)------------------------------------
			var bmpData2:BitmapData=new BitmapData(256, 100, true, 0xaacccccc); // ビットマップのサイズ(幅、高さ、true:32ビットカラー  false:24ビットカラー、α値(trueのとき)RGB)
			var bmp2:Bitmap=new Bitmap(bmpData2);
			bmp2.x=400;
			bmp2.y=460;
			stage.addChild(bmp2);

			for(var j:int=0; j<256*50; j++)
			{
				var px2:int=j%256;
				var py2:int=Math.floor(j/256);
				bmpData2.setPixel(px2, py2, 0x000100*px2+0x000001*py2); // セットピクセル
			}


			// ■サウンドを外部ファイルから読み込んで配置する( ****.mp3 ファイルのみ)-------
			//(sound/sample.mp3 を読み込んで配置する。 sound/sample.mp3 を自分で用意しておくこと)
			var sound1URL:URLRequest=new URLRequest("sound/sample.mp3");
			var sound1:Sound=new Sound(sound1URL);
			sound1.play();


			// ■現在の年月日を取得する-------------------------------
			var today:Date=new Date();
			var year:Number=today.getFullYear();	// 年の取得
			var month:Number=today.getMonth()+1;	// 月の取得
			var day:Number=today.getDate();		// 日の取得
			var wday:Number=today.getDay();		// 曜日の取得
			var weeks:Array=new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
			var week:String=weeks[wday];

			var textName4:TextField=new TextField();
			stage.addChild(textName4);
			textName4.x=400;
			textName4.y=250;
			textName4.width=200;
			textName4.height=40;
			textName4.text=month+"/"+day+"/"+week;
			var format4:TextFormat=new TextFormat();
			format4.size=24;
			format4.color=0x0000aa;
			format4.font="Times Roman";
			textName4.setTextFormat(format4);

			// ■現在の日時を取得する-----------------------------------------------
			var today2:Date=new Date();
			var hour:Number=today2.getHours();		// 時間の取得
			var min:Number=today2.getMinutes();		// 分の取得
			var sec:Number=today2.getSeconds();		// 秒の取得
			var textName5:TextField=new TextField();
			stage.addChild(textName5);
			textName5.x=400;
			textName5.y=270;
			textName5.width=200;
			textName5.height=40;
			textName5.text=hour+":"+min+":"+sec;
			var format5:TextFormat=new TextFormat();
			format5.size=24;
			format5.color=0x0000aa;
			format5.font="Times Roman";
			textName5.setTextFormat(format5);


			// ■マウスイベント---------------------------------------
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);	// マウスボタンを押したとき
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);	// マウスボタンを離したとき
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);	// マウスを移動したとき
			stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);	// マウスホイールを回転させたとき

			stage.addChild(textName6);
			textName6.x=300;
			textName6.y=350;
			textName6.width=200;
			textName6.height=30;
			textName6.border=true;
			textName6.borderColor=0xff0000;
			textName6.text="マウスを押してみてください。";
			var format6:TextFormat=new TextFormat();
			format6.size=15;
			format6.color=0xff00ff;
			textName6.setTextFormat(format6);


			// ■ボタン(テキストフィールドをボタンにする)-----------
			stage.addChild(textName9);
			textName9.x=530;
			textName9.y=350;
			textName9.width=280;
			textName9.height=40;
			textName9.multiline=true;
			textName9.wordWrap=true;
			textName9.border=true;
			textName9.borderColor=0xff0000;
			textName9.text="テキストフィールドをボタンにしています。  この枠内をマウスクリックしてみてください。";
			var format9:TextFormat=new TextFormat();
			format9.size=15;
			format9.color=0xff00ff;
			textName9.setTextFormat(format9);
			textName9.addEventListener(MouseEvent.CLICK, onMouseClick);	// マウスボタンをクリックしたとき


			// ■キーイベント-----------------------------------------
			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);	// キーを押したとき
			stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);	// キーを離したとき

			stage.addChild(textName7);
			textName7.x=300;
			textName7.y=390;
			textName7.width=200;
			textName7.height=30;
			textName7.text="キーコード : ";
			var format7:TextFormat=new TextFormat();
			format7.size=16;
			format7.color=0xaaaa00;
			textName7.setTextFormat(format7);


			// ■タイマー(一定間隔で処理を行う)-------------------
			var timer1:Timer=new Timer(1000, 3600); //(1000ミリ秒間隔で onTimer1() を呼び出し、3600回処理を行う)
			timer1.addEventListener(TimerEvent.TIMER, onTimer1);
			timer1.start();

		}


		// ■マウスボタンを押したとき---------------------------------
		private function onMouseDown(evt:MouseEvent):void
		{
			if(!flag6)
			{
				flag6=true;
				textName6.text="マウスが押されました。";
			}
			else
			{
				flag6=false;
				textName6.text="マウスを押してみてください。";
			}
		}

		// ■マウスボタンを離したとき---------------------------------
		private function onMouseUp(evt:MouseEvent):void
		{

		}

		// ■マウスを移動したとき-------------------------------------
		private function onMouseMove(evt:MouseEvent):void
		{

		}

		// ■マウスホイールを回転させたとき---------------------------
		private function onMouseWheel(evt:MouseEvent):void
		{

		}


		// ■ボタン(テキストフィールドをボタンにする)---------------
		private function onMouseClick(evt:MouseEvent):void
		{
			if(!flag9)
			{
				flag9=true;
				textName9.text="テキストフィールドをボタンにしています。  この枠内がクリックされました。";
			}
			else
			{
				flag9=false;
				textName9.text="テキストフィールドをボタンにしています。  この枠内をマウスクリックしてみてください。";
			}
		}


		// ■キーを押したとき-----------------------------------------
		private function onKeyDown(evt:KeyboardEvent):void
		{
			textName7.text="キーコード:"+evt.keyCode.toString();
			var format7:TextFormat=new TextFormat();
			format7.size=16;
			format7.color=0xaaaa00;
			textName7.setTextFormat(format7);
		}

		// ■キーを離したとき-----------------------------------------
		private function onKeyUp(evt:KeyboardEvent):void
		{

		}


		// ■タイマー------------------------------------------------------------
		private function onTimer1(evt:TimerEvent):void
		{
			// (ここに一定間隔で行う処理を記述する、例えば以下のように)
			var today3:Date=new Date();
			var hour3:Number=today3.getHours();		// 時間の取得
			var min3:Number=today3.getMinutes();		// 分の取得
			var sec3:Number=today3.getSeconds();		// 秒の取得

			stage.addChild(textName8);
			textName8.x=500;
			textName8.y=270;
			textName8.width=200;
			textName8.height=40;
			textName8.text=hour3+":"+min3+":"+sec3;
			var format8:TextFormat=new TextFormat();
			format8.size=30;
			format8.color=0xcc0000;
			format8.font="Times Roman";
			textName8.setTextFormat(format8);
		}
	}
}

■データをHTMLから受け取る   このページのトップへ 更新日
ActionScript3
(例)(すべてのファイルを、エンコードの種類を Unicode(UTF-8) として作成すれば日本語文字も可)
 Sample.as   ……… ActionScript3 で書かれたソースコードファイル
 Sample.swf  ……… Sample.as をコンパイルして作られる swf ファイル
 Sample.html  ……… Sample.swf ファイルを表示する html ファイル。

とする。 HTMLから受け取るデータは、str=この文章などを送ります&a=777&b=888" とする。(複数個のデータを扱う場合には、このように & で区切る)

(例)
 まず、 Sample.as のコードは次のようにする。

//************************************************
// Sample.as (データ str,a,b を HTMLから受け取る)
//************************************************
package
{
	import flash.display.*;
	import flash.text.*;

	//----------------------------------------------------------------
	public class Sample extends Sprite
	{
		//------------------------------------------------------------
		public function Sample()
		{
			var flashvars:Object=LoaderInfo(loaderInfo).parameters; // HTMLからデータを受け取る---
			var str:String=flashvars["str"];
			var a:int=parseInt(flashvars["a"]); // 数字を数値化する
			var b:int=parseInt(flashvars["b"]); // 数字を数値化する

			var txt:TextField=new TextField(); // 受け取ったデータを表示する---
			stage.addChild(txt);
			txt.x=100;
			txt.y=100;
			txt.width=300;
			txt.height=20;
			txt.text="str="+str+"   a="+a+"   b="+b;
			var ft:TextFormat=new TextFormat();
			ft.size=14;
			ft.color=0xff0000;
			txt.setTextFormat(ft);
		}
	}
}


 Sample.html は、例えば次のようにする。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Sample</title>
</head>
<body>
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
 width="400" height="300">
	<param name="movie" value="Sample.swf" />
	<param name="base" value="." />
	<param name="quality" value="high" />
	<param name="FlashVars" value="str=この文章などを送ります&a=777&b=888" />
	<embed src="Sample.swf" base="." quality="high"
 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
 type="application/x-shockwave-flash" width="400" height="300"></embed>
	</object>
</body>
</html>

2009.01.10
■データをCGIへ送信する   このページのトップへ 更新日
ActionScript3
 「送信」 ボタンをクリックしたらデータを送信し、そのデータを別ファイルに書き込む、ことをやってみる。

(例)(すべてのファイルを、エンコードの種類を Unicode(UTF-8) として作成すれば日本語文字も可)
 Sample.as   ……… ActionScript3 で書かれたソースコードファイル
 Sample.swf  ……… Sample.as をコンパイルして作られる swf ファイル
 Sample.cgi  ……… Sample.swf ファイルを表示する cgi ファイル
 Save.cgi    ……… 送られてきたデータを書き込む cgi ファイル
 txt.data    ……… データを上書きするファイル(なければ勝手に作る)

とする。 送信するデータは、str="この文章を送信します" とする。

 まず、 Sample.as のコードは次のようにする。

//************************************************
// Sample.as (データ str を Save.cgi に送信する)
//************************************************
package
{
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.net.*;

	//----------------------------------------------------------------
	public class Sample extends Sprite
	{
		private var str:String;

		//------------------------------------------------------------
		public function Sample()
		{
			str="この文章を送信します";

			var txtSave:TextField=new TextField(); // 送信ボタンを設置する
			stage.addChild(txtSave);
			txtSave.x=100;
			txtSave.y=120;
			txtSave.width=80;
			txtSave.height=20;
			txtSave.background=true;
			txtSave.backgroundColor=0xffdddd;
			txtSave.border=true;
			txtSave.borderColor=0x888888;
			txtSave.text="送信";
			var ft:TextFormat=new TextFormat();
			ft.size=12;
			ft.color=0x000000;
			ft.align="center";
			txtSave.setTextFormat(ft);
			txtSave.addEventListener(MouseEvent.CLICK, botanSave);
		}

		//------------------------------------------------------------
		private function botanSave(evt:MouseEvent):void
		{
			var req:URLRequest=new URLRequest();
			req.url="Save.cgi";
			req.data=str;
			req.method=URLRequestMethod.POST;
			navigateToURL(req, "_self");
			return;
		}
	}
}


 次に Sample.swf を表示する Sample.cgi は、例えば次のようにする。

#************
# Sample.cgi
#************
#!/usr/local/bin/perl
print "Content-Type: text/html; charset=UTF-8P\n\n";
#===========================================
print <<"PAGE1";
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Sample</title>
</head>
<body>
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
 width="600" height="400">
	<param name="movie" value="Sample.swf" />
	<param name="base" value="." />
	<param name="quality" value="high" />
	<embed src="Sample.swf" base="." quality="high"
 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
 type="application/x-shockwave-flash" width="600" height="400"></embed>
	</object>
</body>
</html>
PAGE1
exit;


 さらに、Save.cgi は、例えば次のようにする。

#************
# Save.cgi
#************
#!/usr/local/bin/perl
print "Content-Type: text/html; charset=UTF-8P\n\n";
#====================================================
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); # 入力データの読み込み
if($buffer)
{
	open(OUT, ">txt.dat");
	flock(OUT,2);
	print(OUT "$buffer\n");
	close(OUT);
	flock(OUT,8);
	#---------------------------------------------
	$check_msg="「txt.dat」ファイルに保存しました。";
	&check_hyouzi;
}
else
{
	$check_msg="保存できませんでした。";
	&check_hyouzi;
}
exit;
#*********************************************************************
sub check_hyouzi{
print <<"HYOUZI";
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<BODY>
	$check_ms
</BODY>
</HTML>
HYOUZI
exit;
}



2009.01.10
このページのトップへ

**********************************************************************************
Copyright(C) 2007-@YokahiYokatoki