16 January 2012
This article describes common mistakes to watch out for as you work with buttons to add interactive controls to your Adobe Flash Professional projects. Always remember to check your work by enabling Live View or previewing the page in a browser to test the buttons you create and verify that they are working as expected. When you implement it correctly, interactivity can create compelling experiences. But when websites and apps don't behave as users anticipate, it can make a project appear to be broken. Take the extra time to plan, design, and deploy UI elements and ensure that they are responsive and easy to use.
Button symbols contain four states by default, which are represented by the four keyframes that are displayed when you double-click a button symbol to edit it. These states are Up, Over, Down, and Hit. The first three states are visible to the user as they interact with the button.
Up represents the way the button graphically appears when the user is not interacting with it. Over represents the way the button graphically appears when the user hovers over the button, and Down represents the way the button appears to be pressed down as the user clicks it.
The Hit state is not visible to the user, but it is a critical state. The shape or graphic that you draw in the Hit keyframe represents the active area, sometimes known as the area of influence, for the button. If you draw a very small oval shape that is centered in the graphic middle of the button and test the movie, you'll notice that you have to roll your cursor into the small space in the middle of the button before it displays the Over or Down states. Only the area defined in the Hit state is activated by the user's mouse events.
If you do not add a Hit state at all and test the movie, the button appears to be broken because the mouse movements never cause the Over or Down states to appear. And if you create a much larger Hit state graphic than the button itself, the Over state will be displayed as the movie is played back even if the mouse appears to be far from the button graphic.
It's also important to add a much larger Hit state to buttons that are comprised of text elements, because if the text itself is used as the Hit state, the user will have to be very precise when hovering or clicking on the text that forms the Hit state. It is best to draw a rectangle in the Hit state that covers the entire string of text to make the button appear more responsive to the user.
You may find it helpful to choose Window > Common Libraries > Buttons and drag some of the prebuilt buttons to the Stage. Double-click the button instances to edit them and view their timelines to get a better idea how they are constructed.
To get more information about the Hit state in button symbols, read the Button symbol section of the Flash glossary.
When developing projects with ActionScript 3, if you attempt to add scripts to the keyframes of a button symbol's timeline, Flash Professional will present a message instructing you to only add ActionScript 3 to the frame scripts of the main Timeline. However, it is possible to add ActionScript 2 code to button symbol's timelines because originally that was permitted in Flash.
As Flash has matured, many conventions have arisen that developers follow when adding code to their projects. To make your projects easier to manage, follow these modern conventions when working with the older ActionScript 2 as well. Otherwise, team members may find themselves poking around and double-clicking every symbol instance as they attempt to locate the code. These days, for instance, many external classes are linked in a project, as well as adding frame scripts to the main movie's Timeline. Another important convention involves creating an Actions layer at the top of the layers in the main Timeline and only adding frame scripts in this top layer, rather than sprinkling the code throughout all of the layers in the main Timeline.
A common development motto is: Test early and often. This slogan is especially helpful to remember when creating buttons and rollover effects based on interactivity. You cannot test these elements while working within the Flash authoring environment, so it's important to choose Control > Test Movie > Test to review the project in the standalone Flash Player.
This strategy ensures that you can check the behavior of buttons and other elements (such as dynamic text fields) before publishing the final version. If you test your project after adding each incremental element, you have the added benefit of catching issues earlier in the development cycle, so that you can fix them before adding other features. The sooner you locate and address problems, the easier they are to resolve.
As you edit the Up, Over, and Down states of a button symbol, be especially mindful not to slightly move the elements in these keyframes. It is easy to accidently nudge them slightly, and then when you test the movie, you may notice that the Over or Down states appear to wiggle or shift out of alignment unexpectedly as you interact with the button.
If you are creating a custom button that is essentially the same for the Up, Over, and Down states, you may find it helpful to draw the Up state, and then click the Over state and press F6 to add a new keyframe (which copies the Up state graphic to the Over state). Repeat this step by clicking the Down state and pressing F6 again. After copying the states, you can carefully select each one to alter its fill color or other properties.
Another strategy is to create and then copy the graphic you've added to the Up state. Click the Over state keyframe and choose Edit > Paste in Place. This operation ensures that the pasted graphic is in exact alignment with the Up state. Repeat this process again to paste the graphic for the Down and Hit states, so that they are also perfectly aligned (see Figure 1).
And finally, you can also edit a button symbol and select each graphic one by one. As you select the Up state, check the
y properties in the Property inspector. Make a note of their values, and then click the keyframe for the Over state. If the graphic has shifted slightly, you can numerically align it by updating its
y properties in the Property inspector. Repeat this process to align the Down and Hit states.
Be sure to follow the guidelines suggested above when building navigation, linked buttons, and other inputs that are triggered by user's interactions. Strive to keep things as simple as possible so that users can easily navigate the content within the published SWF file. To research further, check out the following resources:
Refer to Avoiding common authoring mistakes to find links to other articles in this series.