[pukiwiki]
長らくFlashから離れてたのですが、久しぶりに作ってみました。・
で、この十日ほど、このFlashにつける名前で悩んでて、、、、いい名前を思いつかなかったので公開します。
[[拡大表示:http://boxheadroom.com/wp/wp-content/uploads/2010/01/tiger.swf]]
[/pukiwiki]
こちらのFlashムービー、今年の干支のトラ。。。じゃなくて トラ猫がちょっとずつ角度を変えて立体的に表示されてます。
でも、サイズは22KBとコンパクト。その作り方は。。。
[pukiwiki]
*タネアカシ
Flashに詳しい人なら 「DisplacementMapFilterを使ってるな」 ってバレちゃうかと思います。
-[[flash.filters.DisplacementMapFilter (Flex2 リファレンスガイド)):http://www.adobe.com/livedocs/flex/2_jp/langref/flash/filters/DisplacementMapFilter.html]]
-[[Flash 8 入門講座 第45回 Flashムービーの画像やテキストを特殊なレンズで写したように表示させる :http://itpro.nikkeibp.co.jp/article/COLUMN/20070531/273124/?ST=webdesign&P=2]]
手前に物体が有る部分と、画面奥のほうの壁の部分で、横にズラす量 を変えてるだけだったりします。
でも、結構 立体的に見えるので、作った本人が一番不思議がってたりしております～
*作業手順
-猫のモデリングデータは、DAZ Studio＆付属素材を使用。
http://boxheadroom.com/wp/wp-content/uploads/2010/01/tiger_tex.jpg
-奥行きを付けて見せるためのデータを作成します。
Collada形式でBlenderへとエクスポート、カメラからの距離を濃淡としてレンダリングしました。
http://boxheadroom.com/wp/wp-content/uploads/2010/01/tiger_z.png
これぐらいだと、うまい人なら手書きしてもよいかもです。
–[[参考 Zバッファ画像_Blender (シムピープルwiki):http://wikiwiki.jp/thesims/?Z%A5%D0%A5%C3%A5%D5%A5%A1%B2%E8%C1%FC_Blender]]
-PHP+Mingでswfファイルを作成
こちらのサイトのサンプルコードをちょっとだけ改造して使用しました。なので、以下のプログラムの”ライセンスは[[LGPL:http://ja.wikipedia.org/wiki/GNU_Lesser_General_Public_License]]”となります
http://www.gazbming.com/
PHPにさわるのも数年ぶり。今回はコマンドライン版php.exeを使用しました。
–[[XAMPP:http://portableapps.com/apps/development/xampp]]
**実行方法
上記画像データを tiger_tex.jpg tiger_z.pngというファイル名で保蔵。
コマンドプロンプトにて、以下を実行します。
php.exe dekoboko.php tiger
Flashムービーtiger.swfが作成される、、、はずです。
[/pukiwiki]
<?
/********************************************************************************
* @ 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"
?>
[pukiwiki]
*ネーミング考え中、かも
-凸凹写真（仮） （読み：デコボコ写真 ）
-Deco-Boco
英語表記だと長いですね
- 『モヤモヤ写真』
（略して 『モヤ写』 ）
立体のような立体じゃないようなモヤモヤした写真ということで。。。 これはボツ w
もっと 「Twitter」みたく、音節３つぐらいにしたほうがいいのかしらん？（何を狙っている？）
—-
今回は、3DCGから、奥行き情報を作成、付与しました。
次回は、”実写の写真から自動で奥行き情報を作成する方法”について書く予定です。
[/pukiwiki]