flash on 2013-2-15 – wonderfl build flash online
Takepepeはスノボが大好きです。
痛いのが嫌なので、パウダー派です。冬最高！
SNSなどに利用している自分のアバター画像はスノボウェアの自分…
ではなく、中身はそこら辺にあった毛布を帽子に突っ込んで撮影しましたw
iPhoneで撮影したら、レンズにバッチリ自分も写っていたため、Photoshopで編集することに。
静止画には風景を合成して入れていますが、今回はここにウェブカムの映像を映してそれっぽく変形させます。
ActionScriptには便利なフィルターがたくさんあるので、そいつでグニャっとね。
おおまかな流れは以下
- 画像を読み込んで各レイヤーを配置
- カメラ映像を映す
- 変形に使うフォースマップを用意
- 映写レイヤーを変形
- ミラー反転も忘れずに
1.画像を読み込んで各レイヤーを配置
swfに画像を埋め込んだり、同ドメイン内の外部画像を読み込む場合はここは飛ばしていいです。
Wonderflに投稿して自サーバーの画像を読み込む場合はクロスドメインポリシーファイルをサイトルートなどに設置する必要があります。
crossdomain.xml
<?xml version="1.0" encoding="UTF-8"?> <cross-domain-policy> <allow-access-from domain="wonderfl.kayac.com" /> <allow-access-from domain="wonderfl-swf.kayac.com" /> <allow-access-from domain="*.wonderfl.net" /> </cross-domain-policy>
Main.as
public function Main() {
// クロスドメインポリシーファイルの読み込み
Security.loadPolicyFile( "http://takepepe.com/crossdomain.xml" ) ;
}
private function setAvator():void{
lens = new Bitmap (lensBmd);
addChild(lens);
screenBmd = new BitmapData(465,465,true,0x00000000);
screen = new Bitmap(screenBmd);
screen.blendMode = "overlay"; //ブレンドモード設定
addChild(screen);
frame = new Bitmap (frameBmd);
addChild(frame);
}
レンズ下地、映写レイヤー、フレームの順に重ねたら、映写レイヤーにはこの段階でblendModeを設定しておきます。
“overlay”で、レンズっぽくなります。
2.カメラ映像を映す
このVideoインスタンスはaddChildする必要はありません。
VideoとCameraのインスタンス設定は以下の箇所です。
Main.as
private function setCamera():void{
camera = Camera.getCamera();
camera.setMode(WIDTH,HEIGHT,30,true);
camera.addEventListener(ActivityEvent.ACTIVITY,onActiveCamera);
video = new Video(WIDTH,HEIGHT);
video.attachCamera(camera);
}
3.変形に使うフォースマップを用意
赤ければ赤いほど、下方向にピクセルが移動する力が働いています。
インタラクションでグラデーションを動かせると、ActionScriptでしか出来ない表現ができるようになります。
Flashをクリックするとグラデーションの表示・非表示が切り替わります。
フィルターの設定は4で。
Flash #001 Media’ – wonderfl build flash online
4.映写レイヤーを変形
X軸の変形は必要ないので、適当な値を入れています。
Main.as
private function update(e:Event):void{
var mapPoint:Point = new Point(0, 0);
var componentX:uint = BitmapDataChannel.GREEN;
var componentY:uint = BitmapDataChannel.RED;
var forceX:Number = 0;
var forceY:Number = 200;
var my_filter:DisplacementMapFilter = new DisplacementMapFilter(transformer, mapPoint, componentX, componentY, forceX, forceY, "color", 0, 0);
screen.filters = new Array(my_filter);
}
5.ミラー反転も忘れずに
鏡面に映っている表現なので、映写の際にMatrixで反転させます。
Main.as
private function draw(e:Event):void{
var matrix:Matrix = new Matrix();
matrix.scale(-1, 1);
matrix.translate(screenBmd.width, 0);
screenBmd.draw(video);
}
全ソースはWonderflを参照してください。
次回はWebRTCとcanvasで同様の表現に挑戦したいと思います。
