Email 102 by CyanBlue
Email 102
Email 101 + Components
by CyanBlue
 
I am sure you know how to do the email from in Email 101 tutorial. This variation deals with the components in the form. Just to let you know, this tutorial works with Flash MX components and if you are working on Flash MX 2004, you need to use V1 components. If you are using V2 component, you might need to apply some modifications to get it working.
Okay, as I have said already, this tutorial basically adds one ComboBox component and four Radio Button components to give you more choices. Take a look at the demo first.
 
 

FlashVacuum Flash ActionScript Tutorial CyanBlue subQuark JT

You do not have the Flash plugin installed, or your browser does not support Javascript.

  
 
Here are the changed parts from Email 101 tutorial.
 
1. Initialization
 
          This is the routine that I have that will initialize my email form. 
  1. var about_arr = new Array("Please Select...", 
  2.                           "General Inquiry",
  3.                           "Create a New Website", 
  4.                           "Redesign Existing Website",
  5.                           "Search Engine Optimization",
  6.                           "Web Hosting",
  7.                           "Other Inquiry");
  8. this.about_cb.setDataProvider(about_arr);
  9. this.about_cb.setSelectedIndex(0);
  10.  
  11. var from_arr = new Array("Search Engine",
  12.                           "Online Forum",
  13.                           "Word of Mouth",
  14.                           "Etc");
  15. for (var i = 0 ; i < from_arr.length ; i++)
  16. {
  17. 	this["from" + i + "_rb"].setGroupName("from_rg");
  18. 	this["from" + i + "_rb"].setLabel(from_arr[i]);
  19. 	this["from" + i + "_rb"].setState(false);
  20. }
 
Line 1 ~ 7   var about_arr = new Array("Please Select...",
                          "General Inquiry",
                          "Create a New Website",
                          "Redesign Existing Website",
                          "Search Engine Optimization",
                          "Web Hosting",
                          "Other Inquiry");
  This about_arr initializes the content I am going to put into the comboBox component.
Line 8   this.about_cb.setDataProvider(about_arr);
  I am using ComboBox.setDataProvider() function to supply the content of the comboBox in the form of an array.
Line 9   this.about_cb.setSelectedIndex(0);
  I am setting what's going to be the default value of the given comboBox component. I am defining it manually so that I can use this init() function to clear out the content when 'Clear' button is pressed.
Line 11 ~ 14   var from_arr = new Array("Search Engine",
                         "Online Forum",
                         "Word of Mouth",
                         "Etc");
  Here I am defining from_arr to store the values that I want to apply to the Radio Button components.
Line 15 ~ 20   for (var i = 0 ; i < from_arr.length ; i++)
{
     this["from" + i + "_rb"].setGroupName("from_rg");
     this["from" + i + "_rb"].setLabel(from_arr[i]);
     this["from" + i + "_rb"].setState(false);
}
  I am using a for loop to apply the same thing to each components by using setGroupName(), setLabel() and setState() functions.
 
2. Form Validation
 
          We have added two elements to the form, so we need to add the validation process to each of them as well. 
  1. trace("About : " + this.about_cb.getSelectedIndex() + " : " + this.about_cb.getSelectedItem().label);
  2. if (this.about_cb.getSelectedIndex() > 0)
  3.  
  4. ...
  5. ...
  6.  
  7. trace("From : " + from_rg.getValue());
  8. if (from_rg.getValue() != undefined)
 
Line 1 ~ 2   trace("About : " + this.about_cb.getSelectedIndex() + " : " + this.about_cb.getSelectedItem().label);
if (this.about_cb.getSelectedIndex() > 0)
  Here I am checking the comboBox component by using the getSelectedIndex() function to see if the selected item is something rather than the default value that I have originally set because we don't want to see 'Please select...' in the email. If you have any doubt on what value you are getting, you might want to add the trace() line to make sure of it.
Line 7 ~ 8   trace("From : " + from_rg.getValue());
if (from_rg.getValue() != undefined)
  Same thing goes in here. I have not previoously set the default value for this Radio Button components, so it is valid as long as the getValue() value is not 'undefined'.
 
3. Sending out an email
 
          We need to add these two into the value we are sending to PHP script. 
  1. email_lv.about = this.about_cb.getSelectedItem().label;
  2. email_lv.from = from_rg.getValue();
 
Line 1 ~ 1   email_lv.about = this.about_cb.getSelectedItem().label;
email_lv.from = from_rg.getValue();
  As it is the same as any other variables, we are adding 'about' and 'from' to PHP script with the selected value.
 
4. PHP Script
 
          This is actual place where the email is sent out since Flash works only as a frontend. 
  1. $output .= "About   : " . $_POST['about'] . "<BR><BR>";
  2. $output .= "Heard From : " . $_POST['from'] . "<BR><BR>";
 
Line 1 ~ 2   $output .= "About : " . $_POST['about'] . "<BR><BR>";
$output .= "Heard From : " . $_POST['from'] . "<BR><BR>";
  Here I am adding those two additionally passed values into the content of the email that I am going to send by using $_POST['about'] and $_POST['from'].
 
That's it. Now, you should be able to know what sort of functions to use to get/set the values to those components and how you can add additional elements if necessary.
 
Please post the question to the forum if you have any or if you have suggestion/correction.
 
Download the Flash MX file from here : Email102.zip
Download the Flash MX 2004 file from here : Email102_F7.zip
 
   |      |      |      |   Last Modified: July 17, 2009 @ 4:25 am