First steps with Papervision 3D

CREATE AN INTERACTIVE 3D AVATAR CUBE WITH PAPERVISION 2.0 AND ACTIONSCRIPT 3.0

01 Get the code

To start using Papervision3D, head over to http://code. google.com/p/Papervision3d/downloads/list and download the latest version, which at the time of writing is Papervision3D_2.0.869.zip. Unzip it and place it somewhere easy to find, then start your version of Flash and open Preferences.

02 Read the code

In Preferences, click on the ActionScript option and then click the ActionScript 3.0 Settings button. In CS4 under Source Path click the + icon and then browse for the Papervision source code on your hard drive. As you can see from the screenshot above, ours is on the desktop. Flash will read this when it publishes a file.

03 Set up the document

Make the background colour of the current Flash document black and change the frames per second to 25. We now need to make five images for our Avatar cube, we’ll use the same image for top and bottom. Open Photoshop and make five square images 300px by 300px, save these as top, front, back, left and right.

04 Import to Flash

Go back to Flash and go to the File menu and choose Import>Import to Library. Import all five images and double-click on the top image in the library. Choose the Advanced view and click the option to Export for ActionScript. Name the class ‘Top’ and click OK.

05 Export each class

Repeat this process for each image, capitalising the class name, so you should have Back, Front, Left and Right. The code will pick this up later and position the right images on different sides of the cube. Remember we are going to use the same image for the top and bottom of the cube.

06 Save the files

Save your Flash file as Avatar.fla, it doesn’t have to be in the same location as the Papervision Classes because Flash knows that location from step two. Now create a new ActionScript file and save this as Avatar.as. This has to be in the same location as the .fla file.

07 Add the code

From the cover CD, open ‘Step7.txt’ in a text editor and select all the code, copy this and paste it into the Avatar.as file. Notice lines 39 to 53 link to the images for each side of the cube, then lines 55 to 61 actually apply them to the cube’s material list. In line 63 a new cube is added and the material list applied to it.

08 Link the class

Save Avatar.as now. If you don’t save ActionScript files, new code changes are not implemented, so always get in the habit of saving before testing. Switch back over to your Flash file now and click on the Properties tab. Type ‘Avatar’ as the document class in the appropriate panel and save this file.

09 Test the scene

Press Ctrl+Enter to export your SWF file and you should see your cube rotating with the different images on the different sides. Click on the cube to see it move to a new random location. To see how this is done look at lines 68 to 76 of the code which show how to make different models interactive.

AUTHOR: Mark Shufflebottom | Originally appeared in Issue 155

Further Reading
Where next for the discerning Papervision master? We suggest some resources you need to check out

Name: Professional Papervision3D
URL: http://tinyurl.com/djox6m
The book covers a vast array of techniques, including creating websites, games and virtual tours using Flash and Papervision. This book is definitely a must for anyone wanting to dive head-first into the world of Papervision.

Name: Mad Vertices
URL: www.madvertices.com/
Mad Vertices is a superb learning resource for anyone new to Papervision3D 2.0. The site contains a wealth of video tutorials as well as code snippets and downloadable projects.
The site has recently started a forum for likeminded Papervision people.