Archive for the ‘FIVe3D’ Category
ActionScript 3.0: FIVe3D documentation is now available, finally!
go get it here:
FIVe3D documentation released by Mathieu Badimon
to 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 – tutorials, examples and links
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
ActionScript 3.0: FIVe3D cheat sheet by Zack Jordan
if battling with FIVe3D, this cheat sheet by Zack Jordan might be useful 
ActionScript 3.0: writing text i FIVe3D
wanna write some text in FIVe3D?
well, it ain’t that tough a job, just gotta get hold of what to use.
first of all you need a Scene3D which renders all of your FIVe3D stuff.
inside of this, you need a Sprite3D, which is pretty much like a normal AS3 Sprite, just in the 3rd dimension
again, inside of this you need a DynamicText3D, which is your TextField.
when using the DynamicText3D, you need to pass the font to it as a parameter.
ie. like this:
DynamicText3D(five3D.typography.HelveticaBold);
each font is in the typography-folder.
if you create any fonts on your own, this would be the place to keep them.
that’s about it, check out the full code below for details.
check out an example of text in FIVe3D that moves around in 3D space here
import five3D.display.DynamicText3D;
import five3D.display.Scene3D;
import five3D.display.Sprite3D;
import five3D.typography.HelveticaBold;
import five3D.typography.CharcoalCY;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;
public class TextInFIVe3D extends Sprite {
private var _scene:Scene3D;
private var _container:Sprite3D;
private var _text:DynamicText3D;
private var letters:Array;
private var letters2:Array;
private var letterSprites:Array;
private var targetRotationX:Number;
private var targetRotationY:Number;
private var assembled:Boolean;
public function TextInFIVe3D() {
initFive3D();
}
private function initFive3D():void {
_scene = new Scene3D();
addChild(_scene);
_container = new Sprite3D();
_text = new DynamicText3D(five3D.typography.HelveticaBold);
_text.text = "This is just a simple test";
_text.size = 30;
_text.color = 0x000000;
_text.x = -200;
_container.addChild(_text);
_container.x = 300;
_container.y = 160;
_container.rotationY = 50;
_scene.addChild(_container);
stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
}
private function handleMouseMove(e:MouseEvent):void {
_container.rotationY = -(e.stageY - stage.height / 2) / 5;
_container.rotationX = (e.stageX - stage.width / 2) / 5;
}
}
}
ActionScript 3.0: a WireframeMaterial Cube using Papervision3D
so, still waiting for proper FIVe3D documentation, I decided to take a closer look at Papervision3D.
actually, it looks quite interesting.
so, I started up very lowtech and did this spinning cube
here’s the code for it:
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
public class WireframeCube extends Sprite {
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var cube:Cube;
public function WireframeCube(){
initPapervision3D();
createCube();
beginRender();
}
private function initPapervision3D():void{
viewport = new Viewport3D();
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
}
private function createCube():void{
var allM:WireframeMaterial = new WireframeMaterial();
var m:MaterialsList = new MaterialsList();
m.addMaterial(allM, "all");
//width, depth, height
var w:Number = 500;
var d:Number = 500;
var h:Number = 500;
//segments S, T, and H
var sS:int = 3; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
var sT:int = 3; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
var sH:int = 3; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
cube = new Cube(m, w, d, h, sS, sT, sH);
scene.addChild(cube);
}
private function beginRender():void{
addEventListener(Event.ENTER_FRAME, render);
}
private function render(e:Event):void{
cube.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}
}
FIVe3D – tutorials, examples and links
I recently read this post from Zeh Fernando about the release of Mathieu Badimon’s FIVe3D – classes to create 3D geometry in Flash movies.
so actually, Zeh had made a version of Mathieu’s original example including Tweener in ActionScript 3.0 and now I’ve added just a few more lines of code.
for me, the biggest problem with 3D, is thinking in 3D possibilities, especially the z-axis.
so, in the example I’ve worked on, it is possible to rotate a sign around it’s x-, y- and z-axis by pressing it.
I’ve simply added 3 more buttons, so it now is possible to rotate the sign around it’s x-, y- OR z-axis.
take a look at FIVe3D, Tweener and ActionScript 3.0 at work here
—–
Mathieu Badimon has also updated his site with this nice 3D videoplayer made with FIVe3D
check out the 3D videoplayer here
—–
while experimenting with Five3D and Tweener, suddenly, when testing my Flash I realised, that I actually had created an optical illusion.
check out the example with optical illusion here
see those small dots between the semitransparent black squares?
they aren’t really there!
funny!
by the way, I actually wanted to use FIVe3D and Tweener to make every black square rotate on the x-, y- and z-axis on ROLL_OUT. that effects is still on every black square..
this is the ActionScript used to make the optical illusion:
import flash.display.StageScaleMode;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
// We import the FIVE3D classes needed.
import five3D.display.DynamicText3D;
import five3D.display.Scene3D;
import five3D.display.Shape3D;
import five3D.display.Sprite3D;
import five3D.typography.HelveticaBold;
import five3D.utils.Drawing;
// We import the Tweener classes needed.
import caurina.transitions.Tweener;
public class Main extends Sprite {
public var scene:Scene3D;
public var sign:Sprite3D;
public var theX:TheX = new TheX;
public var theY:TheY = new TheY;
public var theZ:TheZ = new TheZ;
public var theXYZ:TheXYZ = new TheXYZ;
public var whatToMove:String;
public function Main() {
// We define the Stage scale mode.
stage.scaleMode = StageScaleMode.NO_SCALE;
// We create a new Scene3D named "scene", center it and add it to the display list.
scene = new Scene3D();
scene.x = 50;
scene.y = 50;
addChild(scene);
var myX:Array = [0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280, 0, 35, 70, 105, 140, 175, 210, 245, 280]
var myY:Array = [0, 0, 0, 0, 0, 0, 0, 0, 0, 35, 35, 35, 35, 35, 35, 35, 35, 35, 70, 70, 70, 70, 70, 70, 70, 70, 70, 105, 105, 105, 105, 105, 105, 105, 105, 105, 140, 140, 140, 140, 140, 140, 140, 140, 140, 175, 175, 175, 175, 175, 175, 175, 175, 175, 210, 210, 210, 210, 210, 210, 210, 210, 210, 245, 245, 245, 245, 245, 245, 245, 245, 245, 280, 280, 280, 280, 280, 280, 280, 280, 280]
var i:Number = 0;
while(i < 82) {
sign = new Sprite3D();
sign.graphics3D.beginFill(0x000000);
sign.graphics3D.drawRoundRect(0, 0, 30, 30, 5, 5);
sign.graphics3D.endFill();
sign.x = myX[i];
sign.y = myY[i];
sign.alpha = .4;
scene.addChild(sign);
sign.addEventListener(MouseEvent.ROLL_OVER, signClickHandler);
sign.mouseChildren = false;
sign.buttonMode = true;
trace("test");
i++
}
}
private function signClickHandler(event:MouseEvent):void {
var myNumber:Number = Math.random()*100-50;
Tweener.addTween(event.target, {rotationX:myNumber, time:0.6, delay: 0.3, transition:"easeinout"});
Tweener.addTween(event.target, {rotationY:myNumber, time:0.6, delay: 0.3, transition:"easeinout"});
Tweener.addTween(event.target, {rotationZ:myNumber, time:0.6, delay: 0.3, transition:"easeinout"});
}
}
}
—–
while still awaiting the documentation for FIVe3D this might be useful:
Zack Jordan has just made a very nice tutorial on how to set up and use FIVe3D.
it explains the basics of using FIVe3D with ActionScript 3.0 and shows how very simple it is to use.
THUMBS UP, this is good stuff :O)
check out the tutorial from Zach Jordan on FIVe3D and ActionScript 3.0 here: