3D Logo

3D Logo with Illustrator, Swift3D and Flash MX by v_Ln

Note: This tutorial was submitted by v_Ln for use on this site.

Example

In the example above you can notice a couple of flaws. This isn't due to a problem with the technique, just was a little rushed in Illustrator and I didn't make my paths properly.

Okay, so lets start. First of all you will need Illusrtrator and Swift 3D for this tutorial. Flash is only really to tidy it up afterwards, and is up to you as swift3D will produce a fully working .swf file.

Illustrator

I am not going to take you step by step through creating your logo as thats by far to broad a ranger of things we could cover, and I am only really learning Illustrator myself at the moment.

To create my logo however what I did was:

• Started a new document (size does not matter - hmmm and no dodgy remarks)
• Went to File > Place and imported a picture of myself
• Used the pen tool to draw round and then fill the picture
• Added text with the text tool (valhallen)
• Saved as an Illustrator .ai file

You should have a drawing now of your logo!

Swift3D

Open up Swift3D

1. Import your new logo.ai file like below:

2. Choose the common spins button from the menu. The button is the black and blue one seen below and is located in bottom right of the Swift3D interface.

3. Now you should be presented with a new menu called Common Spins like the one below.

4. Click on a spin to see a small preview of what it does. Once you have found one you like click and drag it onto your logo until the cursor turns into a lil plus sign.

5. Ok thats the spin applied to your logo now lets create our flash file!

6. At the very top of the screen is a tab Preview and Export Editor click on it.

7. A new screen should appear.

8. Now we need to set our output to .swf

9. From the Target File Type drop down (far left) select Flash Player (swf) like so:

10. Now we need to render all our frames so hit the Generate All Frames button (near top left).

11. You should now see it working. It has a progress monitor at the bottom of the screen so you can see how far it is done.

12. Once it has completed all your frames you need to export it.

13. Near top right you will see the button Export All Frames. Press it and select where to save your .swf

That's the swift3D bit done - if you run the .swf file it created you should now see your logo spinning.

Flash

Let's tidy it up a bit in Flash

When importing the .swf into flash it creates a series of images and places one on each frame. Normally to keep these all organised I find it best to import the .swf file into a movieclip as we can then scale, postion it easier as well as apply and effects such as alpha etc!

So........

• Create a new movieclip (I named mine logo_mc)
• Goto File > Import to stage (while you are in your new movieclip)
• Select your new .swf file created by swift3D
• There your animated logo is now in flash ready to used!

You can do many things with this - such as make several different 3D elements as buttons, etc. Or just have it as a 3D logo for a site. As you can see from the example I added a preloader to mine, that follows exactly what I did in the preloader tutorial....so if you wanna know how to do it then read that tutorial.

v_Ln