Browse DevX
Sign up for e-mail newsletters from DevX


Master the Time-saving Power of Flash Components, Part 2 : Page 2

In part 1 of this series, you learned to build components that worked with multiple versions of Flash. In this follow-up you'll learn all the little extras that allow you to customize, extend, and distribute your components, for maximum ease and peace of mind.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Step 6: Add a Custom User Interface to the Properties Panel
Depending on how complex a component is, you may never need, or want, to define a custom user interface. In most cases, the scrolling list of component variables in the Properties Panel is enough. However, there may be times where you want to go beyond simple text input for your parameter settings. You may, for example, want to simplify number input by using sliders. Or, you may want to provide instant feedback in your custom user interface without relying on the Live Preview function we covered in Part 1. For example, our example custom interface will immediately display the alpha value of our component background, even when Live Preview is disabled.

Although this tutorial example doesn't need a custom interface, I want to demonstrate the process. However, I don't want to complicate the code by having to script additional interface widgets. So, for demonstration purposes, I will simply add a custom UI that will allow the user to enter the single parameter value required.

To improve the default Parameters panel Flash automatically creates for you, I will show what the Stamper looks like in the custom interface, as well. The Stamper is designed to automatically "stamp" your movie with a copyright symbol in the lower right corner. Since it may or may not be easy to see the results in your artwork, it's helpful to see what the stamp will look like while you adjust parameters. This technique is sometimes used instead of a Live Preview, because authoring with Live Preview enabled can affect performance. This is a judgment call, especially when the preview is as small as ours, and you can always enable, or disable, the Live Preview feature.

Figure 1. Custom UI: This is what the custom user interface looks like before...

Figure 2. Custom UI: This is what the custom user interface will look like when you're finished.

I'll start by duplicating the Live Preview file. This will provide the Stamper with artwork pieces that I can update dynamically within the UI. However, I need to change the dimensions of the movie to match that of the Properties panel. Use 406 x 72 pixels. When necessary, you can use any dimensions and display the movie in the Component Parameters Panel. (This is a separate window, not the "parameters" tab in the Properties panel.)

In addition to the foreground copyright symbol MovieClip, and the white background MovieClip, I want to add two things (see Figure 2):
  • First, a gradient background behind the artwork. This can just be a shape, and will show what the copyright symbol background will look like on a variety of colors.
  • Second, is a text input box for the alpha value itself. Create a text element on stage and give it an instance name (not a text variable name) of "alphaVal." (You may choose to use a variable in your own work, but this example uses an instance name.) Add a descriptive static text label that says "Background Alpha:"
Now move on to the scripting. Add the following code to the first frame of your file:

fscommand("allowscale", "false"); _root.uiStampBack.onLoad = function() { alphaVal.text = xch.sBackAlpha; cuiBack._alpha = xch.sBackAlpha; }; alphaVal.onChanged = function() { cBackAlpha = parseInt(this.text); _root.cuiBack._alpha = cBackAlpha; xch.sBackAlpha = cBackAlpha; };

The first line just prevents the file from being scaled while being viewed within the Flash UI panel.

The second segment is an initialization routine. Just as in the Live Preview file, it can automatically send information to, and receive information from, my component through the xch object. As before, this is automatic and I need only to reference the object. So, when this custom user interface is first displayed I want the most current alpha value from the component to appear in the field, and update the visual representation, in the user interface.

You may remember that the alpha variable in the component was called "sBackAlpha." So, I'll RECEIVE that from the xch object and put it into my text field using the .text property and its instance name. I'll also set the sample background MovieClip to this value at the same time. Finally, because I only want to do this once, I'll use the onLoad event handler for this clip's instance name. This keeps the code centralized and efficient.

alphaVal.onChanged = function() { cBackAlpha = parseInt(this.text); _root.cuiBack._alpha = cBackAlpha; xch.sBackAlpha = cBackAlpha; };

The third segment of code, repeated above for clarity, is used to SEND the user input back to the component. (Here, the xch object is on the left side of the assignment operator.) I'll use the onChanged eventHandler for this TextField's instance name so the xch object is only updated when the content of the text field is changed.

When that happens, the value from the input field needs to be converted into an integer, and put into the "cBackAlpha" variable. At the same time, I'll update the background to show the change, and send the data, through the xch object, back to the component variable, "sBackAlpha."

That's all there is to the custom user interface code. Save the file into the common directory (again, just for convenience), and test the movie to get a quick SWF. The last thing to do is add the custom UI SWF to the "Component Definition..." window. Open this dialog, as before, from the Library, and select the "Custom UI" Set button. Choose the external SWF option, so you can freely modify the file if problems are found, and browse to the SWF you just created.

Finally, to be sure the most current version is used, delete any previous versions of the component from the Stage, and drag a new version in from the Library. Now, any time you select that Stage instance of your component, the Properties panel parameters tab interface will be replaced by the new custom interface. When you modify the component, both the UI and the Live Preview (if enabled) on Stage will reflect the changes.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date