Flash Components

This page is about the DEFAULT flash components that comes with it right out of the box. You can obviously download many other components in the world, but it is sometimes handy to use the defaults while building something as a mockup or wireframe. This is pretty much like how you can make form elements in HTML.

If you go to Window under the menu, you will see Components and Component Inspector in the dropdown-menu.


 * Command-F7 or Ctrl-F7 (win) will bring up the Component Panel.
 * Command-Shift-F7 or Ctrl-Shift-F7 (win) will call up the Component Inspector - you won't have to use this in AS3 but you would have used it in AS2 a lot more



You will see the above button



And this panel. Yes, all these are working out of the box. You can drag them into the stage and publish them. And play with them, although at this point they don't do anything because no functions or data have been hooked up to it. But the component with all its little finnicky moving parts is there.



Try publishing them without doing anything. You will see that you can press and play with them and they are moving!

You can hook them up with functions and data manually, or with actionscript.

Button Component Example
Let's use the humble button as an example.

Manual

 * Drag a button over from the Components Panel to your stage.
 * When you first drag it to the stage, it will say "Label" by default.
 * With your new button still selected, open the Properties panel. You will see Component Parameters at the bottom.
 * Edit the word inside the box for Component parameters > Property > Label. For example, here I have typed "WOW!!!" into label, so now my button looks like this.




 * Most of the components can be edited manually this way under Properties. The rest of the parameters are usually self-explanatory.

Actionscript
Create another layer and a blank keyframe. Add this line to the actions for this keyframe.

defaultButton.label = "WOWOWOWOW!!!";

See how the button magically changes from WOW!!! to WOWOWOWOW!!!

All the properties work this way. Like for all symbols/instances, you assign it a name, and then you can assign it properties! The exact spelling of the property under the Component Parameters is the same word you type. For checkboxes, they are either true or false. For text field values, they are obviously words/strings which should have quotation marks around them. For dropdown selections, you have to type that EXACT property in.



You will notice that this WOWOWOWOW!!! button is a bit short. So my words are being truncated. But you can apply every sort of property to this button too! You can change its width, height, and x and y position. Change the code to the following.

defaultButton.label = "WOWOWOWOW!!!"; defaultButton.width = 200;



Much better now!

Tip: Experiment with the values of the other components!