logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
The Motion Toolbar Tools

Apple Motion 5 - The Toolbar

Apple Motion - HUD

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor