Twice a month, we revisit some of readers’ favorite posts from throughout the history of Activetuts+. Please enjoy this festive tutorial from Christmas past!
Ever wanted give your Flash design an extra dimension? Using Electric Rain's brilliant 3D software, this basic tutorial will give you an introduction in using Flash and Swift 3D together to create some fantastic graphics and animations.
Final Result Preview
Let's take a look at the final result we will be working towards:
Step 1: New Flash File
Create a new Flash file, it doesn't matter what version of ActionScript you use; we're only using Flash at the moment to create the graphics to export to Swift 3d.
Step 2: Creating the Graphics
Using whatever tools you feel comfortable with, create the basic shapes of the Santa and his Skidoo. I used the pen and pencil tool to create the basic shapes, the fewer anchor points and detail you use the better. This will speed up the time it takes for Swift 3d to import the objects you have created in Flash, and also make the 3d models easier to modify and render in Swift 3d.
An important thing to know is that Swift doesn't like gradient fills or strokes created in Flash. So just use single color fills and make sure you delete any strokes/outlines.
Step 3: Exporting Your Graphics
File > Export > Export Image > Adobe Illustrator... I've saved my file as "father_xmas.ai".
Step 4: The Swift 3d Interface
I could produce a whole tutorial on the in's and out's of Swift 3d, but just to give you an idea of what Swift 3d is like and how easy it is to use I've included an image of the interface. The interface is made up of these main elements ...
- Property Tools.
- Lighting Tools.
- Tracking Tools.
- Gallery Tools.
- Edit Tools.
- Animation tools.
- Hierarchy Tools.
- Editor Selector.
As this is only a simple beginner's tutorial we'll be using most of these tool and functions, but nothing too complicated...
Step 5: Importing Your Graphics
- Open Swift 3d.
- Select your .AI file you exported from Flash.
- Select "Open".
It will take a minute for Swift to import all the graphics and data.
Step 6: Our Imported Graphics
As you can see, our graphics have come in pretty much as we created them in Flash. Swift is good at creating these extrusions on its own using the "Extrusion Editor", but I find it easier to draw in Flash, so I use Flash to create all my Extrusions.
Step 7: Adjusting Our Layout in Swift 3d
First thing we want to do is adjust the size of our layout. In the "Property Tools" change the following settings:
- Set the layout in this tutorial to 600x600 pixels.
- Change the "Nudge Increment" to "0.01" to allow greater accuracy when we come to move the objects around later on.
Step 8: Viewing Imported Graphics
The first thing to do is change our first viewport to a "Default Target Camera" View, this allows us to rotate and view our Santa freely in any direction.
- Select the camera view in the top left corner of one of the viewports.
- Change it to "Default Target Camera".
- If you hold down the "cmd" key on a Mac or the "Ctrl" key on a PC, place your cursor anywhere in the Default Target Camera Viewport and you can move your mouse to rotate the view port to get a good look at what you have created.
- If you hold down the right-click button on your mouse, cmd/Ctrl key and drag, it allows you to zoom in and out with the Default Target Camera view.
These cmd/Ctrl/right-click techniques do take a bit of getting used to, but stick with it and it will soon become second nature to you.
As you can see they are all pretty much the same depth at the moment, we can easily change that, but the first thing to do is name all our objects so we know our arms from our legs!
Step 9: Viewing Objects
I thought it might be worth pointing out how to move your focus point in the "Default Target Camera". This red circle with a green vertical line through it is your camera focus/target point. If you click in the middle of this shape and drag, it will move the target position of your camera.
Step 10: Un-Grouping Imported Graphics
Swift 3d has grouped all our objects and I have 24 objects in my "Hierarchy Menu". First thing to do is "Ungroup" these objects/extrusions. To do this select "Arrange", then "Ungroup". Click anywhere in a viewport and your objects will appear in a list called Extrusion, Extrusion 1, 2, 3 etc...
Step 11: Re-naming Imported Graphics
- You can click on any Extrusion in the "Hierarchy" box or you can click on the actual object in the "Viewport".
- Open the "Property Tools".
- Select "Object" from the menu.
- Simply type in the name of that object, then press "Enter".
- Repeat this for all the extrusions.
I know it's a bit tedious but it will help you later on!
Step 12: Creating Parent and Child Relationships
To parent the foot to the leg for example is easy. Simply drag the RightFoot onto the RightLeg to create the parent child relationship, do the same for the arms, hands and cuffs and the same for the rest of the objects as I've done here.
Step 13: Improving the Quality of our Model
This bit is optional but I like to improve the quality of my models. This can increase the file size of the final image or animation, but as ours is relatively simple it shouldn't matter too much. To do this got to the "Property Tools"
- Select "Bevels".
- Drag the "Smoothness" slider to the far right "Smooth".
- Drag the "Mesh Quality" slider to the far right "High".
Step 14: Moving and Positioning Objects
You can move your objects into position a number of ways:
- Using the "Property Tools" you can accurately position your objects by adjusting the X, Y, Z values using numbers or using the sliders.
- Use your arrow keys to nudge the object.
- Easiest way...drag to move your object and switch between view ports until you are happy with the placement.
Step 15: The Finished 3d Model
This is what I ended up with as my final model in Swift 3D. Father Xmas sitting on a skidoo! I used a couple of the ski supports as handle bars and colored them red. We're nearly there now, just a few more steps and we're done.
Step 16: Re-coloring our Model
The files coloring should look pretty much the same as the graphics you created in Flash. However, I tend to re-color them in Swift as I find that they are a bit too glossy for my liking. To change the color of an object..
- Go to the "Material" section in the "Property Tools".
- Double-click on the little colored ball.
- This will bring up the "Edit Material" Box. There are loads of tools for you to play around with in here, but all I have done is reduce the "Highlight Strength" and "Highlight Size" by dragging them to the far-left.
- Click on "Generate Preview" to update the preview thumbnail.
- To change a color simply double-click on the large color bar and adjust accordingly.
Do this for all or none of your objects, it's up to you.
Step 17: Adding a Floor
To add a floor to place your model on you need to create a plane, this will allow the shadows to be cast onto a surface/floor.
- Select the "Create Plane" from the top toolbar. You might need to rotate your view port to see it, but don't worry if you can't see it just yet.
- Go to the "Property Tools" and select "Plane".
- Change the size of the plane to 1000.00 by 1000.00.
- Re-color the floor using the same technique in Step 16.
Step 18: Lighting
First we want to remove Swift's default lighting, or if you want you can keep it as is... I just prefer to add my own lighting setup.
- First thing to do is make sure you are in the "Top" view port (you can't edit the lighting if you are in the "Default Target View").
- Then, in turn click on each of the lights in the "Lighting Tools" and delete them. You'll know when the light is selected as it turns red instead of yellow.
- Then hit the "-" (shown here in a red box) or the "Delete Button". Do this for each of the lights.
Step 19: Adjusting the Lighting
Now we're ready to create our own lighting. Still in the "Top View":
- Select the "Create Trackball Point Light" as shown below.
- Then in the "Property Tools", select the "Point Light" you have just created.
- Double-click in the "color box" and change it to a mid gray - (this will tone down the brightness of the light).
- Leave the light size at 0.00, turn off everything in the "Options" but leave it "Active".
Step 20: Adding More Lights
OK, we need to create more lights by doing exactly the same as "Step 19". The new light will appear over the top of the light you have just created, so we need to move it to another position.
- Make sure the "Lock Spin" button is toggled to "On" This will rotate around a fixed axis.
- Make sure you have "Rotation Increment" set to 90 degrees.
- Then simply click drag the second light you've created around the trackball.
- Do this 3 times so that you have 4 equal lights around the trackball (Name your lights if you wish ...Front, Left, Right, Back).
- Create 1 more light. This will be our top light and will cast the shadows in the scene.
- Make sure the "Lock Vertical" toggle is active and drag it up to the top of the scene.
- With this light you want the "Shadows" to be active.
Step 21: Rendering Santa
If you're using the trial version you won't be able to export any of your renderings, but you can screen grab what you have done and save it out as a bitmap and crop it in Photoshop. If you have the full working version, Swift 3d comes with a built in Smart Layer rendering function, which separates our graphics/animations into layers. This means that things like shadows, moving objects and transparency layers are separated onto their own layer to help reduce file sizes and makes editing in Flash easier.
Swift can render to both Vector and Bitmap formats, can export to all the standard .swf, .AI and the .SWFT (Smart Layer) for vector formats and render to .png, .jpeg etc in the bitmap formats.
OK here we go...
Make sure the "Default Target View" is active in the "Scene Editor" (swift will render the active viewport by default).
- Click on the "Preview and Export Editor".
- Once in the Preview and Export Editor, under the "General" Settings set the Compression to "Quality" and the Curve Fitting to "Lines".
- Under the Fill options "Fill Type" select "Area Gradient Shading".
- Make sure "Include Shadows" is selected.
- Adjust the shadow density to something similar as shown.
Step 22: Rendering Santa Continued..
- Click on the "Generated Selected Frames", it will take a few minutes to render.
- If you are happy with what you see rendered click "Export Selected Frame".
- Export the frame to a location of your choice, and name it what ever you want.
Step 23: Importing Santa into Flash
- Open Flash.
- Create a new document.
- Set the stage to 600x600 pixels.
- Choose "File"-"Import".
- Locate the Swift 3d .SWFT file we exported from Swift 3d.
- Click on it to import it to either the "Stage" or "Library".
- If you imported it to your library simply drag it an position it on stage.
In this tutorial I've shown you the basics of using Flash and Swift 3d together to add an extra dimension to your Flash design work. There's certainly a lot to cover with Swift 3D and I hope this gives you an idea of what you can achieve using these two pieces of software together. Once you've explored the capabilities of Swift 3D I'm sure, like me, you'll find you use it all the time.
I hope you liked this tutorial, thanks for reading and have avery merry Christmas!