長らくFlashから離れてたのですが、久しぶりに作ってみました。・
で、この十日ほど、このFlashにつける名前で悩んでて、、、、いい名前を思いつかなかったので公開します。
こちらのFlashムービー、今年の干支のトラ。。。じゃなくて トラ猫がちょっとずつ角度を変えて立体的に表示されてます。
でも、サイズは22KBとコンパクト。その作り方は。。。
タネアカシ
Flashに詳しい人なら 「DisplacementMapFilterを使ってるな」 ってバレちゃうかと思います。
- flash.filters.DisplacementMapFilter (Flex2 リファレンスガイド))
- Flash 8 入門講座 第45回 Flashムービーの画像やテキストを特殊なレンズで写したように表示させる
手前に物体が有る部分と、画面奥のほうの壁の部分で、横にズラす量 を変えてるだけだったりします。
でも、結構 立体的に見えるので、作った本人が一番不思議がってたりしております～
作業手順
- 猫のモデリングデータは、DAZ Studio＆付属素材を使用。
- 奥行きを付けて見せるためのデータを作成します。
Collada形式でBlenderへとエクスポート、カメラからの距離を濃淡としてレンダリングしました。
これぐらいだと、うまい人なら手書きしてもよいかもです。 - PHP+Mingでswfファイルを作成
こちらのサイトのサンプルコードをちょっとだけ改造して使用しました。なので、以下のプログラムのライセンスはLGPLとなります
http://www.gazbming.com/
PHPにさわるのも数年ぶり。今回はコマンドライン版php.exeを使用しました。
実行方法
上記画像データを tiger_tex.jpg tiger_z.pngというファイル名で保蔵。
コマンドプロンプトにて、以下を実行します。
php.exe dekoboko.php tiger
Flashムービーtiger.swfが作成される、、、はずです。
<?
/********************************************************************************
* @ File: f8displace.php
* @ Original date: March 2007 @ www16.brinkster.com/gazb/ming/
* @ Version: 1.2
* @ Summary: flash 8 displace - click on the text to update
* @ Updated: small improvements and summary text
* @ Copyright (c) 2003-2007, www.gazbming.com - all rights reserved.
* @ Author: gazb.ming [[@]] gmail.com - www.gazbming.com
* @ Released under GNU Lesser General Public License - http://www.gnu.org/licenses/lgpl.html
********************************************************************************/
// @ modified date: March 2010 01 @ http://boxheadroom.com/
// @ File: dekoboko.php
/*******************************************************************************/
print $argv[1];
$swfname= $argv[1];
// some typical movie variables
ming_setScale(20.0000000);
ming_useswfversion(6);
$movie=new SWFMovie();
$movie->setRate(15);
$movie->setBackground(rand(0,0xFF),rand(0,0xFF),rand(0,0xFF));
// set bitmap to sprite
$pixshape = new SWFBitmap(fopen($swfname."_tex.jpg", "rb"));
$pixsprite= new SWFSprite();
$p1 = $pixsprite->add($pixshape);
$pixwidth=$pixshape->getWidth();
$pixwidth2=$pixwidth/2;
$pixheight=$pixshape->getHeight();
$pixsprite->nextFrame();
$pixclip=$movie->add($pixsprite);
$pixclip->setName("pix_mc");
$pixclip->moveTo(0,0);
$movie->setDimension($pixwidth,$pixheight);
// set mask to sprite
$maskshape = new SWFBitmap(fopen($swfname."_z.png", "rb"));
$masksprite= new SWFSprite();
$m1 = $masksprite->add($maskshape);
$maskwidth=$maskshape->getWidth();
$maskheight=$maskshape->getHeight();
$masksprite->nextFrame();
$maskclip=$movie->add($masksprite);
$maskclip->setName("mask_mc");
// create an actionscript string
$strAction=<<<EOT
mask_mc.onLoad=function(){ this._visible=false;};
// create references to classes
ffdm= flash.filters.DisplacementMapFilter;
fdbd= flash.display.BitmapData;
fgp= flash.geom.Point;
fgm= flash.geom.Matrix;
fgct= flash.geom.ColorTransform;
deg=0;
var filteredMc = createDisplacementMapRectangle();
filteredMc._x=0;
filteredMc._y=0;
filteredMc.onEnterFrame = function() {
deg=deg+3;
if (deg>360 ){ deg=0; }
mask_mc._visible=false;
var filter = this.filters[0];
filter.scaleX =Math.cos(3.14*deg/180.0)*15;
filter.mode = "color";
filter.alpha =0;
filter.color = 0x00FF00;
this.filters = new Array(filter);
};
function createDisplacementMapRectangle() {
var mapBitmap = new fdbd($maskwidth, $maskheight, true, bgColor);
mapBitmap.draw(mask_mc, new fgm(), new fgct(), "normal", mapBitmap.rectangle, true);
var filter = new ffdm(mapBitmap, new fgp(0, 0), 1, 1, 1, 1, "wrap", 0x000000, 0x000000);
pix_mc.filters = new Array(filter);
return pix_mc;
};
EOT;
// write actionscript string to root frame #1
$movie->add(new SWFAction($strAction));
$movie->save($outswf="$swfname.swf",9);
// open movie and set version to 8
// (hack until it can be set in ming)
$ftmp=fopen($outswf,"r"); $stmp=fread($ftmp,filesize($outswf));
$ftmp=fopen($outswf,"w"); fwrite($ftmp,substr_replace($stmp,chr(8),3,1));
print "done"
?>
ネーミング考え中、かも
- 凸凹写真（仮） （読み：デコボコ写真 ）
- Deco-Boco
英語表記だと長いですね - 『モヤモヤ写真』
（略して 『モヤ写』 ）
立体のような立体じゃないようなモヤモヤした写真ということで。。。 これはボツ w
もっと 「Twitter」みたく、音節３つぐらいにしたほうがいいのかしらん？（何を狙っている？）
今回は、3DCGから、奥行き情報を作成、付与しました。
次回は、実写の写真から自動で奥行き情報を作成する方法について書く予定です。