webカメラを買った。
ＡＲ（拡張現実）をフラッシュで実現するのが目的。
買ったのは、マイクロソフト社製のVX-3000＝写真。

早速、設置してみる。
まず、付属のＣＤに収められているソフトをインストール。次に、ＵＳＢポートにつっこむ。デスクトップに生成されたショートカットアイコンからカメラを起動。

映しだされた画像は。。。。。最悪。
初期のケータイカメラ並み。

ここで、初めてマニュアルに目を通す。
このwebカメラ、動画は「３０万画素」のスペックしかないらしい。きちんと調べて買いに行けよオレ。

気を取り直して、早速、フラッシュと連携させてみる。

まず、「ライブラリ」右上にある「▼」からメニューウインドウを出し、新規ビデオを選択。
「タイプ」は「ビデオ（ActionScript制御）」を選択し、「ＯＫ」。
「ライブラリ」に生成されたビデオオブジェクトをステージに配置する。
とりあえず、大きさは「320x240」にして、インスタンス名は「myVideo」とする。
ビデオオブジェクトを配置したレイヤーとは別のレイヤーに以下のコードを記述。
 

myCamera=Camera.get();
myVideo.attachVideo(myCamera);

 以上を実行するとこんな感じでリアルタイム映像がFlashPlayerに映しだされる。

やっぱり画質が最悪。

座標から角度を計算するには、「Math.atan2」で一旦ラジアンに変換した後、公式から角度を算出する。

ラジアン=Math.atan2(y座標,x座標);//---------------（注意）y座標とx座標が通常とは逆

角度＝ラジアン*180/Math.PI;
ラジアン＝角度*Math.PI/180;

ちょっとしたサンプルを作ってみた。

【製作過程】

レイヤー１にダイナミックテキスト「angle_DT」「x_DT」「y_DT」を配置。それにあわせ静止テキスト「角度」「x」「y」も配置。
レイヤー２の弟１フレームに以下のコードを記述。

onEnterFrame=function():Void{
 clear();
 var xx:Number=this._xmouse;
 var yy:Number=this._ymouse;
 //座標をラジアンに変換
 var radian:Number=Math.atan2(yy,xx);
 //ラジアンから角度へ変換
 var angle:Number=Math.floor(radian*180/Math.PI);
 x_DT.text=xx;
 y_DT.text=yy;
 angle_DT.text=angle;
 //(0,0)とマウスを結ぶ線の描画
 this.moveTo(0,0);
 this.lineStyle(2,0xFFFFFF);
 this.lineTo(xx,yy);
 //角度部分描画
 this.moveTo(0,0);
 this.beginFill(0xFF0000,50);
 this.lineStyle(2,0xFFFFFF);
 this.lineTo(30,0);
 this.lineTo(Math.cos(radian)*30,Math.sin(radian)*30);
 this.endFill();
}
 

パフュームのライブ動画を見ていると、いろんな場面でかっこいいエフェクトに出会う。
今回は、その中の一つ「放電エフェクト」をつくってみた。

以下、コード。
スクリプトをタイムライン弟１フレームに書くだけでよい。

 //GlowFilterインポート
import flash.filters.GlowFilter;
//放電分岐数
var discharge_num:Number=20;
//放電幅
var discharge_width:Number=30;
//配列
var xx:Array=new Array();
var yy:Array=new Array();
//GlowFilter設定
var param:GlowFilter=new GlowFilter();
param.color=0x00FFFF;
param.alpha=10;
param.blurX=35;
param.blurY=35;
param.strength=5;
param.quality=3;
param.inner=false;
param.knockout=false;
//空のMC生成
var view_mc:MovieClip=this.createEmptyMovieClip("view_mc",this.getNextHighestDepth());
//実行関数
function loop():Void{
 for(var i:Number=0;i<discharge_num;i++){
  xx[i]=Math.random()*discharge_width+Stage.width/2-discharge_width/2;
  yy[i]=i*Stage.height/discharge_num+Stage.height/discharge_num;
 }
 view_mc.clear();
 view_mc.moveTo(Stage.width/2,0);
 view_mc.lineStyle(3,0xFFFFFF);
 for(var i:Number=0;i<discharge_num;i++){
  view_mc.lineTo(xx[i],yy[i]);
 }
 view_mc.filters=[param];
}
setInterval(loop,33);

