Controlling Text / Scrolling Text in a Text Field
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
Let's close out this section of the tutorial with some scripts for learning how to scroll text in a text field. Oftentimes your text is longer than the text field that displays the text or you may have an input field that allows a user to input more text than can be displayed at one time in the text field. You can use scroll-related properties of the Flash.text.textfield class to manage lengthy content. You can do this either vertically or horizontally. The scroll-related properties are listed here and include TextField.scrollv for vertical, TextField.scrollh for horizontal, maxScrollv and maxScrollh. Notice that the letter T in Text is capitalized, F in Field as well as the S in Scroll here. Now, if you open up the TextScrollExample.as file in the Work Files Folder, as well as the Text underscore Scroll.fla file in the Work Files Folder, you'll see an example of a text field with a set size that contains more text than the field can display at one time. The user then click on the text field to display the next text by actually scrolling that text vertically. If you go ahead and open up the TextScroll.fla and do a Control Test Movie, it'll feed in that script from the external ActionScript file. Here is my text field. Click on it and it brings in more text by scrolling that text in the vertical direction. Now, I've simplified this script to make the concepts easier but the normal interface for scrolling text would be either buttons here, maybe numbered buttons that indicate bringing in additional paragraphs or scroll. Normally you'd have a scroll here that would; then you could scroll the text manually. But the scripting is similar so I encourage you to first learn the scripts that I've included here in these examples and then go ahead and try different interfaces including the clicking on the buttons to make this text scroll and then try doing a slider. It may be combining the scripts that you learn for creating a volume slider with these scripts for scrolling text vertically or horizontally. Normally you'll want to scroll the text vertically. Horizontally scrolled text is really a no-no; very hard to read, very hard to use. But it is possible with those classes that I gave you. Let's go ahead and review our external ActionScript here. Let's start by importing the classes that we'll need here; the Flash.display.sprite semicolon, the FlashText.; and that star there indicates all of the text properties there that we'll need. Then right here I'm setting up my custom class. That's going to be the name, notice, of the external ActionScript file. Notice that I've saved this file TextScrollExample.as; capital T, capital S, capital E and it has to be the same name as the custom class as we've covered previously. Here is my text string; Hello VTC customers. Welcome to this script. Notice that it's very difficult to read there. I have to scroll all the way over there to the right. That's why you don't want to have horizontal scrolling. But I've added quite a bit of text there so that we can really see that text getting scrolled in the vertical direction. Here is my public function, Text Scroll Example called here. I'm setting up a text box called My Text Box, setting the width, height. This is important; multiline is true so it's more than one line in height. Word wrap is true so that text wraps so it doesn't extend all the way over to the right. Background is true. I put a border around it. The next section here is for formatting the text. Notice that I'm formatting it with ActionScript instead of using the Properties Inspector, setting up my font, size and color, using font sizes there in pixels and hexadecimal color there. I recommend you experiment with those values. Actually the entire script is written here. Let's just extend that down. You can see that this is a closing curly brace there. So you want to go ahead and if you need to copy this script, there's the entire script right there. You can pause the movie. The next section here is adding the text field to the stage using the Add Child Method right there, My Text Box, adding it to the display list and putting it on the stage. Then this here, My Text Box add event listener mouse down MouseEvent.mousedown, that's going to run this mouse down scroll function, which is really the most important part of this script as it relates to setting up the scroll. So here's a public function mouse down scroll and notice that there is really the key class right there. I'm taking My Text Box, which I've defined up here and I'm applying that scroll vertical plus plus each time I click and Flash detects a mouse down, it's adding to that scroll meaning in other words it's scrolling in the vertical direction so each time I click, it moves it up further and further. Now, to set up this interface properly, rather than clicking on the text box to scroll the text up and down, you probably want to set up some buttons. Notice that right here my add event listener that triggers the mouse down scroll is tied to my text box right there. Instead you'd want to create some buttons, set up event listeners for those buttons and then run this function, MyTextBox.scrollvplus+Right there. Go ahead and set up a button for scrolling the text up and then another button for scrolling the text down. Also don't forget that last curly brace right there at the bottom. It's kind of lurking down there. The script should end with those three curly braces like so. Up there is just the package call so let me bring that down and then you can go ahead and maybe pause this movie. There's the entire script that you'll need. Now, setting up the Flash file that will work with that external ActionScript file that creates the text field and then sets up the scrolling is really quite straightforward. Save in ActionScript 3 file and Flash. Give it any name you want. Click here outside of the stage, open up the Properties Inspector and then here in the class text field there put in the custom class that you're using. In this case it's the Text Scroll Example. That's the name of the external ActionScript file that we created. That's also the name of the custom class that we created inside of that ActionScript file. In this case the T must be capitalized, the S must be capitalized and the E must be capitalized. That's all you do. To test that you've set up everything correctly and all is ready, do a Control Test Movie here in that Flash file; not the ActionScript file but the Flash file. There is my text field; Hello VTC customers. So that's been set up correctly and then click inside of the text field to notice that it will scroll. It's a really useful one and then the last one is Thank you. Keep practicing. You may need to actually do that a couple times to make sure that that is scrolling. Again, that interface is not best. Notice that Hope you had fun is the last text bit there. Clicking on it, now notice that it's the is the last word and then the last one is Keep practicing. Let's now move on to the next section of the tutorial, working with XML. Flash includes classes for working with data formatted in the XML markup language so let me review those various classes and some techniques for integrating XML data into your Flash projects.
Tutorial Information
| Course: | Adobe Flash ActionScript 3.0 for Designers |
| Author: | James Gonzalez |
| SKU: | 34060 |
| ISBN: | 1-935320-82-3 |
| Release Date: | 2009-11-09 |
| Duration: | 9.5 hrs / 101 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 