| TUTORIAL

ON THE CD
All the les required for FLASH CS3 PAPERVISION COMPONENT PART 1 OF 2
the tutorial can be found

INTRODUCTION
on the CD in the folder
Tutorials\Part

TIME NEEDED
1 hour

SKILLS
TO PAPERVISION
Flash components Flash CS3 gets ashier with the introduction of Papervision, a real-time 3D engine component. Paul Wyatt
ActionScript lists gets you up and running with it and shows you how to incorporate 3D models into Flash
INFO
Designer Flash has always been a
and writer compromise when it comes to
Paul Wyatt 3D. Importing three-dimensional
specialises in objects was always a matter of faking
design for the internet it with image sequences rendered from
and motion graphics. Hes 3D programs. But with the arrival
produced websites and of Papervision3D thats all changed
animated creative for real-time 3D in Flash CS3 is finally
clients such as Smirnoff, possible to achieve.
2Entertain, Fox and Sony/ Papervisions workflow is pretty
BMG. Find out more at
www.paulwyatt.co.uk.
straightforward. You start by creating a
low poly-count model in 3ds Max,
Maya or Blender. You then use the
Collada plug-in to create a file that
contains information on your 3D
models set-up, textures and animation.
Finally, you can use the Papervision
component to import your 3D model
into Flash CS3.
In the first part of this tutorial Ill
introduce you to the basics of the
Papervision component and how to set
up and manipulate a basic model. In the
second part, next issue, Ill show you
how to use your new-found skills to
create a textured 3D scene and bring it
into Flash, as well as how to add To install the Papervision component
interaction using ActionScript. 1 youll need to have the latest version
of the Adobe Extension Manager on your
system. Version 1.8 includes support for
Flash CS3 releases and can be found on
Tutorial and illustration by Paul Wyatt this issues CD. Run the installer for this
www.paulwyatt.co.uk before installing Papervision.

|
64 September 2007

ART140.part Sec1:64 7/8/07 12:59:27

 TUTORIAL |

Papervision is a Flash component, a type of movie clip with a set of

2 variables that can be controlled using ActionScript. To install
Papervision, click and run the PV3DComponents_v1.0.mxp file from the
disc. After the installation, open up Flash CS3, create a new document of
550x400 pixels and set the framerate to 20fps.
5 In the Settings panel, select the working directory by clicking on the folder icon and
navigating to your working folder. Copy the file pyramid.DAE from your Computer Arts
disc and paste it into your working folder. Click the folder icon next to the Collada File
selection box. The Collada File contains information on the 3D object that was exported
from 3ds Max and it will be this information that is rendered on the Flash stage.

3 Open up the newly installed component by going to Window>Other

Panels>PV3DPanel. Drag and dock this panel below the stage with
the other Properties panels. There are three additional panels within the
Papervision component settings, camera and model. These are
accessed by clicking their titles on the left-hand side of the component.

MORE EXAMPLES
6 A great feature of the component is the ability to manipulate your 3D object in real
time on the Flash stage. Use the Model Controls panel to control the rotation of the
model in real time by turning the raised mesh dial. Here youll be able to see the model
Papervision is rotate in 3D. You can also change the scale of the model by altering the Model Scale slider.
constantly changing
and developing. Taking
Papervision supports
the strain out of getting
it to work with Flash is
John Grden. Hes the
7 two types of camera
Free and Target. Well take a
man behind the closer look at these different
development of the cameras in the next part
new Papervision of the tutorial. For now,
Drag an instance of the Papervision3D
4 COLLADA Scene component from
the Components panel to the stage. In the
component. For great
examples of what you
can do with it check out
experiment with the sliders
to control the cameras focus,
zoom and Z value.
Properties panel give this the instance his blog at www.
name Scene. You should see the outline of rockonash.com.
a pyramid object on the Flash stage.

September 2007 | 65

ART140.part Sec1:65 7/8/07 12:59:33

 | TUTORIAL
FLASH CS3 PAPERVISION COMPONENT
8 The primitive model can now
have a texture added to it.
Choose File>ImportToLibrary>
Texture.jpg. Once imported, hit Ctrl+L
to bring up the Flash library. Select
the imported JPEG and right-click on
it. Select Linkage from the menu.
9 In the Linkage Properties dialog box
check Export for ActionScript. Give
the texture the linkage name of
pyramidtex. Click OK and close the box.
Select the Parameters panel and expand
the box. In here youll see different
properties for setting up the document.
Open up the materials list Values box by
clicking on the magnifying glass.
66 | September 2007
ART140.part Sec1:66
10 In the materialName list item add the name ColorMaterial_B11C9500. This name
comes from the Collada File. If you open up the Collada File in Notepad youll see
this shown as:<library_materials> <material id=ColorMaterial_B11C9500
name=ColorMaterial_B11C9500>. This is the property assigned to the 3D material in
the 3D program. Enter the materialLinkageID name to the linkage name of your JPEG
texture, pyramidtex, with the same name you assigned to it in the Linkage box. Click OK.
11 Youll see the primitive change
to a solid green colour. It now has
the texture assigned, but to reveal this you
12 Use the Camera, Scale and
Rotation tools to change your
textured 3D object. You now have a low
need to preview the model. Press polygon-rendered 3D object within Flash,
Ctrl+Enter to reveal the 3D shape with which youve custom-skinned with texture
COLLADA
Collada stands for
the texture mapped to it. from the library.
COLLAborative Design
Activity and was
developed by Sony as a
13 Now that youve been
through the basics,
its time to look at adding
means of creating a lights, camera and action to
standard Digital Asset your 3D models. In part 2 of
Exchange format. Its the tutorial, next issue, well
an industry standard bring a textured 3D model
XML schema, which with lights into Flash (using
gives details of 3D the Papervision component)
models. This can be and add user interaction to it
interpreted by the with ActionScript.
Papervision3D engine.
7/8/07 12:59:39