Getting started with a 3d image rotation, help...

[wuzzi2ya]

Okay I have a series of photos (24) at 12 degree rotated intervals. Can someone point me in the direction to get started with a mouse event rotation of these images... Rough example of what I am looking to do is seen here: Jetta 360 View (http://www.vw.com/jetta/360view/en/us/) . I have some ideas, but nothing solid. Please any references and or tuts would be greatly appreciated. Thanks in advance...

[Fidodo]

Okay I have a series of photos (24) at 12 degree rotated intervals. Can someone point me in the direction to get started with a mouse event rotation of these images... Rough example of what I am looking to do is seen here: Jetta 360 View (http://www.vw.com/jetta/360view/en/us/) . I have some ideas, but nothing solid. Please any references and or tuts would be greatly appreciated. Thanks in advance...

That should be simple enough. Basically, on mouse down, take the current x coordinate. On mouse move subtract the new x coordinate from the x coordinate from the mouse down. Divide this difference by a constant, this will slow down the sensitivity of the rotation. Then do a gotoandstop to that value, modulo 24, the total number of frames.

[wuzzi2ya]

I think I see what you mean. I have to run for the day, so I will try it out tomorrow. Hopefullhy I can get it working but I may comment back if all hope is lost... Thanks for the input...

[wuzzi2ya]

Oh yea, I will need to be able to click and drag the the image on rotation. Im thinking if I get the math right, I can speed up or slow down rotation dependent on hoe fast the mouse is dragged. I'll get some code together and try and post it here soon... Thanks

[theCodeBot]

Oh yea, I will need to be able to click and drag the the image on rotation. Im thinking if I get the math right, I can speed up or slow down rotation dependent on hoe fast the mouse is dragged. I'll get some code together and try and post it here soon... Thanks
That's what he just told you how to do :P He is saying to grab the difference in mouse x position every time you move the mouse while dragging, and then use the sensitivity constant to divide, and use the modulo operator to gather what frame to jump to. Like he said, simple.

[wuzzi2ya]

Can you recommend a tut or a book. Im not sure where to even start on this... Am I understanding that the images will need to be on their own frame? I would prefer to load the image dynamically from xml... Could you point me in the right direction? Thanks...

[theCodeBot]

Can you recommend a tut or a book. Im not sure where to even start on this... Am I understanding that the images will need to be on their own frame? I would prefer to load the image dynamically from xml... Could you point me in the right direction? Thanks...
To put it more simply:
1.) See the site example you posted, and how it shows the loader going in that circle? It's loading the individual snapshots of the car at that angle. So you need to, yes, use XML to load up images at every angle you can get. Store a number showing how many angles you have.
2.) Set the mouse to "drag" the rotation of the car. When it is dragging, get where it was when it last entered a frame.
3.) When the mouse is dragging around, whenever it drags far enough to reach the next closest angle you shot, then go to the image representative of that angle.

[wuzzi2ya]

Would it be best to use a switch statement to determine where the x value is in relevance to the rest of the images? Im getting, and maybe Im wrong, that this would be a simple xml gallery, only using a scroll in place of buttons. Sorry to seem so dence but this is my first attempt at a project such as this. My frustration is due to the fact that it seems so simple, yet something isnt clicking upstairs... Thanks again for the imput. I think I am just going to jump into it and see how long til I hit a wall...



To put it more simply:
1.) See the site example you posted, and how it shows the loader going in that circle? It's loading the individual snapshots of the car at that angle. So you need to, yes, use XML to load up images at every angle you can get. Store a number showing how many angles you have.
2.) Set the mouse to "drag" the rotation of the car. When it is dragging, get where it was when it last entered a frame.
3.) When the mouse is dragging around, whenever it drags far enough to reach the next closest angle you shot, then go to the image representative of that angle.

[wuzzi2ya]

Okay check it out... I have it working here, yet this is will all of the image in a MC set on their own keyframe. How do I go about converting this to an xml feed? Do I just name all of the photos and load them at runtime?


photos.stop();

var startX:Number;
var startFrame:int;
var changeDistance:int;
var travelDistance:int;

photos.buttonMode = true;
photos.addEventListener(MouseEvent.MOUSE_DOWN, pressHandler);

function pressHandler(evt:MouseEvent):void {
startX = photos.mouseX;
startFrame = photos.currentFrame;
photos.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandler);
}

function releaseHandler(evt:MouseEvent):void {
photos.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
stage.removeEventListener(MouseEvent.MOUSE_UP, releaseHandler);
}

