Interface Elements

The calculator in the previous exercise is a simple illustration of Flash's fundamental strength: the ability to create a custom interface. Standard online calculators appear with numeric keypads, but these are redundant—most people use the keyboard's keypad, not the one onscreen. Additionally, your Flash calculator can do something traditional ones cannot: perform other mathematic operations on the same two operands without re-entering them.

You can also create standard user interface elements such as check-boxes, drop-down menus, draggable windows, and scrollbars.

A CheckBox  

To create a simple checkbox, you could use a 2-frame movie clip, where frame 1 contains an unchecked box, and frame 2 contains a checked box. This box is actually a button: in frame 1 it sends the movie to frame 2; in frame 2 it send the movie back to frame 1 (this is a simple toggle control: jumping a 2-frame movie clip between its frames):

Clicking the square button in frame 2 of the movie clip sends the clip back to frame 1 (so if the square button instances are perfectly aligned from frame to frame, the only difference is the addition of the checkmark art in frame 2, and the user would have the sense of checking and un-checking the square (try it:  )

To create the checkbox:

1. In a new Flash file, create a button symbol named “Box”.
2. In the Up frame, draw a square stroked with black and filled with white.
3. Create a new movie clip symbol named “Check”.
4. In frame 1 of the check symbol, draw a red check mark using the Brush tool
5. Create a new movie clip named “CheckBox”
6. In frame 1 of the CheckBox movie, place an instance of the Box button on the stage, and give it the instance name “tickBTN”
7. Add the following ActionScript to frame 1 of the CheckBox movie:
   
8. OPTION-drag (PC users ALT-drag) keyframe 1 to frame 2 of the timeline (this duplicates the ActionScript as well as the frame contents).
9. Change the unstance name of the button to “untickBTN”.
10. Add an instance of the Check symbol on top of the button (this Check instance does not need a name since it will not be controlled).
11. Edit the ActionScript on keyframe 2 of the timeline to reflect the highlighted changes:
    
12. Return to Scene 1 of the main timeline, and place an instance of the CheckBox movie clip onstage.
13. Test the movie (CONTROL > Test Movie) and click the button.

Drop-down Menus

Creating a menu-driven interface is actually very simple and involves little more than creating a button:

To create a drop-down menu:

1. In a new document, create a symbol with button behavior named “Menu item”.
2. In the “up” frame of the Menu Item button, draw a rectangle the color you want your pull-down menu to be, stroked with black.
3. Add a keyframe to the “Over” frame, and fill the rectangle with a highlight color.
4. Add a keyframe to the “Down” frame, and change the fill to a darker color.
5. Create a new Movie Clip symbol called “drop-down” (when you do this, you will find yourself inside this new timeline; DO NOT return to Scene 1 until step 18 below!).
6. Drag an instance of the Menu Item button to the center point on the stage, and assign it the instance name “menuBTN”.
7. Type “Cool Flash Sites” on top of the button (as pictured above).
8. Add a keyframe at frame 2. Place another Menu Item button against the bottom edge of the original. You may stretch it wider using the Free Transform tool (make sure it can accommodate a “WaterLife.com” label). Name this button “item1BTN” (note that instance names may not begin with a number!)
9. Option-drag (PC users Alt-drag) it down to duplicate it. Place the duplicate so there’s no space between it and the original, and change its instance name to “item2BTN”.
10. Repeat the preceding step to create the third button named “item3BTN”.
11. Option-drag “Cool Flash Sites” straight down on top of the item1BTN. Edit the text to read “WaterLife.com”.
12. Repeat twice, writing “ecodazoo.com” and “Ocean Recon” on the item2BTN and item3BTN instances (as pictured above, when you click the Cool Flash Sites menu).
13. Add a new layer and name it “Actions”.
14. Open the Actions panel (WINDOW > Actions).
15. Enter the following script in frame 1 of the Actions layer:
    stop();
      function openMenu(MouseEvent) {
       nextFrame();
      }
      menuBTN.addEventListener(MouseEvent.CLICK, openMenu);
16. Option-drag (PC users ALT-drag) keyframe 1 of the Actions layer to frame 2 of the Actions layer (this carries the script with it and will save you some typing).
17. Edit the script in frame 2 to read:
    function closeMenu(MouseEvent) {
        prevFrame();
      }
      menuBTN.addEventListener(MouseEvent.CLICK, closeMenu);
18. Return to Scene 1 and drag an instance of the Drop-down movie clip from the library to the top of the stage.

When you test this movie, you can open and close the menu once, but then it stops working. This is due to conflicting event listeners (the menuBTN has had two event listeners attached, so it is executing both the openMenu and the closeMenu functions each time you click the button).

There are two solutions:

A) change the instance name of the menuBTN in frame 2 (along with the ActionScript to reference this new instance name)

B) remove one event listener whenever you attach another.

We’ll use the second solution, as it’s more versatile, and illustrates the best practice in ActionScripting (controlling your event listeners, rather than hacking instance names):

18. Add the following line of code to the beginning of the ActionScript in frame 1:
    menuBTN.removeEventListener(MouseEvent.CLICK, closeMenu);
19. Add the following to the beginning of the ActionScript in frame 2:
    menuBTN.removeEventListener(MouseEvent.CLICK, openMenu);
20. Add the following to the end of the ActionScript in frame 2:
    //get urls
    

The basic functionality of a drop-down menu is now present. Choosing any of the URLs in the menu opens the default browser, and loads the URL specified on each button. However the only way to close the menu is to click its title. This is bad usability. Normal menus close when you roll outside the menu without choosing any option, or when you click outside the menu. In the next process you will add either functionality to your menu, using an invisible button placed in frame 2 of the movie clip (in the menu’s open state):

21. Create a new button symbol named Invisible Button.
22. Insert a keyframe in the Hit frame of the timeline.
23. Draw a filled rectangle (size, stroke and color don’t matter).
24. Double-click the Drop-down clip in the Library (or select it from the Edit Symbols menu to the left of the view increment field at the top right of the stage).
25. On layer 1 of frame 2, place an instance of the invisible button on top of the whole open menu. Size it so it is larger than the whole menu.
    NOTE: invisible elements always display bright blue in the authoring environment—they will not show at runtime.
26. Give this invisible button the instance name “invisibleBTN”
    
27. With the Invisible button instance selected, choose MODIFY > Arrange > Send to Back.
    
28. Add the following to the ActionScript in frame 2:
    invisibleBTN.addEventListener(MouseEvent.MOUSE_OVER, closeMenu);
    
29. Test the movie (Command-Return on a Mac; CTRL-Enter on a PC).
    

To make the menu “sticky” (remain open after rolling outside it, and only close after clicking), use the “MouseEvent.CLICK” parameter in step 28 and size the invisible button to cover the entire stage.