Advertisement
  1. Code
  2. 3D
Code

Create a Musical Birthday Card with Papervision3D

by
Difficulty:IntermediateLength:ShortLanguages:

It's ActiveTuts+'s first birthday! Let's celebrate by making a musical 3D birthday card using Papervision3D and TweenMax.


Step 1: Files Setup

Start by creating a new folder (this will be your project's root folder) and create a new AS3 FLA inside that folder, called Main.fla. This will contain all the UI we need in order to create the card.

For this tutorial we will need two popular Flash libraries: Papervision3D and TweenMax. Download Papervision (I'm using version 2.1.932) and extract the com and nochump folders from the zip to your project's root folder. Download TweenMax (I'm using version 11), and extract the zip to your project's root folder as well.

Now create an empty AS file; save it as "CardViewport.as" in your project's root folder. This will be our papervision3d viewport containing the card. Create another empty AS file, in the same folder, named "Main.as." This will be your document class. (Not sure how to use a document class? Read this quick introduction.)

Your folder structure should look like this:


Step 2: Stage Setup

Open up Main.fla and edit the stage to make it 500x440 with a 30fps frame rate. Set the document class to Main:


Step 3: Layers Setup

We only need two layers for this tutorial:

  1. The card container which will be populated by our papervision
  2. The buttons layer which will trigger an open/close action on the card

Step 4: Viewport Setup

In the viewport layer create a rectangular shape. Size it to the size of the stage and move it to position 0,0. Hit F8 to convert the shape to a MovieClip symbol. Check the box to export for ActionScript and add the class name CardViewport. It will connect to the class we will build later on.

Now click on the viewport movieClip and give it an instance name of "viewport".


Step 5: Viewport Background

Open the viewport movie clip symbol and create whatever background you like. This is what I did: A couple of gradient shapes, one for the sky and one for the ground and the ActiveTuts+ logo centered on the sky.


Step 6: Button Setup

On the button layer create a rectangular shape. Convert it to a movie clip symbol and call it "open_mc"; make sure you give it the same instance name.

Inside open_mc make a textfield. Set it to be dynamic, give it an instance name of label_txt and embed the fonts by clicking "Character Embedding" and selecting the alphabet you want to use.

Make it look however you want. I built mine with a gradient and some diagonal lines running across:

NOTE: I do not own the right to distribute standard 07_66, the font I'm using in this project. Sorry for that.


Step 7: Assets

Photoshop time: We will build our card with four planes (flat rectangles) facing each other. For that we need four different image files to map into those planes.

Our planes will be 700x900 and our four images will therefore also be of that size. The reason for this size is because the planes will be floating on 3d space some distance away from the camera; they need to be big so that we can see them. Name the images "page_1_front.jpg", "page_1_back.jpg", "page_2_front.jpg", "page_2_back.jpg" and put them in the root folder of your project.

Here are my images:

These images are included in the main source zip, but you can also download them directly if you prefer..

Do the same for a sound if you want to add one. Scott Wills from audiojungle was kind enough to put this funky track together for us.


Step 8: CardViewport.as Imports

Open CardViewport.as. I will be using FlashDevelop to code, but you can use Flash if you prefer.

Create a package and import the classes we need:


Step 9: CardViewport.as Private Variables

Set up the private variables we'll need for the CardViewport:


Step 10: CardViewport.as Constructor

Here's the function that will be run when the CardViewport is created:


Step 11: CardViewport.as Render Type

To get rid of a few errors about how z-depth is calculated in our scene we need to change the render type to one that can correct. The QuadrantRenderEngine accepts one parameter: the correction type. We will be correcting the z filter this time, use this wisely as it can hog your CPU in complex situations.


Step 12: CardViewport.as Materials Setup

Even though we don't see the fourth plane (the back of the card) I decided to add it anyway just in case you want to play around with the scene.
We will be using a BitmapFileMaterial, by setting "precise" to true I'm improving the overall quality, however I'm also using more CPU power.


Step 13: CardViewport.as Planes Setup

Here we create the four planes which make up our card, arranging them in a pair of containers so they appear as two pages.


Step 14: CardViewport.as openCard()

Notice that this is a public function, so we can access it through the Main document class when we click the button:


Step 15: CardViewport.as closeCard()

Same for the closing of the card:


Step 16: CardViewport.as Position Planes

This is called whenever the mouse is moved while the card is closed:


Step 17: CardViewport.as Position Container

This is called whenever the mouse is moved while the card is open:


Step 18: CardViewport.as Reset Planes

This is called when the card is clicked to open:


Step 19: CardViewport.as Render

The last step is obviously rendering out the viewport, after that we move on to the document class.

That's the end of the class. Don't forget to add your closing curly braces.


Step 20: CardViewport.as Full Code

We won't change anything else in the CardViewport class, so feel free to get the source from the zip file and compare it with your own.


Step 21: Main.as Imports

This step is fairly simple, we just need to associate the open card and close card actions to the button. Before that, let's import the following classes into our package:


Step 22: Main.as Constructor

Again, nothing fancy, it extends MovieClip and creates a Sound object:


Step 23: Main.as Main function

Here's a little tip for you guys: to prevent null errors initialize your commands only after the class been added to the stage. This way you are sure everything you are trying to access is present.


Step 24: Main.as Init function

...and this is the function that will be run when the document class has been added to the stage:


Step 25: Main.as Click to Open Handler

This function will be run when the card is clicked if it is closed:


Step 26: Main.as Click to Close Handler

This is basically the same as openCard(), but in reverse. ;)


Step 27: Main.as Finish Off

Finished. No secrets in this document class, it's pretty straight forward. Don't forget to add your closing curly braces.


Conclusion

I would like to see you evolve from this tutorial taking up some of the little tips I gave you, from the ADDED_TO_STAGE to the displayObject3d wrapper, to using a tweening class to rotate and move a 3d object. Take this card and make it your own.

Happy birthday Activetuts+! I hope you liked this tutorial, thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.