ENHANCEDMEDIA
3D XML Business Card

//////////////////////////////////////

Usage:

This XML based 3D business card is very simple to use, just open up the XML file in your favourite text editor like Notepad and replace the default with your own business card information. Then, just create your imagery for both the front and back of the business card. Once youve done that you are ready to go!

//////////////////////////////////////

Setup:

Once you have opened the XML file, the first thing you will see is the settings for card itself.

<cardflip front="cardFront.jpg" back="cardBack.jpg" width="300" height="185" speed="1.5" blur="30">

Each setting is as follows:

front="cardFront.jpg"	This is the name/location of your front image. So if it was located in a folder, you would put "img/cardFront.jpg"
back="cardBack.jpg"	This is the name/location of your back image. Same applies as above.
width="300"		As you might expect this is the over all width of the business card.
height="185"		Again, same as above for height.
speed="1.5"		This is how quickly the flip of the card is in seconds
blur="30"			The amount of horizontal blur applied when card flips to add realism. There isnt too much need to edit this one

Note. The 3D card is pixel perfect which means that the camera and card placement within the space has been set up so that its dimensions are true dimensions you would have on screen for anything else. So 300 pixels wide is exactly what is shown for the card, and not distorted in any way.

Next is the card information itself that makes it personal to you

<Name><![CDATA[<span class="name">John Smith</span>]]></Name>
<Title><![CDATA[<span class="title">Director, CEO</span>]]></Title>
<Email><![CDATA[<span class="email">jsmith@company.com</span>]]></Email>
<Phone><![CDATA[<span class="phone">+ 44(0) 123 456 789</span>]]></Phone>

Each bit of information is wrapped in CDATA tags so that HTML tags can be passed to the file without XML throwing a fit. By setting each one in HTML tags, you can then style each bit independently with normal CSS styling in a stylesheet.

The accompanying stylesheet itself is very basic, there are styles for the four different lines as shown above:

.name {
	font-size:24px;
	color:#000;
}
.title {
	font-size:16px;
	color:#000;
}
.email {
	font-size:16px;
	color:#000;
}
.phone {
	font-size:16px;
	color:#000;
}

Flash only supports very basic CSS properties so you dont have a huge amount to change, just things like the font size and colour and such.
Now a slightly complex thing to get right is the font used. In order to get a nice anti aliased look on the text fields, you have to embed a font. However using the CSS, you can't set the font-family to anything you want, because you still have to emebed it within Flash itself. Therefore, if you want to use a different font yourself, which is a strong possibility here is what you need to do:

Open up the fla file and open the Library. All you will see in there is a font that I have added as the default, theSerif. If you want to add a different font of your own, click on the little arrow on the right corner of the Library Panel, then click on New Font. Find the font you want and give it a sensible name.

Then once youve clicked OK, right click on the new font in the library and click on Linkage. Then make sure the box for Export for Actionscript is checked. Take a note of the linkage name that it generates because you will need to use this in a second.

Open up the main.as file, and find line 107 which should read: var font:theSerif = new theSerif(); If it doesnt say this then look a couple lines above and below, it should be right around there. Now just replace both instances of theSerif and put in the linkage name of the new font that you should of taken note of beforehand. This should now embed the font you want in the card.

//////////////////////////////////////

Please feel free to contact me on the FlashDen page if you have any questions as I frequently check for anything and will respond fast.

Thanks