Reusing and Repurposing Code with Smart Clips Flash

A new addition to the Library symbol types is the Smart Clip. A Smart Clip is a Movie Clip symbol that has been given a set of parameters that are easily accessed by the Clip Parameters Panel.

When would you want to use a Smart Clip? If you have any Movie Clip symbol that you use multiple times but would like to add unique settings (or properties) to, then a Smart Clip could be just what you need. For example, if you had a Button instance in a menu item Movie Clip and you want to reuse that same menu item symbol to point to different areas of your Flash movie, you have these options:

  • Make duplicate menu items symbols in the Library, for each use of the symbol. Each Button instance will have a unique hard-coded Go To action, such as:
  • Make a menu item symbol that uses an expression within the Button instance actions. Other ActionScripts will supply the values for this expression. (See our arrayMenu.fla example in the last.) The actions on the Button instance would appear as:
  • where frameLabel was set on the Movie Clip timeline by some other ActionScript code.
  • Create a Smart Clip menu item symbol that uses values from the Clip Parameters Panel to establish the values of expressions used within the Button instance code. The actions on the Button instance inside of a Smart Clip would appear as:
  • where frameLabel is defined by the Clip Parameters Panel for this specific instance. This method is by far the easiest for Flash designers who prefer not to get involved with complex ActionScripting. We demonstrate using a Smart Clip for a typical menu item symbol in the next section.

Usually, Smart Clips are most useful in a team production environment, in which the programmers on the staff design the ActionScripts, and Flash graphic artists create the movie elements and layout. The programmers would create the Clip Parameters for each symbol (and perhaps even a custom interface for the Clip Parameters Panel), and the designers would select and enter the values for each parameter in the Flash movie.

Adding parameters to a Movie Clip symbol
In this section, we create a Smart Clip symbol and then add a parameter to it. This symbol will be used for a menu system in a Flash movie.

  1. Create a new Flash movie, and set its background color to white and its frame rate to 20 fps, in the Modify Movie dialog (Ctrl+M or Command+M). Use whatever frame size you prefer.
  2. Save the Flash movie as smartClip.fla.
  3. Create a Main Timeline that has four sections, with the frame labels main, products, services, and contact . Add some placeholder artwork to keyframes for each section, and insert a stop() action at the keyframe of the first section.
  4. Make a new symbol by pressing Ctrl+F8 (PC) or Command+F8 (Mac). In the Symbol Properties dialog, type the name menuItem and keep the default Movie Clip behavior. Click OK. Flash automatically switches to Symbol Editing Mode.
  5. On the menuItem timeline, rename Layer 1 to button. In frame 1 of this layer, create a rectangular Button symbol, using any of the drawing tools. Or, you can use a Button symbol from the Buttons Library (Window➪Common Libraries➪Buttons).
  6. Create new layer on the menuItem timeline, and rename this layer textField.
  7. In frame 1 of this layer, create a Dynamic Text field whose length matches the Button instance that you created in Step 3. With this field selected, type name in the Variable field of the Text Options Panel, as shown below.

    The Main Timeline should demonstrate the layout of the Flash movie sections.

    Main Timeline should demonstrate the layout of the Flash movie sections.

    The name text field will be filled by a Clip Parameter.

    name text field will be filled by a Clip Parameter.

  8. Select the Button instance from Step 4, and open the Actions Panel. With the panel in Expert Mode, type the following actions into the Actions list:
  9. In this code, we specify an expression for the label that the gotoAndStop action will use. The expression is a variable named frameLabel. This variable will be added to the menuItem symbol as a Smart Clip parameter.

  10. Return to the Main Timeline of the Flash movie. Rename Layer 1 to menuItems.
  11. Open the Library window, and select the menuItem symbol. In the Options menu of the Library window, choose Define Clip Parameters. The Define Clip Parameters dialog opens.
  12. Press the plus (+) button at the top-left corner of the dialog. This will add a default varName parameter to the menuItem symbol (which is now a Smart Clip). Double-click the varName text, and replace varName with name. In the Value column, replace defaultValue with [type button text here]. Leave the Type column value set to Default. The Default value leaves this option as an editable text field in the Clip Parameters Panel, so that we can directly type the text for our menu item.
  13. Each parameter has three values: the name of the parameter (which is interpreted as an actual variable name in ActionScript), the value for that variable, and the type value which indicates how the value should be typed (string (default), array, object, or user-defined list).

    The Define Clip Parameters dialog enables you to enter name/value pairs for the Smart Clip.

    Define Clip Parameters dialog enables you to enter name/value pairs for the Smart Clip.

  14. Press the plus (+) button again, and rename the new varName entry to frameLabel. Then, double-click the Type column value for the frameLabel entry, and choose List from the drop-down menu.
  15. Double-click the Value column value for the frameLabel entry. A Values dialog opens . Click the plus (+) button to add each of the frame labels used on the Main Timeline. Surround each value with quotes—otherwise, Flash will look for variable names that have these names. Click OK to close the Values dialog when you are finished.
  16. You can define a static list of values to choose from the Clip Parameters Panel for each instance of the menuItem.

    You can define a static list of values to choose from the Clip Parameters Panel for each instance of the menuItem

  17. You have now defined two parameters for the menuItem Smart Clip. These will be accessible by each instance of the menuItem symbol. Click OK on the Define Clip Parameters dialog.
  18. You can continue to add more parameters to Smart Clip symbols, by going back to the Define Clip Parameters dialog and clicking the plug (“+”) button. Use caution, though if you place instances of a Smart Clip on the Stage and add more parameters later, then the old instances will not have those parameters available. You may need to delete the old instances and replace them with new instances to see the new parameters. In the next section, you’ll learn how to give unique parameter values to each Smart Clip instance in the Flash movie.

Assigning values to Smart Clip instances on the Stage
After you have created parameters for a Smart Clip symbol in the Library, you can start to use the Smart Clip in your Flash movie. The steps below will show you how to use the Smart Clip symbol we created in the last section.

  1. On the Main Timeline, drag an instance of the menuItem Smart Clip to the menuItems layer. With the instance selected, open the Clip Parameters Panel (Window➪Panels➪Clip Parameters). In the Value column of the name parameter, type the text that you want to appear on the menu item button for the main section. For our example below, we inserted the text Home. In the Value column of the frameLabel parameter, select main from the drop-down menu.
  2. The Clip Parameters Panel enables you to set unique values for the parameters that you defined for the Smart Clip.

    Clip Parameters Panel enables you to set unique values for the parameters that you defined for the Smart Clip

  3. Repeat Step 1 for each section of the Flash movie. For our example, we will have four menuItem Smart Clips, one for each section.
  4. Save your Flash movie, and test it (Ctrl+Enter or Command+Enter). Each button should show the proper text and take you to the appropriate section of the Flash movie.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics