Tutorial-
Input Text Field
Download .fla - 30k
Objective:
To demonstrate a user controlled input field.
Concept:
By utilizing the set properties command with a variable text field,
the user will be able to control the width of a box.
This project will specifically control the width of the greenBox.
The key is the text field that is created. It has been changed to
an input box via the Paragraph panel's "Text Option" section. Additionally
it has been assigned the variable name "size" and the only numbers
button has been selected.
Instructions:
Begin by creating a new Movie Clip ("Insert-Symbol" or "Ctrl+F8").
Make sure you check the Movie Clip. In my case I plan on creating
a green box with the name "mc_greenBox".
Draw an object on the screen. Place it in frame 1 and name your
layer. Also, although it is not needed for this file it is recommended
that you add an "Actions" layer and place a "stop" in frame 1.
To do this open your actions window (ctrl+alt+A). Scroll through
your "Basic Actions" and double click "Stop" . In the window on
the right you should see: stop ();
Go back to "Scene 1" (upper-left corner of the screen) and then
go to the Instance Panel (Window -Panels- Instance (ctrl+I))
From your library drag you new movie clip onto the timeline. Name
this layer.
Create a new layer (insert-layer) and name it "Actions".
Add a stop in Frame 1.
 |
Create a new layer for your text field and give it a name
(i.e. inputField). Use the text tool and draw a small text
field.
On the "Text Options" Panel (Window-Panels-Text Options)
change "Static Text to "Input Text". Also Type a name in for
the variable (i.e. size). This variable is what will be utilized
to control the boxes width. Under the embed fonts
|
select the "1,2,3" tab- this will allow only numbers to be inputted
into the field - you have now created a variable text field.
Create one more layer and add a button to activate the end-user's
input (Ctrl+F8). Open the "Actions" window (Ctrl+Alt+A). Add the
following script to the button (pink text does not effect the script,
the are comments):
//
on release of the mouse button
// or press of the enter key
on (release, keyPress "") {
// the number
from the size field and
// apply it to the property of
"greenBox"
setProperty ("greenBox",
_width, size);
// terminate the command -like a period
} |
Once complet your layers should look like:
All that is left is to test your movie (shift+enter). Type a number
in the field, click on your button and watch the width adjust.
Final Note:
If you click on the setProperty command in your script in Flash
you will see there are several things provided in the drop down
at the bottom that will currently say "width", such as height, alpha,
and more. The purpose of any file is to teach something new- however
if you truly understand it you will be able to get much more benefit.
If you have any questions please email me at any
time.
Quick Ref:
| 1. |
Create a Movie Clip |
| 2. |
Go to the give your movie clip a name
(i.e. greenBox) |
| 3. |
Top layer of .fla - Create "Actions" layer (recommended
for all files) |
| 4. |
Actions' layer, frame 1 place a stop command |
| 5. |
Using the text tool draw a text field |
| 6. |
On the "Text Option's" panel change the drop down
from "Static Text" to "Input Text" |
| 7. |
Type a name in for the variable (i.e. size) |
| 8. |
Under the embed fonts select the 1,2,3 tab- this
will allow only numbers to be inputed into the field - you have
now created a variable text field |
| 9. |
Create a button |
| 10. |
Place this script onto the button
//
on release of the mouse button
// or press of the enter key
on (release, keyPress "") {
//
the number from the size field and
// apply it to the property
of "greenBox"
setProperty ("greenBox",
_width, size);
// terminate the command -like a
period
} |
|
| 11. |
Test movie and have fun |
-Christopher
email: ccontois@2cinteractive.com
url: www.2cinteractive.com
|
