Guy Watson

This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.

View all articles by Guy Watson

So firstly we need to create our initialization object with actionscript, in this example, the initialization object will contain the two parameters that the 'ScrollBar' component requires to function, _targetInstanceName and horizontal. As we found out earlier, _targetInstanceName has to be a string, and horizontal has to be a Boolean value: 

initialization={_targetInstanceName:"myTextField",horizontal:false};

Now all we need to do, is actually attach the component symbol with actionscript:

_root.attachmovie("FScrollBarSymbol","myScrollbar",2,initialization);

As you may or may not know, the 'ScrollBar' component is rather useless without a Textfield that it can be assigned to, so use this code to create a standard Textfield for the sake of this example:

_root.createTextField("myTextField", 1, 0, 0, 100, 200);
myTextField.wordwrap = true;

And use this code to add some text into the textfield:

for (i=1; i<=50; ++i) {
 myTextField.text += i+". Some more text, ";
}

Understanding the above code, is a whole seperate article.

So our actionscript now should look like this:

_root.createTextField("myTextField", 1, 0, 0, 100, 200);
myTextField.wordWrap = true;
for (i=1; i<=50; ++i) {
 myTextField.text += i+". Some more text, ";
}
initialization = {_targetInstanceName:"myTextField", horizontal:false};
_root.attachmovie("FScrollBarSymbol", "myScrollbar", 2, initialization);

We have placed the Textfield creation code before the code we use to attach our 'ScrollBar' symbol simply because, the 'ScrollBar' needs the Target Textfield to be present when it is initalized.

Lets just add one more line of code to clean up the visuals a little:

myScrollBar._x=myTextField._width;

That simply moves the scrollbar to the right of the textield.

Just for visual reasons, you might want to make the scrollbar the same height as the textfield, this is done automatically in the authoring environment, but you have to do it manually with actionscript when you are attaching a component from the library. The FScrollBar class provides a setSize method, that changes the height of the scrollbar without stretching any internal graphics:

myScrollBar.setSize(myTextField._height);

The final code looks like this:

_root.createTextField("myTextField", 1, 0, 0, 100, 200);
myTextField.wordWrap = true;
for (i=1; i<=50; ++i) {
 myTextField.text += i+". Some more text, ";
}
initialization = {_targetInstanceName:"myTextField", horizontal:false};
_root.attachmovie("FScrollBarSymbol", "myScrollbar", 2, initialization);
myScrollBar._x = myTextField._width;
myScrollBar.setSize(myTextField._height);

With any luck, when you test your movie, you should now have a full functioning scrollable textfield made with actionscript only. This process we have gone through applies to all components so its handy to know.

If you have any problems, just drop me a line and ill *try* to help.

Editor's note: You can find supplementary additions and comments regarding this tutorial on the original post at FlashGuru's MX 101. Thanks heaps to FlashGuru for this top quality tute!