Friday, November 13, 2009

Full Color Rollovers in Flash

header-image
In this tutorial, we will create a Flash file with a simple, yet eye-catching effect — a black & white photo with full-color rollovers. We will initially edit the photo in Photoshop, then import and complete the file in Flash. I wanna send a shout-out, and special thank you to the band Today the Moon, Tomorrow the Sun for the use of their photo.
Download the sample file band_photo.jpg (310) and open in Photoshop.
band_photo jpeg
Save this document as band_photo.psd

Isolate The Figures

Using the pen tool, create a path around one of the band members
I’m making a selection just around the person, not the chair. The goal here is to create a selection of a band member. I’m using the pen tool, however you may use whatever selection tools you prefer.
Right-click or control-click on the path, and choose “Make Selection…
make_selection_menu
Click OK on the Make Selection dialog box that follows
make-selection-dialog
Create a layer via copy, CONTROL+J/COMMAND+J. This creates a layer from the
selection
Select the background layer, and then repeat this for each band member
Be sure to name each layer.
For simplicity, I named them band-1, band-2, etc, going from left to right
band layers Full Color Rollovers in Flash
Create The Grayscale Background
Select the background layer, press CONTROL+D/COMMAND+D to deselect everything.
Duplicate this layer via copy, CONTROL+J/COMMAND+J
Name this duplicate layer “black & white”
dup-layer-black-n-white
Next, create a new layer, CONTROL-SHIFT+N/COMMAND-SHIFT+N, Set this layer Mode to “Color“, click OK
new-layer-color
On the keyboard, press D to set default colors (black foreground/white
background).
Fill this layer with the foreground color, ALT+BACKSPACE/OPTION+DELETE
Merge this layer with the black & white layer, CONTROL+E/COMMAND+E
As an option, you can push this effect further by lightening the output levels on the black & white layer CONTROL+L/COMMAND+L
Set the Shadow output level anywhere from 25 to 50.
output levels 25 Full Color Rollovers in Flash
At this point, it will be visually obvious if you have selected extra space around the band members. You may see color spots around them that should be black & white. Correct this via selecting the band member’s layer that needs fixing, and use the eraser tool to get rid of any overlap.
final image Full Color Rollovers in Flash
Toggle the visibility of the Background layer to off.
background visibility Full Color Rollovers in Flash
Save this document, CONTROL+S/COMMAND+S, and close it.

Import The .psd File Into Flash

You will need at least Flash CS to import a PSD
Open Flash. Create a new document, either AS2 or AS3 will work as this effect is not dependent on Actionscript.
Import the band_photo.psd, CONTROL+R/COMMAND+R
ps_layers_to_flash
Because we turned off the visibility of the background layer in Photoshop,
this layer is unchecked when importing into Flash.

Hold down the SHIFT key, then select each band member layer, as well as the
black & white layer.
Check the box “Create movie clips for these layers”
convert_layerd_to_movieclips
For Publish Settings, set the Compression to Lossless.
Follow these settings, Convert Layers to: Flash Layers, check the boxes Place layers at original position, and Set stage size to same…
Click OK.
layers position stage Full Color Rollovers in Flash
Deselect All, CONTROL-SHIFT+A/COMMAND-SHIFT+A

Create The Buttons

Click once on one of the band members to select.
select band member Full Color Rollovers in Flash
Convert this selection to a symbol, F8, follow these settings:
Name: band #+_btn
Type: Button
Click OK
f8 convert to symbol 2 Full Color Rollovers in Flash
Repeat the BUTTON SYMBOLS steps for each band member.

Edit The Buttons

Once you have converted each band member to a button, DOUBLE-CLICK on one of them, this will take you into edit mode, in the buttons timeline:
button edit 2 Full Color Rollovers in Flash
Click-and-drag the Up frame to the Over frame
over frame Full Color Rollovers in Flash
Select the Hit frame, and insert a blank keyframe, F7
hit frame Full Color Rollovers in Flash
Select the brush tool and using the photo as a guide, paint a rough silhouette of the band member. The paint color does not matter, as the hit frame is not seen by the audience/end user, you are simply painting the active area of the button.
null
On the timeline, click the Scene 1 button, and you will see a aqua-colored overlay of the silhouette you just painted.
null
Repeat the BUTTON EDITING steps for each band member.
Here is a snapshot of the file with all 4 band member buttons edited. Though you can be as detailed or loose as you like when creating the silhouettes, do not overlap, as this can cause flickering between buttons.
final flash Full Color Rollovers in Flash
Save, and test your movie CONTROL+ENTER/COMMAND+RETURN

Source : http://www.tutorialized.com/view/tutorial/How-to-Make-Full-Color-Rollovers-in-Flash/52798

Related Post | Artikel Terkait



Get this widget [ Here ]

No comments:

Post a Comment