home > tutorials > flash

Swift 3D v3 Tutorial 01 - The Scene Editor -- by Vivek "Absense of Form" Mahbubani

Introduction

Just as any adventure you take on, it's always best to understand the new world you are stepping into before you go around touching and experimenting with everything. But if you're like me and you like mucking around with new-found programs even before you read the help manual then go on ahead and do so! There's nothing better then trial and error. But over time, chances are you'll get frustrated from having to guess how to do something rather than knowing exactly which button to press for a certain result. Well look no further! This tutorial will guide you through all the fancy little buttons in the Scene Editor tab you see when you first open up Swift 3D v3. Okay, enough talk let's get down to the real stuff!
I'm guessing that if you're reading this, chances are you've either got a full version or at least a demo version of Swift 3D v3 installed on your system. So go ahead and fire it up because it's best you have it at your side so you know what I'm talking about and can experiment for yourself.

Please note that this tutorial is not the only one related to Swift 3D v3 I will be writing and there may be parts that I say I will talk in more detail about later on but don't seem to be in this tutorial. Well I'll keep my word as long as you stay patient enough to wait for me to finish up the other sections. If you have any questions or problems or just feel like telling me that you cut your hair, feel free to email me.

Part 1 - The Property Inspector Look-A-Like

I realize that most of the people who are using Swift 3D v3 will have Flash installed. And for all you Flash MX users, you'll find that the guys over at eRain did do a good job in making this easy for you to work with. This panel over here on the left is just like the property inspector in Flash MX. When you've got an empty stage (or haven't selected any of your objects) This is what you'll see (look at image on the left)
There are 3 different sections that are universal throughout whatever you have selected on your stage. They are:

  • * Layout
  • * Camera
  • * Environment

Note that if you have, for example, a cylinder on your stage (or worldm whatever you like to call it) and you've selected it. This panel will list out many more options for you to choose from (in addition to the Layout, Camera, Environment choices). We'll talk about them in more detail as we talk about the primitive objects you can work with.

You can see "Layout" is currently selected in this image. Basically this section defines your stage size, the way things are displayed and how everything moves around.

Layout - In this section, you basically determine how big you want your final product to be. Notice that as you change these sizes, the sizes of the windows on the right of this panel also change (and scale up or down to fit in the given space).

Display - On the left side of this section, you are given a choice of different ways you want your objects to be displayed in your window on the right. Notice that if you have the primary window selected and you make changes to this list, it ONLY AFFECTS THE SELECTED CAMERA VIEW (ie. the primary window in this example). So you can have your priamry view set to outline and your secondary view set to Fast Shaded at the same time for example.
The checkboxes on the right are basically for what objects you want to be able to see in your world. Pivots will display the pivot point of the currently selected object. I really don't see why you wouldn't want to see where your pivot point of your object is, so I suggest keeping this checked. Then there's Paths. This basically displays (in purple) all the animation paths you create for your objects. (We'll talk about animation in more detail later on). Personally, I find that when your window gets cluttered with animated objects, it really gets confusing as to which path belongs to which object. So I keep this turned off. Ahh, next is Grid. If anyone has to ask what this does when you uncheck it, you deserve to.. read on. Unchecking this obviously turns off the gridlines in your world. And finally, Hidden. Basically, if you hide an object from the properties toolbar but decide you'd prefer that you could see all your hidden objects (and hence pretty much making them NOT hidden anymore) as well, check this box and everything will show themselves. I keep this unchecked because I usually find all my objects through the Hierarchy (discussed later) even if they're hidden.

Settings - The Nudge Increment is basically how much a selected object movies when you press one of the up/down/left/right cursor keys on your keyboard. Holding down shift and pressing these keys will still move your object only by the amount indicated in the Nudge Increment section. Trace Depth only applies to Raster Rendering with the EMO rendering engine. This is basically how far the EMO rendering engine goes for ray-tracing when it comes to reflective and transparent objects. When we talk about rendering and exporting, we'll revisit this section.

In this image, the Camera option is selected and as you can see, I've got the Front camera view selected (by default, the left window). There is one option for you to change and that is the lens length of the camera. Instead of explaining all the physics involved, I'll cut this short. The lower the lens length, the more distorted your view will be. Now you might think this is weird to do, but you know all those funky fish-eye view pictures? Well change the lens length to, say, 10 mm and you'll see what I mean. Or push it up to like 500 mm, and it turns into a telephoto lens (you know the ones that work like binoculars with super-dooper zooming capabilities). If you're still a bit confused then you have two choices. Either you wait till we get to the Camera section or you can go nuts and experiment till your heart's content.

 

