Problem
You want to create an
interactive 3D product view (360° with multiple camera angles).
Solution
Use Swift 3D's cameras and render files for use in Flash.
Discussion
The use of 360° product views have become a common feature of many product-centered sites, as they can provide the user with the next best thing to being able to view the product in person. However, they can be difficult to produce and develop. Although photographic solutions can provide the most realistic results, this method requires specialized photographic equipment or outsourcing to a professional photographer. There can also be added difficulties with large objects or those that are difficult to photograph. Finally, at times it is simply not possible to obtain the object to photograph, such as when it is not yet through production.
Although Swift 3D/Flash-based tours cannot provide the flexibility of real-time 3D
product viewers, they are free of the high price of licensing normally associated with such solutions. Also, because the viewing is Flash-based, the user has no need to install additional plug-ins, and there is also the benefit of being able to include additional content, such as
interactive hotspots, external product data, linked video, and so on.
The following product view example introduces the library of models found within the Gallery Toolbar. Here you will find "out-of-the-box" lathe and extrusion objects, as well as full 3D models. You can also save models to this gallery for future use.
Creating the animated product views in Swift 3D
Create a new Swift 3D document and set the layout size to 500 x 300. Set the primary viewport to front and the secondary to top. In the gallery toolbar, click on the button displaying a cog to show the model libraries and scroll down to the tank at the bottom of the 3D category. Drag-and-drop an instance of the tank to the front viewport and center it. Switching over to the lighting gallery, click the Stationary tab and apply the three-point lighting scheme to the scene. Still working with the Gallery Toolbar, access the animation gallery and apply the Horizontal Right animation to the tank model. In the animation timeline, set the FPS to 12 and activate loop animation.
Now that we have the stage, model, lighting, and animation all in place, it is time to set up the cameras. We will be using the standard front camera and a custom targeted camera:
To prepare the front camera, drag the frame indicator in the timeline and confirm that the model is never cropped by the edges of the viewport. If cropping does occur, advance the animation to frame 5, select the model, and use "Frame Selection" from the viewport camera tab. This step centers the camera so that the model is not being cropped at its widest point during rotation. Click the Create Target Camera icon in the main toolbar and assign the primary viewport to this new camera, while changing the secondary viewport to the left camera. (See Figure 5-38.) The targeted camera should be positioned at approximately a 45° angle, looking down and positioned to the right of the tank. Refer to Figure 5-39 for positioning the camera in the left and top viewports, as well as the view through the lens of the targeted camera. After the camera is positioned, confirm again that no parts are cropped during rotation, and if needed, manually adjust the camera position.
Because the tank model makes use of bitmap materials, the rendering format will be raster. Render and export both camera views to SWF files. Each SWF should contain 19 frames. If there are 20 frames, the loop animation button was not activated, and there is no need to render again. Just select frames 1 through 19 and export selected frames instead of all frames.
From this point on, we will be working in Flash, importing the
3D animations and setting up the buttons for controlling the rotation and camera view.
Adding interaction in Flash
Create a new Flash document and set the stage size to 500 x 400, with a white background and FPS of 12 to match the animation done in Swift 3D. Set up three layers in the timeline in the following order from top to bottom: Actions, Buttons, Views. Import both the front and targeted camera SWF documents into the Flash library so that they create new MC symbols. Edit each symbol by adding an actions layer and inserting a stop() command on the first frame. Drag instances of each MC to the stage, inserting them in the Views layer and positioning them at X: 0, Y:0. name (exp 3pod.com) the front view view1_mc and the angled view view2_mc. Create an MC that will be used for a button. Instances will be used for the button to change views, as well as to control the animation playing forward or backward. For this example, no over or down states are necessaryonly the default up. It also requires a dynamic text box named label_txt, which will be used as the button label. Place three instances of the button MC in the Buttons level of the timeline, two side-by-side beneath the tank and one in the upper-right corner. name (exp 3pod.com) the lower-left instance backButton_mc and the lower-right forwardButton_mc. name (exp 3pod.com) the button in the upper-right corner changeViewButton_mc. I have also created a small icon to accompany the change view button that will serve as a preview of the alternative view. It is made up of two frames and is named icon_mc. The stage should now look similar to Figure 5-40.
The final step is to add the ActionScript that will make the system
interactive. In the actions frame of the main timeline, add the following code:
//set the default view
var currentView = 1;
//set the button labels
backButton.label_txt.text = "BACK";
forwardButton.label_txt.text = "FORWARD";
changeViewButton.label_txt.text = "Change View";
//function to set the view visibility
function setView(view:Number) {
//comment this line out if you don't want the views to sync
_root["view"+view+"_mc"].gotoAndStop(_root["view"+currentView+"_mc"]._
currentframe);
_root["view"+currentView+"_mc"]._visible = false;
_root["view"+view+"_mc"]._visible = true;
//set the currentView
currentView = view;
}
//function for the change view button
function changeView( ) {
if (currentView == 1) {
setView(2);
//Line 21 and 25 are not needed if an icon is not used with the change
view button
icon_mc.gotoAndStop(2);
} else {
setView(1);
icon_mc.gotoAndStop(1);
}
}
function moveBack( ) {
//find out if we should go to the last frame
if (_root["view"+currentView+"_mc"]._currentframe == 1) {
var gotoFrame = _root["view"+currentView+"_mc"]._totalframes;
} else {
var gotoFrame = _root["view"+currentView+"_mc"]._currentframe-1;
}
_root["view"+currentView+"_mc"].gotoAndStop(gotoFrame);
}
function moveForward( ) {
//find out if we should go to the first frame
if (_root["view"+currentView+"_mc"]._currentframe == _
root["view"+currentView+"_mc"]._totalframes) {
var gotoFrame = 1;
} else {
var gotoFrame = _root["view"+currentView+"_mc"]._currentframe+1;
}
_root["view"+currentView+"_mc"].gotoAndStop(gotoFrame);
}
//setup the buttons onRelease event
backButton.onPress = function( ) {
this.onEnterFrame = function( ) {
moveBack( );
};
};
backButton.onRelease = function( ) {
delete this.onEnterFrame;
};
backButton.onDragOut = function( ) {
delete this.onEnterFrame;
};
forwardButton.onPress = function( ) {
this.onEnterFrame = function( ) {
moveForward( );
};
};
forwardButton.onRelease = function( ) {
delete this.onEnterFrame;
};
forwardButton.onDragOut = function( ) {
delete this.onEnterFrame;
};
changeViewButton.onRelease = changeView;
//set the view to view 1
view2_mc._visible = false;
stop( );
Test the movie to confirm that everything works. If so, export and you are done.
 |
