Cool Flash 3D (on the beach)

Wednesday 9.30am – Flash on the Beach

Unbelievably, December has hit us with all the force of a runaway train, and Flash on the Beach is upon us!

And even more unbelievably, I’ve actually got my whole presentation planned and ready to go!

BRING YOUR LAPTOPS! we’ll be working through the exercises there and then, and you’ll all have the chance to play with the examples.

It’ll be a much more hands on session than the 3D presentation for FlashForward and I’ll be taking you through, in small, easily digestible chunks, everything you need to know to render 3D objects in Flash Actionscript.

First up, how to store a point in 3D space, and more important, how to render it, and rotate it:
[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dpoints1-2-demo.swf” width=”450″ height=”320″ FVERSION=”8″ SCALE=”noborder” /]

Then we’ll move on to applying an image to each point to make 3D sprites :
[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dpoints2-1-demo.swf” width=”450″ height=”320″ FVERSION=”8″ SCALE=”noborder” /]

And we’ll use exactly this technique to make a photo carousel :

[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dphotos3-2-demo.swf” width=”450″ height=”320″ FVERSION=”8″ SCALE=”noborder” /]

And then, break up a photo and turn it into 3D :

[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dscene4-1-demo.swf” width=”450″ height=”300″ FVERSION=”8″ SCALE=”noborder” /]

Enough messing around with flats, let’s actually start making shapes! Set up the points :

[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dobject5-1-demo.swf” width=”450″ height=”320″ FVERSION=”8″ SCALE=”noborder” /]

And now make a plane for each side :

[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dobject5-2-demo.swf” width=”450″ height=”320″ FVERSION=”8″ SCALE=”noborder” /]

Fill the planes with a colour, and only render the planes that are facing us (back-face culling) :

[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dobject6-1-demo.swf” width=”450″ height=”320″ FVERSION=”8″ SCALE=”noborder” /]

And finally, let me explain how to do texture mapping! (It’s not that scary 🙂 )

[kml_flashembed movie=”/wp-content/uploads/manual/2006/3dobject7-2-demo.swf” width=”450″ height=”320″ FVERSION=”8″ SCALE=”noborder” /]

As, you can see, I’ll be breaking up bit by bit, and showing you, in the simplest terms, how to program the basics of 3D. Full source code will be provided (I’ll upload it tomorrow).

And I’ll see you on Wednesday!