Drawing a Wall and Floor in Flash CS5

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

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

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

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