Adjusting the Dimensions of Components with Live Preview

Let's move on to the Button Width and Button Height parameters. Enter a value of 130 for the Button Width parameter and a value of 40 for the Button Height parameter. Now look very carefully at the button on the stage. Notice the blue outline Flash uses to indicate that an item on the stage is selected. Notice that the button has been resized so that there is a little bit of the button to the right of the blue outline and a little bit of the button below the blue outline (see Figure 4.13).

Figure 4.13: Dimension changes for the button will be reflected on the stage, but the selectable area for the button remains the same.

This is a slight shortcoming of Live Preview in Flash MX. The blue outline designates the selectable area for the instance of the PixelButton component on the stage. This is the default size of the component instance. The selectable area is largely determined by the Flash movie used to generate the Live Preview in Flash. The selectable area of the component is the default size of the component in the Live Preview Flash file.

When the movie is published, the button works as it should. Every visible part of the button responds to interaction. However, when you're working within Flash, the instance of the component is only selectable within the original area, marked by the blue outline.

To see this, close the Component Parameters panel for a moment. Now try to click the instance of the PixelButton component that we've been working on. However, try to click only toward the right edge or the bottom. You shouldn't be able to select the instance of the PixelButton component along the right edge or the bottom. If you try to click it anywhere in the center or toward the top or to the left, you should have no problem.

This is just one little thing you will need to watch out for when you are working with components that utilize Live Preview. In the end, it's really only a minor, quirky behavior that you need to look out for when you change the dimensions of a component that uses Live Preview.

Now select the instance of the PixelButton component that we have been editing and, on the Component Parameters panel, click the Next Page button twice. Return the values of the Button Width and Button Height parameters to 120 and 30 respectively. Now change the value of the Band Spacing parameter to 5 (see Figure 4.14).

Figure 4.14: The Band Spacing parameter determines the width of the outer bevel.

Notice that when you increase the value of the Band Spacing parameter, it pushes into the button area. You can specify anything from 2 through 50 for the value of the Band Spacing parameter. However, large values may not look very good. For example, change the value of the Band Spacing parameter to 15. With a value of 15, there's almost no button left, which does not look very good (see Figure 4.15).

Figure 4.15: The outer bevel can push too far into the button if you specify higher values for the Band Spacing parameter.

Change the value of the Band Spacing parameter back to 2. Now click the Next Page button. The first parameter on the last page of the custom UI for the PixelButton component is called Action Type. This parameter is a little different than any parameter we've covered so far. The value of the Action Type parameter determines what remaining parameters will appear. For example, select Load Movie from the drop-down menu on the Action Type parameter (see Figure 4.16).

Figure 4.16: When you select Load Movie for the value of the Action Type parameter, the parameters related to Load Movie appear.

Notice that the parameters below the Action Type parameter change when you select Load Movie, to Load Movie SWF and Load Movie Level.

Now change the value of the Action Type parameter to URL. The parameters below the Action Type parameter should be URL and URL Window (see Figure 4.17).

Figure 4.17: When you select URL for the value of the Action Type parameter, the parameters related to loading a URL appear.

As you might expect, the URL field allows you to enter a URL. Go ahead and enter a URL in the URL field, such as http://www.flashfoundry.com. Notice that it is important to include the full URL, including the http://.

The default value for the URL Window parameter is _self. This will cause the URL to load into the current browser window. If you want the URL to load into a new browser window, you can change the value of the URL Window parameter to _blank.

You will learn more about working with the Action Type parameter in the next chapter. In the next chapter you will learn how to use simple ActionScript commands for controlling basic navigation with components as well as how to use Load Movie with the components.

Now that you've worked through all of the parameters for the PixelButton component, go ahead and close the Component Parameters panel.