NAVIGATION:

 

SUPPORTERS:

FlashComponents
  Flash Templates
  Flash Gallery
  Flash Slideshow
  Flash Menu
  Flash Design
  Flash Video
  User Interface

 

FOLLOW:

RSS it down! Twitter it up! Facebook it like a fiend!

 

 

 

 

 
Creating
a Simple Shadow Effect
         written by kirupa chinnathambi

A easy yet oft-overlooked effect anybody can create is the shadow effect. Technically, you are simulating a shadow by copying an object, pasting the object in a lower layer, offsetting the object a few pixels, and changing the color the object to look like a shadow.

The following animation shows an example of the shadow effect applied to a line of text along with something created using a bitmap (Wingding) font:

[ the above is an example of a shadow ]

Creating this Effect:
The following steps will guide you in creating a shadow:

  1. Create a new document in Flash MX by going to File | New. A new, blank Flash MX movie will be displayed.
     
  2. From the Toolbox displayed on the left, click the Text Tool icon.
     
  3. Once you have clicked on the Text Tool icon, click in your drawing area and draw a text box:

[ use the text tool to draw ]

  1. After you have drawn the text box, type the word "Shadow". For best results, make your text large. Using a smaller font size makes the text look blurry:

[ the word shadow I just drew ]

  1. Now, select the text and and go to Edit | Copy. You can also press Ctrl + C to copy the text.
     
  2. With the text copied, it is time to insert a new layer. Insert a new layer below your current layer. To do that, right click on the layer containing your text field (Layer 1 if you started from scratch) and select Insert Layer.

    Drag the new layer below your old layer:

[ insert a new layer below your existing layer ]
 

  1. Now, here is the slightly confusing step. Lock the first layer containing your text. Once you have locked that layer, select the blank keyframe in the layer you just created (Layer 2 in above image).
     
  2. Press CTRL + SHIFT + V or go to edit Paste in Place. Once the text has been pasted, press your right arrow one and the down arrow one. Your text should look similar to the following image:

[ the text has been pasted below the original text and moved slightly ]

  1. Now, select the text using your mouse pointer so that the Properties Panel can appear. From the Properties Panel (toward the bottom of your screen) click the Text (fill) color button and select a light shade of gray:

[ select a dark gray color for your text ]

  1. Once you have selected the a dark gray, notice that the text you just moved around looks like it is the shadow:

[ the shadow effect is complete ]

Replay!
It may seem like a lot of work to create a simple shadow effect, but it is actually very simple. I over-elaborated some of the steps, but if the tutorial were to be re-written in 6 steps, here is how it would look like:

  1. Create the text and copy the text you created.

  2. Insert new layer to go on the bottom.

  3. Lock the top layer.

  4. Paste In Place (Ctrl + Shift + V).

  5. Select pasted text and move it around to create the location of the shadow.

  6. Change the color of the text to a darker, shadow color.

If you are curious as to how my FLA looks like, click the link below. You should note that my version of the FLA includes the squiggly design that I created using the Wingding font.

download fla

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 

Cheers!

Kirupa Chinnathambi
facebook | twitter
SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple. flash components
Creative web apps. Make your own free flash banners and photo slideshows.
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.

Flash Transition Effects

Flash Effect Tutorials

Digicrafts Components
Flash effects. Art without coding. Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com
Streamsolutions Content Delivery Networks Flipping Book - page flip flash component.
Flash-Gallery.com - Get your flash photo gallery (flash component or swf gallery Learn how to advertise on kirupa.com
 

cdn
content delivery network (cdn)