Dynamically Attaching Components

Its pretty straight forward for any flash user to drag a component onto the stage from the components panel and change its parameters. What if you want to attach one of the components onto the stage with actionscript, during your movie and have it function as it does when it is simply dragged on the stage?

Lets take the Flash MX Scrollbar Component as an example. We want to be able to attach any number of scrollbars onto the stage, whenever we need one, with actionscript.

So, open flash and create a new flash movie.

Open the components panel and make sure you have the ‘Flash UI Component Set’ open, if you dont, then select it from the list in the top right hand corner of the panel.

Drag an instance of the ‘ScrollBar’ component onto the stage. This will place all the symbols the component requires to function correctly in your movies library.

Now we move to your movies library, select the main symbol for your component in your movies library, in the case of this example, the component symbol is named ‘ScrollBar’ and is located in the ‘Flash UI Components’ folder as are all, Official Macromedia Components. Right-click the selected symbol and choose ‘Component Definition’ from the menu. A panel will open, in the ‘Parameters’ field, you will see listed, all of the parameters that the selected component symbol in your library accepts, in our example, you should see that the ‘ScrollBar’ component requires to parameters to function correctly, Target Textfield and Horizontal.

Now, with the knowledge that this component, the ‘ScrollBar’ component, requires the parameters listed in the ‘Component Definition’ panel to function correctly, we are well on our way.

Parameters have a ‘Name’ and a ‘Variable’ associated with them, the ‘Name’ is basically an identifier which is meant to be descriptive of the value you will be entering, so for example Target TextField, tells the user that will be entering a Textfield name of some kind. The ‘Variable’ is the name of the actionscript variable that will be placed inside of the component symbol instance when the movie begins to play, along with the associated value that the user of the component enters in either the ‘Component Parameters’ panel or the ‘Properties Inspector’ panel.

The ‘Variable’ is what we will be needing to make our Components function correctly.

As i said previously, there are two Parameters that the ‘ScrollBar’ component requires to function correctly, because we wont be able to enter the values for these parameters, when we attach the component symbol, from our library onto the stage, with actionscript, we need to know the variable names for each of these parameters. A quick look at the ‘Component Definition’ panel, tells us that the variables are _targetInstanceName and horizontal.

Now we need to know, what type of value, these two parameters are, we dont want to pass a string as a parameter when it is expecting a number. To find this out we look at the ‘Type’ attribute for each parameter. In the case of our example, the Target Textfield should be a string, and the Horizonal parameter should be a Boolean Value, true/false.

We now have all the information we need to attach our component dynamically onto the stage with actionscript, there is just one more thing we need to know and that is the ‘Linkage Identifier’ for the component symbol. To find this out, you need to select the component symbol in your library again, in this example the symbol name is ‘ScrollBar’ and as i said previously, it is located in the ‘Flash UI Components’ folder. You then need to right-click and choose ‘Linkage’ from the menu. Look in the ‘Identifier’ field and you will see a string, which we will be needing in a few moments, in this example, it should say ‘FScrollBarSymbol’ this ‘Linkage Identifier’ is based upon standards/best practices which Macromedia are trying to preach/set, which you can read more about here.

Now lets get down to the final stage. To attach a component onto the stage with actionscript, you need an instance of the component in your library along with all the associated files, you need to know the ‘Linkage Identifier’ for the component symbol and you need to know the ‘Variable’ names for the parameters the component requires.

To attach our component onto the stage we will use the Movieclip.attachMovie method, this method requires three arguments and has one extra optional argument, which this process requires. To attach a symbol onto the stage the attachMovie method needs to be given, the ‘Linkage Identifier’ for the component symbol, an instance name which will be assigned to the symbol instance and a depth to place the new movieclip on. In Flash MX, you can now pass a fourth, optional parameter, which is an object, containing properties which you want to be copied over to the the new Movieclip Object when it is created.

As you should now know, all components require certain parameters to function correctly, these parameters need to be defined inside of the component symbol before the Constructor of the component class is executed, we will therefore use the fourth argument of the Movieclip.attachMovie method to initalize our component instance with the variables it requires to function properly.

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.