Site hosted by Angelfire.com: Build your free website today!

Introduction

This tutorial explains how to send out customized Flash e-cards to anyone you want, or allow anyone that visits your site to do the same.  This tutorial will allow you to set up a much simplified version of say the online Hallmark or Blue mountain e-cards application. This tutorial was designed to be as simple as possible while still being powerful enough to be used as a commercial application.   This Tutorial use's only 2 simple php scripts and it will automatically create text files to save all of your data.  For this tutorial it is assumed that you have an in-depth knowledge of Flash 5,  and can run php scripts on your server.   Please note though that the PHP scripts can just as easily be written in Perl or ASP, it's just the technique where concerned about showing here.  

Using the same techniques presented in this tutorial you will be able to customize the text of just about any swf file and then e-mail it to anyone - or allow anyone else to customize that same swf.  

Data Fields

Included Files:

Overview

Christmas E-cards for everyone.  Creating, Customizing, and Emailing online E-cards.  This tutorial attempts to go over all the important aspects and techniques used to make custom online greeting cards.  The most important item to keep track of is variables (this is also the most confusing) - You will have to track variables from the original Flash movie -> to the SendEcard.php script -> to the users Email -> to the SelectEcard.php script -> to the final Ecard presentation that the end user will watch.

If you feel that you already have a good working knowledge of the items described below you can skip to the end of this document and read over the installation instructions - that is all that is really necessary. 

It is recommended that you follow along or at least test out the working example at: http://www.Flash-DB.com/Ecards/ as well as download and view the files.

Part 1 - Setting up the Main Flash Movie

The main Flash movie (Ecards.fla) is your base of operations.  This file allows the user to select the e-card they want to send, then allows them to enter custom text which will be sent along with the e-card when they send it to a friend or anyone else they want to.  By opening up the Flash Fla file and going over it first you will have a much better understanding of the part that I'm going to go over next.  This part of the tutorial is not really necessary if you already have a good working knowledge of Flash 5. 

The fla file contains a movie clip named 'ECards'.  This movie clip has 5 frames, each frame contains an image of the Ecard you want to send out.  This movie clip is used 5 times (1 time for each e-card that you want to allow users to select from). Their are 5 different instances of the movie clip 'ECards', each instance is used to display a different frame of the movie clip - which corresponds to a different image of an e-card. Setting instance Names.

The first image to the right demonstrates this point.  This is the first instance of the movie clip 'ECards', their are 5 other instances with instance names of Ecard2, Ecard3, Ecard4, Ecard5, etc.  You should be able to easily change this part or add new ones to the list.    

 

 

In the first frame of the layer 'Actions' their are a couple of lines of actionscript which tell each e-card what frame to display.  For example Ecard4 is told to gotoAndStop at frame 4.  On frame 4 of their is a preview image of Ecard 4.   These commands are shown in the second image to the left.  They can also be found in the fla file. 

Over each Movie Clip their is a button.  This button allows users to select which card they want to send by clicking on it.  The buttons contain the following actionscript. 

on (release) {
	gotoAndStop (2);
	EcardSelect = "1";
}

This tells the main movie to gotoAndStop at frame 2.  And also sets the variable EcardSelect equal to 1.  The actionscript on the button over the second e-card would be exactly the same except the variable EcardSelect would be set equal to 2.  The EcardSelect variable will be used throughout.  

This brings us to Frame 2 of the main Ecard Movie.  This frame contains the actionscript that sets up the preview image of the card that was chosen and also the actionscript that checks the custom text fields and post's that information to the PHP script that sends the card.  

In the second frame of the layer 'Actions' their is a line of actionscript as follows: 

_root.EcardPreview.gotoAndStop(EcardSelect);

The 'ECards' Movie clip is again used, only this time it is given an instance name of 'EcardPreview'.  This line of actionscript tells this instance of ECards to go to and stop at the frame that corresponds to the variable EcardSelect - that was set when the user clicked on a specific E-card.  

Their are a number of text fields in this frame.  They are all input text fields.  Make sure that you do not have the 'html' checkbox checked off for these text boxes. 

The text fields are given the variable names: ToName, ToEmail, FromName, FromEmail, Greeting, and IntroMessage.  An example of the text box with the variable name 'ToName' is given to the right.  One thing you may want to do is set the Max Chars limit.  In this case the limit was set to 70 Characters.  In the case of the IntroMessage text you should try to set a limit so that the text is not cut off in your greeting card when somebody sends it. 

