# Building a 3D Business Card With Pure AS3

##### Tutorial Details
• Difficulty: Intermediate
• Platform: Flash (Flash Player 10+)
• Language: AS3
• Software used: Flash Pro CS5 (CS4+ compatible)
• Estimated Completion Time: 45 mins

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:

package  {

import flash.display.MovieClip;

public class BusinessCard3D extends MovieClip {

// constructor code
}
}
}


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:

import flash.display.Bitmap;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;


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:

private var businessCard:Sprite
private var frontHolder:Sprite
private var backHolder:Sprite

private var frontTexture:Bitmap
private var backTexture:Bitmap

private var p1:Point
private var p2:Point
private var p3:Point

private var p1_:Point = new Point(0,0)
private var p2_:Point = new Point(100,0)
private var p3_:Point = new Point(0,100)


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.

public function getTextures() {
frontTexture = new Bitmap(new CardFront(0,0))
backTexture = new Bitmap(new CardBack(0,0))
}


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:

public function addIntoHolders() {
frontHolder = new Sprite()
backHolder = new Sprite()

}


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.

public function initCards() {
backHolder.rotationY = 180

frontTexture.x = -frontTexture.width/2
frontTexture.y = -frontTexture.height/2

backTexture.x = -backTexture.width/2
backTexture.y = -backTexture.height/2
}


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:

public function isFrontFacing(displayObject:DisplayObject):Boolean {

p1 = displayObject.localToGlobal(p1_);
p2 = displayObject.localToGlobal(p2_);
p3 = displayObject.localToGlobal(p3_);
return Boolean((p2.x-p1.x)*(p3.y-p1.y) - (p2.y-p1.y)*(p3.x-p1.x) > 0);
}


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.

public function render(e:Event) {

frontHolder.visible = isFrontFacing(frontHolder);
backHolder.visible = isFrontFacing(backHolder);
}


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:

public function BusinessCard3D() {
getTextures()
initCards()
}


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.

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.

import flash.display.Bitmap;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;

import caurina.transitions.Tweener
import flash.events.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:

public function render(e:Event) {

frontHolder.visible = isFrontFacing(frontHolder);
backHolder.visible = isFrontFacing(backHolder);
}


## 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.

private var frontFace:Boolean = true


## Step 19: MouseEvent Handler

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

public function onDown(e:MouseEvent) {
if(frontFace) {
frontFace = false
}else{
frontFace = true
}
}


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).

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.

businessCard.addEventListener(MouseEvent.MOUSE_DOWN, onDown)


## 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.

• Sagar

Awesome tut!

Just a request can you provide CS4 version of the fla files!

Thanks!

• Sagar

Hey Sorry for previous comment.
I forgot about Document class which can be used in any CS Version ;)
Sorted it!

But I found an issue. When I export the file from flash cs4 I get below issues

1180: Call to a possibly undefined method CardFront.

1180: Call to a possibly undefined method CardBack.

• Sagar

Both the as have the issues mentioned above and the source or issue is at

frontTexture = new Bitmap(new CardFront(0,0))

backTexture = new Bitmap(new CardBack(0,0))

Just incase you require it.

• http://michaeljameswilliams.com/ Michael Williams

Hey Sagar! Thanks for pinning it down to specific lines, that really helps. Have you imported the card images to your FLA and set their Linkage values as in Step 4?

• Sagar

Hey by the time I sorted it you replied ;).

Thanks again for quick reply Michael!

And Awesome Stuff by Yagiz Gurgul !!!

• Sagar

Hey Michael,

I noticed one more thing, about part one that is on step 14 when the image comes to rest after rotation it displays upside down. Is there a way where this can be resolved in code.

I know the other way by making image upside down ;)

• Sagar

OOPS changing image too didn’t work ;(

• http://midnyt.net Greg Wells

Great tutorial. Some solid AS3 here and the 3 point reference concept is amazing. I haven’t worked much in 3D so this has been a great little learning experience for me.

As always, I love this site!

Wow very nice effect, I will use this to present better my business card designs.

• http://www.fcevik.com/ fatih

Tebrikler, cok guzel.

Great tutorial. thanks

• http://ilopezdeaudikana.com mutiu

good one!!

• http://www.jsCampos.com/ Jose Campos

Nice tut, a little bit complicated for that easy task but it help to learn new way to code so more complex things can be made from this.

Regards!
Jose

• Pushpkumar Deshmukh

GREAT JOB… :)

• http://gamedev.rasmuswriedtlarsen.com Rasmus Wriedt Larsen

I would say the title is really misleading! If it’s with pure as3, then you’re not using the Flash IDE…

a nice tutorial anyway :)

• Alex

Great tut!
Is it possible to use a movieclip for the back graphic instead of just an image?
That way I can add a couple of buttons to it..

• Bassta

Nice job, in 15 minutes you can customise it to look like http://burnandbass.com/BusinessCard/ . This is great starting point for all kinf of web applications that use the effect

• Abel

hello, how can i add reflex from below?

• http://www.arunvignesh.com arunvignesh

i need tutorial of floating text can you send or show mw how to do