Printer Friendly Version

BellaOnline's Flash and Animation Editor

Add A Drop Shadow To Your Flash Website

One of my favorite readers asked me how to add a drop shadow along the exterior edge of his FlashR website. Because we just completed the Building A Website With Flash series, I will discuss a simple method to add a drop shadow to your finished Flash website. Thanks to Jason for the inspiration.

An easy way to add a drop shadow to the Flash document is to use a background image that has a pseudo drop shadow.

Step 1. Image Dimensions. The dimensions of the Flash website that we created in the series was 550 height and 450 width. We need to create the new background image for the website with these dimensions. Open your favorite graphics software and start a new image. The new image should have the same colored background as the webpage that will contain your Flash document.

Step 2. Draw Rectangle. Use the Rectangle Tool to draw a rectangle starting from the upper left corner and stop before you reach the right and bottom sides to allow a space for the drop shadow. The rectangle should be the color that you want for the background color of your Flash website. If you are using an image for the background of your site, it should be slightly smaller than the dimensions in Step 1.

Step 3. Drop Shadow. While the rectangle is still selected, use the Drop Shadow filter of your graphics software to add a drop shadow to the rectangle.

View Example Image

Step 4. Save Your Image. Your new background is finished and ready to import into your Flash movie. Save it in PNG format.

Step 5. Import Into Flash. Open your .fla file into Flash. Click on Frame 1 in the Recurrent layer in the Timeline. Click File > Import > Import to Stage. The new background image should fit snugly in place on the stage but it is on top of the other objects in this layer. So let's move it underneath. Click on the new background image to select it and then click Modify > Arrange > Send to Back.

Note: You might need to make some adjustments to the positions of the other objects in your Flash movie. In the working example for the series, I found that the navigation menu image was too wide and reached beyond the edge of the rectangle into the drop shadow. Also the frog and buttons need to be nudged to the left a little. Finally, the copyright text needed to be moved up slightly.

View Example Image

If you are just starting to read the series and therefore not adding the drop shadow background to a finished website, you would add the drop shadow background image just before you add the navigation menu image. To prevent it from extending into the drop shadow, the navigation menu image should be the same width as the background rectangle above.

View Example Image

Step 6. Save the changes. You can now save the new additions to your movie. Click File> Save. Then republish your website as you did before.

Macromedia Flash MX 2004 Workspace

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor