ActionScript 3.0: using FIVe3D for a picture gallery
after having read this great article by Bartek Drozdz, I had to make my own gallery with fabulous FIVe3D.
so I got 12 picture from our recent holiday from lovely Crete, and set them up as described by Bartek, and it made this nice FIVe3D picture gallery.
check out the Crete FIVe3d gallery here:
anyway, if interested in ActionScript 3.0 and FIVe3D, be sure to read Bartoks article.
and, especially the part where he explains the third parameter in an eventListener, this was actually great news to me!
if interested, here’s the entire code for the gallery:
import five3D.display.Scene3D;
import five3D.display.Bitmap3D;
import five3D.display.Sprite3D;
import fl.motion.easing.Sine;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import gs.TweenLite;
import MonsterDebugger;
public class FIVe3Dalbum extends Sprite {
private var _numPicture:int = 12; //ALTER!
private var _picturePath:String="pic";
private var _pictureExtensiton:String=".jpg";
private var _loadingIndex:int=1;
private var _loadingInfo:TextField;
private var _pictures:Array;
private var _pictureLoader:Loader;
private var _scene:Scene3D;
private var _album:Sprite3D;
private var _padding:Number = 50;
private var _fullViewZ:Number = 2400;
private var _darker:ColorTransform=new ColorTransform(.8,.8,.8,1,0,0,0,0);
private var _lighter:ColorTransform=new ColorTransform(1,1,1,1,0,0,0,0);
private var _zoomMode:Boolean=false;
private var _zoomedPicture:Sprite3D;
private var _rows:Number = 4; //horizontal //ALTER!
private var _columns:Number = 3; //vertical //ALTER!
private var _picH:Number = 300; //ALTER!
private var _picW:Number = 450; //ALTER!
public function FIVe3Dalbum() {
trace("first public function");
var d:MonsterDebugger = new MonsterDebugger(this);
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
_loadingInfo = new TextField();
_loadingInfo.defaultTextFormat=new TextFormat("Verdana",10,0xffffff);
_loadingInfo.autoSize=TextFieldAutoSize.LEFT;
_loadingInfo.text="Loading picture "+_loadingIndex+" of "+_numPicture;
_loadingInfo.x=stage.stageWidth/2-_loadingInfo.textWidth/2;
_loadingInfo.y=stage.stageHeight/2-_loadingInfo.textHeight/2; //center textfield after text has been added
addChild(_loadingInfo);
_pictures = new Array();
loadPicture();
}
//LOADING THE PICTURES
private function loadPicture() {
_pictureLoader = new Loader();
_pictureLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPicture);
_pictureLoader.load(new URLRequest(_picturePath + _loadingIndex + _pictureExtensiton));
_loadingIndex++;
}
private function onPicture(e:Event):void {
var picture:BitmapData = (e.target.content as Bitmap).bitmapData;
_pictures.push(picture);
if (_loadingIndex<=_numPicture) {
_loadingInfo.text="Loading picture "+_loadingIndex+" of "+_numPicture;
loadPicture();
} else {
removeChild(_loadingInfo);
buildAlbum();
}
}
//BUILDING THE ALBUM
private function buildAlbum():void {
_scene = new Scene3D();
_scene.x=Math.round(stage.stageWidth/2);
_scene.y=Math.round(stage.stageHeight/2);
addChild(_scene);
//THE HOLDER FOR ALL THE PICTURES
_album = new Sprite3D();
var row:Number = 0;
var col:Number = 0;
var finalAlbumH:Number = (_columns - 1) * _picH + (_columns - 1) * _padding + _picH;
var finalAlbumW:Number = (_rows - 1) * _picW + (_rows - 1) * _padding + _picW;
for (var i:int = 0; i < _pictures.length; i++) {
var bitmap3d:Bitmap3D=new Bitmap3D(_pictures[i] as BitmapData);
var picture3d:Sprite3D = new Sprite3D();
picture3d.addChild(bitmap3d);
if (i > 0 && ( i % _columns ) == 0) {
row++;
col = 0;
}
var pw:Number = bitmap3d.bitmapData.width + _padding;
var ph:Number = bitmap3d.bitmapData.height + _padding;
picture3d.x = (-finalAlbumW / 2 + (row) * _picW + (row) * _padding);
picture3d.y = (-finalAlbumH / 2 + (col) * _picH + (col) * _padding);
col++;
picture3d.transform.colorTransform=_darker;
picture3d.buttonMode=true;
_album.addChild(picture3d);
}
_album.z=_fullViewZ;
_scene.addChild(_album);
_album.addEventListener(MouseEvent.ROLL_OVER, onOver, true);
_album.addEventListener(MouseEvent.ROLL_OUT, onOut, true);
stage.addEventListener(Event.RESIZE, onResize);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveAlbum);
stage.addEventListener(MouseEvent.CLICK, onClick);
}
//ADDING INTERACTIVITY
private function onOver(e:MouseEvent):void {
if (e.target is Sprite3D&&! _zoomMode) {
(e.target as Sprite3D).transform.colorTransform = _lighter;
}
}
private function onOut(e:MouseEvent):void {
if (e.target is Sprite3D&&! _zoomMode) {
(e.target as Sprite3D).transform.colorTransform = _darker;
}
}
private function onResize(e:Event):void {
_scene.x=Math.round(stage.stageWidth/2);
_scene.y=Math.round(stage.stageHeight/2);
}
private function moveAlbum(e:MouseEvent):void {
if (_zoomMode) {
return;
}
var mouseXPos:Number = (e.stageX - stage.stageWidth/2) / (stage.stageWidth / 2);
var mouseYPos:Number = (e.stageY - stage.stageHeight/2) / (stage.stageHeight / 2);
TweenLite.killTweensOf(_album);
var props:Object = new Object();
props.rotationY=45*mouseXPos;
props.rotationX=-25*mouseYPos;
props.x=600*mouseXPos;
props.y=300*mouseYPos;
props.ease=Sine.easeOut;
TweenLite.to(_album, .3, props);
}
//ZOOMING THE PICTURES
private function onClick(me:MouseEvent):void {
var props:Object;
if (me.target is Sprite3D&&! _zoomMode) {
TweenLite.killTweensOf(_album);
props = new Object();
props.z=0;
props.rotationX=0;
props.rotationY=0;
props.x = 0 - me.target.x - (_picW / 2);
props.y = 0 - me.target.y - (_picH / 2);
props.ease=Sine.easeInOut;
TweenLite.to(_album, .6, props);
_zoomedPicture=me.target as Sprite3D;
_zoomMode=true;
} else if (_zoomMode) {
_zoomedPicture.transform.colorTransform=_darker;
TweenLite.killTweensOf(_album);
props = new Object();
props.z=_fullViewZ;
props.x=0;
props.y=0;
props.ease=Sine.easeOut;
props.onComplete=onBackToFull;
TweenLite.to(_album, .3, props);
}
}
private function onBackToFull():void {
_zoomMode=false;
}
}
}
like FIVe3D?
well, these posts might be worth a look too:
FIVe3D cheat sheet: http://www.campjohn.dk/wp/?p=1161
text in FIVe3D: http://www.campjohn.dk/wp/?p=1155
tutorials, examples and links: http://www.campjohn.dk/wp/?p=267
der er sgu et lækker galleri!
Og fine billeder også
Christian
27 okt 09 at 10:44
[...] read earlier posts on FIVe3D, try these links: ActionScript 3.0: Using FIVe3D for a picture gallery ActionScript 3.0: FIVe3D cheet sheat by Zack Jordan ActionScript 3.0: writing text i FIVe3D FIVe3D [...]
ActionScript 3.0: FIVe3D documentation is now available, finally! at Helpful stuff
20 nov 09 at 23:14
[...] galleries: interested in past galleries, check out these, a gallery made in ActionScript 3.0 and FIVe3D a looping gallery in ActionScript 3.0 a polaroid picture gallery in ActionScript 3.0 an [...]
ActionScript 3.0: the Fransa Collection Flash with photos by Flemming Scully at Helpful stuff
1 feb 10 at 08:11
[...] recent galleries: ActionScript 3.0: the Fransa Collection Flash with photos by Flemming Scully ActionScript 3.0: using FIVe3D for a picture gallery JavaScript: using jQuery for a picture gallery other stuff made for MCH Messecenter Herning: [...]
ActionScript 3.0: logobanner for MCH Messecenter Herning / Porsche 911 Carrera 4/4S Cabriolet gallery at Helpful stuff
13 feb 10 at 21:48