Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
1st February 2010

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…

Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D

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
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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!

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.
MovieAssetMaterial;

05. Button background 1
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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
Flash Week | Day #1 - Dynamic navigation menu's with Papervison 3D
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.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Riniel

      this is a really bad tutorial, its half written and the files don’t even work…very disappointed.

    • dave

      Complete waste of time. Im sorry, and I appreciate time and effort has gone into this, but from section 15 onwards, it is just baffling.

      For somone new to Flash, but with some understanding like me, there is no explanation of setting out the 3 buttons next to each other, as it looks when finished. I dont know much about coding, so I ask myself if maybe hidden somewhere in that code, it does it for you, who knows?

      The explanations are not very in depth at all- at one point you say “Right-click and convert to symbol. Name it ‘aboutMat’”, but you dont say what symbol to create- is it a movie clip, or a button- how are we supposed to know, we are learning your step by step tutorial! I believe it was a movie clip, but dont know for sure, as we are in the process of making dynamic buttons! Wouldnt have hurt to have just written what sort of symbol. To some, it may be screamingly obvious, but this is a tutorial to learn, and those with less experience are likely to attempt these projects.

      Both the FLAs provided from the download were empty, so had nothing to compare with. What a shame, as the finished product looks amazing.

    • deniz

      i hope u make a video of this when ur making it.. so we,new to flash, can understand it easier. when there is no photo of what u explain, then its not possible to understand it almost..

      but thanks again for this perfect workout.. it looks great.

    • Lauren

      I have a book with this tutorial in it. The book doesn’t do a great job explaining things and is like half complete. I came to this site thinking the whole tutorial was here but it’s not. So basically I wasted an hour learning almost nothing new and I have no idea how to make what I got so far into the finished piece.