9. Audio:

A nice touch is when the buttons and bar slide back, that you hear some sound indicating the movement.

Go back to the buttonmenu and make a new layer named audio right under the action layer. Make a key frame at 21 and drag an audio clip from the Library on to the stage.

slide-up:
When someone clicks the menu button, the button will retract up and to the right under the image symbol. This is just the opposite of the menu going down, so we'll just use the same technique of copying frames and reversing them like you did before.

Open the buttonmenu for editing.  On the menu layer, select all the frames from 30 to 50.

Hold the Alt key and move the block to the right. With the block still selected, go to Modify / Frames / Reverse. Move the key frame with the stop() on the action layer to frame 70.

If you test your movie (Control / Test Movie ) your buttons and bar should slide to the right, then back to the left, and the menu button down and the up.

Check your progress

10. Windows:

Later, we'll set up the actions that control the whole sequence of events. Right now, we're still missing one piece of the puzzle: the window that closes and opens, used as a transition between different images.

Make a new movie clip symbol and name it windows. rename layer 1 as holder.  Drag the rectangle symbol from your Library on to the stage. Use the Info panel to set its width to 175 and height to 375. Use the Align panel to Align horizontal center and Align top edge. The graphic on this layer will be used later just to position the windows symbol on the main stage and then deleted.

It is important to set the color of your windows now  because later it won't be easy to change.
 

To change the Fill of the rectangle, open the Effects panel, select Tint from the drop-down menu and choose your color.

Let's quickly see how the windows will look on your main timeline.

Go back to the main timeline and make a new layer called windows. Add a key frame at 25 and drag an instance of the windows symbol on to the layer. Position it so it covers the images symbol.  Check the color. This is the way it's going to look when the window closes. If you are not happy with the color, go back to the windows symbol and use the Effect panel to change it.

Also, with the windows symbol selected, use the Instance panel to give it the instance name windows.

the right window:
The window will be situated right of center and close and open right to left.

In the windows symbol edit mode, make a new layer above holder and call it windowright.  Frame 1 will remain empty because the window is not seen until someone activates it.  Make a key frame on 2 and paste a copy of the rectangle symbol from the holder layer.  Use the Info panel to set its width to 87.5 and height to 375. Then use the Align panel to Align left edge and Align top edge. Make a key frame on 10 and 19.

This half of the window will tween from right to left. On frame 2, select the rectangle and use the Info panel to change its width to 1 and its X Coordinate to 87.5  Do the same on frame 19 and then make two motions tweens in the two regions. Use the Frame panel to set the Easing to 100.

This half of the window should now open close toward the center of the stage.

Check your progress

the right line:
Just like the earlier tweens you did on the main timeline, a nice touch is to add a line to precede the window tween.

In the windows symbol edit mode, make a new layer and name it lineright. Drag an instance of the line symbol from the Library on to the layer. Use the Info panel to set its X Coordinate to 87.5 and Y Coordinate to 0. Also, use the Effect panel to set its Tint.

Make a key frame on 10 and 19. On frame 10, set the X coordinate to 0. Make a tween in each region and set the Easing to 100.

Play (Enter) and the rectangle should close and open from right to left with the line preceding .

the left window:
The left window will be done the same way as the right except it will be situated to the left of center and close and open from left to right.

In the windows symbol edit mode, make a new layer and call it windowleft.    Make a key frame on 2 and paste a copy of the rectangle symbol from the windowright layer at frame 10. Then use the Align panel to Align right edge and Align top edge. Make a key frame on 10 and 19.

As mentioned, this half of the window will tween from left to right. On frame 2, select the rectangle and use the Info panel to change its width to 1 and its X Coordinate to -87.5  Do the same on frame 19 and then make two motions tweens in the two regions. Use the Frame panel to set the Easing to 100.

the left line:
Make a new layer and name it lineleft. Copy and Past the line from the lineright layer. Use the Info panel to set its X Coordinate to -87.5 and Y Coordinate to 0.

Make a key frame on 10 and 19. On frame 10, set the X coordinate to 0. Make a tween in each region and set the Easing to 100.

Play (Enter) your movie. The window panels should open and close.

Check you progress

To finish up, delete the holder layer, add an action layer and place a stop().