function moveHandler(evt:MouseEvent):void {
changeDistance = Math.round((photos.mouseX - startX) / 10);
travelDistance = startFrame + changeDistance;
if (travelDistance > photos.totalFrames) {
photos.gotoAndStop(travelDistance % photos.totalFrames);
} else if (travelDistance < 0) {
photos.gotoAndStop(photos.totalFrames + (travelDistance % photos.totalFrames));
} else {
photos.gotoAndStop(travelDistance);
}
}

[Fidodo]

If you want to use xml, instead of loading the MC, create each sprite dynamically as you need it. So where you have goto and stops now, replace them with new Sprite instances and add them (remember to remove the old sprite first). You will need to use the Loader class if you want to load the images from a url from an xml feed. The flash documentation on xml is pretty good so if you don't know about xml already read up on that. Same with the Loader class.

[wuzzi2ya]

Awesome, I think I already knew that I just needed some reassurance... Thanks...


If you want to use xml, instead of loading the MC, create each sprite dynamically as you need it. So where you have goto and stops now, replace them with new Sprite instances and add them (remember to remove the old sprite first). You will need to use the Loader class if you want to load the images from a url from an xml feed. The flash documentation on xml is pretty good so if you don't know about xml already read up on that. Same with the Loader class.

[wuzzi2ya]

Alright slowly but surely... I know how to load in the xml (below) now how do I correlate the xml with the correct position?

var photos:XML;

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("news.xml"));

function onComplete(e:Event):void
{
photos = new XML(loader.data);
trace(photos);
}

[joran420]

http://joranbeasley.net/kirupa/3d_rotation.swf
http://joranbeasley.net/kirupa/3d_rotation.fla //AS2

is a quick sample of how to do it with images in a movieclip in your library.

but for dynamic i would get the xml something like this
<image pos=1>../images/render00</image>
<image pos=2>../images/render01</image>
<image pos=3>../images/render02</image>
...

then in flash put them all in an array...just makesure pos-1 is their index in the array.
look into reading Arrtibutes from xml if you dont know how to get pos
so just do
images[pos-1] = image_url;
then loop through images and load each image into a movie clip and put em in another array
for(int i = 0; i < images.length;i++){
_mc.loadMovie(images[i]); //youll need to create an empty movie clip first and make sure its on stage
_clips.push(_mc);
}

then just get the position you want ... you can use mouse difference or whatever i used a slider in my example
you get the percent you want to move
so
var pct = 0.5;
var frame = Math.floor(clips.length*pct);

then just attach clips[frame] to your display object

[wuzzi2ya]

I know hoe to set up an array, but I am confused on the positioning of the loaded images. Is LiveDocs the best reference for this?

Thanks


http://joranbeasley.net/kirupa/3d_rotation.swf
http://joranbeasley.net/kirupa/3d_rotation.fla //AS2

is a quick sample of how to do it with images in a movieclip in your library.

but for dynamic i would get the xml something like this
<image pos=1>../images/render00</image>
<image pos=2>../images/render01</image>
<image pos=3>../images/render02</image>
...

then in flash put them all in an array...just makesure pos-1 is their index in the array.
look into reading Arrtibutes from xml if you dont know how to get pos
so just do
images[pos-1] = image_url;
then loop through images and load each image into a movie clip and put em in another array
for(int i = 0; i < images.length;i++){
_mc.loadMovie(images[i]); //youll need to create an empty movie clip first and make sure its on stage
_clips.push(_mc);
}

then just get the position you want ... you can use mouse difference or whatever i used a slider in my example
you get the percent you want to move
so
var pct = 0.5;
var frame = Math.floor(clips.length*pct);

then just attach clips[frame] to your display object

[wuzzi2ya]

I'm stuck here. I want to load in the images from xml, but for the life of me I cant get it working. Can I not just put an empty movie clip on the stage and load the images into it? I want to have the most functionality as I may want to use this again and I would like to change as little as possible to convert new images... Any suggestions?

Thanks

[joran420]

ok so you know how to load a single image into a movieclip right?
you could just use a loader

var loaders = new Array();
for(var i = 0 ; i <totalpics;i++){
var L = new Loader();
L.load(imageUrl[i];
loaders.push(L);
}
then instead of frames you use an array of clips
var currImage=0;//start at position 0
this.addChild(loaders[currImage]);//show loaders[0]


then when you want to show your next image
this.removeChild(loaders[currImage]);//remove old image
currImage = newImageNumber;//set the new image to show (just +1 or +2 or small num);
this.addChild(loaders[currImage]);//attach new image to be visible

something like that anyway...If you need more help you can pm me and ill make you a sample(for a small fee)

[wuzzi2ya]

How does the xml tie in with this?