Working with Smart Clips
- Getting Information from Smart Clips
- Passing Data to Smart Clips
- About This Article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Need radio buttons, check boxes, or menus for your interface but don't want to hassle with building them yourself? Fear not, Flash offers these common elements as ready-made smart clips. Smart clips provide plenty of power without requiring complex programming. Macromedia-authorized Flash trainer Jody Keating shows you how to harness that power by simply passing parameters.
What is a smart clip? A smart clip is just a special movie clip built in Flash that's been designed so that you can pass information (parameters) into it to customize it. All the ActionScripting is already done for you, you just toss in some values, shake it up and out pops a customized movie clip. In other words, smart clips allow you build, reuse, and share movie clips.
The beauty of smart clips is that you can build complex logic into a smart clip and then never have to go back in and touch the ActionScript again. In fact, if you're using a smart clip created by someone else, you don't ever have to think about the ActionScript at all.
Three smart clips come pre-installed with Flash 5: RadioButton, CheckBox, and Menu. Radio buttons, check boxes, and drop-down menus are all items that are frequently used in HTML but are actually complex to implement in Flash. Because these have been pre-coded as smart clips, you can use them in any of your projects without ever having to worry about the code behind them.
That's all well and good, but now what? How do you get information you can use from these smart clips so that you can actually do something?
Getting Information from Smart Clips
Take a look at the Description pane of the Clip Parameters panel for the RadioButton smart clip. You'll see two sections, the Parameter info and the API Method Summary (see Listing 1 below).
Listing 1 - The Clip Parameters Panel for the RadioButton has Two Sections in the Description Pane: Parameter Info and API Method Summary
Parameter info:
_name - make sure is set to unique instance name
checked - set to true to start out checked
label - the wording that the end user sees
API Method Summary (ex: _name.setLabel("This is cool");)
Name Description
======================================================
getLabel() Gets the label of this checkbox.
getState() Determines whether this checkbox is in the
"on" or "off" state.
isRadioButton() Returns true for objects which are radio buttons.
setLabel(String) Sets this checkbox's label to be
the string argument.
setState(boolean) Sets the state of this checkbox to
the specified state.
The Parameter info section tells you a little bit about the parameters that you pass into the clip. The API (Application Programming Interface) Method Summary is even more interesting. This tells you what functions have been built into this smart clip. Pay attention, you can use these functions to control the behavior of the smart clip. You can also pass the values returned by these functions into variables you create in your Flash movie.
The RadioButton smart clip has five built-in functions:
getLabel(): Gets the label.
getState(): Checks to see if the radio button is selected (true) or not (false).
isRadioButton(): Returns a value of true if this is a radio button.
setLabel(String): Lets you set the value of the label dynamically.
setState(Boolean): Lets you set the state (true or false) of the radio button.
The parameters and functions are almost identical for the RadioButton and CheckBox smart clips. The one exception is that the CheckBox smart clip does not have an isRadioButton function. If you try and call that function for a check box, you'll get a value of false because the function doesn't exist.
TIP
If you want to use more than one set of radio buttons, you'll need to group each set of smart clips inside a separate movie clip, otherwise Flash will only allow one radio button to be selected. The same holds true for check boxes and menus.
So how do you use those built-in functions? Getting information from the smart clip is the easiest place to start. Each radio button has a unique instance name: radioBox1, radioBox2, or radioBox3. To call one of the built in functions for a radio button, just use dot syntax and then pass the value returned by the function into a variable. In the next exercise, you'll do just that.
Exercise 1 - Getting Information from RadioButton Smart Clips
The first thing you'll do is put a placeholder for a variable on the Stage, so you'll actually be able to see the values returned by the functions.
-
Open keating1_ex1.fla from the web site. Select the Text tool and draw a text box under the first radio button.
Open the Text Options panel. Change the following settings:
Text Type: Dynamic Text Line Type: Single Line Variable: firstButton Border/Bg: Selected HTML: Not selected Selectable: Not selected
Make two duplicates of the text box you just drew, and position the duplicates under the other two radio buttons. Change the variable names to secondButton and thirdButton, respectively.
Select the Test Me button on the Stage and open the Actions panel. Make sure the panel is labeled Object Actions, otherwise you accidentally deselected the button when you launched the Actions panel. Add the following code:
on (release) { firstButton = radioBox1.getState(); secondButton = radioBox2.getState(); thirdButton = radioBox3.getState(); }What does this do? When you click on and release the Test Me button, you make a call to the getState() function for each of the instances of the radio button on the Stage. (See Figure 1.) You pass the returned values into variables.
Figure 1 - You can use a dynamic text box to show the values of the parameters being passed to and from your smart clip. This is helpful when you are still in testing and debug mode.
Test your movie. Before you select any of the radio buttons, click the Test Me button. The first two dynamic text boxes you set up should have a value of false displayed, the third text box should show true.
Now try selecting one of the other radio buttons and clicking Test Me again. Whatever radio button you selected should have a value of true in the corresponding text box.
){kind=link}
You can do exactly the same thing for the getLabel() and isRadioButton() functions. Once you have those values in variables, you can do whatever you want to do with them.