The last part of setting up the main 'Ecards.fla' file includes sending the custom information to a script which then processes that information.

On the 'Click here to send e-card' button you will find the following text:

on (release) {
	if (ToName eq "") {
		_root.Status = "Please enter the Name of the person your sending this to";
	} else if (FromName eq "") {
		_root.Status = "Please enter your Name";
	} else if (ToEmail eq "") {
		_root.Status = "Please enter the Email address your sending this to";
	} else if (FromEmail eq "") {
		_root.Status = "Please enter your email address";
	} else if (Greeting eq "") {
		_root.Status = "Please enter a greeting message";
	} else if (IntroMessage eq "") {
		_root.Status = "Please enter a Intro Message";
	} else {
		gotoAndStop (3);
		_root.Status = "Sending Ecard - Please Hold";
		loadVariablesNum ("SendEcard.php", 0, "POST");
	}
}

 The first couple if-else statements just check to make sure that the user filled all the fields out.  Then if they did it tells the main movie to go to and stop at the 3rd frame of the movie - where the user will see a success 'the message has been sent' notification.  Also the loadVariablesNum command post's all of the variables in the movie to a script which later processes the results.

Part 2 - Setting up individual E-cards.

The download for this tutorial comes with 4 fla files for e-cards that can be used.  You can use just about any e-card you can think of though as long as a few minor changes are made to the card.  

All you have to do is create two dynamic text box area's and give them the names of 'Greeting' and 'IntroMessage' - this is shown to the right.  You can use html in these as long as in the input text area's you used html tags, such as the <b> tag or <a href..> tag.  Then that html will be displayed in this area.

The only other part that you have to add to your e-card is the following line of actionscript in the first frame.

loadVariablesNum ("http://www.yourSite.com/E-Cards/dBText/"+EcardText+".txt", 0);

 This part will be further explained later on.  This will load the variables from a text file located on your server containing information that a the user entered.  The 'EcardText' variable is sent to the movie when the user goes to the link that is sent to him through email.  Again this will be better explained later on.

Part 3 - Email the Custom text and swf to someone (Explaining the Script)

The following script is what is used to send out the email as well as save the user entered remarks to a text file on your server.  I'll attempt to explain it line by line - you can also find some additional comments in the source downloaded for this tutorial, this file is called "SendEcard.php".   Recall that on the "Click here to Send card" in the main flash movie, it calls this script and Post's all of the variables from the Movie to this script. 

<?
1)  $CreateEcard = date(U);
2)  $filename = $CreateEcard.".txt";

3)  $ToName = stripslashes($ToName);
4)  $FromName = stripslashes($FromName);
5)  $Greeting = stripslashes($Greeting);
6)  $IntroMessage = stripslashes($IntroMessage);

7)  $Today = (date ("l dS of F Y ( h:i:s A )",time()));
8)  $Created="Ecard Created on $Today";

9)  $EcardNum = $EcardSelect;

10)  $EcardText = "ToName=$ToName&ToEmail=$ToEmail&FromName=$FromName&FromEmail=$FromEmail&
      Greeting=$Greeting&IntroMessage=$IntroMessage&Created=$Created";

11)  $fp = fopen( "./dBText/$filename","w"); 
12)  fwrite($fp, $EcardText, 10000); 
13)  fclose( $fp ); 

######Email Card########

14)  $ToSubject = "You have received a Flash Ecard from $FromName";

15)  $Message = "$ToName,\nYou have received a Flash card from $FromName. \nClick the following link to view 
     your card:\n\n http://www.yoursite.com/E-Cards/SelectCard.php?EcardText=$CreateEcard&ENum=$EcardNum
     \n\n-----------------------------------\nHere is the message that was sent:\n$ToName,\n$Greeting\n$IntroMessage
     \n\n-$FromName\n\n\n-----------------------------------\nThis card was sent from www.yoursite.com/E-Cards/\n\n";

16)  mail($ToName." <".$ToEmail.">",$ToSubject, $Message, "From: ".$FromName."
     <".$FromEmail.">");

17)  print "_root.Status=Success your Card Has Been Sent!";
?>

 Line 1)  The first line uses the date function to retrieve the seconds since the epoch (which is a very large number).  I choose to use this number to provide a consistent numbering system for the text files.   It is possible but highly unlikely that two people could fill out the text messages in the exact same second.  

Line 2) Adds the .txt extension to the file name and sets the variable $filename which is later used.

