I don't know anything about 3D and its use in Flash. I have, however successfully inserted a 3D cube into a website I am building for a client. I was wondering if any of the 3D experts on this forum might be able to help me with the following:
Is it possible to make a 3D cube out of movieclips instead of imported jpgs? What I am trying to do is create a cube that can display 12 images, each side would shift between two different images every 30 seconds.
If you can help me with this I would be eternally grateful because you'd be making my client so happy, and me as well, as I will not look like an utter failure. You guys rock in advance and I look forward to hearing a response.
I am not sure if it is a simple animation or a interactive hoosywhatsit. As you can see, the sides of the cube are all logos of tv stations that my client has worked for. She wants to be able to display another six logos, of another six production companies she has worked for. I offered up the possibility that we might be able to have each side shift between two logos as it spins.
Is this possible?
As far as I am able to understand, the coding I took from the tutorial will only compose a cube out 6 imported jpgs. If I turn the jpg into a GRAPHIC, the coding will ignore it. If I turn the jpg into movieclip, the code ignores it.
Do you know if what I want to do is possible? If so, would you know how? Thank you so much for your prompt respons, btw. - A
and yes if you write the code yourself of course you can do whatever you want to do with it,- like using MovieClips for the faces instead of images,.- add a button inside the movieclips to open "links"
but if you are not into coding search on the net or here on flashkit for a free flashmovie or tutorial that has what you need. The following keywords might help:
skew, cube, 3d, rotate
Thank you so much for replying so promptly. I greatly appreciate it. Unfotunately, I'm not much of a coder. What I would need is for somebody who is a coder to look at the code I am using and show me how to replace the jpgs with the movieclips. Are you up to the task? I can't imagine it is super difficult, but then again, what do I know? Nothing, especially when it comes to coding.
If anybody knows how to compose a 3D code out of 6 square shaped movie clips, I would be so grateful. I'd be happy to share the code I am currently using.
I am not the one who has to do the job,- sorry but better start learning or start at least with something concreate where this forum (including me perhaps) can help you with.
I am currently developing a block navigation with perspective distorsion but the prototype wont be finished within the next weeks- even if I give you what I already have for that it wont help you much since you seem more to be the designer type.
why dont you get as I said one of these flash files,- pick the one wich has less code than the others and post the code here. I´m pretty sure that the dynamic laoded images can be replaced with movieClips that are on the stage- without the need of changing that much code
Here is the code I am using for the cube... any ideas?
Stage.scaleMode = 'noScale';
// 3D rotation is defined by an object
// which has rotation values for each axis
var rotations = {x:0, y:0, z:0};
// The points within the cube are defined
// in an array called boxPoints
var boxPoints = [
{x:-50, y:-50, z:-50},
{x:50, y:50, z:-50},
{x:-50, y:50, z:-50},
{x:-50, y:-50, z:50},
{x:50, y:-50, z:50},
{x:50, y:50, z:50}
];
/* Points
3 - 4
/ /|
0 - 5
| |/
2 - 1
Notice that 2 points are missing, one in the front upper
right and one in the back lower left. These are not needed
since each side only requires 3 points to define its place
in 3D space. Depending on intented image orientation,
though, these points may be necessary for your images to
go and face where you want them to
*/
// create a movie clip for the cube to reside
// place it in the center of the screen
this.createEmptyMovieClip("theScene", 1);
theScene._x = theScene._y = 150;
// generate each image for the cube
createImages();
// define enter frame event for rotating cube and
// positioning images within it
theScene.onEnterFrame = function(){
// adjust axis rotations based on mouse position
rotations.x -= this._ymouse/2000;
rotations.y += this._xmouse/2000;
// transform original 3D points to 2D based on rotations
var points2d = pointsTransform(boxPoints, rotations);
// for each image clip, use movieClip3PointTransform
// to alter its transform matrix so that it matches to
// 3 points within points2d
movieClip3PointTransform(this.image0, points2d[2], points2d[0], points2d[3]);
movieClip3PointTransform(this.image1, points2d[5], points2d[1], points2d[2]);
movieClip3PointTransform(this.image2, points2d[0], points2d[2], points2d[1]);
movieClip3PointTransform(this.image3, points2d[4], points2d[3], points2d[0]);
movieClip3PointTransform(this.image4, points2d[3], points2d[4], points2d[5]);
movieClip3PointTransform(this.image5, points2d[1], points2d[5], points2d[4]);
}
// create images as empty movie clips. Each contains another
// empty movie clip in which each bitmap is attached. Using this
// inner movie clip, any sized bitmap can be used and it will
// stil conform to the size needed in the cube as this clip
// is referenced in movieClip3PointTransform.
function createImages(){
// for each side
var i = 6;
while(i--){
// create an image movie clip
theScene.createEmptyMovieClip("image"+i, i);
// create a contents clip
theScene["image"+i].createEmptyMovieClip("contents", i);
// attach the appropriate bitmap in the contents clip
theScene["image"+i].contents.attachBitmap(
flash.display.BitmapData.loadBitmap("image"+i),
1, false, true
);
}
}
// transforms 3d points into 2d points based
// on the rotation values provided
function pointsTransform(points, rotations){
var tpoints = new Array();
var sx = Math.sin(rotations.x);
var cx = Math.cos(rotations.x);
var sy = Math.sin(rotations.y);
var cy = Math.cos(rotations.y);
var sz = Math.sin(rotations.z);
var cz = Math.cos(rotations.z);
var x,y,z, xy,xz, yx,yz, zx,zy;
var i = points.length;
while (i--){
x = points[i].x;
y = points[i].y;
z = points[i].z;
// rotation around x
xy = cx*y - sx*z;
xz = sx*y + cx*z;
// rotation around y
yz = cy*xz - sy*x;
yx = sy*xz + cy*x;
// rotation around z
zx = cz*yx - sz*xy;
zy = sz*yx + cz*xy;
tpoints[i] = {x:zx, y:zy};
}
return tpoints;
}
// this function sets the transform for the image movie clips
// each a, b, c, and d of the transform matrix are simply
// based on the difference of positions of the points
// they need to match with. The image movie clips' contents
// sizes are required to determine how much of that difference
// is actually applied to make the transform match
function movieClip3PointTransform(mc, a,b,c){
// deterimine visibility
mc._visible = pointsIsVisible(a,b,c);
// if not visible, exit function
if (!mc._visible) return;
// set values for matrix using point b as top left
var m = mc.transform.matrix;
m.tx = b.x;
m.ty = b.y;
m.a = (a.x - b.x)/mc.contents._width;
m.b = (a.y - b.y)/mc.contents._width;
m.c = (c.x - b.x)/mc.contents._height;
m.d = (c.y - b.y)/mc.contents._height;
mc.transform.matrix = m;
}
// using a 2D relationship between 3 points
// determine if a 3D face is visible
function pointsIsVisible(a,b,c){
var db = b.x - a.x;
if (!db) return (a.y > b.y == c.x > a.x);
var dc = c.x - a.x;
if (!dc) return (a.y > c.y == b.x < a.x);
return ((b.y-a.y)/db < (c.y-a.y)/dc) != (a.x < b.x == a.x > c.x);
}
and the center is in the center of the cube (-50,50,-50,50,...)- but I guess that´s clear
further on it says:
Code:
function createImages(){
// for each side
var i = 6;
while(i--){
// create an image movie clip
theScene.createEmptyMovieClip("image"+i, i);
// create a contents clip
theScene["image"+i].createEmptyMovieClip("contents", i);
// attach the appropriate bitmap in the contents clip
theScene["image"+i].contents.attachBitmap(
flash.display.BitmapData.loadBitmap("image"+i),
1, false, true
);
}
}
... remove that code and instead either create a movieClip on the stage with the instance name "theScene" or if it already is there use that one- and create inside of that 6 individual new movieClips and give them the instance names: image1
image2
image3
image4
image5
image6
each of those 6 movieClips needs some content (draw a rectangle...) with the excact dimension of 100*100 pixels.
check if THIS already worked for your (beeing now able to have movieClips instead of the images) - and report
because you´ll create that movieClip manually in Flash (not like here with AS). Otherwise your Flash created movieClip would disappear and replaced with a new empty one that was then created via AS here
what you ask for doesn´t make that much sense logic wise,- I mean if you just change it with mc´s then how do you mean it?- mc´s from librarry, 1 mc with different frames each a side,...
anyway here if you use a linkageID in you library containing a mc with different frames (6 frames) each showing another side:
Code:
function createImages(){
var i = 6;
while(i--){
theScene.createEmptyMovieClip("image"+i, i);
theScene["image"+i].createEmptyMovieClip("contents", i);
theScene["image"+i].contents.attachMovie("linkageId","image"+i,i);
theScene["image"+i].contents["image"+i].gotoAndStop(i);
}
}
but MAKE sure the content of each frame doesn´t go over or below 100*100 pixels because that´s each face size
now i have new problem.i deleted the top and bottom movieclip.but there is nothing but black behind the other four movieclips.if i want add a movieclip behind it .what should i do?
ah,- you are chinese - mihau
you forgot to linkage all movieClips from the library,- that´s why you are missing to faces, here have a look it should be like this:
maybe increase the framerate (fps) of your movie as well,- maybe to 42 fps so it runs smoother.
i haven't said clearly.what i want like this file.it came from senocular.there are two side in every movieclip.and every side is different movieclip.but the movieclip or picture should be 100*100.if i want make it in my previous file 3dcubeB.fla.what i should do .by the way,thank you for your help again