Hello there flash users! In this tutorial, we will try to create a 3 Dimensional
flower like this:
I hope that you Rate this tutorial. A good Rating will be helpful.<%BRK%>
Now, let's list out the things we want to do:(This will be a good idea for
any movie clip)
We will do all the above one by one in the following steps.<%BRK%>
Note:
Make sure that all the three symbols are placed in the main stage outisde
the viewable area. To do this,press Ctrl+2and drag the symbols to
the grey area.
Points = 11; Lines = 10;
Viewport = 500;
rad = (3.14*2)/360;
line = new Array(Lines); vertex = new Array(Points);
fscommand ("fullScreen", true);
for (i=0; i != Lines; i++) { wire.DuplicateMovieClip("l" add i, i); line[i] = eval("l" add i); } for (i=0; i != Points; i++) { point.DuplicateMovieClip("v" add i, (Lines*2)+i); vertex[i] = eval("v" add i); }Explanation: The 1st for loop loops and duplicates the line movieclip until the number movieclips is equal to the value specified in the Lines variable. The 2nd loop creates n duplicates of the wire movieclip where n denotes the value of the variable of points. You could see that in both the loops, there is an eval function which assigns each duplicated movieclip a slot in the array we created in Step 4. This makes it easier to refer to their properties and the variables contained in them later.
Here is a property in flash actionscript not everyone knows; As a matter of fact, even I learnt it just before making this movie. It goes like this: Because we have assigned a array slot to each movieclip, each array becomes like an object. Similar to java, we can have variables for each object, apart from their properties. That is, we can have 3 variables x,y and z for each array element to store the co-ordinates of each vertex. So let's put it to use. What we are going to do now is give each vertex its position in the 3 dimensional world. Because flash is not equipped to do this in any decent manner, we have a boring part of typing an awful lot of lines. We have to give the x,y,z co-ordinates for each vertex. In this tutorial, however, it is going to be easy as all you have to do is copy the following code and paste it in the action script window.
vertex[0].x = 0; vertex[1].x = -100; vertex[2].x = -150; vertex[3].x = -150; vertex[4].x = 0; vertex[5].x = 100; vertex[6].x = 150; vertex[7].x = 100; vertex[8].x = 150; vertex[9].x = 0; vertex[10].y = 0; vertex[0].y = 0; vertex[1].y = -100; vertex[2].y = 0; vertex[3].y = 100; vertex[4].y = 150; vertex[5].y = 100; vertex[6].y = 0; vertex[7].y = -100; vertex[8].y = -150; vertex[9].y = 0; vertex[10].y = 0; vertex[0].z = 0; vertex[1].z = -100; vertex[2].z = 0; vertex[3].z = 100; vertex[4].z = 0; vertex[5].z = 100; vertex[6].z = 0; vertex[7].z = -100; vertex[8].z = 0; vertex[9].z = -150; vertex[10].z = 150;As you can see, the values and the number of lines itself will differ for each object and you have to experiment with this to get a rough idea of where a -100,-100,-100 point will lie after rendering. I can explain that to you, however, that will be beyond the scope of this tutorial. And the .x, .y, .z are mere variables which can be assigned to an object array.
line[0].a = 0; line[0].b = 1; line[1].a = 0; line[1].b = 2; line[2].a = 0; line[2].b = 3; line[3].a = 0; line[3].b = 4; line[4].a = 0; line[4].b = 5; line[5].a = 0; line[5].b = 6; line[6].a = 0; line[6].b = 7; line[7].a = 0; line[7].b = 8; line[8].a = 0; line[8].b = 9; line[9].a = 0; line[9].b = 10;The values assigned to them might be confusing, but if you see, they will say the number of the vertex in the vertex array to which they are connected. For example, the line 'line[0].a=0' says that it is connected to the vertex contained in the vertex array at the location of 0. Now, if your imagination powers are excellent and you are good in math, you will see that all this means to describe a err... flower like object.
Be sure that all the scripts mentioned in this page and all other previous pages are all placed in order in the first frame's actions. Also, place the upcoming scripts in the first frame itself, until or otherwise, specified.
But actually, it has something that you might remember studying in High School. It's actually the trignometrical formulae you will use to rotate the vertices "virtually" and then project it on to the screen.
The Logic:
Now we have to workout the logic; You might say that "but we did that a
long time ago!", but then, you read the note above: It's just as confusing
as Advanced Math. You just can't understand it by reading it. So, let's go.
First, let's note that, we can rotate only one axis at a time. So, we need 3 sets of 3 variables for each vertex to rotate it along all the axes. We will then apply the formula, to rotate it on the x axis. We will store the rotated values in a new set of 3 variables. We will then apply the formula to rotate it on the y axis on the newly created set of 3 variables. We will then store the result in the next set of 3 variables. We will repeat it for the z axis rotation.
Now read the above paragraph again and again until you get it right.
Now, an important point: Although you can use the formula to rotate the object using just degree measure, Flash can calculate sine and cos values only with radian measure. So, you need to convert the degree to radian before you can use the sine and cos functions.
After rotating the object, we need to apply some formula to convert the x,y,z co-ordinates to just x,y co-ordinates, that is, convert the 3d address to a 2d address. That too will be done induvidually for each axes using formulae and the result is stored in two new variables.
After converting the object to 2d, we will have to draw the lines and vertices. We will use a for loop for doing this. We will adjust the _x,_y,_xscale,_yscale and _alpha properties of each movieclip to do this.
We will use three methods, each one for rotating, projecting and rendering the object.
We will do this in the following pages.
<%BRK%>Now just copy and paste the following code into the first frame's actionscript window:
function Rotate (x, y, z) { radx = rad*x; rady = rad*y; radz = rad*z; for (i=0; i != Points; i++) { vertex[i].x1 = vertex[i].x; vertex[i].y1 = (Math.cos(radx)*vertex[i].y)-(Math.sin(radx)*vertex[i].z); vertex[i].z1 = (Math.sin(radx)*vertex[i].y)+(Math.cos(radx)*vertex[i].z); vertex[i].x2 = (Math.cos(rady)*vertex[i].x1)-(Math.sin(rady)*vertex[i].z1); vertex[i].y2 = vertex[i].y1; vertex[i].z2 = (Math.sin(rady)*vertex[i].x1)+(Math.cos(rady)*vertex[i].z1); vertex[i].x3 = (Math.cos(radz)*vertex[i].x2)-(Math.sin(radz)*vertex[i].y2); vertex[i].y3 = (Math.sin(radz)*vertex[i].x2)+(Math.cos(radz)*vertex[i].y2); vertex[i].z3 = vertex[i].z2; } }
Now don't think that it is too difficult, we will break it down.
Now that the object rotation script is over, we need to convert it to 2d. This is relatively simple. Just a few lines. Copy the following lines of code to the action script window:
function toScreen () { for (i=0; i != Points; i++) { vertex[i].dx = (vertex[i].x3*viewport)/(vertex[i].z3+600)+350; vertex[i].dy = (vertex[i].y3*viewport)/(vertex[i].z3+600)+262.5; } }
Not much to explain here: A for loop similar to the previous one. Two formulae are applied to the vertices and then stored in two new variables.
One thing to be noted, however, is that the constants at the end of the two formulae- 350 and 262.5 are actually half the values of the height and width values of the movieclip. If you are changing the size of the movieclip, you will have to change this values accordingly.
<%BRK%>The last thing left to do is render the object. This will get a little complex, though. But just one function will do.
Copy and paste the following code into the actionscript window:
function render () { for (i=0; i != lines; i++) { with (line[i]) { _visible = true; _x = vertex[line[i].a].dx; _y = vertex[line[i].a].dy; _xscale = vertex[line[i].b].dx-vertex[line[i].a].dx; _yscale = vertex[line[i].b].dy-vertex[line[i].a].dy; } } for (i=0; i != points; i++) { with (vertex[i]) { _x = dx; _y = dy; _xscale = 75+(((((500-z3[i])/10)*30)/100)*(-1)); _yscale = 75+(((((500-z3[i])/10)*30)/100)*(-1)); _alpha = ((((z3[i]*(-1))+500)/10)); } }
Explanation:
Two For loops, one for drawing the lines and other for drawing the vertices are given. In the first loop, we change the x, y, xscale and yscale values of each line movieclip. Next, in the second loop, we change the x and y co-ordinates of the vertex movieclips. The xscale, yscale and alpha properties are adjusted so that they add more 'depth' realism to the scene. They are just some formulae created by me.
<%BRK%>Now that the methods are all done, there is very little coding to be done.
var ax, ay, az, oldx, oldy, bx, by, bz, nu;
rotx = (oldy-_ymouse)/2; roty = (oldx-_xmouse)/2; oldx = _xmouse; oldy = _ymouse; ax += rotx; ay += roty; ay += by; ax += bx; az += bz; bx = 0; by = 0; bz = 0; rotate(ax, ay, az); ax++; ay++; az++; if (ax>360) { ax -= 360; } if (ay>360) { ay -= 360; } if (az>360) { az -= 360; } toScreen(); render();The first four lines tell that the mouse has moved this much and so, add some values accordingly to the ax and ay variables. The next six lines will be explained later. Next, we call the rotate function to rotate the objects as per the ax, ay and az variables. Next, we increment the three variables by one. This is done to insure that the object keeps rotating even if the mouse is not moving.
goToAndPlay(2);This makes sure that the movie loops again and again within the two frames and does not enter the first frame once again.
The majority of the work is done. If you want, press Ctrl+Enter to check if all this has paid off. But wait! There is still some to go!
<%BRK%>Now just two more steps to go.
on (keyPress "<%lt%>up<%gt%>") { by = 2; } on (keyPress "<%lt%>down<%gt%>") { by = -2; } on (keyPress "<%lt%>left<%gt%>") { bx = 2; } on (keyPress "<%lt%>right<%gt%>") { bx = -2; } on (keyPress "a") { bz = 2; } on (keyPress "z") { bz = -2; } on (keyPress "'") { Viewport += 5; } on (keyPress "/") { Viewport -= 5; }These just add more interactivity to the movie. Now, the user can rotate the object in any axis and also zoom in or out of it. By press in up or down keys, the user is giving a positive or negative value to the bx variable. Remember that this variable also affects rotation.
There is one more small thing left to do. If you don't see the Library window, press Ctrl+L to invoke it. Now open the Line movieclip and select the "fat-line" like thing. If you don't see the Mixer panel, go to Window - Panels - Mixer to see the mixer panel. Now, change the alpha value of the circle to 83%.
If you want, you can give a color tween to the line movieclip so that it changes color as it moves.
Now that's it. Project Complete. Publish or save the file and view it in the standalone player.
Comments and suggestions welcome.
Author: V. Ramraj
Email: ramraj_1999@yahoo.com