This is G o o g l e's cache of http://www.flashsandy.org/forum/lofiversion/index.php/t178.html as retrieved on 15 Jul 2007 19:34:59 GMT.
G o o g l e's cache is the snapshot that we took of the page as we crawled the web.
The page may have changed since that time. Click here for the current page without highlighting.
This cached page may reference images which are no longer available. Click here for the cached text only.
To link to or bookmark this page, use the following url: http://www.google.com/search?q=cache:GxxsYC_ozLoJ:www.flashsandy.org/forum/lofiversion/index.php/t178.html+site:www.flashsandy.org/forum&hl=en&ct=clnk&cd=23


Google is neither affiliated with the authors of this page nor responsible for its content.

Full Version: İmage Cube
ZuzuCag
hi
I m new in this forum. I m trying to create a box displaying six different pictures in each face.
I used the code below. But somehow it doesn't work.
My image size is 601*401
QUOTE

import flash.display.BitmapData;
import sandy.core.data.*;
import sandy.primitive.*;
import sandy.core.*;
import sandy.view.*;
import sandy.core.transform.*;
import sandy.core.group.*;
import sandy.skin.*;
import sandy.events.InterpolationEvent;
import sandy.util.Ease;

var rotint:RotationInterpolator;
var midX:Number = Stage.width/2;
var midY:Number = Stage.height/2;
var backCulling = true;
var isRolling = false;
var box:Object3D;

function start (Void):Void{
var w:World3D = World3D.getInstance ();
w.setRootGroup( createScene() );
w.addEventListener(World3D.onRenderEVENT,this,onRender);
var mc:MovieClip = _root.createEmptyMovieClip('screen',1);
//public function ClipScreen(mc:MovieClip, w:Number, h:Number, bgColor:Number)
var screen:ClipScreen = new ClipScreen(mc,401,401);
//public function Camera3D(nFoc:Number, s:IScreen)
var cam:Camera3D = new Camera3D(500,screen);
//public function setPosition(x:Number, y:Number, z:Number):Void
cam.setPosition(0,0,-350);
//public function addCamera(cam:Camera3D):Number
w.addCamera (cam);
//cullingButton.onRelease = switchBackCulling;
stopButton.onRelease = stop;
rotint.pause();
w.render();
//backCulling = box.enableBackFaceCulling = !backCulling;
//cullingButton.setLabel ( backCulling ? "Off" : "On" );
}

/*function switchBackCulling(){
backCulling = box.enableBackFaceCulling = !backCulling;

}
*/
rotint.resume();
function stop(){
if (isRolling){
rotint.pause();
stopButton.setLabel( "Start" );
}
else {
rotint.resume();
stopButton.setLabel( "Stop" );
}
isRolling = !isRolling;
}
//public function createScene(bg:Group):Void
//Method to overload in your application.
//In this method you have to create your scene graph and use the argument bg as the tree's root.
function createScene(Void):Group{
var g:Group = new Group();
//public function TextureSkin(t:BitmapData)
//t : The actionScriptLink of the bitmap;

var skin1:TextureSkin = new TextureSkin(BitmapData.loadBitmap("side1"));
var skin2:TextureSkin = new TextureSkin(BitmapData.loadBitmap("side2"));
var skin3:TextureSkin = new TextureSkin(BitmapData.loadBitmap("side3"));
var skin4:TextureSkin = new TextureSkin(BitmapData.loadBitmap("side4"));
var skin5:TextureSkin = new TextureSkin(BitmapData.loadBitmap("side5"));
var skin6:TextureSkin = new TextureSkin(BitmapData.loadBitmap("side6"));
//skin.setLightingEnable(true);
box = new Box(80,80,80,"quad");
//box.setSkin( skin );
var faces = box.getFaces();
trace( faces.length );
faces[0].setSkin(skin1);faces[0].setBackSkin(skin);

faces[1].setSkin(skin2);
faces[2].setSkin(skin3);
faces[3].setSkin(skin4);
faces[4].setSkin(skin5);
faces[5].setSkin(skin6);

//faces[9].setSkin(skin); faces[9].setBackSkin(skin);

// Transforms
var ease:Ease = new Ease();
var tg:TransformGroup = new TransformGroup();
rotint = new RotationInterpolator( ease.create(),400 );
//public function setPointOfReference(v:Vector):Void
//Allows you to make your object rotate around a specific
//position and not anymore around its center. The value passed in
//argument represents an offset to the object position.
//It is NOT the real position of the rotation center.
//v Vector the offset to apply to change the rotation center.


rotint.setAxisOfRotation( new Vector( 2, 0 , 1));
rotint.addEventListener(InterpolationEvent.onEndEVENT, this, loop);
tg.setTransform(rotint);
tg.addChild(box);

g.addChild(tg);
return g;
}
// Interpolator event handler

function loop(e:InterpolationEvent):Void{
// we call the redo method of the Interpolator to continue
e.getTarget().redo();
}
function camMove():Void
{ var cam:Camera3D = World3D.getInstance ().getCamera ();
// Moving the camera in and out along its direction of view axis
if (Key.isDown (Key.UP)){cam.moveForward(5);}
if (Key.isDown (Key.DOWN)){cam.moveForward(-5);}
}
function changeRotation(e:InterpolationEvent):Void
{ rotint.setAxisOfRotation(new Vector(_ymouse-midY,midX-_xmouse,0));
}
function onRender():Void
{
changeRotation();
camMove();
}
// Get started
start ();

Thanks in Advance
fjr
What is exactly the problem? All of the pictures won't load, or some of them? or they are not shown correctly? or the codes just won't be compiled?

Well, I copy-paste your codes and I noticed a small typo faces[0].setBackSkin(skin); while 'skin' is commented out! well the codes still works because you can't realy see the faces inside the box I guess tongue.gif

Anyway, I compiled your codes, the skins showed up, but the rotationInterpolator didn't work, and I don't know why. So I made a rotation from a Transform3D.
And oh yeah.. I imported 6 images for the faces to the library, then made a linkage name for each of them (side1, side2, and so on).

Here is the swf and the fla:
ZuzuCag
Hi fjr
Thanks for the files and explanation.
The problem is that the images(too much colorful I think ) don't fill the entire face when I rotate the cube. It works fine with a small cube though
If I set cam position to -100 I can get the size of the cube I want. But again the images don't fill the face
cam.setPosition(0, 0, -100);
your fla works much better than mine but again there are empty spaces on each face.
hope it makes sense
Thanks alot

ZuzuCag
QUOTE(ZuzuCag @ Nov 13 2006, 06:03 PM) *

Hi fjr
Thanks for the files and explanation.
The problem is that the images(too much colorful I think ) don't fill the entire face when I rotate the cube. It works fine with a small cube though
If I set cam position to -100 I can get the size of the cube I want. But again the images don't fill the face
cam.setPosition(0, 0, -200);
your fla works much better than mine but again there are empty spaces on each face.
hope it makes sense


And I also get this message

WARNING: Sandy::QuadFace3D The perspective bitmap distortion may not be correct
WARNING: Sandy::QuadFace3D The perspective bitmap distortion may not be correct
WARNING: Sandy::QuadFace3D The perspective bitmap distortion may not be correct
WARNING: Sandy::QuadFace3D The perspective bitmap distortion may not be correct
WARNING: Sandy::QuadFace3D The perspective bitmap distortion may not be correct
WARNING: Sandy::QuadFace3D The perspective bitmap distortion may not be correct

Thanks alot
kiroukou
That's because when you create the box object, you should NOT use the "quad" option but "tri" to have a better perspective distortion wink.gif

++
ZuzuCag
QUOTE(kiroukou @ Nov 13 2006, 10:33 PM) *

That's because when you create the box object, you should NOT use the "quad" option but "tri" to have a better perspective distortion wink.gif

++


thanks kiroukou
but it didn't work either
bump unsure.gif
kiroukou
Can you show us the problematic swf ?
ZuzuCag
sure
here it is
http://download.yousendit.com/BE74D46E457F68EA
thanks alot
Petit
QUOTE(kiroukou @ Nov 13 2006, 11:33 PM) *

That's because when you create the box object, you should NOT use the "quad" option but "tri" to have a better perspective distortion wink.gif


As the excellent author of Sandy, kiroukou is right of course. In my experience though, it makes no visible difference, if you use 'tri' or 'quad' mode, for a cube. Maybe the distortion is less good if you are picky about it wink.gif

One problem I met with images, is that for each Face the front side and back side images has to be the same size. Wonder if that helps?

QUOTE(ZuzuCag @ Nov 14 2006, 12:20 AM) *

sure
here it is


Hmm.. Is that Movieclips with text you have on the cube sides?
In that case did you make BitmapData objects out of them?
You may need to use the BitmapData.draw() method to "print" the clips to a BitmapData object.
Or I'm only cycling in the attic smile.gif
ZuzuCag
ohhh:blink:
Thanks alot
They are all in same size. Should I use images for the inside of the cube even if it is not necesary cause I ll not display the inside of the cube
Thanks Alot
Petit
No, you don't need images on the inside, if yoou are not planning on going there.
ZuzuCag
Ok
thanks alot
Petit
ZuzuCag

I tried the draw to BitmapData thing, but it doesn't seem to work.

*If* you have a MovieClip with text in the movies library,
you could drag it to the Stage and give it an instance name, say "test"
Then you create a MovieSkin for one of you faces ( or two of them if you use the 'tri'' mode ) like this
CODE
var skin3:MovieSkin = new MovieSkin(test);


This can be any MovieClip, with or without animation.
Go on and make MovieClips for all sides of the cube.

If you use the recommended 'tri' mode, you can set the skins this way:
CODE
faces[0].setSkin(skin3);
faces[1].setSkin(skin3);


Good luck!
fjr
QUOTE(ZuzuCag @ Nov 14 2006, 12:04 AM) *

thanks kiroukou
but it didn't work either
bump unsure.gif

Hmm.. it worked ver nicely to me. Ofcourse there are 2 faces on each side now.. (just like Petit said)
here is the swf using "tri" instead of "quad" (see attachment).
And the code I changed:
CODE
    box = new Box(80, 80, 80, "tri", 1);
    var faces = box.getFaces();
    faces[0].setSkin(skin1);  faces[1].setSkin(skin1);
    faces[2].setSkin(skin2); faces[3].setSkin(skin2);
    faces[4].setSkin(skin3); faces[5].setSkin(skin3);
    faces[6].setSkin(skin4); faces[7].setSkin(skin4);
    faces[8].setSkin(skin5); faces[9].setSkin(skin5);
    faces[10].setSkin(skin6); faces[11].setSkin(skin6);
ZuzuCag
It is perfect
Thanks very much guys
I really appreciate it biggrin.gif
ZuzuCag
Thanks alot for your efforts ,
But I ve one last question. I ve added tri instead of quad and also added some light (it looks cooler now) But there is a little morphing on the faces how can I fix it
Many thanks in advance

ZuzuCag
I ve fixed it biggrin.gif

I used arrays here is the code block for quality 2


[quote]
var faces = box.getFaces();
//trace( faces.length );
for(i=0;i<8;i++){
faces[i].setSkin(skin1);
}
for(j=8;j<16;j++){
faces[j].setSkin(skin2);
}

for(k=16;k<24;k++){
faces[k].setSkin(skin3);
}

for(m=24;m<32;m++){
faces[m].setSkin(skin4);
}
for(n=32;n<40;n++){
faces[n].setSkin(skin5);
}

for(u=40;u<48;u++){
faces[u].setSkin(skin6);
}
[code]
fjr
Yup.. more quality = less distortion problem.

One quick off-topic question:
Why is face number 4 mirrored left to right?

I know a quick fix for this will be to mirror the texture for face 4, but what about for more complex objects? (like ASE models maybe)
or is this bug only occure for box objects?

Thanks
kiroukou
Hi guys.
Well done ZuzCag smile.gif

fjr > for instance, the way I'm texturing a box object is not very correct. I'm applying the same texture to all the faces, and sometimes with rotations you might don't like (just a choice I've made while I coded it).
for the enxt release I would like to change this behaviour, and to provide to more serious way to texture a box! But as it would be a bit more complex, I've planed to provide some tools too in order to simplify the texture creation wink.gif

Hope you'll like it.
ZuzuCag
hi thanks kiroukou
I have one last question on my cube. Now I need to rotate the cube first on the z axis then 4 times on the y axis and then 1 time on the x axis
How can I rotate them in this order ?
Many thanks in advance
kiroukou
Hey Zuzucag.
Yes you might be able to do this, but this is not as easy as you might expect. Indeed you can simply change the rotation axis or the whole transformation associated to the transformGroup, but you also need to remember this previous state and concatenate the previous end matrix with the new one... hope it is detailed enought.

But don't worry, a 1.2 release would help you to do that quite easily if you failed here wink.gif
ZuzuCag
hi Kiroukou
I guess the new version is available is it possible to do with the new release. How can I do it please help
Thanks in advance
kiroukou
Hey,
Yes indeed. It is with the Sequence3D class that you are able to chain some transformations.
Look at the examples provided with the sources, there are some tests so illustrate how to use it.

++ wink.gif
ZuzuCag
kool Thanks
ZuzuCag
Hi again
All I got is SequeceTest2 and other classes. I don't know how to modify them. What shall I do
thanks
kiroukou
Well if you want to make a translation followed by a rotation, create a Sequence3D instance, and add a translation interpolation (positionInterpolator) object followed by a rotation interpolator for example, and attach the sequence to a transformGroup.
That would work perfectly.

The only thing is to think correctly on the rotation axis and values set into interpolators.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2007 Invision Power Services, Inc.