[kml_flashembed movie="wp-content/070522/BLITZ_Papervision_UI_DEMO.swf" height="384" width="512" /]
Browse by clicking the album art above. Click selected album to flip and see video.
We recently took a stab at doing an iTunes like UI in real time 3D with Flash using Papervision3D. Even with such a fantastic code base in our hands the challenges of making something usable in a 3D world seem very daunting at first. But I’m very excited about this new frontier in web development and was eager to just dive in and make something.
The first real road block was discovering Fuse Kit was not yet ported to AS3. I had come to rely on it for all of my programmatic tweening. At first I tried using the Flash Tween class , but it ended up taking many lines of code to do simple movements in 3D. A friend of mine turned me on to Tweener, and it is awesome. I love it. In one line of code I can transform all of the properties on any object and get a host of useful call back events that I can assign methods to. It made animating in 3D with code quite a pleasure.
For Example:
In this one line of code we tween the x, y, z, and the rotation of all three axis in one shot. The
variable is a string that specifies which particular easing equation is to be used. The Tweener object is implemented in a Singleton style so it’s always immediately available to start adding tweens, and again, Tweener Is Awesome!
With the addition of the new animated property in the MovieMaterial Class getting an FLV to appear on the back sides of the album covers was a snap.
Example:
UIMaterial.doubleSided = true;
UIMaterial.animated = true;
Or if you want to update the FLV at your discretion you can do this instead:
UIMaterial.updateBitmap();
is a feature of the
, and it’s
subclass that allows you to decide when you’re texture is updated by taking a snap shot of your MovieClip based texture at anytime and dynamically updating all of the models that are using it.
Be sure to check out http://blog.papervision3d.org/ for more info on this great code library!
{ 70 comments… read them below or add one }
← Previous Comments
Hi, What a cool group on 7th cd! Can you tell me how they are calling please?
I meant the band’s name on 7th cd. Cool effects but no loaders. It’s a big minus.
The band on the 7th CD is call the Arctic Monkeys
Hello^^
Can someone please tell me how you make the reflection??? But please show me an example, other thing would not help!
Thanks!!!
Very nice..very very nice…=]
Hi, ppl. very nice work. I am still looking for the sourcecode. I would like to buy or to get it for free. I want to try to combine this Gallery with the Joomla CMS in first line to make it work with CBE (Community Builder Enhanced). Both of these are Opensource.
Compliments
Greetings NoNo
hi,,
I want to know ,how to add the photos to ipod in the iTunes COM Interface Documentation
hi dear,
iTunes User Interface in Papervision3D with Tweener is greate effect.
Please provide me source code for this.
Thank you,
veera
Looks great
Really well done.
Hi.
How could i get a Version of this iTunes-Version?
Could i purchase it? Or could you please me an issue?
Please contact me.
thanx
regards
is there any source code? i´m interested in learning how u managed to get doubleSided Planes, and the formula to know what plane to load the movie
Hello Sir,
I am new to papervision3d, I want to create e cube reflection effects.
Can you help me?
here is my code:
*************************************************************************************
package {
//– Import Flash Classes
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.ColorTransform;
import flash.utils.Dictionary;
import flash.net.*;
import flash.xml.*;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.filters.DropShadowFilter;
//– Import Papervision Classes
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.render.BasicRenderEngine;
import com.blitzagency.xray.logger.XrayLog;
import com.pixelfumes.reflect.*;
public class RotatingCube extends Sprite {
//– Papervision Variables
var viewport:Viewport3D;
var scene:Scene3D;
var camera:Camera3D;
var material_1:BitmapFileMaterial;
var material_2:BitmapFileMaterial;
var material_3:BitmapFileMaterial;
var material_4:BitmapFileMaterial;
var material_5:BitmapFileMaterial;
var material_6:BitmapFileMaterial;
var primitive:Cube;
var renderer:BasicRenderEngine;
private var picName:Array=new Array ;
private var maxImage:Number;
//– Loading XML
var xml:XML;
var XML_URL:String=”data/images.xml”;
var myXMLURL:URLRequest=new URLRequest(XML_URL);
var myLoader:URLLoader=new URLLoader(myXMLURL);
//– Constructor
public function RotatingCube():void {
loadImages();
}
//
private function loadImages():void {
loadXML();
}
//
private function loadXML():void {
myLoader.addEventListener(”complete”,xmlLoaded);
}
//
function xmlLoaded(event:Event):void {
var i:Number;
xml=new XML(myLoader.data);
maxImage=xml.item.length();
for (i=0; i < xml.item.length(); i++) {
picName[i]=xml.item[i].@img;
}
init3D();
}
//
private function init3D() {
viewport=new Viewport3D(550,400,false,true);
addChild(viewport);
scene=new Scene3D ;
camera=new Camera3D ;
//camera.z = -600;
camera.zoom=1;
camera.focus=1000;
renderer=new BasicRenderEngine ;
// Front Mat
material_1=new BitmapFileMaterial(picName[0]);
material_1.smooth=true;
// Back Mat
material_2=new BitmapFileMaterial(picName[1]);
material_2.smooth=true;
// Left Mat
material_3=new BitmapFileMaterial(picName[2]);
material_3.smooth=true;
// Right Mat
material_4=new BitmapFileMaterial(picName[3]);
material_4.doubleSided=true;
material_4.smooth=true;
// Top Mat
material_5=new BitmapFileMaterial(picName[4]);
material_5.smooth=true;
// Bottom Mat
material_6=new BitmapFileMaterial(picName[5]);
material_6.smooth=true;
var materialsList:MaterialsList=new MaterialsList ;
materialsList.addMaterial(material_1,”front”);
materialsList.addMaterial(material_2,”back”);
materialsList.addMaterial(material_3,”left”);
materialsList.addMaterial(material_4,”right”);
materialsList.addMaterial(material_5,”top”);
materialsList.addMaterial(material_6,”bottom”);
//– Instantiates a Cube Instance
primitive=new Cube(materialsList,500,500,500,3,3,3);
primitive.rotationY=120;
//var r1=new Reflect({mc:primitive,alpha:58,ratio:250,distance:0,updateTime:0,reflectionDropoff:1});
scene.addChild(primitive);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
function onEnterFrame(evt:Event):void {
//camera.y = (mouseY * 4)-800;
//primitive.rotationY += 2;
//primitive.rotationX += 2;
renderer.renderScene(scene,camera,viewport);
}
}
}
}
Waiting for your reply……….
Ivan Todorov from Bulgaria with 75$/h on oDesk. Are you the same man
Where I mya to find posts on this topic?
Dear friends,
iTunes User Interface in Papervision3D with Tweener it is amazing.
Please can you provide to me source code.
Please………………………………………
Thank you,
veeru
This effect was already done many times. However this should be one of the first to appear.
Awesome looking coverflow. Is the source available?
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
Please please post the source files for this!!! This is exactly what I need
Awesome!!!
I’m really interested in.
Please post the source files for this.
Thanks.
← Previous Comments
{ 16 trackbacks }