Pop-up panel in flash

See this tutorial and learn how to create a pop-up panel using the action script and two buttons. The first button will be open-up a pop-up panel on click and the second button will be close-up panel on click. You will also learn:

1. How to design pop-up panel,
2. How to convert it into a Movie Clip Symbol,
3. How to create Motion Tween and more.



Step 1

Create a new flash document and take the Rectangle Tool (R). Then, go to the Properties Panel (Ctrl+F3) below the stage and choose the following options:

1. Enter #706B30 for the stroke color.
2. Enter #EDECEC for the fill color.
3. Select Solid as the type of outline, with the line thickness set to 2.
4. Turn on the Stroke hinting option to get rid of any blurry edges while drawing.



Then, draw a rectangle that will be represent our pop-up panel and place it on the position like it shown on the picture below.





Step 2

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage again. Then, choose the follwing options:

1. Select a Static Text field.
2. Select any font, any size. For this example I have used Bernard MT Condensed font size 45px.
3. Select black as color



Then, type pop-up panel. See the picture below.



Step 3

Press Ctrl+A key (Select all) and after that F8 key (Convert to Symbol) to convert this pop-up panel into a Movie Clip Symbol.



Step 4

While the new made Movie Clip (pop-up panel) is still selected go to the Properties Panel (Ctrl+F3) again. On the left side, You will find the Instance name input field there. Call this pop-up panel: "popup_mc". See the picture below.



Step 5

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.



Step 6

While the pop-up menu is still selected, press F8 key (Convert to Symbol) to convert this pop-up menu into a Graphic Symbol.



Step 7

Click on frame 10 and after that on frame 20 and press F6 key.

Step 8

Go back on frame 10, take the Selection Tool (V) and place the pop-up menu on this position:



Step 9

Right-click anywhere on the gray area between the frame 1 and 10 and frame 10 and 20 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 10

Create a new layer above the layer 1 and name it labels.



Step 11

Click on frame 2 and after that on frame 11 and press F6 key.

Step 12

Go back on frame 2, and go again to the Properties Panel below the stage. On the right side, you will find the frame label input field. In that field type: "open". See the picture below.





Step 13

Do that also for rame 11, but this time, for frame label type close.



Step 14

Create a new layer above the labels layer and name it action.

Step 15

Click on frame 1 of layer action and go to the Action Script Panel (F9). Then, enter the following action script code inside the actions panel:

stop();
panelhidden = true;

Step 16

After that, click on frame 10, press F6 key, go to the Action Script panel again and enter the follwing action script code:

stop();
panelhidden = false;

Step 17

Go back on the main scene (Scene 1).



Step 18

After that, create two buttons (one button that will be open a pop-up menu and one that will be close it). See the picture below.



Step 19

Take the Selection Tool (V), click once on the "open" button to select it and go to the Action Script Panel (F9). Then, enter the following action script code inside the actions panel:

on (release) {
popup_mc.gotoAndPlay("open");
}

Step 20

After that, select the "close" button and enter this code inside the actions panel:

on (release) {
if (popup_mc.panelhidden == false) {
popup_mc.gotoAndPlay("close");
}
}

We're done!

Test your Movie (Ctrl+Enter).

Enjoy!

Download example