Picture menu

Date: 5.4.2007, 0:32    Total views: 105055
Page:  1  2

Using this detailed lesson made for Flash, you will learn how to create advanced picture menu using the Action Script code. You can use this menu for any web sites, especially for some fashion, night club sites.....

In this lesson you will also learn:

1. How to import an picture in Flash,
2. How to convert a bitmap image into a Movie Clip Symbol.
3. How to use Free Transform Tool,
4. How to apply Action Script on menu and more.

Below is the picture menu example example of what you are going to create in this tutorial.



Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 222 pixels and the height to 250 pixels. Select white as background color. Set your Flash movie's frame rate to 36 and click ok.



Step 2

Download
the sample images for this tutorial that you'll use to quickly create this tutorial.

Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find the six images ( img1, img2....) and Shift-click to select them all. Then click Open.

Step 4

Go to to Library Panel by pressing Ctrl+L key on the keyboard. Now, you will see a picture that you just imported. See the picture below.



Step 5

Using the "drag and drop" technique, move the all pictures from the Library on the Stage. After that, Arrange them like it is shown on the picture below.



Step 6

Take the Selection Tool (V) and select the first picture. Then, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol. See the picture below.



Step 7

While the picture is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip picture1_mc.



Step 8

Double-click on the Movie Clip on stage (picture) with the Selection tool (V), or choose right click and Edit in Place.



You should now be inside the movie clip.

Step 9

While the picture is still selected, press again F8 key (Convert to Symbol) to convert this picture again into a Movie Clip Symbol. See the picture below.



Step 10

Click on frame 15 and press F6 key.

Step 11

Take the Selection Tool (V), click once on the picture to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button, set the following options and click ok:



Now you get this:



Step 12

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 13

Create a new layer above the layer 1 and name it title bar.

Step 14

Click on frame 10 and press F6 key. After that, take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #CCCCCC color and draw a "rectangle" about 100x12px and place it on the position like it is shown on the picture below.

Step 15

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.



Step 16

Click on frame 15 and press F6 key. After that, go back on frame 10, take the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.



Step 17

While you're still on frame 10, take the Selection Tool (V), click once on the rectangle to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

Next:  Part 2
  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar