Printer Friendly Version

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.

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 © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor