Christmas mini cards

Help Documentation
Thank you for purchasing the Christmas Mini cards. This manual will explain
how the cards function as well as the basic setup of the cards.

Features included:
Setup in 5 minutes:
There is no need to even open Flash to use these cards. All that is required is
replacing some images and editing and XML file.

Papervision3D:
3D flip effect made available by Papervision3D.

Editable imagery:
Front and Back materials and the logo of the card are loaded from file.

HTML text support:

The text field on the back of the card supports some basic HTML tags which
will allow users to make their Christmas message look appealing to the
viewers:
< b> - Bold
< u> - Underline
< i> - Italics
< a> - Anchor
< br /> - Break
< p> - Paragraph

Logo insertion by just changing a single file:

An image place holder is used for displaying a logo or any graphic defined by
the user, however, if the user wishes not to have a logo in the card the file just
requires deletion

Before we begin:
Before jumping into the basic setup of the cards it must be noted that any
customization of the files are done at your own risk, however, all the code is
fully commented with adequate description and written in a way that users
won’t need to jump around to find functions. All functions are placed in order
from top to bottom. If you really want to edit the code the only edits should be
made to com/Kicksaints/miniCard/miniCardMain.as
Basic setup:
Extract the contents of main.zip to a folder of your choosing. The main.zip file
contains three folders titled as follows:
• Reindeer
• Santa
• Snowman

These three folders contain the contents for each of the three cards. They all
make use of the same setup, so setting up one card will be exactly the same as
setting up the others.

For the sake of making this setup easy to understand, we’ll work on the Santa
card. Open the Santa folder. The folder should contain the following files and
folders (folders marked with *):
• assets*
• com*
• org*
• index.html
• miniCard.fla
• miniCard.swf
• preLoader.fla
• preLoader.swf
• swfobject.js

Before we continue lets go through what each one of the above folders and
files are:

The Assets folder

This folder is pretty much where most of our editing time will be spent. It
contains the front and back images of the card as well as the logo and the xml
file which contains the message that displays on the back of the card

The com and org folders

These two folders contain all the Flash classes (functionality) required to make
the cards work. Editing the contents of this folder is done at your own risk. It’s
advisable that the contents be left alone. As mentioned before the
functionality of the Flash classes are fully commented so if you are a Flash
developer it should be easy to understand the functionality and edit it to your
liking.
The index.html file
This HTML file displays the Flash based (SWF) files in the web browser

The miniCard.fla and preLoader.fla files

These two files are required for publishing a SWF file from the Flash editing
software. Editing the contents of these files is done at your own risk as the
editing of these files is done in conjunction with the editing of the contents of
the com and org folders.

The miniCard.swf and preLoader.swf files

These are the published files of the mini cards. As the title adequately explains
the preLoader.swf file loads the miniCard.swf file which contains the main data
of the mini card. The index.html file loads the preLoader.swf which in turn
loads the miniCard.swf file

The swfobject.js file

This file is required by the index.html file to run the Flash content at full
browser window height and width. It shouldn’t be edited at all.

Now that the explanation is out of the way lets work on editing the content for
the mini card. Open the assets folder. Inside the folder you’ll find the
following files:
• back.png
• front.png
• logo.png
• text.xml

The back.png file is the material which is applied to the back of the card. While
the front.png file is the material from the front of the card. We don’t really
need to worry about editing these unless you wish to change the design of the
card.

The logo.png file needs to be replaced with your company logo. Currently the
logo.png file dimensions are 162px wide x 100px high. The positioning of the
logo on the back of the card is done dynamically so a logo of any height and
width can be used; however, it’s recommended that you keep the width at a
maximum of 162px to keep it inside the bounds of the card.

As for the height, anything above 200px might push the text message and the
logo outside the bounds of the card. Also make sure that when you save your
logo out the image editing software you use you save it as a PNG and make use
of a transparent background

Remember, you don’t have to have a logo display on the back of the card. If
that is the case simply delete the logo.png file from the assets folder. The card
won’t load the image; however, it will still work.

Before moving on to editing the text.xml file lets test the progress of the card
by running the index.html file. This file should open in your default web
browser. Once opened click on the card to view all the edits you have made so
far, if you edited the front.png and back.png these changes should be evident.
The main reason for us testing the card at this point though is to see how your
logo is displaying on the back of the card. Make sure its displaying correctly,
the mini card was designed to centre the logo to the middle of the card width.

Next let’s edit the text.xml file, this file is written in XML which is very similar
to HTML mark up. Don’t let that scare you as it’s actually only 4 lines of text
where you only need to focus on one.

Open the text.xml in a text editor of your choice, its contents should look like
this:
<?xml version="1.0" encoding="utf-8"?>
<cardContent>
<message><![CDATA[<b>MERRY CHRISTMAS</b>]]></message>
</cardContent>

The only section we’ll need to focus on is the contents inside the <message>
and </message> tags. Inside these two tags is something called CDATA, CDATA
lets a program like Flash understand that anything between the CDATA tags
(<![CDATA[CONTENT HERE]]>) might include some HTML tags. For ease of use
the contents that can be edited is marked in orange. By default “<b>Merry
Christmas</b>” is used and that will display on the mini card like this:
MERRY CHRISTMAS

As explained at the top of this manual you can use HTML tags the <b> tag is the
tag for applying bold to text.

Once you’ve edited the text.xml file, believe it or not you’re done editing the
mini card and you’re ready to use it. Let’s test it by opening the index.html
again in your default browser. Check for any discrepancies and make the
amendments as you see fit.

Once you’ve complete you can use the card in any way you want.

That’s it! You now have some cool Christmas cards to send to your friends,
colleagues and family wishing them well for the festive season

Merry Christmas from Kicksaints