It took me forever to find a good title for this tutorial and I still don't think it completely describes what I'm going to show you. I want to create a dropdown field that will determine whether or not a textbox can be edited. Also, if a textbox cannot be edited, any data in it is meaningless and needs to be removed. This is a very useful feature for online forms and Rich Media Applications.
Here's a working sample of how it could be used:
The requirements for this should be obvious. If the user does not visit Scottmanning.com daily, then asking them 'how many times a day?' is pointless. So the textbox is made read only. If they do in fact visit the site daily, the textbox can be edited. In the event that the user changes their mind about actually visiting the site daily, the textbox needs to become read only again and any data in it should be removed.
Step-by-step
Making this work is simpler than you'd think, but you do need Flash MX. Here's a step-by-step process on how it's done:
1. Open Flash MX and start a new Flash movie.
2. Open the components panel (Window > Components) and select the 'Flash UI Components'.
3. Select the ComboBox component and drag and drop it into the scene of the Flash movie.
4. With the ComboBox in your scene selected, open the Parameters panel (Window > Properties and click the 'Parameters' tab).
5. Give it an instance name of 'dropdown'.
6. Add the following values in the 'Labels' field in this order: 'Select', 'Yes', and 'No'. Whatever item is first in this list will be the dropdown's default value.
7. Add the following values in the 'Data' field in this order: 1, 2, and 3. The values you select for this field will line up with the values you inputted for the 'Labels' field. For example, 'Select' will have a data value of 1 and 'Yes' will have a data value of 2.
When all is said and done, your Parameters panel for the ComboBox component should look like this:
8. Next, you will need to create the text field that is controlled by the ComboBox. Select the Text Tool on the Tools panel (Window > Tools) and draw a text field in the scene under the ComboBox.
9. With the text field selected, go to the Properties panel (Window > Properties). Set the type of text field to 'Input Text', give it an Instance name of 'howmany_properties', give it a variable name of 'howmany', and select to 'Show Border Around Text'.
Ultimately, your Panel for the textbox will look like this:
10. Now you will need to add some code to the Flash movie that will continually check the status of the dropdown field. Based upon the results of the check, it will either make the textbox read only or make it so it can be edited.
Add this following code to a frame in the same spot in the Timeline as your textbox and dropdown:
stop();
// Textfield is only relevant if you visit the site daily
function dropdown_check() {
if (dropdown.getValue() == 2) {
// If "Yes", then the howmany can be edited.
howmany_properties.background = false;
howmany_properties.type = "input";
howmany_properties.selectable = true;
} else {
// If "No" or Select", then the howmany cannot be edited.
howmany_properties.background = true;
howmany_properties.backgroundColor = 0xcccccc;
howmany_properties.type = "static";
howmany_properties.selectable = false;
// Set the value to zero in case the user changed their minds.
howmany = 0;
}
}
// Check the status of the dropdown every 10 miliseconds.
setInterval(dropdown_check, 10);
// ------------
// Embed Arial and Veranda fonts
globalStyleFormat.embedFonts = true;
globalStyleFormat.textFont = "MyArial";
globalStyleFormat.textFont = "MyVeranda";
globalStyleFormat.applyChanges();
_root.values._visible = 0;
The code broken down
For those of you wish to gain an understanding what is going on, here is the code broken down with explanations.
stop();
This is merely telling the Flash movie to stop playing.
function dropdown_check()
This is the function that will be checking the status of the dropdown and determining what the state of the textbox should be.
{
if (dropdown.getValue() == 2) {
// If "Yes", then the howmany can be edited.
howmany_properties.background = false;
howmany_properties.type = "input";
howmany_properties.selectable = true;
This says that if the dropdown field has a value of '2' or 'Yes', then there will be no background to the textbox, the textbox should is now an input field, and the text in it can be selected.
} else {
// If "No" or Select", then the howmany cannot be edited.
howmany_properties.background = true;
howmany_properties.backgroundColor = 0xcccccc;
howmany_properties.type = "static";
howmany_properties.selectable = false;
If the dropdown field is not set to 'Yes', then the textbox will have a grey background, the user cannot input text into it, and the text inside will not be selectable.
// Set the value to zero in case the user changed their minds.
howmany = 0;
}
}
Also, if the dropdown field is not set to 'Yes', the textbox will have a value of zero, thus removing any number the user may have inputted into it.
// Check the status of the dropdown every 10 miliseconds.
setInterval(dropdown_check, 10);
This says to run the previously defined dropdown_check function every ten milliseconds.
