BLITZ creativity at its finest. RT: @vejnoska Probably should have expected this...http://t.co/VvY6b62ey6

posted 2 days ago on twitter

close
blog_itunesUI
blog_itunesUI

iTunes User Interface in Papervision3D with Tweener

[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:

Tweener.addTween(UITarget, {x:selectedGoTo.x, y:selectedGoTo.y, z:selectedGoTo.z-bounceAmount+UISpacing, rotationX:0, rotationY:180, rotationZ:0, time:primeTransTime, transition:transEquation});

In this one line of code we tween the x, y, z, and the rotation of all three axis in one shot. The

transEquation

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 = new MovieAssetMaterial( "movieMC" );
UIMaterial.doubleSided = true;
UIMaterial.animated = true;

Or if you want to update the FLV at your discretion you can do this instead:

UIMaterial.animated = false;
UIMaterial.updateBitmap();
updateBitmap()

is a feature of the

MovieMaterial

, and it’s

MovieAssetMaterial

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 }

Vrabik March 31, 2008 at 2:14 pm

Hi, What a cool group on 7th cd! Can you tell me how they are calling please?

Vrabik April 11, 2008 at 7:52 am

I meant the band’s name on 7th cd. Cool effects but no loaders. It’s a big minus.

Steven May 1, 2008 at 2:12 pm

The band on the 7th CD is call the Arctic Monkeys

Atticus May 25, 2008 at 3:30 pm

Hello^^

Can someone please tell me how you make the reflection??? But please show me an example, other thing would not help!

Thanks!!!

FlashMaster May 25, 2008 at 8:57 pm

Very nice..very very nice…=]

NoNo May 29, 2008 at 7:44 am

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

keith July 13, 2008 at 10:28 pm

hi,,
I want to know ,how to add the photos to ipod in the iTunes COM Interface Documentation

veera July 23, 2008 at 3:42 am

hi dear,

iTunes User Interface in Papervision3D with Tweener is greate effect.

Please provide me source code for this.

Thank you,

veera

Robert July 28, 2008 at 11:12 am

Looks great :) Really well done.

Daniel Swjetscharevsky July 29, 2008 at 12:16 am

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

andre venancio September 2, 2008 at 7:06 am

is there any source code? im interested in learning how u managed to get doubleSided Planes, and the formula to know what plane to load the movie

Arindam Mojumder November 19, 2008 at 6:49 am

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……….

alex winx November 24, 2008 at 3:43 am

Ivan Todorov from Bulgaria with 75$/h on oDesk. Are you the same man :)

Barry January 20, 2009 at 2:50 am

Where I mya to find posts on this topic?

veeru January 29, 2009 at 12:08 am

Dear friends,

iTunes User Interface in Papervision3D with Tweener it is amazing.
Please can you provide to me source code.

Please………………………………………
Thank you,
veeru

MDiogo February 19, 2009 at 2:45 pm

This effect was already done many times. However this should be one of the first to appear.

JK77 August 21, 2009 at 7:00 am

Awesome looking coverflow. Is the source available?

sandrar September 10, 2009 at 12:09 pm

Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

Steve December 3, 2009 at 1:43 pm

Please please post the source files for this!!! This is exactly what I need

dieyingao January 17, 2010 at 10:12 pm

Awesome!!!
I’m really interested in.
Please post the source files for this.
Thanks.