g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

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

Add Add+A+Drop+Shadow+To+Your+Flash+Website to Twitter Add Add+A+Drop+Shadow+To+Your+Flash+Website to Facebook Add Add+A+Drop+Shadow+To+Your+Flash+Website to MySpace Add Add+A+Drop+Shadow+To+Your+Flash+Website to Del.icio.us Digg Add+A+Drop+Shadow+To+Your+Flash+Website Add Add+A+Drop+Shadow+To+Your+Flash+Website to Yahoo My Web Add Add+A+Drop+Shadow+To+Your+Flash+Website to Google Bookmarks Add Add+A+Drop+Shadow+To+Your+Flash+Website to Stumbleupon Add Add+A+Drop+Shadow+To+Your+Flash+Website to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor