3D in flash

3D in Flash

Flash is alot like an amiga in terms of what it’s capable of, if you have the right
programming know how and skills, if this tutorial i will demonstrate how much alike
flash and an amiga are at generating 3d Vectors/Polygons.

Flash isnt a proper 3d program like 3DStudios Max or LightWave3d but neither was
the amiga., with that in mind lets start off by replicatiing a famous crackintro
(or atleast the 3d part of it) in flash.
For this example i am going to use spinning 3d logo as seen in the awesome! SkidRow
cracktro (below)

Click on Play below to see this routine done in flash


Pretty cool eh?
ok ok press STOP now (why? because we dont want to slow down your computer with
to many flash files running at once, so press stop)

How are we going to achieve this effect in flash?, well i dont expect anyone to
have great flash action script coding skills (i dont have many myself)
but lucky for all of us, out in the “WorldWideWeb” there are many tutorials, especially
for 3d drawing in flash.
One of the best if not there best can be found at
http://www.kirupa.com/
There you can find many examples plus alot of scripts ready for instant use.
O k so lets get started
I’ m using FlashMx 2004 so if possible you use the same as me, if not hmm it should
work with flash 7 or higher (maybe even lower)
The first thing we do is open a new document in flash
once it’s open lets change the documents properties with the following specifications
300×300 (width and height)
50 fps (50 frames per second)
#000000 (black background)

D one that? ok great lets move on.
N ow we want to add our actionscript for our 3d engine, find frame 1, on layer 1,
in our scene index
once you have clicked on that we shall move to our action script window

ok now click in the area marked here with a red X
this is our action script arena, the place we type all our code
with me so far?
good

now lets put in our action script, provided to us by the great ppl at kirupa
i’ll explain as much as i can for you
copy and paste the following into our action script area

This part of the code above is just setting up our 3d scene, it’s telling flash what
to give the scene a name and where to place it in our flash document.
The focalLength is telling our 3d engine how near or how far away our object is from
the screen, so if you set a low focal length the 3d oject will jump out at you, but
if we set a high foacal length the object will look more flat

Continue to copy and paste the following underneath

This large section of code is the main 3d engine part setting up the points and if
one object is infront of another then we make sure the front object is seen and not
the background object and a whole bunch of math

Now this is the important part of our 3d adventure in flash, because this is where
all our 3d coordinates go.
What am i talking about? hmmm well in 3d we have 3 dimentions (hence the name 3D)so
we have an X a Y and a Z
X = left and right
Y = up and down
Z = how close or how far
so for our points array we need 3 sets of numbers
the first being X
the second Y
and third Z
it will look something like this
make3DPoint( 0, 0, 0)
but ill explain more on this later on lets continue to copy and paste our code

This part above as you might of guessed is to do with the rotation of our 3d object,
we do want our object to spin dont we?

The part above is the final part of our 3d code, what this is doing is telling flash
to compile a 3d shape using the coordinates we give it.
If you notice this.beginFill(0xFFFFFF, 100); this is telling flash
to colour our shape white (#FFFFFF) and give it a transparency of 100, meaning its
a solid shape
and also notice the blank space between moveTo and lineTo,
here we need to tell flash what line connects with what line.
We are going to change these settings later on to suit our needs

Once thats all done, the next part we have to do is create our 3d shape. As i said
in this example i am going to use the 3d letters “ROW” from the SkidRow Cracktro.
For this we will need 3 polygons, one for each letter, so first we start off with
the letter R
how we make this is suprising easy thanks to a very cool tool someone sent me
what this tool does is lets us draw our 3d shape and spits out the coordinates straight
to flash actionscript

Before we get to the tool, we need to grab an image to trace from, so load winuae
with the skidrow cracktro
and when the ROW appears press your PRINT SCREEN button on your pc keyboard then open
up your faveorite image editor and select PASTE
edit out the background if you can so we are just left with our straight ROW like
so

if you cant be botherd to do all that just right click my image and save it (u lazy
git)
got it?

Lets insert a new movie into our scene, goto the top menu and click on INSERT
then NEW SYMBLOL or just press CTRL + F8
name our new movie anything you want, this movie is only a temporary movie

Once it’s open lets import our “ROW” image.
Click on FILE from the top menu and select import to stage
once you have done that lets make sure we put the image where we want it
see the bottom left corner it has our files properties?

make sure they are the same as above
this will place our image smack bang in the middle of our screen

the reason we want it in the middle is because we are going to add a grid + ruler
markings
this will help us in drawing our 3d polygon

Click on view on the top menu bar and tick RULER and GRID

you also might want to click on EDIT GRID and make sure its set to
5px 5px (but this depends on the drawing tool and what best suits you)
also change the background colour to white (just to make this part easier) dont forget
to change it back to black later on
Now click on the 100% in the top right corner and change it to 200%
so we get a better view
what we end up with is something like this

Dont worry about the red dots i have added them myself to explain something, so your
row imahe should’nt have the red dots
why did i add the red dots ? well the grid and the ruler are going to be our guides
for 3d drawing
Lets get you familiar with the 3d points drawing tool for flash
Ihave no idea who made it but whoever you was i love you
open it up here
click
here
The first thing we have to do is set the grid size to 5px (or 10 which ever works
best for you , but make sure your flash grid is set to the same)
also click on Display x-y grid , so that big Z in the middle bottom
should change to a Y
Polygon should be set at default 0

great we are all set
ok so time to go back to flash and lets write some digits down
you can do this one by one or all in one go
by writing digits i mean the corners of the letter R (my red dots) and by digit i
mean match them up to the grid
the first red dot we start from is the top left corner so lets match it up with the
numbers on the grid

we have an X of -25 and a Y of
-70
we say minus because the numbers are going backwards from the middle 0 if
they were going forwards we would just give them their actuall numbers
ok so back to your 3d point tool and click on ADD POINT
you should start off with a blue dot
click and drag that dot untill -25, -70, 0 appears on the left (see
picture below)

cool eh? only 10-20 more dots to go hehehe
carry on with the rest of them, the next one to go is the top right corner, then the
one just underneath that and so on untill you come back to the first dot you made
I normaly go in a clockwise direction, untill i end up back where i started from (see
below)

does yours look like this? or something similiar
ok thats our ‘R’ done lets grab the code for it
Click TOGGLE OUTPUT
a new window appears with some code

Ignore the polygon line at the top
but copy and paste all the MAKE3DPOINT…….. data
if you have done it like i did it, then you should end up with around about 17
points (17 MAKE3DPOINTS) give or take a few, count how many
you do have because this amount is important

In the next example im using 17 points,so you change the amount to suit your 3d shape
Below our my coordinates all 17 of them

remember our part of code that said points array?
pointsArray = [</p> <p>];

lets paste our coordinates inbetween here, so it should look like this

BTW important note!!! remove the last comma from the last point (flash needs to know
what was the last point and this is a easy way to do that)

Now we must join the lines up in our code
remember this part

ok well we need to fill in the blank space with lineTo(pts2D[1].x, pts2D[1].y);
then another one but changing the 1 to 2 lineTo(pts2D[2].x, pts2D[2].y);
and so on untill we reach 16 (not 17 because we count the ZERO aswell)

so we go from point 0 to point 16 , which equals
17 points and round off by going back to point 0 lineTo(pts2D[0].x,
pts2D[0].y);
got that? hmm well i dont expect you to get it on your first go
hmm ok well lets compile everything we have (change the background colour back to
black)
your code should look exacly like this

ok press F12 and lets see what we have
we should have something like this

cool however white isnt our colour so lets change it
go back to our code and seach for the line
beginFill(0xFFFFFF, 100);
change the FFFFFF to 807090
and compile again lets see the changes

ah thats more like it
ok well go and have some fun
lets see if we can make it rotate on the X axis
change
this.AxisRotations.x -= 0
to
this.AxisRotations.x -= 0.075;


cool stop that now keep changes to X
now try changing the y axis
this.AxisRotations.y -= 0
to
this.AxisRotations.y -= 0.045;


stop that, now keep changes to X and Y
now lets change the Z
change
this.AxisRotations.z -= 0
to
this.AxisRotations.z -= 0.015;


Now lets change the focalLength
change focalLength = 190
to
focalLength = 85;


See how our object changes when it comes closer to us

having fun?
ok now the hard part, finish the letter “O” and the letter
“W” hahahah and also the SKID
still sound like fun? or hard work?

W ell once you have made your new polygon data for the letter “O”
add it to the points array (remember to replace the comma we deleted at the end
of the letter R ,but delete it at the last point on letter O
)

W ell if you want to add another polygon you must add another scene for the next
polygon plus its lineTo(pts2D[0].x, pts2D[0].y) ect……

Where we have
theScene.createEmptyMovieClip(“LetterR”,1)
create another line undeaneth this like so
theScene.createEmptyMovieClip(“LetterO”,2)
change the R to O and 1 to 2 because this is our
second polygon
and where we have

copy and paste another one of these below our original
change letter R to letter O and change the
moveTo(pts2D[0].x, pts2D[0].y); to moveTo(pts2D[17].x,
pts2D[17].y);
also the
lineTo(pts2D[0].x, pts2D[0].y); to lineTo(pts2D[17].x,
pts2D[17].y);

because out next starting point is going to be point 18-1 = point
17
but fill in the blank space in between with your new data for your letter O

get all that? hmm i dont think you did but stick at it and you soon will

then you can start making some cool amiga 3d like this
Remember those cool 3d chess boards ?


or a nice spinning logo like this


or even cubes and glenz vectors ,possibiltys are almost endless
do you remember this dude?
say hi to bob

or that awesome oracle cracktro

how could we forget the amazing MELON


anyway have fun and start making some amiga cracktros

Publication author

offline 2 weeks

mus@shi9

0

Comments: 1160Publics: 2780Registration: 06-03-2017