Advertisement
  1. Code
  2. Flash
Code

Quick Introduction: Flash Button and Label Components

by
Difficulty:BeginnerLength:ShortLanguages:

Welcome to a series of Quick Tip lessons in which we'll learn about components in Flash Professional CS5. In this week's tutorial we'll be learning about the Button and Label components.


Brief Overview

In the SWF you see two buttons and two labels. When you click on the top button the Label will update with how many times you have clicked the button. The bottom button acts like a toggle with an on and off state. When you click the bottom button the label changes to show whether the button is on or off.

The bottom label allows different colors in the same text. This is achieved by inserting HTML in the text (which we will also cover in this tutorial).


Step 1: Setting up the Document

Open a new Flash Document and set the following properties:

  • Document Size: 550x400px
  • Background Color:#FFFFFF

Step 2: Add Components to the Stage

Open the components window by going to Menu > Window > Components or press CTRL+F7

Drag two buttons and two labels to the stage.

In the Properties panel give the first button the instance name "basicButton". If the Properties panel is not showing go to Menu > Window > Components or press CTRL+F3

Set the button's X to 86.00 and its Y to 107.00.

In the Properties panel give the first label the instance name "basicLabel".

Set the label's X to 239.00 and its Y to 107.00

In the Properties panel give the second button the instance name "toggleButton".

Set the button's X to 86.00 and its Y to 234.00

In the Properties panel give the second label the instance name "htmlLabel".

Set the label's X to 239.00 and its Y to 234.00


Step 3: Import the Classes

Create a new actionscript file and give it the name Main.as. We will be declaring our components in Main.as so we need to turn off "auto declare stage instances", the benefit of doing this is that you get code hinting for the instance.

Go to Menu > File > Publish Settings. Click on settings next to Script [Actionscript 3.0]

Uncheck "Automatically declare stage instances".

In the Main.as Open the package declaration and import the classes we will be using.

Add the following to the Main.as:


Step 4: Setup the Main Class

Add the class declaration, extend MovieClip and set up our constructor function. Add the following to Main.as:


Step 5: Main Constructor Functions

Here we'll define the setupButton() and setupLabels() functions.

In the code below we use the htmlText property of the Label; this allows us to insert HTML into the text string. It should be noted that Flash only supports a limited set of HTML tags; check out the livedocs for a list of supported HTML tags. We'll use the <font> tag to alter the color of the text.

Add the following to the Main.as


Step 6: Event Listeners

Here we'll code our Event Listeners we added to the Buttons. Add the following to the Main.as:

Then, close out the class and package declarations with two closing curly braces.


Conclusion

Using Button and Label components is a simple and fast way to have fully functional buttons and labels without having to build them yourself.

You'll notice in the Component Parameters panel of the components that you can check and select certain properties.

Button component properties.

Properties for the Button Component

  • emphasized: a Boolean value that indicates whether a border is drawn around the Button component when the button is in its up state
  • enabled: a Boolean value that indicates whether the component can accept user input
  • label: the text label for the component
  • labelPlacement: position of the label in relation to a specified icon
  • selected: a Boolean value that indicates whether a toggle button is toggled in the on or off position
  • toggle: a Boolean value that indicates whether a button can be toggled
  • visible: a Boolean value that indicates whether the component instance is visible

Properties for the Label Component

  • autoSize: indicates how a label is sized and aligned to fit the value of its text property
  • condenseWhite: a Boolean value that indicates whether extra white space such as spaces and line breaks should be removed from a Label component that contains HTML text
  • enabled: a Boolean value that indicates whether the component can accept user input
  • htmlText: the text to be displayed by the Label component, including HTML markup that expresses the styles of that text
  • selectable: a Boolean value that indicates whether the text can be selected
  • text: the plain text to be displayed by the Label component.
  • visible: a Boolean value that indicates whether the component instance is visible
  • wordWrap: a Boolean value that indicates whether the Label supports word wrapping

The help files are a great place to learn more about the component properties you can set in the Component Parameters panel. Here are the livedocs pages for the Button and for the Label.

Thanks for reading and watch out for more upcoming component Quick Tips!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.