少し汎用性をもたせてみた。
変数「discharge」などの値を変えることで、放電の数を増やせるなど自由度を高めた。

以下、コード。

 //GlowFilterインポート
import flash.filters.GlowFilter;
//放電数
var discharge:Number=3;
//放電分岐数
var discharge_num:Number=20;
//放電帯域
var discharge_range:Number=30;
//放電幅
var discharge_width:Number=2;
//配列宣言
var xx:Array=new Array();
var yy:Array=new Array();
//GlowFilter設定
var param:GlowFilter=new GlowFilter();
param.color=0xFFFF00;
param.alpha=10;
param.blurX=10;
param.blurY=10;
param.strength=2;
param.quality=3;
param.inner=false;
param.knockout=false;
//空のMC生成
var view_mc:MovieClip=this.createEmptyMovieClip("view_mc",this.getNextHighestDepth());
//実行関数
function loop():Void{
 for(var i:Number=0;i<discharge;i++){
  //二次元配列宣言
  xx[i]=new Array();
  for(var j:Number=0;j<discharge_num;j++){
   xx[i][j]=Math.random()*discharge_range+Stage.width/2-discharge_range/2;
   yy[j]=j*Stage.height/discharge_num+Stage.height/discharge_num;
  }
 }
 view_mc.clear();
 view_mc.moveTo(Stage.width/2,0);
 view_mc.lineStyle(discharge_width,0xFFFFFF);
 for(var i:Number=0;i<discharge;i++){
  for(var j:Number=0;j<discharge_num;j++){
   view_mc.lineTo(xx[i][j],yy[j]);
  }
 }
 view_mc.filters=[param];
}
setInterval(loop,33);
 

ちょっとハマったのでメモ。

var ary:Array=new Array(); //--------配列宣言
for(var i:Number=0;i<3;i++){
 ary[i]=new Array(); //--------二次元配列宣言
 for(var j:Number=0;j<5;j++){
  ary[i][j]=i*j;
 }
}
trace(ary[2][3]);

出力　6

MatrixクラスとBitmapDataクラスを利用して、こんなのつくってみた。
あんまり見すぎると気持ち悪くなるので注意。

【製作過程】

swfファイル（flaファイル）と同階層に「icon.jpg」を用意。
以下のコードを、タイムラインの弟１フレームに記述。

icon.jpg

import flash.display.BitmapData;
import flash.geom.Matrix;

//キャプチャ用MCを生成
var load_mc:MovieClip=this.createEmptyMovieClip("load_mc",1);
//MovieClipLoaderインスタンスを生成
var mcl:MovieClipLoader=new MovieClipLoader();
//リスナーオブジェクトを生成
var obj:Object=new Object();
//読み込み終了後の処理
obj.onLoadInit=function():Void{
 var bmp:BitmapData=new BitmapData(load_mc._width,load_mc._height,true,0x00FFFFFF);
 //「icon.jpg」を読み込んだ「load_mc」をBitmapDataインスタンスにキャプチャ
 bmp.draw(load_mc);
 //キャプチャ用MCを削除
 load_mc.removeMovieClip();
 var angle:Number=0;
 _root.onEnterFrame=function():Void{
  angle++;
  if(angle>=360){angle=0;}
  var matrix:Matrix=new Matrix();
  //マトリックス回転
  matrix.rotate(Math.PI/180*angle);
  //マトリックス傾斜
  matrix.b=Math.tan(Math.PI/180*angle);
  matrix.c=Math.tan(Math.PI/180*angle);
  var view_mc:MovieClip=this.createEmptyMovieClip("view_mc",2);
  view_mc.beginBitmapFill(bmp,matrix,true,true);
  view_mc.moveTo(0,0);
  view_mc.lineTo(0,300);
  view_mc.lineTo(300,300);
  view_mc.lineTo(300,0);
  view_mc.lineTo(0,0);
  view_mc.endFill();
 }
}
//リスナーオブジェクトをMovieClipLoaderインスタンスに登録
mcl.addListener(obj);
//MovieClipLoaderインスタンスにロード
mcl.loadClip("icon.jpg",load_mc); 

