by Dave Klein
In Part 1 of my series, An easy way to bring 3D content into your Adobe Flash projects, I walked you through how to use FreeSpin3D to import a 3D model into a project we created with Adobe Flash CS4 Professional and apply interactive behaviors with just a few settings.
In this tutorial, I will show you how to use FreeSpin3D to create 3D geometry directly inside Flash CS4 Professional, and then apply an interactive texture that will act as a navigation system to launch product pages on the Adobe website. You can see a working example of the finished project on the FreeSpin website.
If you missed Part 1, I encourage you to review it to get a better understanding of FreeSpin3D basics. FreeSpin3D is a tightly integrated 3D extension for Flash software that provides a visual workflow easy enough for beginning Flash designers to understand. It also provides an ActionScript API that enables advanced developers to create more complex 3D projects.
In this tutorial, I use a FreeSpin3D SpinUp. SpinUps extend the core functionality of FreeSpin3D and act as building blocks for creating more advanced 3D projects.
To follow along, you'll need Flash CS4 Professional. If you don't have it, you can download the trial version.
You also need FreeSpin3D. You will find a 15-day trial version of FreeSpin3D, the SpinUp Importer, Interactive Texture SpinUp, the source FLA file, and the model texture used for this tutorial here: freespin_tutorial_p2.zip (3 MB).
After you unzip the files, do the following:
In Part 1, you imported a 3D model into your project that was created with 3D modeling software. Here I show you how to create 3D geometry directly inside Flash using the FreeSpin3D component and control panel.
To get started, create a new ActionScript 3 document, and then open the Components panel and locate the FreeSpin3D component. Drag the component to the Stage.
With the FreeSpin3D component selected on the Stage, open the FreeSpin3D control panel and select the Primitive radio button. (Primitives are basic 3D shapes that act as building blocks for 3D models. They are found in most 3D modeling tools.) Select Box from the Primitive pull-down menu. You should see the FreeSpin3D component change to a 3D box on the Flash Stage (see Figure 1).
Figure 1. Creating a 3D cube with FreeSpin3D.
It will look like a square, but if you rotate the 3D trackball at the top left side of the FreeSpin3D control panel, you can rotate the 3D box on the Stage. Click the Reset button to get your model back to its default rotation.
With the box selected, open the Properties panel and give it the instance name cube_fs. The SpinUp will reference this name later in the tutorial.
When you expand the Primitives menu, you will see a color selector that enables you to change the color of your 3D object on the fly. You can give it a try, but for this tutorial we're going to wrap a bitmap around the box. Select the Texture radio button and then choose Browse from the Texture pull-down. Navigate to the icons.png file in the FreeSpin3D tutorial folder you downloaded.
Each Primitive has a sample texture, which you can access by selecting Sample from the Texture pull-down menu on the Primitives section of the FreeSpin3D control panel. You can use the sample as a template to create your own textures in Adobe Fireworks or Photoshop software, which is exactly what I did to create the icon's texture (see Figure 2). To apply the texture I created, just choose Sample from the Texture pull-down menu for your Primitive and then locate the texture in the library within the FreeSpin3D assets folder. Then you can edit it with your tool of choice.
Figure 2. Using the sample texture as a template for a custom texture.
Next, you're going to apply two simple behaviors that enable users to rotate the model with their mouse or their keyboard arrows. Just as we did in Part 1 of the tutorial, expand the Behaviors menu in the FreeSpin3D control panel, and select both the Keyboard Control and Mouse Control checkboxes. Disregard the notes that pop up when you select the boxes (just click OK). The notes are only applicable if you are doing timeline animations of your 3D object.
If at any time you lose the visual representation of your texture on the Flash Stage, you can click the button that looks like an eyeball next to the Primitive pull-down menu at the top of the FreeSpin3D control panel. This refreshes the live preview on the Stage. This may also be required if you edit a texture and it continues to show you the older version.
You can now test your movie. You will see that you have a 3D box with an Adobe product icon on each side. Now you're going to make the texture interactive by adding buttons that enable users to choose a product and go to the applicable product page on the Adobe website.
FreeSpin3D SpinUps enable you to do complex tasks faster and easier with little or no code. You need to use the Interactive Texture SpinUp to make your texture respond to mouse click events.
To start, create a new layer and call it SpinUp. This is not absolutely necessary, but it's good practice. Your SpinUp will reside on this layer. From the Flash menu, choose Commands > Import SpinUp. If you don't see this option, make sure you installed the SpinUp Importer as described at the beginning of the tutorial.
Navigate to the Interactive Texture SpinUp in the tutorial folder and import it. You will see the SpinUp appear on the Stage and in the Components panel. The SpinUp on the Stage will not be visible in your published movie, but I like to move it off to the side of the Stage in the gray area.
Select the SpinUp and open the Component Inspector panel. To make your 3D cube work properly, you need to make a few changes. First, enter cube_fs in the FreeSpin3D Instance Name field. This is what you named your 3D box earlier. Next, enter icons in the Linkage Texture field. This is the name of the movie clip that acts as the texture. Lastly, change the Live Texture and Mouse Click fields to True. This will allow the buttons to work on the texture (see Figure 3).
Figure 3. Making the 3D cube's texture respond to mouse clicks.
Next, open the icons movie clip from your library. This is where your buttons and the actions related to those buttons need to reside.
While creating this tutorial, I decided that placing a small button on each side of the cube worked better than making the entire product icon a button because I want users to interact with the cube using their mouse. When I originally made each side of the cube a button, there was a higher likelihood of inadvertent clicks to the Adobe website when rotating the cube by clicking and dragging. So, I created a simple little movie clip to use as a button and named it Button. You can make yours any way you like. I tried to create a little indented box to match the look of the icons, with a flashing gray square in the middle to attract attention and tempt people to click it (see Figure 4).
Figure 4. Creating a custom movie clip button to make the 3D cube interactive.
When you've created your button, you need to place it on each product icon and then give each button an instance name. I named my buttons Ai_btn, Dw_btn, and so forth to match the product icon they are associated with.
For the final step, you need to add the Actions to your buttons. Create a new layer in the icons movie clip and name it Actions. Open the Actions panel and write the relatively simple ActionScript code below to connect your buttons to the appropriate web page. You can grab this code from the source FLA file too, but as you can see below, you will create an array of the buttons you named earlier and then add mouse event listeners to detect a mouse click on each instance of the button movie clip:
// add the cube buttons to an array
var aButtons:Array =[Ai_btn, Fw_btn, Id_btn, Ps_btn, Fl_btn, Dw_btn];
// add mouse click event listeners to the buttons
for(var i = 0; i < aButtons.length; i++)
var aFacetClickedName:String = e.currentTarget.name;
var a:URLRequest = new URLRequest(getURL(aFacetClickedName))
I made the Stage Properties black as my last step, and now my project is ready to publish.
Publishing files created with FreeSpin3D works the same way it does for any other FLA file. There are no additional files required to put your work on the web.
To learn more about FreeSpin3D or to extend your project even further with ActionScript, check out the FreeSpin3D ActionScript API in the Documentation section of the FreeSpin3D website.
Dave Klein is an online marketing consultant based in Boulder, Colorado. He has worked with several Adobe partners focusing on 3D software and technologies since early 2000. Visit www.kleinnewmedia.com.