Flash Week | Day #1 – Dynamic navigation menu’s with Papervison 3D
Welcome to Web Designer Flash Week
Welcome to Web Designer Flash Week. Over the next five days the Web Designer team will uncover, and give to you, some of the best Flash tips, techniques and tutorials that the magazine has to offer. Discover cutting edge technologies such as Papervison 3D, Flash Catalyst and a host of Flash CS4′s new features. So sit back and enjoy.
To kick-off the latest Web Designer Flash Week we jump straight in at the deep end and bring you a look at one of the Flash technologies that is going to be big, very big, in 2010, Papervison. Our first tutorial shows you how to ‘Build a dynamic navigation menu header with ActionScript and Papervison 3D’. If you are new to Papervison 3D, this tutorial gives a great insight into the basics of the technology using ActionScript 3.0 and demonstrates how to add interactivity to a web page. Read on…
PAPERVISION3D HAS TAKEN the web world by storm. This new dimension now available in the Flash Player greatly increases the kind of experience users will have on websites. Popping the flat page out from the browser opens all sorts of new creative avenues and With Papervision3D now being introduced to ActionScript 3.0, it is faster in terms of performance than ever before.
To get a basic handle on how it all works and how you can start using it practically, we are going to build a 3D navigational menu complete with rollover and rollout states. Knowing the basics of ActionScript 3 and TweenLite will help and by the end of this tutorial we will walk away with the skills to render out 3D shapes, place a material on them, add events and animate the shapes using ActionScript.
Author: Clemente Gomez | Originally appeared in Issue 155 | Download Tutorial Files
01. Creating the main file
Create a new folder on the desktop and name it ‘project’. Open up Flash CS3 or higher. Flash CS3 and above are the only versions of Flash that allow you to code in ActionScript 3.0 and in this tutorial we are using CS4. Create a new ActionScript 3.0 file and save it as ‘nav3D.fla’ in our project folder.
02. Getting Papervision3D
First things first; we need to download all the class files for Papervision3D and place them in our root folder. This can be located at http://code.google.com/p/papervision3d/. Go to Feature Downloads and click on the link Papervision3D_2.0.869.zip. Once it’s downloaded, extract the archive into the project folder we created in step one.
03. Main Document Class
We will now need to create an .as file to write our code in since we are going to write the code externally. Go to File>New>ActionScript File. Save this file as DocClass. as and save it into the project folder where nav3D.fla is located. You can also grab this file from the project assets and skip straight to step five.
04. Placing code
We will just copy and paste this code into the DocClass for now and we will step through it and explain what is going on later in the tutorial. The code can be found within the full project assets available to download from the Web Designer magazine site. We’ll focus on the design for now!
05. Button background 1
Choose the Rectangle Primitive tool and draw out a rectangle 350 pixels wide and 90 pixels high. Next set the Rectangle options to 0. This will square out the corners. Right-click on the drawn object and convert it into a Movie Clip and name it buttonBG.
06. Button background 2
Double-click into our newly created buttonBG symbol to go into edit mode and create a new layer on top of the first one. Get the Rectangle Primitive tool again and draw out a 350 x 90 rectangle. Set the rectangle options to 30 and set the x and y properties to 0.
07. Shaping the background
Select the rectangle on the first layer. Right-click on it and choose break apart. This will turn the rectangle into a shape which will allow us to erase and now we can round out the top left and bottom-right corners. Select the Eraser tool and erase these corners.
08. Joining the two shapes
Now select the rectangle on the second layer and break this apart as well. Press Ctrl+A (Cmd+A on a Mac) to select all the shapes. Cut (Ctrl+X or Cmd+X) the selection and paste it in place. Make sure you remember to delete the empty layer.
09. Let’s add some colour
Select our shape and open the Color Palette and change the type to Linear. Use the following colours: #FBD7C8 with an Alpha of 40%, #F06931, #EB5747, and #E02727 with an Alpha of 100%. Select the Gradient Transform tool and adjust the gradient so the lighter colour is on the bottom.