【製作のポイント】

外部ファイルをBitmapDataに直接読み込ませることはできないので、一旦ムービークリップに読み込ませ、それをキャプチャ（BitmapData.draw(MC)）してBitmapDataに変換している。

赤字で示した「beginbitmapFill」はムービークリップのメソッドで、描画領域をビットマップイメージで塗りつぶす（タイル状に配置する）。

beginBitmapFill (MovieClip.beginBitmapFill メソッド)

public beginBitmapFill(bmp: BitmapData , [matrix: Matrix ], [repeat: Boolean ], [smoothing: Boolean ]) : Void

MatrixクラスのインスタンスをMovieClipに適用するには、「Matrixクラス（１）」で使用した
「BitmapDataインスタンス.draw(MovieClipインスタンス,Matrixインスタンス)」のほかに、インポートした「flash.geom.Transformクラス」からインスタンスを生成し、それが持つプロパティ「matrix」に代入する方法がある。

【サンプル】
ステージサイズ200x200、ライブラリにビットマップ「icon.jpg」（リンケージ識別子：icon.jpg）。

icon.jpg

以下、コード。

//クラスインポート
import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.Transform;
//BitmapDataインスタンス生成
var bmp:BitmapData=new BitmapData();
//BitmapDataインスタンスにロード
bmp=BitmapData.loadBitmap("icon.jpg");
//空のMovieClip生成
var view_mc:MovieClip=_root.createEmptyMovieClip("view_mc",this.getNextHighestDepth);
//MovieClipにアタッチ
view_mc.attachBitmap(bmp,this.getNextHighestDepth);
//Matrixインスタンス生成
var mtrx:Matrix=new Matrix();
//Transformインスタンス生成
var trans:Transform=new Transform(view_mc);
//Matrix設定
mtrx.rotate(Math.PI/180*45);
mtrx.translate((Stage.width-view_mc._width)/2,(Stage.height-view_mc._height)/2);
//Matrixインスタンス適用
trans.matrix=mtrx; 

これだけじゃ面白くないので、「onEnterFrame」でMatrixインスタンスのプロパティを変更してみた。

以下、コード。

//クラスインポート
import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.Transform;
//BitmapDataインスタンス生成
var bmp:BitmapData=new BitmapData();
//BitmapDataインスタンスにロード
bmp=BitmapData.loadBitmap("icon.jpg");
//空のMovieClip生成
var view_mc:MovieClip=_root.createEmptyMovieClip("view_mc",this.getNextHighestDepth);
//MovieClipにアタッチ
view_mc.attachBitmap(bmp,this.getNextHighestDepth);
//Matrixインスタンス生成
var mtrx:Matrix=new Matrix();
//Transformインスタンス生成
var trans:Transform=new Transform(view_mc);
var angle:Number=0;
//Matrix設定1（view_mcを中央に配置）
mtrx.translate((Stage.width-view_mc._width)/2,(Stage.height-view_mc._height)/2); 
onEnterFrame=function():Void{
 if(angle>=360){angle=0;}
 //Matrix設定2
 mtrx.b=Math.tan(Math.PI/180*angle*2);
 mtrx.c=Math.tan(Math.PI/180*angle*2);
 //Matrixインスタンス適用
 trans.matrix=mtrx;
 angle++;
}

