Note: This is only the release date for Decade Creations.com. This tutorial was released before this date. It is also the date of the new version of this tutorial, it should be easier to read and you should get the same results.
In this tutorial I will show you how to create a flash form that doesn't appear to even leave flash. There are a few requirements you must have.
1. Able to use PHP on your server.
2. Macromedia Flash MX 2004 or +
Part 1 - The Flash Form
Okay, lets start by opening Flash and getting a black page. Or if you have a flash site/file you would like to to be on go to that frame and create a symbol called Flash Form or something. First click the text tool (Figure 1) and change the text type from Static Text to Input Text. (Figure 2)
(Figure 1)
(Figure 2)
Now create two text boxes. (Figure 3)
(Figure 3)
Now it should look similar to the image above.
Now select the first input box (Figure 4) and put its var as name. (Figure 5)
(Figure 4)
(Figure 5)
Now select the second one (Figure 6) and then put its var as email. (Figure 7)
(Figure 6)
(Figure 7)
Now Take your text tool again. (Figure 8) and make sure that it is still on Input Text (Figure 9) and now what you want to do is click and drag to make a bigger text box for them to enter their message in. (Figure 10) You should have the third input box selected. (Figure 10)
(Figure 8)
(Figure 9)
(Figure 10)
Now put the var as message. (Figure 11) This time we will have to enter the instance name so that it works with a scroll bar. Put the instance name as message area. (Figure 12) Also change Single Line to Multiline. (Figure 13)
(Figure 11)
(Figure 12)
(Figure 13)
Now we are going to add a scroll bar. Since Flash MX 2004 doesn't come with one you can download it at the following link http://www.faintmedi...m/scrollbar.zip.
Once you are done downloading the file, unzip it then open up the scroll bar file and copy the scroll bar and past it beside your message box. (Figure 14)
(Figure 14)
Now that you have pasted it beside there you can change the height to the same height as your message input. Now make sure all of the settings are correct. Make sure the instance name is bar (Figure 15), now make sure that target textfield is message area - This is why we put the instance name as message area. (Figure 16) Finally make sure that horizontal is false. (Figure 16)
(Figure 15)
(Figure 16)
Now to create the submit button. The one in this tutorial isn't that fancy you can make yours how ever you want. First select your text tool again (Figure 17), and change Input Text back to Static Text. (Figure 18) Now change
(Figure 17)
(Figure 18)
Now add the text Submit or what ever you would like it to be. (Figure 19) Now right click and select "Convert to Symbol..." or hit F8. Then a window should pop up. Set the name as Submit (Figure 20), and make sure that button is selected not Movie clip. (Figure 20)
(Figure 19)
(Figure 20)
Here is a part that many web designers miss when creating buttons. Okay, double click to go into the submit symbol and then right click on the frame with hit above it. Now select insert Key Frame. (Figure 21) Now on the Hit Key Frame select the rectangle tool (Figure 22) and create a box over top of submit so that is is fully covered. (Figure 23)
(Figure 21)
(Figure 22)
(Figure 23)
Now go back so scene 1.
Before we go any further you may want to make the form look nicer. Okay first take your text tool again (Figure 24) and above each text field add its name. For the first one put Name: above it, for the second put E-Mail: and for the third, add Message:. (Figure 25)
(Figure 24)
(Figure 25)
Now you should add a simple background so that the user can see
where the text boxes are. (Figure 26)
(Figure 26)
Now that you have that done we can move on the the submitting part.
Okay first select your submit button and add this action script to it:
on(press)
{
if(name == "" || name == null || email == "" || email == null || message =="" || message == null)
{
gotoAndPlay("error")
}
else
{
loadVariablesNum("send.php", 0, "POST");
gotoAndPlay('finished')
}
}Okay now that you have added that action script to your submit button its time to make the error page and the thank you page.
Start by adding a layer above your form and call it Actions. (Figure 27) and call the one with the form on it Content. (Figure 27)
(Figure 27)
Now on the first frame of the Actions layer add this code to it:
stop();
Now once you have did that insert a Key Frame on frame 5, 25 and 26.
Okay now on frame 25 add this script:
gotoAndPlay(1);
Now on frame 26 add this script:
stop();
Now you have to add some text so the user knows what's going on.
Okay First off to do this create a Key Frame on frame 5 and delete your form from it. (Figure 28) Then add the text in the center of the page that says Sorry but there has been an error.
(Figure 28)
Now create a key frame of frame 26 and add the text Thank You in the middle of the page. instead of sorry but there has been an error. (Figure 29) Now what you want to do is name each frame. Okay First name the First 4 frames on the content layer form, now label the next 21 frames error and finally label the last frame finished. (Figure 29)
(Figure 29)
You are now done the flash part!
Part 2 - Sending the Email
Start by opening a new php file.
Now add this code to the beginning of it.
<?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message'];
This gets all of the infromation that your flash forum sends it.
Now we will add this so that it sends it to your email.
$emailaddress = 'YOUR EMAIL ADDRESS';
Make sure that you change "YOUR EMAIL ADDRESS" to the email address you want the email to go to.
$emailmessage = "Name: $name \n\n E-Mail Address: $email \n\n Message: $message";
Now we are going to make it so that it sends the email.
mail($emailaddress, "Message", $emailmessage); ?>
Here is the final code.
<?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $emailaddress = 'YOUR EMAIL ADDRESS'; $emailmessage = "Name: $name \n\n E-Mail Address: $email \n\n Message: $message"; mail($emailaddress, "Message", $emailmessage); ?>
Now save it as send.php and your done!
Like This Tutorial? Join the Community Today!
