Design insights & tutorials.

Full Color Rollovers in Flash

Turquoise Flag-Tip

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 (1968) 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

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

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

Toggle the visibility of the Background layer to off.

background-visibility

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

Deselect All, CONTROL-SHIFT+A/COMMAND-SHIFT+A

Create The Buttons

Click once on one of the band members to select.

select-band-member

Convert this selection to a symbol, F8, follow these settings:
Name: band #+_btn
Type: Button
Click OK

f8-convert-to-symbol

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

Click-and-drag the Up frame to the Over frame

over-frame

Select the Hit frame, and insert a blank keyframe, F7

hit-frame

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.

Save, and test your movie CONTROL+ENTER/COMMAND+RETURN

And here is the final result:

About the Author, Tony Ross

My name is Tony Ross, owner of tonyteach.com & ar-tist.com. I have 11+ years teaching and freelance experience in art in general. I currently specialize in Adobe Flash for animation, as well as Flash for motion graphics, interactivity, and web design. My tutorials have been featured on Creative Cow, as well as Adobe.com. My clients have included Dabel Brothers, Marvel Comics, The Freedom Toast, and Dean Koontz. I teach by one mantra: Keep it simple, make it perfect… if you don’t have time to make it perfect, rethink the idea.
Discover More by Tony Ross

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • facebook-760477452

    great!

  • Adam_Wagner

    Hey Tony, that's a really usable effect without too much heavy lifting. Nice tutorial!

  • Piotrek

    Why not to add some tweening?

  • http://twitter.com/tonyteach tonyteach

    Thanks Adam, means a lot coming from you :)

  • http://twitter.com/tonyteach tonyteach

    Thanks Piotrek for your comment. Perhaps in another tutorial, I wanted to keep this one pretty basic. There is a tweened rollover tutorial I'm building, it reverses the tween on rollout via AS3, and would have added about 20 more steps to this basic tutorial.
    Thanks Again, Tony Ross

  • http://kreativsalat.de/ Timo

    nice and simple tutorial…great job!

  • Simon H.

    Nice, a kind of Flash 101 :-)

  • PG

    Quick, simple and informative. Good. I can see more complex actions evolving from just this one technique.

  • Vim82

    Really like this post, simple yet effective to use, I'll probably use this tutorial as a base to start off, then use more effects. Really appreciate this Thanks!! Would it be possible if you can add a part two to this post involving a tween?

  • http://designawardsgallery.com/ Best CSS Gallery

    Great tutorial

  • http://twitter.com/rayacosta rayacosta

    This is a simple and very creative way to use Flash.

  • Jessica

    Simple. Nice! (The band is good too!)

  • http://www.knrdesigns.com/ Mark

    Very nice, yet simple effect.

    Good explanation as well.

    Keep up the good work.
    http://www.knrdesigns.com

  • Moon Mountain

    Nice effect. Thanks. However, I found it difficult to paint in to the exact outside edge of each band member. My resulting swf did have the rollover effect, but included extra color around the edges. Is there any way to import the selections from PS, then just fill in with whatever color? (I'm not a Flash user, as you may guess…). Seems there should be some way other than plain ol' painting to fill in the color.

  • http://www.zoombits.co.uk/cables/ hdmi cables

    YEP….
    this is really an amazing software and I loved to use it as I can do any thing impossible possible.Thats great to use it.
    Thanks

  • http://www.texasmortgagerefinanceloans.com/ Texas mortgage loans

    Great tutorial! Awesome effect yet not very time consuming. Thanks!

  • Amy

    can you show me how to make these buttons a link?

  • kaan

    Very nice,

  • Somika

    First Flash tutorial I could complete. Still don't get how things work yet, but doin' my best. Thanks for the tutorial

  • http://www.crearecommunications.co.uk/ Jamie Allsop

    That is a very nice effect and looks like it would not take to long to do. Thanks for the great tutorial.

  • 3dmodels

    Now Free Download Hight Quality 3d models 3d objects for 3DSMAX, Maya, Softimage, Lightwave. (3D Cars, 3D People, 3D Furnitures, etc). For use in all your 3D Animation and multimedia works. animation | art | vr | tutorials | 3d models | 2d | software | plug-ins | textures | materials | scripts | poser and find out new 3d jobs and hot 3d video. http://www.all3dmodels.com

  • wFre

    Now Free Download Hight Quality 3d models 3d objects for 3DSMAX, Maya, Softimage, Lightwave. (3D Cars, 3D People, 3D Furnitures, etc). For use in all your 3D Animation and multimedia works. animation | art | vr | tutorials | 3d models | 2d | software | plug-ins | textures | materials | scripts | poser and find out new 3d jobs and hot 3d video.
    dizi izle

  • http://www.clippingimages.com/ Clippingimages

    wow wow wow…very very nice share…great one…thanks

  • iPhone iPad Supplier

    wow nice

  • http://www.photoshopclippingpath.us Photoshop Clipping Path

    Wow, So many great.

  • http://www.loveshoppingshoes.com Alexandermcqueenheels

    your article is very good

  • http://www.facebook.com/people/Tekno-Loji/1152739199 Tekno Loji
  • http://www.forexorama.com oliver le trader

    how to use the grayscale by action script !

  • http://www.filmizlerik.com filmizle

    Thanks so much for this!

  • http://profiles.google.com/adiconti Andy DiConti

    very nice…can this be exported to blogspot–perhaps as a banner?

  • http://twitter.com/Foto_clipping fotoclipping.com

    thanks for details explanation of a complex job to do a easy way..

  • http://www.drmustafaerarslan.org/ panax

    Very cool and interesting article s

  • http://www.drmustafaerarslan.org/ panax

    Very cool and interesting article