BitmapやMovieClipに適用することでグラフィック変換を行う。
主要な4 種類の変換機能 は「平行移動」、「拡大・縮小」、「回転」、「傾斜」。

【製作過程】
ライブラリにBitmap「autumn」（200x200）を用意し、リンケージ設定（識別子：autumn）。
以下のコードをタイムラインの弟１フレームに記述。

import flash.display.BitmapData;
import flash.geom.Matrix;
var bmp:BitmapData=new BitmapData(200,200);
var mtrx:Matrix=new Matrix();
＜ここにマトリックス操作を記述＞
bmp=BitmapData.loadBitmap("autumn");
var _mc:MovieClip=_root.createEmptyMovieClip("_mc",1);
_mc.attachBitmap(bmp,1);
bmp.draw(_mc,mtrx);

平行移動

mtrx.translate(100,100);

拡大・縮小

mtrx.scale(0.5,0.5);

回転

mtrx.rotate(Math.PI/180*45);

傾斜

mtrx.b=Math.tan(Math.PI/180*10);//y軸傾斜
mtrx.c=Math.tan(Math.PI/180*10);//x軸傾斜

ムービークリップの色を変更するためのクラス。
変更するためには、「Transformクラス」のインポートも必要。

とりあえず、実験。
ライブラリに50x50で真っ白なMC「box」（識別子：box）を用意。
タイムライン弟１フレームに下記のコードを記述。

//クラスをインポート
import flash.geom.ColorTransform;
import flash.geom.Transform;

var box:MovieClip=this.attachMovie("box","box",this.getNextHighestDepth());
//ターゲットになるMCをセットして、Transformインスタンスを生成
var trans:Transform=new Transform(box);
//カラーを設定して、ColorTransFormインスタンスを生成
var red:ColorTransform=new ColorTransform(1,1,1,1,255,-255,-255,255);
//transインスタンスのcolorTransformプロパティにColorTransFormインスタンスをセット
trans.colorTransform=red; 

結構面倒くさい。以下がコンストラクタ。

ColorTransform コンストラクタ

public ColorTransform([redMultiplier:Number], [greenMultiplier:Number], [blueMultiplier:Number], [alphaMultiplier:Number], [redOffset:Number], [greenOffset:Number], [blueOffset:Number], [alphaOffset:Number])

指定されたカラーチャンネル値とアルファ値を持つ ColorTransform オブジェクトを作成します。

使用できるバージョン
ActionScript 1.0、Flash Player 8

パラメータ
redMultiplier:Number (オプション)
赤の乗数の値 (-1 ～ 1)。デフォルト値は 1です。
greenMultiplier:Number (オプション)
緑の乗数の値 (-1 ～ 1)。デフォルト値は 1です。
blueMultiplier:Number (オプション)
青の乗数の値 (-1 ～ 1)。デフォルト値は 1です。
alphaMultiplier:Number (オプション)
アルファ透明度の乗数の値 (-1 ～ 1)。デフォルト値は 1です。
redOffset:Number (オプション)
赤のカラーチャンネル値のオフセット (-255 ～ 255)。デフォルト値は 0 です。
greenOffset:Number (オプション)
緑のカラーチャンネル値のオフセット (-255 ～ 255)。デフォルト値は 0 です。
blueOffset:Number (オプション)
青のカラーチャンネル値のオフセット (-255 ～ 255)。デフォルト値は 0 です。
alphaOffset:Number (オプション)
アルファ透明度のカラーチャンネル値のオフセット (-255 ～ 255)。デフォルト値は 0 です。

で、 こんなのつくってみた。

画面サイズは、320x320。
20x20のMC「box（リンケージ識別子：box）」を用意。
以下、コード。

//クラスをインポート
import flash.geom.ColorTransform;
import flash.geom.Transform;

