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 Envelopes with Flash Object Drawing Mode


Now that we have decided on what graphics we need for our envelope animation, we are ready to start drawing them. In the next few tutorials, we will learn how to use both of Flash’s drawing modes. I have also decided to use vector graphics for the envelope to help keep the FlashR file size as small as possible.

  1. First we need to start a new Flash document. Open Flash and choose New Flash File ActionScript 3. In the Properties Inspector, click the Properties Edit button to open the Document Properties dialog box. Set the stage Width, Height, Background Color and Frames Per Second of your choice. For this example, I have used 700 pixels, 500 pixels, 1b2f46 and 24 fps.

    Let’s start drawing our shapes with the Flash Object Drawing mode. This mode is somewhat new to Flash and saves the Flash designer a lot of time and frustration. In this mode, each shape (called a drawing object) drawn on the stage stays independent from each other, even if drawn on the same layer. This means that if these objects overlap, they do not merge. Also, you will notice that when you drag the object around, the stroke and fill stay together. This reason alone is why the Object Drawing mode has become the favorite.

    The first shape that we will draw will be the rectangle for the front of the envelope.

  2. Click on the Rectangle tool in the Tools panel. At the bottom of the Tools panel is the Object Drawing button. You will want it toggled on. Set the Stroke to null and the Fill to any color of your choice. I have used e4dec6 for my envelope. Now click and drag to draw a rectangle. Notice that in the Object Drawing mode, each object that you draw has a blue bounding box. In the Properties Inspector, set the Width to 200 pixels and the Height to 150 pixels.

    It doesn’t look much like an envelope. Let’s add a stamp.

  3. Deselect the envelope shape. Set the Fill color to the color for your stamp (I have used 9f9862) and the Stroke to Black, 2.00. Stamps do not have smooth edges. Let’s set the Stroke Style to Stippled. Draw a smaller rectangle on top of the envelope for our stamp.

    Now, let’s prove that these two objects remain separate. Click and drag on the envelope rectangle and you will see that the stamp rectangle does not move with it. If you move the envelope back, it will still be separate and below the stamp. Each new object that you draw on the stage will be placed in the top position of the hierarchy. Because the envelope was added to the stage before the stamp, it will remain under the stamp. To change the position of an object in this hierarchy, click Modify – Arrange from the Menubar.

  4. We will treat these two rectangles as one object. Select both rectangles. From the Menubar, click Modify – Group.
Join us in the Flash forum.




Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode to Twitter Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode to Facebook Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode to MySpace Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode to Del.icio.us Digg Drawing+Envelopes+with+Flash+Object+Drawing+Mode Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode to Yahoo My Web Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode to Google Bookmarks Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode to Stumbleupon Add Drawing+Envelopes+with+Flash+Object+Drawing+Mode 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 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

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