Problem
You want to animate
3D buttons in Swift for use in Flash.
Solution
Import Swift-created
buttons into the Flash authoring environment and control with ActionScript.
Discussion
The Swift
3D workflow involved for creating interactive elements, such as
buttons for navigation, is occasionally confusing for new users, as the program itself has no scripting capabilities.
Animations created in Swift
3D are strictly linear, playing from the first to the last frame; however, that all can change once imported into Flash, where content can be manipulated like any other imported asset.
This section covers two methods for creating buttons from Swift 3D graphics. The first uses a simple button symbol and bitmap data. The second uses a movie clip symbol and vector data.
Obviously the first things needed are some button graphics, which I have already created. I will be using the same source file for each exampleyou may download the T3D from ; however, I suggest going through the following steps and previously discussed techniques to create your own, in order to experience the process from start to finish.
Taking the button concept quite literally, I modeled the nice, shiny, red, cartoony button shown in Figure 5-33. It is just waiting for someone to come along and push it! But before someone can do that, we need to get it out of Swift 3D and into Flash where a little interaction can be added.
When adding materials and lighting, I remembered that this object would be exported as both raster and vector, so I have selected fairly simple materials that will render accurately in both formats. If you have opened the T3D file, you will find that the button plunger has had applied a simple animation (10 frames) of it being depressed. This is all we need to cover each state of the button, as you will later see in Flash. Now it is time to finally export the graphics.
Creating navigation with button symbols
This is a very straightforward process, which is the same as for creating any type of button. We need only import the necessary assets and place them on the required frames of a new button symbol:
With your button file open in Swift 3D, enter the Preview and Export Editor and activate raster rendering mode by clicking the Raster button. Set the Target File Type format to PNG, and leave the other properties at their default values. Because we will be working with just two states, Up and Down, it is unnecessary to render and export the entire animation. Holding down Ctrl, select the first and the tenth frames in the animation preview by clicking on them. To render and export only the frames needed, hold down Ctrl and click on frames 1 and 10 in the animation preview.
Click Generate Selected Frames. If the preview images are acceptable, finish the process by clicking Export Selected Frames. A sequentially named PNG file will be created for each frame.
With step 4, our work in Swift
3D is finished and we move into Flash:
Create a new Flash document and set the background color to black. You could use any color, but it is generally recommended that the background color in Swift
3D be similar to that of Flash when rendering to raster, so as to avoid any pixel halo when using transparency. Select File  Import Import to Library and navigate to the PNG files that you just exported from Swift 3D. This step is optional, but at this point it is generally a good idea to rename the imported bitmaps from their default sequential naming to more easily recognized names, such as ON and DOWN. If you do not have preferences in Flash set to turn off bitmap smoothing, doing so will avoid any undue distortion. Create a new Button Symbol and place the imported bitmaps into their appropriate frames. Place the button on the stage and Enable Simple
Buttons (Ctrl-Alt-B) to test.
|
If you want to use multiple
buttons, you may or may not have to export individual graphics for each. Depending on the camera angle and if buttons are placed near one another, you can probably get away with using multiple instances of the same button. However, if distortion occurs due to extreme lens length settings or if buttons are placed in relatively different positions, it is best to create appropriately positioned buttons within Swift
3D and export graphics for each.
|
|
Creating navigation with movie clip (MC) symbols
Although this method does require a little more work, I consider it better practice than the use of button symbols. Flash provides for increased control and manipulation of MCs, as well as providing greater potential for
animation. The steps in Swift
3D are much the same; however, because we are going to render the full animation this time around, we will use vector graphics to cut down on the file size.
With your button file open in Swift 3D, enter the Preview and Export Editor and activate vector rendering mode. Set the Target File Type format to SWFT. I have selected this format over SWF for the sole reason that it will result in a smaller file. As for the remaining settings, Separate Stationary and Moving Objects should be checked and Detail Level should be set to automatic. Combine Edges and Fills is not really applicable, because we are not rendering outlines. For this example, Fill Type (under Fill Options) is set to Area Gradient Shading. I suggest experimenting with the different types to see the results, from the standpoint of both visual quality and resulting file size. Figure 5-34 displays the sample button rendered with each of the available fill types.
We will be using the entire animation this time around, so it is necessary to click Generate All Frames and Export All Frames when rendering is complete.
After step 4 is completed, move into Flash again:
Create a new Flash document and, for the sake of uniformity, set the background color to black. The sample T3D file has a frame rate of 20, so Flash should also be changed to 20 fps to assure smooth playback. Select File Import Import to Library and navigate to the button SWFT file. Importing in this manner will automatically generate a new movie clip (MC) in the library. rename the MC "MC_redButton."
Open the new MC in the library for editing. The timeline of the symbol should look similar to Figure 5-35.
Although the imported file is an SWFT, it is not necessary to have all the various elements on individual layers for this project. Only the objects in motion and those that are static need to be separated. Copy and paste each frame's animated content, designated by (Motion) in the layer name (exp 3pod.com), and paste it into a single frame, deleting the extra layers. For the next step, convert each frame in the motion layer to a symbol. The timeline should now look like Figure 5-36. The current animation includes the button depressing, but not returning to its original state. As this version will be fully animated, we require this, but did not add it within Swift
3D due to concerns of file size. Now that the graphics in motion have been converted to symbols, it is simply a matter of copying frames 2 through 9, pasting them after frame 10, and using Modify Timeline Reverse Frames.
Now that the graphics are in place, we need to add some simple ActionScript within the MC. Add two layers, naming the top one Actions and the other Labels. In the Actions layer, add a stop( ) to frames 1 and 10. In the Labels layer, designate frame 2 as Down and frame 11 as Up. The timeline should now resemble Figure 5-37.
Return to the scene and add an instance of MC_redButton to the stage, naming it mybutton_mc. It is now time to add event listeners so that our button is interactive. Add an actions layer to the timeline, enter the following script, and finish by testing the movie.
//setup the button events
mybutton_mc.onPress = mybutton_mc.onDragOver = function(){
this.gotoAndPlay("Down");
};
mybutton_mc.onRelease = mybutton_mc.onDragOut = function(){
this.gotoAndPlay("Up");
}
stop();
|
