|
|
使用頻度大のものをコピー&ペーストで使えるよう 「覚え書」 としたものです。 参考になれば喜。 動作確認は自責で。 | ||
| JavaScript の覚え書 | Javaアプレット の覚え書 | ActionScript3 および FlexによるSWF作成 の覚え書 | |
| Perl の覚え書 | |||
| おもちゃ箱---HTML5作品(JavaScript)、Javaアプレット作品、FLASH作品(ActionScript) を多数置いています | |||
● 実際には
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 |