Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme


Color

Background


Done

Swift 3D in Flash MX Rollovers

by Iammontoya   | filed under Swift 3D

This is an archived tutorial from the kirupa.com legacy collection. It covers software that may no longer be available, but it is kept online because the ideas still hold up.

Here's a very basic tutorial for using Swift3d v.2 with Flash. This is the tutorial I wish I had, and I simply could not find anywhere. Hope it helps you build some neat effects. This tutorial assumes a very basic working knowledge of Swift and Flash. I will be using FlashMX, but the concepts are the same for Flash5.

Let's Get Started!

Roll over the animation below. This is what we're shooting for.. pretty cool for your first one!

[ rollover the above animation to see a cool effect ]

First, we will create our animation in Swift3d v.2.

  1. Open Swift 3D
     
  2. Click on Create Sphere. This will create a sphere (yeah, that's right!) with a radius of 0.500, longitude 16, latitude 16.

[ the create sphere button ]

  1. Hold Right-Click and drag down in the Front-Active view so you can zoom out and see more of the workspace.
     
  2. Click on Create Torus.  You wont see anything on your view yet because the Torus is too small and in the wrong position right now. Let's fix it!

[ the create torus button ]

  1. Change Minor Radius to 0.600, and change Major Radius to 0.800:

You can do this by typing in the values in the box, or using the interface to the right of the box that holds the values. (they look like tiny triangles. One increases value, one decreases value)

Let's add some color.

  1. Click on the Glossy Colors tab to select it.

[ the colors you can select under the glossy color tab ]

  1. Select the color value of your choice (I chose Blue). Click and Drag the color on to the "ring" (the Torus shape).
     
  2. Add color to the sphere the same way you did in step 7. Save your work

This is a good stopping point, because it will give us a chance to save our work so far and export it as an illustrator file. This is just the format I prefer to use. This file will provide the "up" state for your button. "Up-state" is the way the button looks when users hit your page for the first time.

  1. Select the Preview and Export Editor tab:

[ the preview and export editor tab on the top-right ]

  1. In the "Output Options" section, select General. Under Target Type, choose Adobe Illustrator (AI):


[ customizing the output options ]

  1. Click on "Fill Options" and select Cartoon Full Color Fill.


[ modifying fill options ]

  1. In the Render Preview Area, click on Generate Current Frame. WooHoo! No big deal.. but we need this piece. We will import into Flash later.
     
  2. In the Export To File area, click on Export Current Frame...
     
  3. Give your file a name and click on Save. I called my file Hoop.ai.

[ the export vector file dialog box ]

Take a quick break, relax! Click the next section link to view the next section of the tutorial:


Piece of cake, so far! Now, let's create a quick animation sequence. First, let's go back to our working area in Swift 3D.

  1. Click on the Scene Editor tab.
     
  2. If it's not already selected, Select the Torus on the Scene. At this point, we want to flip the ring down. In order to do this properly (for the animation in this tutorial), we need to change the pivot point of the Torus.
     
  3. Click on the Animate button at the top right of your screen.

[ the animating button ]

  1. Click the number 20 in the timeline.
     
  2. In the left panel. Click to select Position.

[ adjusting the position ]

  1. Go to the button section below and Click to select the Move Pivot Only (see image above). This will allow us to move the red and green crosshairs to the location we want without disturbing the object. This is slightly similar to the registration point in Flash.
     
  2. Position the Pivot point on the bottom edge of the Torus.

[ arranging the objects in our 3d space ]

  1. As soon as you do that, the lower left panel which controls object rotation will show you the object in relation to it's pivot point. Click on Lock Vertical.

[ the lock on vertical tab enables you to shift your object vertically ]

  1. With the vertical axis locked, use the globe in the lower left panel to drag down. You want to drag down far enough so you can see through the Torus. Whew! Gotta love it! Your screen should look similar to the next illustration:

[ the torus after it has shifted in its axis ]

  1. Click on the Play button underneath the timeline. Pretty cool, and easy as pie.
     
  2. That will complete our rollover(mouseover) effect. Let's save and export it to Flash. You're almost done!
     
  3. Click on File. Click on Save.
     
  4. Click on the Preview and Export Editor tab.
     
  5. In the Output Options section, click on General. Now, click to the right of Adobe Illustrator, and make your Target File Type to be Flash Player(swf).

[ the output options panel ]

  1. Click on Generate Entire Animation. (The render engine for Swift is killer fast! However, rendering speeds vary depending on the speed of your system. Mine took about 9 seconds.)
     
  2. Click on Export Entire Animation...
     
  3. Give it a file name (I called it Hoop.swf), and click Save. Exit Swift.

On to Flash to finish this puppy!


  1. Open a new file in Flash. Movie Size should accommodate your image. Mine is set at the default 550x400 with a white background and 12 fps. Yours will look different than the one below if you're using Flash 5.

[ modify the movie properties ]

  1. In your menu (above) click on Insert. Click on New Symbol. Select Movie Clip and click OK.
     
  2. Click on File. Click on Import and select hoop.swf and click Open. Voila! We have our movie. Click on Scene1 to return to the scene.

[ the scene1 tab ]

  1. Click on File. Click on Import.
     
  2. Select the hoop.ai file and then Click OPEN. Click OK. If you don't see your drawing, try scrolling up. Sometimes Flash puts the imported image off the screen. If the image is off the screen, select the image and bring it down to your scene.
     
  3. With the drawing still selected, use the F8 key on your keyboard, or click on Insert, Convert to Symbol.
     
  4. In the Behavior Section, choose Graphic. We do this because we don't need all the paths from Illustrator, we just want a straight image. Click OK.
     
  5. With your graphic selected, Hit F8 again. This time, we will convert our newly converted graphic to a button. Select Button from the Convert to Symbol panel and click OK.
     
  6. Double click on the button you just created (your graphic is now a button) to edit your button.

[ the button in Flash MX ]

  1. Click on the onion skin button. Onion skin will help us with placement.
     
  2. Right click on the white space underneath the Over area in the button timeline. Select Insert Blank Keyframe.
     

Okay.. when will this thing be over? Well, in about 4 steps. Here we go.

  1. Hit F11 on your keyboard. This will bring up the library.
     
  2. Select the movie clip (looks like a cogwheel)...
     
    ...and drag onto the scene. You should place the movie clip so that it is EXACTLY over the onion skin graphic.
     
  3. Turn off Onion Skin by clicking on the same button you clicked on in step
     
  4. Click on Scene1.

[ the scene 1 tab ]

  1. Drum Roll.... Click on Control. Click on Test Movie.

Whew! Wasn't that fun! Swift is not the best for modeling, but it will do great with simple stuff like this.

Hope you enjoyed the tutorial. If you have any questions or comments, please drop me a note or post on the forums.

created by.. Montoya.

"My name is Indigo Montoya. You killed my father.. prepare to die.." [email protected] 


Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Popular

Loose Ends

:: Copyright KIRUPA 2026 //--