Advertisement
  1. Code
  2. 3D
Code

Building a 3D Business Card With Pure AS3

by
Difficulty:IntermediateLength:ShortLanguages:

In this tutorial we'll build a 3D business card. We won't use Away3D, Alternativa, Yogurt3D, Sandy3D, Papervision3D or any other 3D engine built for Flash. We'll use only the 3D features of Flash Player 10.


Final Result Preview

Let's take a look at the final result we will be working towards:

Click it!


Step 1: Create new FLA

Create a new ActionScript 3.0 file.


Step 2: Edit Profile

Before editing, let's save our document as "BusinessCard3D.fla" into any folder you want.

After having saved the document, write "BusinessCard3D" into the Class field to set a document class. If you don't know what Document Class is or how it is used, you can learn from this Quick Tip.


Step 3: Creating Document Class

We entered the name of the document class, but we haven't yet created it.

In the Profile section click the little pen icon near the "BusinessCard3D".

In this tutorial we'll use Flash Professional. Click OK button and you'll see a new ActionScript file in front you. You'll see a simple class:

Remove the "// constructor code" line and save this as "BusinessCard3D.as" into the same folder which contains "BusinessCard3D.fla".


Step 4: Import Card Textures

You'll need two visuals to build a business card. One of them is for the front and the other one is for the back side of the card. I designed some minimal cards for this tutorial:

Basically, copy these images and paste them into your Flash document. They will be added to the scene automatically. Now remove them and open the Library panel:

We need to set up their linkage names so that we can use them in runtime. This means, we'll export them for actionscript. There is a very quick way to do this.

By default, Linkage section of the images are empty. Click the blank are of the Linkage section of CardBack.png:

Having done that, enter "CardBack":

Do the same for the CardFront.png image. After you've entered the linkage names, the Library panel should look like this:

Yes. Now the fun part. We are now ready to begin coding :)


Step 5: Setting Imports

First we import some other classes that we'll use in the following steps:

