画像検索してかっこよく一覧で表示してくれるブラウザのプラグインに「Cooliris」というものがありますが、こちらの画像表示部分の操作が気持ち良いのでFlash + Papervision3Dで同じようなものを作成してみた。
ほんとは検索部分とか実装してみたいのですが、そこはおいおい対応ということで。。
操作方法:
KEY:←→↑↓:それぞれの方向のPlaneに移動
KEY:CONTROL:ランダムなPlaneに移動
PlaneクリックでそのPlaneに移動
ターゲットのPlaneとカメラのX座標の距離が長ければカメラの角度を大きく、短ければ角度を小さくする。
package {
import caurina.transitions.Tweener;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import org.papervision3d.cameras.CameraType;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
public class Main extends BasicView
{
private var mainObj:DisplayObject3D;
private var tget:DisplayObject3D = new DisplayObject3D();;
private var photoNum:int = 0;
private var oldPhotoNum:int = -1;
private var photoCount:int = 0;
private const ROWS:int = 4;
public function Main()
{
super(800, 600, true, true, CameraType.FREE);
buttonMode = true;
mainObj = scene.addChild(new DisplayObject3D("mainObj"));
// Material
//var fmt:FogMaterial = new FogMaterial(0x000000);
//renderer.filter = new FogFilter(fmt, 10, 50, 2000);
var material:ColorMaterial = new ColorMaterial(0x666666, 0.8, true);
for (var i:int = 0; i < 52; i++)
{
photoCount++;
var myPlane:Plane = new Plane(material, 80, 50, 2, 2);
myPlane.name = "photo" + i;
myPlane.x = int(i / ROWS) * 90;
myPlane.y = (i % ROWS) * -60;
myPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
mainObj.addChild(myPlane);
}
// 初期0番目
movePhoto(0);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
startRendering();
}
//--------------------------------
// 画像へ移動処理
//--------------------------------
private function movePhoto(num:int):void
{
num = Math.min(photoCount - 1, num);
num = Math.max(0, num);
photoNum = num
var tmp:DisplayObject3D = mainObj.getChildByName("photo" + num);
tget.copyTransform(tmp);
tget.moveBackward(200);
Tweener.addTween(camera, {
x:tget.x
, y:tget.y
, z:tget.z
, time:4.0
, transition:"easeInOut" } );
Tweener.addTween(tmp, {
z:tmp.z - 50
, time:1.0
, transition:"easeOutElastic" } );
Tweener.addTween(mainObj.getChildByName("photo" + oldPhotoNum), {
z:0
, time:0.5
, transition:"easeIn" } );
oldPhotoNum = num;
}
//--------------------------------
// Handler:クリック処理
//--------------------------------
private function onObjectClick(e:InteractiveScene3DEvent):void
{
movePhoto(e.target.name.replace("photo", ""));
}
//--------------------------------
// Handler:毎フレーム処理
//--------------------------------
override protected function onRenderTick(event:Event = null):void
{
var deg:Number = Math.min(60, (tget.x - camera.x) * 0.1);
deg = Math.max( -60, deg);
camera.rotationY = deg;
super.onRenderTick(event);
}
//--------------------------------
// Handler:キーダウン処理
//--------------------------------
private function onKeyDown(event:KeyboardEvent):void
{
switch (event.keyCode) {
case Keyboard.RIGHT:
photoNum += ROWS;
break;
case Keyboard.LEFT:
photoNum -= ROWS;
break;
case Keyboard.UP:
photoNum--;
break;
case Keyboard.DOWN:
photoNum++;
break;
case Keyboard.CONTROL:
photoNum = Math.floor(Math.random() * photoCount);
break;
}
movePhoto(photoNum);
}
}
}
タグ: ActionScript, flash, Papervision3D
