Flash Week | Day #1 – Dynamic navigation menu’s with Papervison 3D

10. Adding the text

Now that the button background is complete, we can move on to adding the text. Drag an instance of the buttonBG symbol to the stage. Right-click and convert to symbol. Name it ‘aboutMat’. Double-click to enter edit mode and add two layers. In order from top to bottom, name the layers Code, Text and BG. Lock the Code layer and on the Text Layer, add the text ABOUT. You can set it to whatever font and style you like. We used VAG Rounded Std Bold with 25pt. Centre the text to the background.

11. Duplicate

On the code layer, place a stop function. This will stop the rollover we are about to create in the next couple of steps from playing before we want it to. Now that we have the basics of the button down, it’s time to duplicate. To duplicate the button, go to the aboutMat symbol in the library, right-click and choose Duplicate. Name this contactMat. Repeat once more and name it homeMat.

stop();

12. Unique buttons

Now we have three buttons, but they are all the same. To change this is very simple. Just go into each duplicate symbol and on the text layer, change the text to match the symbol it’s in. Make the text CONTACT on the contactMat symbol and HOME on the homeMat symbol.

13. Time to animate

Now go into any of our button symbols and add a keyframe at frame 20 on the Text layer and the BG layer. Right-click in-between the two keyframes and set a Motion Tween (in CS4 you have to choose Classic Tween). On the Text layer go to frame 20 and add a Brightness style Color Effect and set it to 100%. On the BG layer at frame 20 add a Tint style Color Effect and set it to whatever you like. To finish off this section, repeat this for each button.

14. Export for ActionScript

We have to export our symbols for ActionScript so we can use it in Papervision. Right-click on the aboutMat symbol in the library and go to Properties. Check the Export for ActionScript checkbox. For the Class name give it the same name as the symbol. Repeat for the other two symbols.

15. Import statements
These lines, excluding the package line, are the import statements. For this example we imported just what we needed for the example. To be on the safe side you can just import everything in your file and delete what you don’t need once you’re done.

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import gs.TweenLite;
import gs.easing.*;
import org.papervision3d.events.
InteractiveScene3DEvent;
import org.papervision3d.materials.M
ovieAssetMaterial;
import org.papervision3d.objects.
DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;

16. MovieAssetMaterials
MovieAssestMaterials and Planes are the variables used in our example. They are placed outside the functions so that we can use them anywhere in our code. We have two Papervision classes defined here. A plane is just a flat 2D shape that can be translated in 3D space. This is best used in cases where you can use cubes but don’t need the depth. The second MovieAssetMaterial variable defined is one of the many kinds of textures you can apply to shapes using Papervision. This class allows you to apply a Movie Clip in your movie as a texture to your shapes. They can be animated Movie Clips or static.

public class DocClass2 extends BasicView
{
public var plane:Plane;
public var plane1:Plane;
public var plane2:Plane;
public var current:Plane;
public var home:MovieAssetMaterial;
public var about:MovieAssetMaterial;
public var contact:MovieAssetMaterial;
public var centerY:Number;
public var centerX:Number;

17. MovieMaterial Parameters
Super (0, 0, true, true) allows us to add interactivity. When creating a MovieAssetMaterial you need to pass the Movie Clip linkageID. This is the class name we gave the Movie Clips when we exported for ActionScript. The first true sets the transparency, the second true allows our Movie Clips to play the tween we created. The interactive and smooth properties allow us to place MouseEvents on our planes and makes sure our textures don’t get pixelated.

public function DocClass2()
{
super(0, 0, true, true);
centerY = stage.stageHeight / 2;
centerX = stage.stageWidth / 2;
home = new MovieAssetMaterial(“homeMat”, true,
true);
about = new MovieAssetMaterial(“aboutMat”, true,
true);
contact = new MovieAssetMaterial(“contactMat”, true,
true);
home.interactive = true; home.smooth = true;
about.interactive = true; about.smooth = true;
contact.interactive = true; contact.smooth = true;

18. Plane Properties
When creating a new Plane, the first parameter you have to pass is the material. The other parameters are the width, height, width segments and height segments. Increase the height and width segments to get a smoother look. The useOwnContainer parameter allows you to set properties like alpha and filters.

plane = new Plane(home, 350, 90, 1, 1);
plane.name = “homeButton”;
plane.useOwnContainer = true;
plane.alpha = 0;
plane1 = new Plane(about, 350, 90, 1, 1);
plane1.name = “aboutButton”;
plane1.useOwnContainer = true;
plane1.alpha = 0;
plane2 = new Plane(contact, 350, 90, 1, 1);
plane2.name = “contactButton”;
plane2.useOwnContainer = true;
plane2.alpha = 0;
plane.z = plane1.z = plane2.z =-600;
plane.x = -400;
plane1.x = 0;
plane2.x = 400;