Insert these lines between the package { and public class BusinessCard3D extends Sprite lines.


Step 6: Setup Variables

After importing classes, let's set up our variables. Insert these lines just above the public function BusinessCard3D() line:

As you can guess businessCard holds our other two cards. It's the main holder.

frontHolder holds the frontTexture, backHolder holds the backTexture.

frontTexture and backTexture are the Bitmaps from library.

We could use just one main holder and add images into it. But the problem with that is it may confuse beginners. Since we'll rotate the back side of the card by 180 degrees and since the registration point of the Bitmap class is top-left, we would also have to change its x property. By adding another holder we only have to change its rotation.


Step 7: Setting Images/Textures

After setting up the variables, let's write our first function. It basically gets images from the library as BitmapData objects, creating frontTexture and backTexture Bitmaps from them.

First we get the CardFront image by writing: new CardFront(0,0)

This is the only way to get a BitmapData of any image from Library. We can't use only BitmapData. If we had been using a 3D engine then it would probably be enough, but with native Flash 3D we need to use a Bitmap object, so we'll create a Bitmap object from the BitmapData.

new CardFront(0,0) returns us a BitmapData and that BitmapData is used in Bitmap to create frontTexture. We do the same for backTexture and our textures are ready.


Step 8: Adding Textures into Holders

Now we'll write our second function. This function builds our holders and adds our textures into holders:

As you see, we first create new Sprites which are the perfect choice for holder purposes. Then we add our textures into texture holders. Then we add these texture holders into the main holder.

Lastly we add the main holder to the scene, onto the stage. We'll use the main holder as a business card.


Step 9: Initializing the Cards

We need to change the rotation and x,y coordinates of the cards.

First we rotate the back side of the card by 180 degrees. Then we set the positions of the both cards. This is actually a simple trick; we actually set the registration point of the holder of the cards to its center. This is because of the perspective of default 3D scene in our document.


Step 10: Front Facing

This is arguably the most difficult step in our tutorial. We are building a business card and when we look the front side of the card, the back side of the card shouldn't be seen. How can we do this? We can maybe write some if conditions by using rotations of the main holder... but there is an easier way.

Imagine that we have two red points and one blue point on a surface. Now imagine that we have an infinite line which passes through the two red points. This line divides the surfaces into two sides. Check out the image below:

As you see, blue point has two chances. It can be on the side of green or on the side of yellow. If we can figure out where the blue point is then we can solve our problem.


Step 11: How is This Related to 3D?

Now let's talk about the 3D.

In this image we have a 3D plane. Imagine that it's rotated in the Y-axis a bit (so the edge on your left is further away from you than the edge on your right). Let's put red points and a blue point on the corners of the plane.

Do you see the infinite line? Check out image below:

It's actually the same as the first image. If the blue point now goes to the other side of the line, it means that the other side of the plane is being seen. Therefore, using the positions of just three points, we can determine which face of the plane is towards us.

This method is used in Away3D, PaperVision, Yogurt3D, Alternativa and other engines and basically improves the performance.

For this method we will use a function:

This function creates three points in the card (our plane). And then it returns us the location of the third point (blue one in illustrations). If it returns true then it means we're seeing the front side of the card (plane). If not, it means that we're seeing the back side of the card (plane).


Step 12: Rendering

Now, we finally write our last function. This function basically rotates our business card and checks the visibility of the faces.

The first two lines set the position of the main holder to center. This is because of the perspective of default 3D scene in our document. Then we rotate our main holder by using mouse coordinates. We add a traditional and simple smooth effect for it. The last two lines make cards visible when we shoud see them.


Step 13: Calling all Functions

We are ready. Let's call our functions in order:

We also add an ENTER_FRAME event to trigger the render function every frame.


Step 14: Test Movie

Finally we are ready to test our movie.

Move the mouse and you will see that the business card will be rotated too. We tested our card. Now let's go a bit further.

Most of you, and I personally, think that mouse rotations are cooler but, from my experiences with 3D, they can confuse users. We'll therefore convert this to a simpler animation. When we click the card it'll rotate itself.


Step 15: Get Tweener

First, for our animation we'll use Tweener. It's really simple.

So, download the latest Tweener version from code.google.com. I'm using version 1.33.74, ActionScript 3 (Flash 9+).

Extract the ZIP file and move the "caurina" folder to the folder that contains our Flash document.


Step 16: Import Tweener and MouseEvent

Our first lines were about importing classes. We'll import Tweener and also MouseEvent.


Step 17: New Rendering

In our render() function, the card's rotation was directly related to the mouse coordinates. But we don't want this now. We'll basically click the card and it'll turn.

So, remove the highlighted lines:


Step 18: Adding new Variable

We'll add a new variable, frontFace. Its type is Boolean. When the user clicks the card we'll rotate our card to 180 or to 0 depending on the value of frontFace.


Step 19: MouseEvent Handler

Now we are writing our final function. When we click the card this function will be triggered.

We first look at the frontFace variable. If it is true then it means that we are currently looking the front side of the card. If it's false then it means we are looking the back side of the card.

When we are looking at the front side of the card, basically we say "rotate it to 180 degrees", so we can see the back side of the card. We use the same idea when we are looking the back side of the card (in which case, we rotate it to 0 degrees).


Step 20: Add MouseEvent

Our final line is to add a MouseEvent listener to trigger the onDown() function we just wrote. We are adding it to our business card. You could even add it to the stage.


Step 21: Test the Movie

Test your movie and click the card. Maybe you can write a funky "Click to rotate my business card ;)" sentence on your visuals :)


Conclusion

In this lesson we learnt how to build a 3D two-sided plane by using the native Flash Player 10 3D API and ActionScript 3.0. First we controlled it by using mouse coordinates. Then we switched to click-based control so as not to confuse users.

As you see the capabilities of the 3D feature in Flash Player are not perfect, but we can always formulate solutions and can build simple 3D dynamic animations without any third-party engine.

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.