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

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


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
Motion Workspace - Checkbox, Dials and More

Motion Workspace - Menu, Icons and Sliders

The Motion Toolbar Tools

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