Hello everyone! In this tutorial, I'll show you how to make a 3D looking ball in Flash. The point of this is to learn how to control it using the arrow keys, via ActionScript, in my next tutorial. You can view the complete here. So, first of all, open up a new Flash document. Make three layers, and name them, Shadow, Mask, and Background, in this order from top to bottom.
Before we begin, I'll explain how it is going to work. In the Background layer, you'll have an image to act as the ball's material. In order to only see the image where the ball is, you'll make a mask in the next layer. To make the ball look more realistic, you'll add 3D effects on the last layer.
Begin by importing an image. As I said above, this will act as the material of the ball. It is best if you find one that can tessellate. If you can't, that's fine too, but you'll see the seems when controlling the ball. Anyway, I have chosen a chain mail JPG. Import it into your document and drag it onto the Background layer.
This is where images that tessellate come in handy. Copy and paste you image several times so that they cover the whole stage.
Now you can lock and hide the layer so that it will not interfere with the next steps. Also, set the background color to a light blue. In the Mask layer, draw a circle. The colour doesn't matter, you'll change it later on. Now convert it into a symbol and call it “ball”. Copy it. Now click on the Shadow layer and go Edit>>Paste in place (or Ctrl+Alt+V). Double click on it. It will take you to its editing mode. Inside it, add a new layer. Name the top one Shine, and the bottom one Shade. Make sure that you have the circle on both layers. (To do this, select the frame that already has the circle. While holding down Alt, drag it to the top layer. This will duplicate the frame.)
OK, before you get confused (if you're not already), this is how it is going to work. On top of the material of the ball (the chain mail image) we want to add effects to make it look 3 dimensional. This means adding a shine spot (in the Shine layer) and a shade (in the Shade layer). But, since we still need to see the image under the ball, you will need to make some colors transparent (with the alpha slider).
Start by making a Radial color. Set both sliders to white, then decrease the right slider to 0% alpha (completely transparent). Colour the circle in the Shine layer so that it looks like a shine spot. Do the same in the Shade layer, but making it look like a shadow. You should have something like this:
Now, on the Main Timeline, (Crtl+E to exit editing mode) double click on the Mask layer and convert it (you guessed it!) into a mask. Drag the Background layer onto the Mask layer. You should have something like this:
Press Crtl+Enter to view your result!
You might ask why you went through so much trouble just to make this. Why not just make two layers, one with the image, and the other with the 3D effects? Well, in my next tutorial, I'll show you how to use this document to move the ball around with the arrow keys! You could apply the technique to make you own video games! Watch out for it...
Thanks for viewing my tutorial.