In this next image, I have the Environment option selected and you're given three choices here.

Background Color - The Background Color works basically the same way as the background color in flash. Change that to red and your previously white colored windows turn red. This really doesn't affect your work if you're rendering it using the Ravix III engine (vector output) because the background is not included in your rendered results there. On the other hand, if you were rendering a raster image (using the EMO engine) that does not use transparency, then the background will be included. We'll go into much more detail on the effects of the background color on your final rendered output later on when we discuss the Preview and Export Editor. To change the current color, double click on the little rectangle of the Background Color section and the windows color picker will pop up. Make your choice and voila!

Ambient Light Color - The Ambient Light Color basically determines the color of the light source that ALWAYS EXISTS. If you make it, say, red color, everything in your world will have a tint of red. Once again, to change the color, double click on the rectangle of the Ambient Light Color and pick your color from the pop-up color picker.

Environment - The environment option is basically like the color and texture of your sky. It wraps around your entire world as if encapsulating everything you see inside a giant balloon (you know, like those balloons with a teddy bear inside of them). If you make this blue, then everything reflective will be tinted with a blue color (even if your ambient light color is, say, red). To change the environment, double click on the square. You'll be prompted with a different window compared to the others. Here you'll see something like the image below:

Name - Name is simply an option for you to name this environment, or if you selected this environment from the environment selection palette (hint: bottom right corner, but we'll talk about it later), then the name of that environment will be presented here.

Color - Over here, under Pattern, you'll see a long list of choices. I'll talk about this in much more detail later on when I get to explaining the different types of patterns (Later on I'll have a tutorial dedicated to patterns and you'll find much more information in that). One thing you might want to notice is that at the bottom of this list is "Bitmap Image". When you select this, you'll be presented with a pop-up window asking you to specify a bitmap image of your choice.

Very funky stuff can happen here. Let's give this a quick look. Look at the image below with the two cones and a sphere. I used a light shade of blue as my Ambient Light Color and an image (that comes with Swift 3D v3, naked Fire under the Show Environment Palette at the bottom right) of fire as the environment. For your info, I used a sphere with a white reflective surface (so it will reflect the environment back) in the center and the cones on the sides don't reflect the environment back because they are not reflective surfaces but grey glossy surfaces instead. And thus they have aquired the blue ambient light color I used. I also had a white background color (as you can see).


Download this example's swift t3d file here

Part 2 - Your eyes in Swift 3D v3

What you can see on the right is basically the two default camera views in Swift 3D v3 (Ok, maybe I shrank it a bit too much). What's happening here is that on the left side, you are actually looking through a camera (named FRONT) that will always look frontwards no matter how your move it around. To change your current camera view, click on the little grey rectangle on the top-left side of the window and you'll be presented with a list of choices. Notice that whatever view (currently TOP) you have on the other window will be greyed out when you try to change your current window's camera view.

To move your camera around (in other words, to pan your camera), simply left-click on any empty area of your stage and hold down the mouse button and drag (You're doing it right if while you're dragging your cursor is replaced with a camera and a cross with pointy arrows at each end). Simple, eh? To zoom in and out of wherever you currently are, right-click on any empty area of your stage and hold down the mouse button and drag (you're cursor should be a camera with a slanted line with two pointy arrow heads at each end). Not too hard eh? If you would like to move your camera in a straight line vertically or horizontally, hold down the SHIFT key and pan your camera around.

Now, if you want to move an object around on your stage, it's pretty much the same as camera movement. To move your object up/down/left/right simply left-click on them and hold down the mouse button and drag. If you got this right, you'll see your cursor change into a cube with a cross with pointy arrows at each end). Now you'll notice that if you're looking from the Front Camera, you can't exactly move your objects in the Z-dimension (ie. going deeper inwards or coming out towards you)... or can you? Just like zooming in and out with your camera, you can move your object inwards or outwards towards you by right-clicking on the object, hold down your mouse button and move it (your cursor changes into a little cube with a slanted line with pointy heads). You'll notice that the moment you release your mouse button, the other window will update itself on the object's new position. Once again, similar to the camera, if you want to move your object in a straight line vertically or horizontally, hold down the SHIFT key while your move your object around.

Part 3- The bottons at the top


From left to right these buttons are NEW, OPEN, SAVE.

  • New - Creates a new Swift 3D document.
  • Open - Opens up a window for you to select a previous Swift 3D project.
  • Save - Saves the current Swift 3D project you have open.


From left to right these buttons are CREATE TEXT, CREATE SPHERE, CREATE BOX, CREATE PYRAMID, CREATE CONE, CREATE CYLINDER, CREATE TORUS, CREATE PLANE, CREATE POLYHEDRON.

I won't go into too much detail here because all of the above buttons are pretty straight forward and I'll have a seperate tutorial that goes into detail about these objects.


From left to right these buttons are CREATE FREE POINT LIGHT, CREATE TARGET POINT LIGHT, CREATE FREE SPOT LIGHT, CREATE TARGET SPOT LIGHT.

Create Free Point Light - This creates an omni-directional light source which has no specific target linking to its position and direction of light.

Create Target Point Light - This creates an omni-directional light source but it has a target in which it is invisibily linked to (We'll talk about this more as we progress deeper into the pits of Swift 3D v3) and which affects its position and direction of light.
Ok, you might be asking, how does a target point light affect its light source direciton if it is omni-directional? Well the truth is, it doesnt. But technically speaking, the use of a target should do so.

Create Free Spot Light - This creates a directional light source which has no specific target linking to its position and direction of light.

Create Target Spot Light - This creates a directional light source which has a target in which it is invisibly linked to and which affects its position and direction of light. In other word's, it's like a person who has his or her eyes focused on one object no matter if he or she is moved around or not.



From left to right these buttons are CREATE FREE CAMERA, CREATE TARGET CAMERA.

Create Free Camera - This works much like the free light sources in which it is free to move around in any way as it has no specific target affecting its position and the direction of its camera eye.

Create Target Camera - This again works much like the target light sources in which it has a an invisible link to a target which it focuses on no matter how it is moved or rotated.


This button is TEXT TO CURVES.

Text to Curves - This button is only available when you have a text object on your stage and it is currently selected. This basically transforms the currently selected text into an extruded object (For all you raster program users, think of it as "rasterizing a text layer", and for all you vector program users, think "text to path"). After doing so, it can be manipulated in the Extrusion Editor (yes yes, discussed later).


This button is SCALING MODE.

Scaling Mode - By clicking the button, you can scale up or down the currently selected object. The special thing about this is that it will automatically unselect itself after you have used it once (ie. You click this button. You know its selected because its dented inwards. You click and drag on one of your objects on your stage and make it larger. You release your mouse button. At the same time, this button unselects itself so that the next time you click and drag an object on your stage, you're moving it and not scaling it). This scales the object in all 3 dimensions in equal amounts.


From left to right these buttons are CAMERA PAN MODE, SHOW SECONDARY CAMERA.

Camera Pan Mode - There may be times when you've zoomed in so much into your objects that there aren't any free spaces for you to click on so you can zoom in/out or move around your camera that you're looking through without moving an object instead. Yes, you can easily lock all your objects, but that's a real hassle. So with this button selected, any click-and-drag you do in your camera window will only move the camera around or zoom in or out. This button stays down until you deselect in which can be annoying at times when you forget because it doesn't allow you to select any objects and you could find yourself sitting there for a bitfiguring out why you cant seem to select what you want. (Ok, maybe it's just me)

Show Secondary Camera - As you will have seen, when you start Swift 3D v3, it has 2 camera views open for you to see (by default, Front and Top) your world through. This button basically turns on and off the secondary camera (the one on the right). You would want to use this button if, say, you had a world full of complex objects and when you played an animation it was really killing your CPU to have to render two windows at the same time. Also if you prefer having one bigger window to work on, turn off the secondary camera and when you need it again turn it back on.


This button is ZOOM CAMERA EXTENTS

Zoom Camera Extents - In other words a "Show all" button. It zooms out (or in) of where you are (for only the selected camera view) to a position that reveals all the objects in your world with an empty border around the edges. This has to be one of my most used buttons.


From left to right these buttons are RENDER RECTANGLE, RENDER WINDOW.

Note: This uses the EMO Engine in Swift 3D v3 to render a raster version of your image with no anti-aliasing.

Render Rectangle - Swift 3D isn't exactly going to correctly cast shadows and textures on all your objects at all times. This would definitely hog up too much CPU power. So if you want to see what the final result of a certain portion of your image is going to look like if you rendered it, click and drag around the area of interest (you'll get a rectangular outline of the area you want Swift 3D v3 to render. This is a good time saver if there's only bits of an image you want to see rendered instead of waiting for Swift 3D v3 to do the whole image.

Render Window - This obviously renders everything that you can see through the currently selected window.


This button is ANIMATION MODE.

Animation Mode - When you click on this button, you go into Animation Mode (Duh......) and it will turn red to keep you reminded that any movements you make to objects can result in them being animated (and possibly ruining original animations of these objects).

As this tutorial only introduces the Scene Editor I haven't gone into too much detail on each of these buttons other than telling you what they are for. I'll have a tutorial that explains these buttons in more detail later on in this series.

Part 4 - The animation timeline

Remember that I mentioned above that you had to have the Animation Mode button down to be able to do any animation? Well at first when you open up Swift 3D v3 this bar, which is actually your animation bar will be greyed out until your press the Animation Mode button. We'll talk more about animating later on.

You'll notice that even when the Animation Mode button is not pressed, you'll be able to adjust the FPS (Frames per second) of your Swift 3D v3 document (it's a good idea to make it the same speed as your Flash document). The little button on the right of the FPS is the Loop Animation button. Once again, wait till the animation tutorial and I'll talk more about this. By default, when you start a new document, this is automatically selected (dented in). You can change these defaults and I'll show you how later on.

Part 5 - Rotating

On the bottom left corner of your screen, you will see this funky transparent ball with all these buttons around them. This is your little Ball-o-rotation! You remember those bouncy transparent rubber balls that had like a little toy in the middle? Well this is basically that all over again. When you select an object on your stage (for example a torus), the pivot of your torus will be locked in the dead center of this ball while your torus will be wherever it is relative to its pivot. What do I mean? Look at the two images below. The one on the left is a torus with its pivot in its own dead center (with the Front Camera View selected)



As you can see above, the torus has its pivot in its center.



Now in the second image (above), you'll see the torus has its pivot to its right (the torus' right!). I didn't move the Front Camera at all. Now if you messed around with Swift 3D v3 yourself you might have come across one thing with this rotation ball. Using the torus with the pivot to its right, if you had the Front Camera selected, you would have what can be seen on the right over here. BUT! If you had the, say, Top Camera selected, you'll get the torus inside the rotation ball from a top-down point of view instead! Try it out yourself. Put a torus on your stage (with the Create Torus button) and click on the Front Camera (the window on the left) and look at your rotation ball. Now click on the window on the right (by default the Top Camera view) and notice the change in the rotation ball.

Now, on to the buttons in this little window:

From top to bottom we have the LOCK HORIZONTAL, LOCK VERTICAL, LOCK SPIN and ROTATION INCREMENT choices.

By clicking on the Lock Horizontal button, you will limit your transparent rotation ball to move horizontally (very useful when you want more control over its movement). If you don't like the hassle of having to always press one of these buttons and then rotate the ball, well, you don't need to do it this way. Instead, hold down the CTRL key and then drag the ball around and you'll notice that it has the same effect (and same cursor change) as the Lock Horizontal button.

The Lock Vertical button is the same as the Lock Horizontal button, except that it limits the rotation ball's movement to only up and down. The key to press while dragging the ball is the SHIFT key on your keyboard.

The next button is the Lock Spin button. This is basically going clockwise and anti-clockwise. The keys to press to get this effect instead of having to select and deselect the button are the SHIFT + CTRL keys on your keyboard.

The one at the bottom is the Rotation Increment button which basically works like the Nudge Increment (refer to the Layout section in the Property Toolbar) but this one isn't controlled by the keyboard, but instead, it controls how many degrees you turn (no matter if you've locked horizontal, vertical or spin) at a time. So click on this button and you'll be presented with a pop up menu of different angle increments. Now you might be thinking, what if I wanted to make an increment of 17.42 degrees, is there a input box I can key in the amount I want to rotate? Uhh.. no. Sorry.

And for the buttons on the left:

From top to bottom we have the RESET POSITION, RESET PIVOT LOCATION, RESET ROTATION and RESET CAMERA LOCATION.

Reset Position - There may be times when you've moved your object around a little too much and you just want to take it back to where it was when your first created it (very often it is at the dead center). Select your object you want to move back and click on this button. Notice one thing, this ONLY moves what you've told it to move in the properties toolbar (When we talk about objects, you'll see what I mean)

Reset Pivot Location - This resets the object's pivot point to its original location relative to the object itself. That is, if an object that was originally in the dead center was moved to the right while the pivot point was moved to the left, clicking on this button will move the pivot point, no, not to the center where it was originall when this object was initially created, but to the position it was originally relative to the object.

Reset Rotation - You've rotated your object wildy in the rotation window and now you want to repent. Click on this button and your "sins" will be cleaned away!

Reset Camera - Ahh this is very useful if you're like me and you move your camera around a lot (by clicking on an empty portion of your window and dragging) and now you want to get it back to the way it was originall (for example, front to go back to its original position and look straight on) then click on this button and the camera will revert to its original location. Notice that you can only use this with the FRONT, BACK, TOP, BOTTOM, LEFT and RIGHT cameras only. You cannot use this with the PERSPECTIVE camera or any one that you create with the Create Free Camera or Create Target Camera buttons.

Part 6 - Lights around your world

To the right of the rotation window, we have the lighting window. Now let's make this clear. The lights you can put and mess around with in this window are NOT the same as those created with the Create Free Point Light, Create Target Point Light, Create Free Spotlight, Create Target Spotlight. I'll explain the difference in just a moment, first, you see those little buttons on the left? Look familiar? Yes, they work the same way as the rotation window next to this one. The only difference is that you have to actually select a light before you can rotate the transparent ball. Click on one of these lights (This is what Swift 3D v3 has when you open a new document) and then you'll be able to move it around. One difference you'll notice about these lights compared to the rotation of objects is that these lights don't reside INSIDE the ball, they reside around it, on its skin. Think of them as multiple suns to your world. You won't actually see these in your camera views because your camera views are inside the transparent ball. If you created light sources by pressing the light source buttons (as mentioned in Part 3 above), they wont appear in this window because they reside inside this transparent globe.

From Top to Bottom we have the CREATE TRACKBALL POINT LIGHT, CREATE TRACKBALL SPOT LIGHT and REMOVE TRACKBALL LIGHT.

Create Trackball point light - This creates an omni-directional light source (just like the default lights Swift 3D v3 includes when you start a new document.

Create Trackball Spot Light - This creates a directional light source which will look like a torch with a light beam shooting out of it and into the transparent ball.

Remove Trackball Light - This removes the currently selected (greyed out when no light is selected) light source.

Part 7 - Materials and simple animations



And on the bottom right corner, in yellow, white, red, pink (you get the idea) is our fine palette. Over here you can clothe your objects, color your environment and even add some predefined animations.
So how exactly do you put these materials onto your objects? Well click, drag and drop. It's that simple. You select the material you want (I had my mouse over the Flat Yellow - Dark color (but you can't see my cursor) when I took this shot. You just click and drag it on to your object and it gets materialized! I'll talk more in detail about this for individual objects later on.

As you can see, I had my SHOW MATERIALS button pressed down, and thats why I was given the list of materials I could drag and drop to any objects I had on my stage. The button under it is the SHOW ENVIRONMENTS button. Remember Environments in the Properties Toolbar? Yep, this is where you'll find a bunch of colors and textures you could drag on to the empty area of your stage or drag into that square box under "Environment" in the Properties Toolbar (when you have Environment selected).
You remember that image above, with the sphere and the cones? That laval-like texture the sphere had can be found under the Elements tab when you've selected Show Environments.

Next we have the SHOW ANIMATIONS button. Clicking on this will give you a table of identical e-Rain logos stacked one after another. Go ahead, click on one of those squares and you'll see a simple animation with the logo. If you wanted to have your object move like what you just saw by clicking on one of the squares, simply click and drag the animation on to the object and there you go!

Under these buttons, there are two smaller buttons. I'll talk about them when I talk about objects later on.

Part 8 - The bottom bar

At the bottom of your screen you'll see a bar like this. You might have noticed that when you move your mouse over, say, the buttons on the rotation window at the bottom left corner, this will have a little hint phrase to help you out. Right now I had my mouse over the Flat Yellow - Dark material when I took this shot. Next to that, we have the current Frame number you are on (I'm on frame number 1) and the corresponding time (12 FPS, 1'st frame means 0.08 seconds), the size of your stage (600 x 440), the current zoom state of your stage. It's set to fit itself within whatever space I have allowed it. The PX next to FIT tells us that our current dimension type is pixels. If you changed that in your Layout section in the Properties Toolbar, this will be updated to reflect the dimension type (for example, inches would show IN). Next to this we can see NUM. This means that Numlock is on. If we had capslock on, we'd also see a CAP in one of the boxes.

Conclusion

So there you have it, the Scene editor explained. I'll have other tutorials up once I finish them (and finish my university projects as well!!) so check back here whenever you can. Like I said earlier on, if you have any problems, questions, needs to talk, feel free to email me.

Download the source file here.

 
 
home | news | tutorials | reviews | resources | forum | about
 

search web search flash-mx.com


www.flashthefuture.com   www.flash-mx.com   swift dev   www.ejepo.com


©2003 ejepo.com | advertise | legal info | site design
 
Hosting provided by DataRide, Inc.