Skewed Buttons

A "sloped" or "skewed" button array can cause problems when you intend to build in a roll-over effect. This is because rollovers generally use rectangular "slices" to generate the rollover images, and any rectangular slice placed over a COMPLETE skewed rectangle will cover parts of the preceding and following rectangles too! Obviously, you can get around this problem by separating your buttons, but suppose you don't want to?
Suppose you want them snuggled up to each other, like the examples above?
Here's how you do it! (This method is also valid for any "non-regular" shaped images).

Open a new canvas and create your skewed button array, like so:

This simple example was created by drawing a rectangle on the canvas and then selecting the options MODIFY>TRANSFORM>SKEW. By clicking the top-middle "grab-handle" which appears on the graphic, you can skew the image left or right. I then selected the "Arrow" tool and ALT/CLICK/DRAGGED the new button to create duplicates alongside the original.

At this point, you should enter any text labels you require on your buttons.

Next, open the Frames panel, and click the arrow at top-right of the panel. Select DUPLICATE FRAME from the options which appear, as shown here:

In the dialogue box which now opens, choose to create the appropriate number of duplicate frames (ONE for each button in your menu!), like so:

You should end up with 4 frames in total, for a 3-button menu. ONE original, plus THREE duplicates.

O.K., so now click Frame 2 in the Frames panel. We won't be touching Frame 1, as it shows the entire menu in it's "Up" state. Click to select the first button on the canvas and change the fill colour or apply any desired effects as required, like this:

Now click Frame 3 in the Frames panel and, as before, change the fill colour for the second button, as here:

Repeat this step for each Frame/Button in your nav menu.

When you are done, click back to Frame 1, click EDIT>SELECT ALL, then click INSERT>HOTSPOT. Answer "Multiple" to the question which pops up and you should now have something like this:

Next, select the "Slice" tool from the Toolbox and draw a slice completely covering your menu, as below:

It may be a good idea to rename the slice by unchecking the "Auto-name Slices" option in the "Optimize" panel and typing in a suitable name. It's up to you, really!

The next step is to open the "Layers" panel. You should see something like this:

We are going to use this to link the hotspots to the overlaid slice and set the "Image Swap" behaviour and we do it like this:

Click the first hotspot entry in the panel. A small white "Behaviours" button will appear in the middle of the hotspot on your canvas. Click this button and select the "Swap Image" behaviour, like so:

A new dialogue box will now appear. Click the slice shown in the box (we only have ONE slice in our image, so you can't go wrong with this one!), as below:

Then accept the default settings, showing "Frame 2" as the source of the swap image by clicking O.K. You will now see a "link" appear on the canvas, tying the hotspot to the slice, like so:

Repeat these steps with the second and third hotspots, but this time, change the source to "Frame 3", "Frame 4" (etc., depending on how many buttons you have!), as shown here:

And when you've done them all, you're ready to rock! Preview your work by hitting F12. Cool, eh?

Then off you go...

Save and export your file!