Workflow II

New and Improved!

This tutorial will teach you a few new things about Photoshop, a better way to handle rollovers, and you'll learn a number of new skills along the way. Here's the swf we'll be making, the Photoshop file we'll be using to create our background and buttons, and the source file (just in case you want to examine it).

Note: If you want to create something like this project but your buttons aren't rectangular, you need to save your selections as a PNG-24 rather than JPG when you Save for Web in the following tutorial.

1 – Download the Photoshop file (if you haven't already), insert a new layer, and press Shift-Option-Command-E (all at once) to merge.

2 – Because I planned this out on paper (as I've tried to convince you to do), I know what size buttons I want and where they need to go. To help make these buttons we need to set up a custom grid.

3 – Use the Rectangular Marquee to make a 100 x 50 pixel selection. "Jump" the selection to a new layer by pressing Command-J and rename the layer as shown.

4 – Repeat for next 4 layers.

5 – Command-Click on the b1 layer to select the thumbnail's pixels and follow the bouncing cursor to make your first correctly-saved jpg for Flash. Using logical naming conventions is critical, so if you deviate from the instructions you better have a plan.

6 – Repeat for next 4 layers. If you like shortcuts they are:

Command-Click on layer to Select Pixels
Command-C to copy
Command-N to open New Document
Return for OK
Command-V to Paste
Shift-Option-Command-S to Save for Web
Return to Save
Return to Save
Command-W to Close Window
D to Don't Save

And learning that is a whole lot easier than spending time in the menus to accomplish these steps

7 – Save the background image and organize your files (after closing the psd!)

8 – Open Flash, import the background image, and set up the project as shown

9 – Save your file then Import and position the thumbnails (on their own layer)

10 – Just in case you're having problems, here's the exact positions

11 – Convert the thumbnails to Buttons

12 – Make the first rollover using an animated filter

13 – Repeat for remaining buttons (not shown) and add custom easing

14 – Create a more complex rollover (chopping off the corners requires you to pay attention to what's selected—or not selected)

15 – Using bitmap fonts requires you to pay attention to details but you're rewarded with crisp, easy-to-read information

16 – Continue the process (I eventually change the opacity to -50 to -65 for the rollover to increase legibility)

17 – Make and animate the mask (it must be a MovieClip in order to use custom easing)

18 – Tweak to get a better result for the rollover

19 – Click and Shift-Click to select a series of layers and learn a great shortcut (pay attention to details!)

20 – Add Layers, Frames, Keyframes, Labels, and a Stop Action to your project

21 – Use Behaviors to add ActionScript to your buttons

Note: Your ActionScript must be correct or the next step will cause you grief

22 – Do these steps in order and your buttons will work without that nagging secondary rollover

23 – Give the user an idea of where your buttons are by using this trick (some of you still don't get how easy it is to make it appear as if your buttons are animating)

24 – Continue the process

25 – Add a Filter your buttons' Over State (every Instance will be altered because you are editing a Symbol)

26 – I added content to help you envision the final product (and I expect much better projects than this sorry example I threw together)


Flash 8 Player Required – 1024 x 768 Minimum Resolution
Get Flash PlayerGet QuickTimeGet Adobe Reader

Mac Lab | Digital Art | 3D Design & Animation | Multimedia Production | Tutorials | Students | FAQ | Blog

Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open.