Animated Image Map Fun Buttons

1 Open an image, something you have created or a photo to use as the background. Duplicate the layer.

2 To make buttons, select one of the following shapes, then rasterize it. Put several down and make sure to keep them on separate layers.
To create a STYLE for the button, follow the screenshots below making sure to name the STYLE once you have completed it.

3 With the duplicated background selected, hold the Control key down and click one of the fish or whatever you are using. Open Liquefy. Using the Twirl Clockwise tool and specifying a Brush Pressure of 100, (note: to enlarge and decrease the size of your brush in Liquefy, hold the Alt key down and press [ or ].) Begin applying a twirling effect. Do this to all the objects in your scene.

4 Close all of the layers except the background one that we have been using (the duplicated one) and one object, in this case, one fish. While the background layer is selected, click the Rectangle Marquee tool and create a rectangle that will surround one fish. Right-click the background layer and select Layer via Copy. This will create a separate layer with the rectangle on it. Do this for all the fish.

5 Select each rectangle and move them under each fish respectively. Now, here we want to create two more rectangles. Duplicate the first rectangle of one fish, apply Liquefy to it to create a little action. Duplicate this rectangle (the third rectangle) and again, apply Liquefy so that you have three in succession with a little more movement applied to each. This will be the animation.

When you have completed that series of tasks, then you'll want to create a separate folder for each set of fish and their rectangles. To do that, click on the file folder at the bottom of the layers palette. Begin to drag the fish and rectangles directly onto the folder until you see it turn color which indicates you're doing the right thing. Make sure you get all of the items for each set inside that particular folder. Go ahead and set up a naming convention and title each set appropriately.

6 Press the Image Ready icon at the bottom of the Tools palette to jump to Image Ready. Select the Slice Tool and begin slicing the images to create HOT SPOTS.

7 Open the Slice options bar and name the sections to concur with the original names of the sets. Also, if you have a URL to include, do it now.

To access the hot spot after you've created it, select the Slice Select tool.

8 Select Set One. Make sure that you have the corresponding graphic hot spot selected.

Open the Rollover options bar. Make sure you have the mouse off mode selected which in this case would be Layer 3 of Set One, the bottom layer, and I also have the Shape one layer open which is the fish.

TAKE NOTE: ONCE YOU HAVE CREATED ONE SET AND BEGIN TO DO THE NEXT SET WITH FRAME ONE HIGHLIGHTED OF THE SECOND SET, ETC., MAKE SURE ALL OF THE STATES OF THE PREVIOUS SET YOU JUST COMPLETED ARE THEN HIDDEN, OTHERWISE YOU COME UP AGAINST SOME INTERESTING EFFECTS.

9 Select New State in the upper right corner of the Rollover options bar. Hide Layer 3 and unhide Layer 3 copy. Repeat this procedure for the last state as well. So now we have three states: Normal, Over, and Down.

10 Save at this point. Now preview using Preview In.

11 Go ahead and complete all of the slices, save, and preview. Save as an HTML file.

Partners Flash Templates Free Web Templates FREE professional web templates Website templates Free Web Templates Graphic Design Tutorial Guide Flash Templates Flash Templates and Web Templates