Introduction
In my last tutorial we looked at creating a simple form in Flash and then sending the information using PHP.
This tutorial is very much a follow up to my Form with PHP and Flash tutorial and I will therefore not cover anything already dealt with by the first one. So if you have yet to read it, please do so before commencing this one.
Now we are going to add a few things to our basic form. Whereas before our contact form contained just 4 fields (name, subject, message and email) I have now added a drop down menu and checkboxes.
*The version above will not send anything however try filling in the fields and hitting the send button.
Ok, lets get started.
Page 1
So let's take a look the new additions to our form.
First of all the drop down menu, in this case it gives the user 4 options. Mr, Mrs, Miss, Ms
Next thing is the addition of the checkboxes. Which allow the user to select an answer to the question asked. In this case I have 2 questions :
The final difference is the Thank you message, The information entered in the form is now displayed. on the Thank you page.
Let's start with the drop down menu
Page 2
Open the source file
If you haven't downloaded it already download it here.
Once you have downloaded the source file open it and look at the .fla file.
If you look at the library (click on the open book symbol in the bottom right hand side of Flash to open the panel) you will see a movieclip called "title".
Double Click on that to open it.
First thing to look at in the "title" movie clip are the layer's
You will see there are 5 layers.
Each layer is 30 frames long with the exception of the actions layer
Lets look at these layers from top to bottom
The actions is just one frame with a simple stop() action in it.
The button layer holds the button to activate the menu.
The selectbox layer holds the text box in which the selection appears
The options layer this layer contains 2 labelled frames hide and show
The transbutton layer holds a transparent button from frame 15 onwards
(what's the point of a button you can't see? They are used in Flash all the time and it's reason will become clear)
Now if you look at the stage of our movie clip you will see a text field( the 2 arrows on the right is a button which I have sat on top of the text field)
open up the Text Options panel, you can do so by either going Window>Panels>Text Options or by clicking on the letter A in on the bottom right of the Flash screen.
Page 3
Highlight the text field by clicking on it once, a blue box should appear round it.
Now that your Text Options panel is open click on the right tab (Text Options)
The only difference between this text field and the text field options in the previous tutorial is the variable name, but it's an important one.
If you look at the variable field you will see /:title Let's break this down
/ just indicates the path to like a normal web address yourdomain/folder/page.php
: this informs flash that title is a variable.
title is the name of the variable.
So we now have a text field which will hold our variable title but how and where do we set the variable.
Let's find out.
Page 4
So we now need a method of setting the variable so we can send it to our PHP script.
Again look at the library and you will see a button called select_button
This is just a simple button. with Up, Over and Hit actions. Have a look at each button state.
Double click on the movie clip "title" in the library window and select Frame 15 in the options layer,( the frame labelled"show")
Now drag 4 instances of your select_button onto the stage, and place one under another directly beneath the text field
Page 5
So we now have four buttons on our stage. Now we will add the text, select the text tool and enter Mr on top of the first button, Mrs on top of the second and so on.
Now when the user looks at the menu they will know the value of each button, but how will flash know, so we will attach some actionscript to each button.
Select the top button and add the following code
on (release) {
/:title = "Mr";
gotoAndStop ("hide");
}
Let's break this code down line by line.
on (release)
perform this action when the mouse button is clicked then released
/:title = "Mr";
The variable title new value will be Mr
gotoAndStop ("hide");
hide is the label of Frame 1 in the options menu, this means as our buttons are on frame 15 that when a button is clicked the dropdown menu will dissapear.
Do the same for the remaining buttons
But how do we get the menu to show and hide (the clue is in the frame labels)
Page 6
Again look at the library and you will see a button called drop_button
Drag the button onto the stage of your movie clip "title" and in this case I have place it on top of the right hand corner of our text field.
Once you have placed it there select it again a blue border will appear.
Assign the button the following actions
on (release, rollOver) {
gotoAndStop ("show");
}
Again let's go through the code.
on (release, rollOver)
perform this action when the button is rolled over or the mouse button is clicked then released
gotoAndStop ("show");
Go to and stop at the frame named "show"
So we know that if a user clicks or rolls over the drop_button the menu will appear, and we also have the code in the select_buttons so that if one of then is clicked the menu will disappear as well.
What happens if the user looks at the drop down menu and doesn't select anything.
Page 7
Well lets try, click on the button to open the menu but don't select an option,and move your mouse away
Now that is a problem, how do we get round that.
Well this is where we use our transparent button.
Again looking the the library of the source file you will see a button called transbutton and a graphic called button both are highlighted below.
Let me just run through how I made this button.
I drew a shape big enough to not only cover my drop down menu but to make sure there was around 5px of my visible each side of the menu.
I then selected my shape and from the Flash menu Insert>Convert to symbol and called it button and saved it as a graphic.
I then selected Insert> New symbol and created a button called transbutton.
I dragged my graphic symbol into the up state of my transbutton, made sure it was aligned to the centre of the stage(ctrl-k will open the alignment box),selected it and and in the the effects panel Window>Panel>Effects I choose alpha from the menu and set it to 0%.
Next step is to place the button on the stage of the movie clip "title"
Page 8
In the movieclip "title" select frame 15 on the bottom layer button and drag your transbutton from the library to the stage, placing it under the drop down menu (see below)
So we will now give our transparent button the following actions.
on (release, rollOut) {
gotoAndStop ("hide");
}
on (release, rollOut)
perform this action when the button is rolled over or the mouse button is clicked then released
gotoAndStop ("hide");
Go to an stop on the Frame labelled hide (Frame 1) on the options layer.
Lets try it with the transbutton in place.
Ah that's better
Page 9
So that's us created the drop down menu.
Let's look at the check boxes now.
Again look at the library and you will see a movie called sslcheck
Double click on it to open the movie.
Let's take a look at the layers first
There are 3 layers
The actions layer has 1 frame with a stop() action
The layer tick contains 5 frames with the action /:ssl=""; in Frame 1 and keyframes in 2-5
The bottom layer boxex has 5 frames.
Again look at the library and you will see a button called check_button
With Frame 1 in the boxex layer selected drag 4 instances of check_button onto the stage.
All I have done is use the text tool and place text beside each button, PHP, ASP, JSP, CF in this case.
Page 10
Now click on Frame 2 of the tick layer
As you can see I have placed a tick in Frame 2 over the PHP box
In Frame 3 I have placed a tick over the ASP box Frame 4 JSP and Frame 5 CF.
So how do you set the variable to pass to your PHP script
Again we add some actionscript to each button, let's look at the PHP button.
on (release) {
/:ssl = "PHP";
gotoAndStop (2);
}
Let's look at the code line by line again
on (release)
perform this action when the mouse button is clicked then released
/:ssl = "PHP";
The value of the variable ssl now equals PHP
gotoAndStop (2);
Go to and stop at Frame 2 of this movie, of course Frame 2 has the tick over the PHP box, so it appears as if you have ticked the PHP box
Add this action to all the other buttons changing the code as needed.
So we have our drop down menu and our checkboxes now.
**Remember when you drag the sslcheck movie onto the main movie stage. To give the clip an instance name of ssl
Instance names don't have to be the same as the movie's name, but if you must remember to do this
Page 11
We are ready to send our form, let's have a quick look at the actions assigned to our send and clear buttons.
on (release) {
title = "Please select a title";
name = "";
subject = "";
message = "";
email = "";
tellTarget ("ssl") {
gotoAndStop (1);
}
tellTarget ("coffee") {
gotoAndStop (1);
}
}
I covered most of this in my previous tutorial but there are a few extra lines of code now so lets look at them.
title = "Please select a title";
This line sets the value in the title box back to the original message.
tellTarget ("ssl") {
gotoAndStop (1);
}
This is why it was important you had to give your movieclip an instance name, because without it this action would not be able to find it's target.
This line tells flash to go to and stop on frame 1 of the movieclip ssl which is the frame without any ticks displayed and it also has the following bit of actionscript /:ssl=""; which sets the value of the variable ssl to false(nothing)
tellTarget ("coffee") {
gotoAndStop (1);
}
This is exactly the same as above only this time it targets an movieclip called coffee (my coffee question)
The send button has the same actions as before, here is a look at the code but there is no need to go through it
on (release) {
if (title eq "" or name eq "" or subject eq "" or message eq "" or email eq "" or ssl eq "" or coffee eq "") {
stop ();
} else {
loadVariablesNum ("form.php", 0, "POST");
gotoAndStop (2);
}
}
When the user presses the send button they are shown a Thank you message, along with this all the information they entered is also displayed. let's look at that.
Page 12
Rather than just a basic Thank you as before, the Thank you page now also contains all the information the user has entered.
This is quite simple to achieve
Above we have 2 text fields the name text field has been selected. Below are the options that have been selected for this text field.
Instead of Input Text, this time we have selected Dynamic Text and the variable name must be the same as the variable you wish to display in the field.
In the case of the title field the variable name of the field would be /:title
OK that's us nearly finished just a quick look at the PHP form which we are using to send it and that's it.
The End
Finally let's look again at how we sent the information
So we have all our information and it has been sent from Flash to a PHP script
Open up your favourite text or WYSIWYG editor and copy this code
This code was covered in the previous tutorial also, however the format of the e-mail you receive will be slightly different, there is no need to go through the code again though
Hope you enjoyed this tutorial .
All that is left to do is upload these files to your server and try them out.
Just remember your server must support PHP.