Lines 3-6) These lines remove unwanted slashes that are added when posted.  These lines are not necessary, but do help avoid unwanted slashes in your data.

Line 7) Returns the current date and time.  

Line 8) Just formats a nice string telling you when the card was created.

Line 9) Sets the variable EcardNum to the value contained in EcardSelect.  EcardSelect contains a number between 1 and 5 depending on what the user choose and is later used in determining which card to display when sent.

Line 10) Formats a string called EcardText containing all the submitted information.  This is then written to a text file on your server.

Line 11) Opens or creates a new text file for writing to.  In this case the filename we want to write to was determined in lines 1 and 2 of this script.  The 'w' tells the script that we intend to write information to this file.  Notice that this text file is located in a directory called dBText.  The directory permissions of dBText also need to be changed - this is explained later.

Line 12) This writes the information contained in EcardText to the file.  Their is also a limit on the amount of data that can be written to this text file, here it is set at 10000 which is really high, you may want to consider setting it to a much lower value.

Line 13) Close's the file we are writing to.

Line 14) This is the first part of the Email function.  This line sets the Subject line of the email we are sending.  You can set this to anything you want.

Line 15) Formats the message that we are sending out.  You can use any of the variable names that were used in the main ECards movie to format this message.  The link that is sent out is probably the most important part of this message.  Notice the string that is added onto the end of the Link (?EcardText=$CreateEcard&ENum=$EcardNum) this attaches the variable EcardText and it's value $CreateEcard onto the end of the Link - this will eventually tell the flash movie which text file to open up.  Also the variable ENum is attached.  This variable tells the next script which swf to embed - and has the same value that EcardSelect did from the original movie.  Also, make sure to change 'www.somesite.com' to your site. If you did not locate these files in a directory called 'ECards' you will have to change that as well.  

Line 16) This line of code is what actually sends the email.  You shouldn't have to change anything here.

Line 17) Prints out a success message back to the movie to let the user know that his card was sent successfully. 

That's it for that script!

Part 4 - Telling the script which Ecard to display - and passing variables to the Ecard

This script is the one that the Link in the email points to.  When the user clicks on the link this script will open up.  Depending on the value of the two attached variables it will act in a certain way.  The below script is part of "SelectCard.php".  The most important thing to realize is what this script is actually doing.  All that it is doing is dynamically setting up the <object> and <embed> code for the Ecard.  In this way we can embed a specific ecard depending on what the user choose.  Remember that $Enum has the same value as EcardSelect from the original Flash movie.

The below 'Switch' Statement is just like an If-then statement, only easier to read for this case.   The switch statement uses cases to determine which set of instructions to follow.  If ENum is equal to 1 (this would be the case if the user choose Ecard 1) then it will execute the first statement block.  The most important part of this is that it sets the $goto variable to Ecard1.swf.  This later embeds that movie into this page.  The normal <object> and <embed> code for the flash movie acts more like a template in this case.  This also attaches a variable onto the end of the Ecard1.swf string.  This variable corresponds to the filename where the custom text for this movie is located.  By attaching this variable onto the end of the embed string it is automatically declared inside the flash movie.   Their is also an option for including a footer file that will allow the person viewing the card to send the same card to someone else - You can leave this portion out without any problems if needed.

We also set the dimensions of each flash Ecard we are sending out in this statement block.  They happen to all be the same in this example, but depending on the dimensions of the E-Cards you are using you may want to change these for all or for each individually.  

<?

switch ($ENum) {

	case '1':
	$goto = "Ecard1.swf?EcardText=".$EcardText;
	$gotoFooter = "EcardFooter.swf?EcardText=".$EcardText."&EcardSelect=1";
	$Dimensions = "WIDTH=700 HEIGHT=525";
	$DimensionsFooter = "WIDTH=700 HEIGHT=250";
	break;

	case '2':
	$goto = "Ecard2.swf?EcardText=".$EcardText;
	$gotoFooter = "EcardFooter.swf?EcardText=".$EcardText."&EcardSelect=2";
	$Dimensions = "WIDTH=700 HEIGHT=525";
	$DimensionsFooter = "WIDTH=700 HEIGHT=250";
	break;

	case '3':
	$goto = "Ecard3.swf?EcardText=".$EcardText;
	$gotoFooter = "EcardFooter.swf?EcardText=".$EcardText."&EcardSelect=3";
	$Dimensions = "WIDTH=700 HEIGHT=525";
	$DimensionsFooter = "WIDTH=700 HEIGHT=250";
	break;

	case '4':
	$goto = "Ecard4.swf?EcardText=".$EcardText;
	$gotoFooter = "EcardFooter.swf?EcardText=".$EcardText."&EcardSelect=4";
	$Dimensions = "WIDTH=700 HEIGHT=525";
	$DimensionsFooter = "WIDTH=700 HEIGHT=250";
	break;

	case '5':
	$goto = "Ecard5.swf?EcardText=".$EcardText;
	$gotoFooter = "EcardFooter.swf?EcardText=".$EcardText."&EcardSelect=5";
	$Dimensions = "WIDTH=700 HEIGHT=525";
	$DimensionsFooter = "WIDTH=700 HEIGHT=250";
	break;
}
?> 

