Full Color Rollovers Made With Flash

26

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 (861) 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:

[Via gomediazine]


26 Responses

  1. lego piraten says:

    Simply want to say your article is striking. The clearness in your post is simply spectacular and i can take for granted you are an expert on this field. Well with your permission allow me to grab your rss feed to keep up to date with incoming post. Thanks a million and please keep up the respectable work.

  2. Muchos Gracias for your blog.Much thanks again. Want more.

  3. Date Hello, I have browsed most of your posts. This post is probably where I got the most useful information for my research. Thanks for posting, maybe we can see more on this. Are you aware of any other websites on this subject

  4. Thomas Sabo says:

    Good thorough ideas here.I’d like to recommend checking out a lot around the idea of french fries. What do you think?

  5. uniwersytety says:

    I’ve read several good stuff here. Definitely worth bookmarking for revisiting. I surprise how much effort you put to create such a great informative website.

  6. I couldn’t currently have asked for an even better blog. You happen to be available to present excellent suggestions, going directly to the point for easy understanding of your website visitors. You’re truly a terrific professional in this subject matter. Thanks for being there visitors like me.

  7. Muchos Gracias for your article.Really looking forward to read more.

  8. Looking forward to reading more. Great article.Really looking forward to read more. Will read on…

  9. Enjoyed every bit of your article.Really looking forward to read more. Want more.

  10. I really liked your article.Thanks Again. Fantastic.

  11. Say, you got a nice article post.Much thanks again. Much obliged.

  12. wow, awesome blog post. Great.

  13. I really like and appreciate your article.Much thanks again. Want more.

  14. A big thank you for your blog post.Thanks Again. Much obliged.

  15. I agree with the thesis but it is indistinct why no more comments on the page or know why people at home do not Review the incumbent ,Lawyer

  16. Thanks a lot for the article post.Much thanks again. Fantastic.

  17. Pop Displays says:

    Great, thanks for sharing this article post.Much thanks again. Really Great.

  18. Alexia Telch says:

    Your the first blog Ive come across that was good all around, Good information, nice comments and a wonderful layout. Well written.

  19. You need to participate in a contest for probably the greatest blogs on the web. I’ll advocate this web site!

  20. When it comes to price tag, our rarity involving Yugioh credit cards are categorized on to a number of different types. That also includes odd, awesome elusive, seriously, supreme, hidden knowledge, similar, settle-back to watch, ghost sought after. Inside the given the first thing is classification, they are sold appearing in precious metal aluminum foil. One of those is present in most take, eliminating the exact OCG delivers. The specific Superbly Odd, but nevertheless, was imprinted of holographic aluminum foil story, with regards to Very Usual is included with gold rings foil. The actual remainder are probably published one or other upon rare metal or to holographic an extremely foil. you will find the cheapest source site in approximately yugioh stretegie yu gi oh

  21. Sweet site, super layout, real clean and employ friendly .

  22. Simply wish to say your article is as surprising. The clearness in your post is simply nice and i can assume you are an expert on this subject. Well with your permission allow me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the enjoyable work.

  23. This weblog seems to get a large ammount of visitors. How do you promote it? It gives a nice unique twist on things. I guess having something authentic or substantial to post about is the most important thing.

  24. I’ve learned a lot from your article. Thanks!

  25. Need to get in google feed.

Leave a Reply

Proudly designed by Theme Junkie.