Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

First steps with Papervision 3D

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

01 Get the code
STEP1
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
STEP2
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
STEP3
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
STEP4
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

STEP5
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
STEP6
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
STEP7
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
STEP8
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
STEP9
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.

×