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

Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Drawing a Wall and Floor in Flash CS5

The inspiration for this FlashR CS5 tutorial came from the Box of Joy Christmas Ecard that I animated for Pamela Gladding Ecards. It's an ecard animation with beautiful artwork created by Diane Pedersen. The animation starts with a Christmas present sitting on the stage. But the box looked a little lost. We needed a background for the animation. This could have been simply a gradient or solid color but I wanted to do a little something more. So I decided to add a wooden floor and red painted wall. Now the Christmas box was in a room instead of floating in space.

Because most of the artwork used in PG Ecards is raster graphics, I took this opportunity to draw the wall and floor in Flash. I started with a simple gradient for the wall. Because the box is green with a red ribbon, I used the red from the ribbon on the wall. Then I drew the wooden boards that made up the floor and the baseboard.

Starting on the wall, I drew a rectangle (null stroke) that covered the entire stage. To create the gradient, I selected the rectangle and opened the Color panel. From the drop-down list, I set the Color Type to Linear Gradient. This turned my wall into the default black/white gradient. But the gradient was horizontally dark to light. I needed my wall to be dark at the top and lighter at the bottom of the wall (to draw attention down to the Christmas box). To turn the gradient, I used the Gradient Transform Tool. Finally, I set the light and dark red colors for my gradient by changing the color pointers below the gradient definition bar.

Now it was time to make the floor. I started by creating one wooden board out of a rectangle on a new layer. I set the fill to a light brown and the stoke to a dark brown. After drawing the first rectangle for the floor, I copy/pasted the rectangle, placing each rectangle next to the other, until half of the stage was covered. Next, I selected all the rectangles and used the Modify Transform Distort command to add perspective to the boards. While all the rectangles were still selected, I copied them in order to create the other side of the floor. Once I pasted the copied rectangles, I needed to flip them horizontally. This gave me the entire floor.

To finish the room, I drew the baseboard on a new layer, using the same fill and stroke colors. I drew a long thin rectangle along the top of the floor. Once I converted this to a symbol, I could add an Inner Shadow filter to give the baseboard some definition.

Box of Joy Ecard at Pamela Gladding

Join us in the Flash forum.

Add Drawing+a+Wall+and+Floor+in+Flash+CS5 to Twitter Add Drawing+a+Wall+and+Floor+in+Flash+CS5 to Facebook Add Drawing+a+Wall+and+Floor+in+Flash+CS5 to MySpace Add Drawing+a+Wall+and+Floor+in+Flash+CS5 to Del.icio.us Digg Drawing+a+Wall+and+Floor+in+Flash+CS5 Add Drawing+a+Wall+and+Floor+in+Flash+CS5 to Yahoo My Web Add Drawing+a+Wall+and+Floor+in+Flash+CS5 to Google Bookmarks Add Drawing+a+Wall+and+Floor+in+Flash+CS5 to Stumbleupon Add Drawing+a+Wall+and+Floor+in+Flash+CS5 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
Bookry Drag and Match Jigsaw Puzzle

Bookry Drag & Match Widget Settings

Create a Hype Template for iBooks Author

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor