Flash-MX: News

Using the UIScrollBar Component with a Dynamically Created Text Field

The new UIScrollBar re-introduced in Flash 7.2 (codename Ellipsis) with dynamically created text fields is actually fairly simple and straight forward. Basically it can be broken down into two main steps:

1. Drag an instance of the UIScrollBar component from the Components panel on to the Stage and then immediately delete it from the Stage by pressing the Backspace or Delete keys. This removes the component from the Stage, but leaves a copy of the component in the Library so you can dynamically attach later using ActionScript.

2. Create a new layer named actions in the Timeline and add the following code to the first frame of the new layer:

this.createTextField("news_txt", this.getNextHighestDepth(), 10, 10, 160, 120);
news_txt.html = true;
news_txt.multiline = true;
news_txt.wordWrap = true;
//
this.createClassObject(mx.controls.UIScrollBar, "news_sb", this.getNextHighestDepth());
news_sb.move(news_txt._x+news_txt._width, news_txt._y);
news_sb.setScrollTarget(news_txt);
news_sb.setSize(4, news_txt._height);
//
news_txt.htmlText = "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>";

You can break this ActionScript down into three small sections. The first section creates the dynamic text field and sets the html, multiline and wordWrap properties to true. The second section dynamically attaches an instance of the UIScrollBar component into the Stage and assigns it an instance name of news_sb. Next you call the move, setScrollTarget and setSize methods and resize and reposition the scroll bar to the right of the dynamic text field. Finally the last section of code assigns some HTML formatted text to the dynamic text field.

That’s it! If you publish your Flash document you should see some Latin text and have the ability to scroll the contents of the text field using the handy scroll bar. Thank you 7.2.

Posted by jen on August 30, 2004 at 07:06 AM