Developing Webs logo
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Remember to book mark this site!

Request a Tutorial

Dynamic Textboxes

By Travis Chapman

Dynamic textboxes are textboxes that can be changed by Flash, but not the user. Input boxes are what allow whoever uses the movie file to type they're own text. Both will be used in this tutorial.

Your First Box

1. First, let's create a textbox. Type anything you want.

2. In the Properties window, there's a dropdown box. Click on it and choose "Dynamic."

3. Under that there's a new box that says "<Instance Name>." Rename that "inputBox". This value is case sensitive so remember what case you use.

4. There should also be a property called "Var:" in the bottom right. Type in "input".

5. Now create a second one. Leave it blank. Rename "<Instance Name>" to "outputBox". Name the var space "output"

We now have two boxes, both Dynamic, one input, one output. Name this layer Text Boxes.


Time for the ActionScript.

1. Insert a layer and call it Actions. Click in Frame 1 of the actions layer and put the following code into the Actions panel:

onEnterFrame = function () {
output = input;

2. Now press Ctrl+Enter to test it out. Ta-da! Your text should appear in the lower box.

Congratulations, you've made your first dynamic textbox.

Moving on to Input Boxes

1. Let's keep it easy. Stay with your old boxes, but go back to the first one, inputBox. Remember that old dropdown menu? Click it again, but change it to input.

2. There. Test it out again (Ctrl + Enter) and now look. You can change the box but it still updates.

But that was too easy. Let's change it

3. Press Ctrl + F8 to create a new button. Name it okButton. Add a graphic so ther eis something to click on your stage.

4. Drag your button to the stage from the library. Rename "<Instance Name>" to "ok".

5. Deselect everything. Change the code from this:

onEnterFrame = function () {
output = input;

To this:

ok.onRelease = function () {
output = input;

6 . Test this! You did it! Yay!

"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2023 All Rights Reserved
Privacy and Legal