Now for the last part of this tutorial. We'll use Macromedia Flash to make navigation on our layout. This part will be the most time consuming, and probably the hardest. I use Flash 5 and MX, so either one will work... although the options may be named slightly differently. In this tutorial, I'll be using Flash MX. We hope to add some flashy buttons that change color when hovered on, and have sexy sounds that play when hovered as well.

1. First off, open up Macromedia Flash. Goto the top, and do File >> Import. Now select your image. After that, goto Insert >> Convert to new symbol. Select "Graphic", change the name from Symbol 1 to Graphic, and hit okay. Now your image is a graphic, and will take less loading time (click to see step). Once done, goto Modify >> Document and hit "Contents". The width will be right, so now hit OK and move your image up to the top of the flash document, and go back to Modify >> Document, and hit contents again. Keep doing this untill it's the perfect size. Now hopefully your flash document should be the same size as your image you made in Photoshop. If your still confused or it hasn't worked, just try to get it as close as possible... and keep moving your image around to fit perfectly (see image below for step).

2. Now we've got everything setup and we're ready to start the buttons. For this, there could be easier ways to do it.. but this is the way I was taught. Start out by making a new layer (see image below), and using the text tool make some words (i suggest going to window >> panel sets >> designer [1024 x 768]. it gives you the tools you'll use most). Type anything you want, but i'll use ABOUT. Look around for you're font options (mine are at the bottom in a long box), and change it around. I'm using a futuristicy font (Nowdance), at size 22 or so... color black. Once all decided, put it on the top center of your navigational box we made in photoshop. Now (while having the font still selected), go up to Insert >> Convert to new symbol, and make it a Button. Name it "About Button" or something. Pretty much anything you make will need to be converted to an image, or button.

3. Lets do button effects now! How about when you hover over it, the button changes color and plays a noise? Sounds good to me! First off, you'll need to download this sound (or use your own. i got mine from flashkit.com). Goto file >> import and chose your sound. Double click the ABOUT button using the black arrow on the tool panel. Look up at your timeline now, and it should have different columns now. See the Up, Over, Down and Hit columns? Right click each frame inside those columns and select Insert Keyframe (click to see). Now highlight the Over column, and go down to you're font box again. Change the font color to another color, mine is blue. After that, highlight the Down column, and find you're shape tool (on your tool panel). Draw a square over the word (see image below for details). Now when you want to hover over the image, it will be colored! For the sound part, select the "Over" frame. Hit CTRL and L to get the library window up. Select your sound, and drag it over to the word. Let go of your clicking once on the center of the word (see image below). Hit CTRL and ENTER on your keyboard to try out your movie so far.

4. To get back to your main movie, look under the timeline for a little bar that has Scene one, and About Button (button name) on it, click scene one to go back. Do the same step as above to all of the buttons you want on the layout, making sure they are all on seperate layers, evenly spaced, and converted to buttons. You could try some funky effects and make them all have different sounds or colors, but I'm going to just stick with them all being the same. Click the image below to see what I have done, in flash format. Now it's time to link our buttons! Goto the button you want to link first, and right click it. Hit actions, then Browser/Network, then getURL (click to see). Put the URL you want in the box, and hit the ex. Do this to all of your buttons now, then hit CTRL and enter to try it. If you want a link in a new window, put anything in the "window" box, which is like the target.

     I think we're done this tutorial! Remember, if something hasn't worked out for you... don't get frustrated. Everything takes time and practice, so keep trying at it. I hope you atleast learned some new techniques, so you can now go on and create some new effects to enhance your website. Eventually, you'll get it and understand each program more and more, I just broke the surface with this tutorial. Back