//This is regular html with PHP mixed in - the php that is mixed in is determined by the above script.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 <? print "$Dimensions";?>>
 <PARAM NAME=movie VALUE="<? print "$goto";?>">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF> 
<EMBED src="<? print "$goto";?>" quality=high bgcolor=#FFFFFF 
 <? print "$Dimensions";?> TYPE="application/x-shockwave-flash" 
 PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
 </EMBED>
</OBJECT> 
Notice how we use the variable from above to dynamically change what swf is embeded. This is most apparent with the $goto variable. You can see that we write small pieces of php code after for example the 'src=' line - Then we use the variable $goto from above to change what is embedded depending on what card the user choose.

 Part 5 - Installation

This is the most important part of this tutorial.  Try to follow the installation instructions as closely as possible.

1)  Create a directory called ECards on your server.

2)  Upload the Flash files:  Ecards.swf, Ecard1.swf, Ecard2.swf, Ecard3.swf, Ecard4.swf, Ecard5.swf and the 2 php files (SendEcard.php and SelectCard.php) to this directory. 

3)  Create a directory called 'dBText' within the ECards directory.  You need to change the permissions of this directory.  Basically you have to allow others to write information to this directory.  The easiest way to do this is to use an ftp program such as ws_ftp or cute_ftp.  The owner permissions should be set to read, write, and execute.  The other permissions should be set to read and write.  In most cases you can do this by right clicking on the directory you just created and selecting chmod - then you can check off the check boxes that correspond to those directory permissions.  If you are having trouble with this just check off all the boxes or use Telnet to change the permissions on this directory to 777.  (Note 777 should only be used for testing, since it can become a security issue).  

4)  Change the Link in the 'SendEcard.php' script to that of your own site.  For example if your site was called EcardsDesignEmporium then you would change http://www.flash-db.com/Ecards/SelectCard.php?EcardText=$CreateEcard&ENum=$EcardNum to http://www.EcardsDesignEmporium.com/Ecards/SelectCard.php?EcardText=$CreateEcard&ENum=$EcardNum (on line 15).  

5) You will also have to change the line of actionscript located in the first frame of each individual Ecard.  

6) The EcardFooter is an optionial item you can add in that allows people to forward the card on. This file is not necessary, but you should make the necessary changes in the 'EcardSelect.php' file if you are not including it. This basically involves getting rid of the second set of <object> and <embed> tags located at the bottom of that file.

loadVariablesNum ("http://www.yourSite.com/E-Cards/dBText/"+EcardText+".txt", 0);

 Change the above line of code so that 'yourSite.com' really is the link to your site.

Part 6 - Error Checking

1)  Are you sure that you can run php scripts on your server?  Check with your systems administrator to make sure. 

2)  Have you changed the permissions of the dBText directory located within the E-Cards directory.  

3)  If the user is receiving E-Cards and the custom text is not appearing - First check the directory 'dBText' - and make sure that files are being written to this directory.  If not, it's probably the directory permissions.  If they are view the contents of one of these files and verify the format.   

4)  Check to see if you have any errors in your scripts.  Open up the script in your browser window by typing in the full url to the script on your server - If you receive an error message, then you've got a small syntax error in your script.  It's probably a missed ';' or a similar error.  Usually this reports a line number along with the error, this should give you a good start on where to find the error.  If their is a blank screen or a success message then the script is working. 

5) Verify all paths used and try to visually track the variables from the beginning to the end of the process. 

Conclusion

Hopefully by reading over this tutorial, looking over all the downloaded scripts and fla files in detail, and setting it up for yourself - gives you all of the knowledge necessary to not only create custom e-cards - but to take the idea's presented in this document and expand on them.  Their are quite a few additions and modifications that you can create from here on out.  

-Jeffrey F. Hill
www.flash-db.com