Controlling a 3D Rotating Object in SWiSH v2

Introduction

As seen in my previous tutorial, Making a 3D Animated Logo, Swift 3D makes it very easy to produce a 3D rotating object. What we are going to do now is take a simple rotating object made in Swift 3D, import it into SWiSH and use SWiSH to control its motion. Move your mouse pointer over the buttons in the example below to see the effect we will be producing.

The 3D Object

Now we need a 3D object. I made a simple one with three boxes and introduced a ground plane for shadow purposes. I used a preset animation as in the previous tutorial. The t3d and swf files are included in the zip file available at the end of this tutorial. Feel free to use my object or come up with one of your own.

The whole object doesn't need to be animated either. You could rotate only a portion of it. For example you could use a model of an army battle tank and rotate the turret only.

When exporting from Swift 3D export as a vector, version 4 swf which will ensure trouble free importing into SWiSH and a small file size.

Taking Control with SWiSH

We will now get this object into SWiSH and add some inter activity to it. Fire up SWiSH and we'll get into it.

Import our Object

Use the Import... command in the File menu. Browse to the location of your 3D object swf generated by Swift 3D and hit Open. In the dialog box that opens uncheck Import Background, check Import as Sprite, uncheck Masked. Hit the Select All Frames button followed by the Import button.

We should now have our 3D object in our movie. With the sprite selected name it "3d_object" and select Loop on the Sprite panel. Move it into position and hit the Play button. Your object should rotate normally. As we only want our object to rotate when our mouse pointer is over one of the control buttons we need to stop our object from rotating when our movie loads. Hit the Stop button and add the following actions to our main timeline.

Create Control Buttons

Now we can create our control buttons. They can be plain text or a shape. I just used a couple of triangles made with the Bezier Tool and Snap to Grid.

Add Forward Control

I'm sure most SWiSHers can see how to do this. We need to add a couple of events/actions to our forward button. Specifically these:

Hit the Play button in the toolbar. Our object now only spins when the mouse is over the forward control button.

Add Reverse Control

To add reverse control we use a control sprite. A control sprite is nothing more than a sprite that contains actions and events only. It will appear in SWiSH as a little film clip icon. Choose Insert > Sprite from the menu. Name this sprite "control". Double click on it to access the sprite's timeline and add the following actions:

Important: With the Goto Previous Frame action on frame 5 uncheck the Play option. Leave the Play option checked for the Goto Previous Frame action on frame 6. We now have our control sprite. Now select our reverse control button and add these events/actions:

So, what's going on here exactly? Our control sprite simply starts playing and tells our 3D object to stop rotating. The control sprite then stops. When the mouse pointer is moved over the reverse control button our control sprite is sent to the "play" label. At this point it tells our "3d_object" sprite to go to the previous frame. Because the Play option was unchecked our object stays on this frame. Our control sprite then loops and performs the same action, that is, our "3d_object" sprite is again sent to the previous frame. This continues until the mouse pointer is moved off the reverse control button when the control sprite is sent to the "stop" label which in turn stops the 3D object rotating. This is the same technique that is used in Swish-Tutorials Text Scroller Tutorial.

The result? Our 3D object now rotates in reverse. If you hit the Play button in the toolbar you will see this is the case. Well almost. The object stalls as soon as it gets to its start frame. Apart from that it's perfect :) Lets fix it. It requires us to make a couple of small changes inside our 3D object sprite.

Modifying our 3D Object Sprite

Select the sprite and have a look inside. It will contain a bunch of shapes with one being displayed per frame with place and remove effects. Something like this:

Depending on your export options from Swift 3D you may have more than one shape being displayed per frame. This is because Swift 3D exports fills, outlines, shadows and highlights separately. As I enabled fills and shadows I have two groups of objects and one from each group is displayed per frame. To see this clearly hide all the shapes in the sprite and unhide them one at a time to see how they are organized. In the above screen shot one group of shapes is entirely visible and the other group is only just visible.

The first change we have to make is to duplicate the frame 0 at the end of our animation. This involves adding a remove effect to the shape/s currently displayed and a place effect to the shape/s displayed in frame 0. As my animation contains 9 frames (0 to 8) I added these effects to frame 9. Your timeline should now look something like this:

The blue stripe shows the added frame. In my case I added 4 effects. Note that only three are visible in the screen shot. We are almost done. The last step required is to add a couple of actions to our sprites timeline.

At frame 0 add a Goto Frame action that points to the last frame in the animation, that is the one we just added. In my case that is frame 9. Important: For this action, uncheck the Play option.

At the frame after the last frame in our animation add a Goto Frame 1 action. Leave the play option checked for this one.

We are done. If you hit the Play button in the toolbar your object should now rotate correctly according to which control button the mouse is over.

So what is happening with the sprite's timeline? Well when it starts playing it jumps to the last frame and stops due to the unchecked play option in the Goto Frame action on frame 0.

This means we no longer need the Tell Target > Stop action added to the main timeline during the Add Forward Control step. It won't hurt to leave it in; its just redundant.

When the mouse pointer is moved over the forward control button our sprite starts playing normally till it gets to the last frame which sends it back to frame 1. Because we duplicated the first frame at the end of the movie this results in a smooth animation.

When the mouse pointer is moved over the reverse control button, our control sprite starts displaying the frames of our 3D object sprite one by one in reverse order till it gets to frame 0 where it immediately jumps to the last frame. Because this jump happens immediately the animation does not pause due to both the first and last frame being displayed.

What next?

It would be possible to add a stop control button in addition to the direction control buttons and make the direction control buttons respond to On Release events. This way the object would revolve when the control buttons were clicked and continue until the stop button or the other direction control button was pressed.

Files

The included zip file contains the Swift 3D t3d file, the Swift 3D generated swf and the swi file.