Scrolling Text Fields


Many times when you fill text fields with information, the text field just is not large enough to handle it all. You can, of course, make the text field larger, but you can also scroll the text. Scrolling the text will allow you to keep the text field the original size, but still be able to display all of the information.

You can scroll a text field two different sets of directions with two different properties. The first is the scroll property, which controls up and down motion and starts at position 0. The second property is the hscroll property, which controls left and right scrolling and also starts at position 0. And both of these properties have limits, which are maxscroll and maxhscroll oddly enough. With these properties, you can control the positioning of text in text fields.

Let's jump right in with an example of using the scroll property.

1.

Start a new Flash document.

2.

Create two more layers, and name the top layer actions, the middle layer buttons, and the bottom layer text.

3.

In the text layer, create a dynamic text field about 200 by 100 with the Show Border option turned on, change the line style to Multiline, and give it an instance name of info_txt.

4.

Then go into the actions of the first frame of the actions layer and set info_txt.text equal to the preceding paragraph (or any large amount of text).

5.

Now when you test the movie, you should not be able to see all of the text in the text field because the text field is too small. We are going to fix this by making it scroll.

6.

Go into the buttons layer, create two buttons with instance names of up_btn and down_btn, and place them beside the text field as in Figure 15.9.

Figure 15.9. Position the scroll buttons beside the text field.


7.

Now go back into the actions layer, and put these actions in under where you set the text to the text field:

 //this will control the upward motion up_btn.onPress=function(){      if(info_txt.scroll != 0){           info_txt.scroll;      } } //this will control the downward motion down_btn.onPress=function(){      if(info_txt.scroll < info_txt.maxscroll){           info_txt.scroll++;      } } 

Now test the movie to see that the scroll buttons are working.

Now that you can scroll text, let's take a step further and use the Mouse Wheel Event.

The Mouse Wheel Event

Back in Flash MX, if you wanted to make text fields scrollable by using the wheel mouse, you had to do some fancy JavaScripting. Now it's as easy as hovering over the text field and spinning the mouse wheel.

Going back to our preceding example, save the file somewhere, publish it, and then open up either the .html or the .swf file, hover over the text field, and scroll the text field with your mouse wheel.

But you don't need a text field to get the event. Here is an example that will actually listen for the event, and tell you how fast and which direction the mouse wheel is going.

1.

Create a new Flash file.

2.

Open up the actions in the first frame and place these actions inside:

 //create an object to listen for the event var wheelListen:Object = new Object(); //add the event to the object wheelListen.onMouseWheel = function(amount) { //send the speed and direction to the ouptut window      trace(amount) } //add the lisenter to the Mouse Object Mouse.addListener(wheelListen); 

Now test the movie (and remember to click on the stage in test mode). When you move the mouse wheel up and down, it will send the speed to the Output window. All positive numbers are scrolling up on the wheel, and all negative numbers are scrolling down on the mouse wheel.

In the next section, we are going to cover HTML text in text fields, which isn't really new because we used some HTML text when we were applying StyleSheet objects.




Macromedia Flash Professional 8 Unleashed
Macromedia Flash Professional 8 Unleashed
ISBN: 0672327619
EAN: 2147483647
Year: 2005
Pages: 319

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net