var redOffset:Number=0;
var greenOffset:Number=-255;
var blueOffset:Number=-255;
for(var i:Number=0;i<16;i++){
 for(var j:Number=0;j<16;j++){
  var syoki:Object={_x:20*j,_y:20*i};
  var box:MovieClip=this.attachMovie("box","box"+redOffset,this.getNextHighestDepth(),syoki);
  var trans:Transform=new Transform(box);
  var red:ColorTransform=new ColorTransform(1,1,1,1,redOffset,greenOffset,blueOffset,0);
  trans.colorTransform=red;
  //オフセット値を変更
  redOffset+=1;
  greenOffset+=1;
 }
}

いまさらながら、BitmapDataの基本的プログラミング。
サンプルは、Ｆｌａｓｈ内に読み込んだ画像を表示させているだけ。

【製作過程】

画面サイズは200x200。
「autumn」（200x200）というファイル名の画像を用意。
Flash内に読み込み、ライブラリでリンケージ設定（識別子：autumn）。
以下のコードを、タイムライン第１フレームに記述。

//BitmapDataクラスをインポート
import flash.display.BitmapData;
//BitmapDataインスタンスを作成
var bmp:BitmapData=new BitmapData();
//ライブラリ内の画像を読み込み、BitamapDataインスタンスに代入
bmp=BitmapData.loadBitmap("autumn");
//MovieClip作成（ステージで作成しても構わない）
var view_mc:MovieClip=_root.createEmptyMovieClip("view_mc",1);
//MovieClipにBitampDataを表示
view_mc.attachBitmap(bmp,2);

注）上記の変数「bmp」は、メモリ内に格納されているため、「attachBitmap」でMCにアタッチしないと表示されない。

次はフィルタの適用方法。サンプルでは、BlurFilterをかけている。

//クラスをインポート
import flash.display.BitmapData;
import flash.filters.BlurFilter;
//BitmapDataインスタンスを生成
var bmd:BitmapData=new BitmapData();
//インスタンスに「BitmapData.loadBitmap」でライブラリのビットマップをロード
bmd=BitmapData.loadBitmap("autumn");
//BlurFillterのインスタンスを生成
var blur:BlurFilter=new BlurFilter(8,8,3);
//BitmapDataインスタンスにフィルタ適用
bmd.applyFilter(bmd,bmd.rectangle,new Point(0,0),blur);
//空のMCを作成
var view_mc:MovieClip=this.createEmptyMovieClip("view_mc",100);
//空のMCにBitmapDataインスタンスをアタッチ
view_mc.attachBitmap(bmd,2);

「PhysicalPointクラス」を利用して、波を表現してみた。

【制作課程】

ステージサイズは300x100。背景は黒。
5x100の矩形（色：0x6699FF）を「wave」という名前でMC化。ステージから外し、ライブラリでリンケージ設定（識別子：wave）。
以下のコードをタイムライン第１フレームに記述。

//波の数
var wave_num:Number=50;
var pt=new Array();
for(var i:Number=0;i<wave_num+1;i++){
 pt[i]=new PhysicalPoint(Stage.width/2,Stage.height/2,0.9);
}
function loop():Void{
 clear();
 for(var i:Number=0;i<wave_num;i++){
  if(i==0){
   pt[i].setKasokudo(0,(_root._ymouse-pt[i].y)*10);
  }else{
   pt[i].setKasokudo(0,(pt[i-1].y-pt[i].y)*10);
  }
  if(pt[i].y<0){pt[i].y=0};//上制限
  if(pt[i].y>100){pt[i].y=100};//下制限
  var syoki:Object={_x:Stage.width/wave_num*i,_y:pt[i].y};
  var wave:MovieClip=_root.attachMovie("wave","wave"+i,i,syoki);
 }
 _root.lineStyle(3,0x6699FF);
 _root.moveTo(0,pt[0].y);
 for(var i:Number=1;i<wave_num+1;i++){
   _root.lineTo(Stage.width/wave_num*i,pt[i].y);
 }
}
setInterval(loop,33);