Drawing Tools in Flash Cs6

Table of contents

• 1 Introduction
• 2 Stage setting up the stage
  • 2.1 Shaping papers size
  • 2.2 What sized for a Flash document ?
• 3 Configuration of the drawing environment
• 4 Some definitions
  • 4.1 Strokes vs. fills
  • 4.2 Colours
• 5 The briny tools board
  • 5.1 Merge (configuration) vs. physical object drawing
  • 5.2 List of standard tools
    • 5.2.1 Survival tool
    • 5.2.2 Subselection instrument
    • 5.2.3 Free Transform and Slope Transform tools
    • 5.2.4 Lasso tool
    • 5.2.5 Pen tool
    • 5.2.6 Text tool around
    • 5.2.7 Line tool
    • 5.2.8 Rectangle and other tools
    • 5.2.9 Pencil creature
    • 5.2.10 Brush puppet
    • 5.2.11 Ink Bottle tool
    • 5.2.12 Paint bucketful instrument
    • 5.2.13 Eyedropper tool
    • 5.2.14 Erasor tool
• 6 Option controls and tools configuration
  • 6.1 Hand tool
  • 6.2 Rapid growth tool
  • 6.3 Pen color
  • 6.4 Fill out people of colour
  • 6.5 Swap color
  • 6.6 Constellation of the Tools panel
  • 6.7 Configuration of lottery settings
• 7 Painting simple objects
  • 7.1 Drawing blurred objects
  • 7.2 Drawing animals and such
  • 7.3 Save each object as symbolisation
  • 7.4 Importation clipart
  • 7.5 Adding background and Pitch
  • 7.6 A result (screen out of)
  • 7.7 Using textures
  • 7.8 Files to download

1 Innovation

2 Setting up the stage

Besides choosing the right settings for publication (Flash version) with which we shall not deal here, you should select the right sizing for your your stage, i.e. the size of your tense instant document. You can do this either when you make over a new lodge or later.

2.1 Defining document size

Creating a new text file

Flash lets you create a new text file from various templates: File->New. Then choose from General Beaver State Templates.

These templates either barely delimit the size of your stage or load "underdone" interactive applications that you volition have to clip. Ignore the latter for instantly ...

• Size of the stage
• Version of Flash (e.g. Actionscript 2 or 3 or AIR for background/versatile sound applications)
• The Media Playback templates contain for example tools to pee-pee a slideshow.

Anyhow, for scholarship about Flash bulb's drawing sport, assume't worry about the templet to choose from. Just make sure that you have sufficiency space to draw. If an first size turns out to be too pocketable or too big, you simply can modify the written document's size (see future).

Modification of a document

With Alter->Document (or by clicking along an devoid spot in the stage and past changing the properties) you can:

• Redefine the size of the stage.
• Variety the background color
• Give it a style and a short description

2.2 What size for a Tasteless document ?

Sized of your Flash document depends on its purport. Since Flashgun documents (unlike cured made HTML pages) wealthy person a taped sized, you must happen a good compromise between legibility (users should personify able to show and distinguish every last elements) and the horizontal/upended space you flash cartridge clip will use.

Larger flash documents

A nonremittal documents takes ahead 550x400px. This makes the document viewable without scrolling on a computer with a badly screen resolution of 800x600px. Do not forget that a screen also contains a tools bar (in most Operating systems) and that Flash is usually viewed within a WWW browser that also contains menu parallel bars, a fundament legal community and some pixels to the left and right on.

Anyhow, most people nowadays have bigger sort resolutions so you certainly can a-okay bigger than 550x400.

Banners and other embedded items

Advice depends on their purpose. Think hard about your potential target population (small screens, enlarged screens, mobile phones, etc.)

3 Configuration of the drawing off environment

Firstly you should know that drawing tools exist in two forms:

1. Lottery tools in the principal tools panel (that appears by default option happening top left of the desktop if you selected the "designer" configuration)
2. Tools available through various panels

Below is a screenshot I made from a heart-shaped drawing using the oval tool and the pencil tool.

• You can see that the properties panel (left) will reveal properties of the object that is selected or being drawn. E.g. when you purpose the pencil, information technology will display people of color of the stroke, size of the fondle, type of the stoc, fill color, etc.
• The same is real for the people of colour panel that we display in the lower right.

The Flash back CS6 lottery environs (architect workspace)

Since these panels give you shortcut access to features of objects you are drawing, it's a good idea to keep open them agaze while you tie.

4 Some definitions

4.1 Strokes vs. fills

4.2 Colors

At that place are several types of colors:

• None: You may prefer to hooking without fill or cerebrovascular accident
• Serious: Standard colors
• Linear: Slope discolour changes that go from one side to another
• Radial: Slope color changes that goes from inside out
• Bitmap: You can key with an strange bitmap. This is finical useful with textures. E.g. to force floors, walls Beaver State outdoors scenes with repetitive tiles.

To select a color type, there is a pull-low-spirited menu in the color panel.

• Read the Flash colors tutorial if you want to know more colours and gradients ...

5 The main tools jury

The main tools panel contains the major drawing tools. We suggest to allow this panel docked in the upper left side of meat (since it's ofttimes secondhand). Simply depending along your screen size, you can display it either grouped (atomic number 3 shown) or as a drawn-out pillar (try out the "essentials" workspace layout).

The main tools panel organizes tools by different categories:

1. Showtime, option and transformation tools
2. Next Drawing tools (annotations in red)
3. Next, tinge manipulation, eraser etc,.
4. Adjacent color selection
5. Finally, options (these change accordant to the tool that you select)

Flash CS6 drawing tools panel

Options modification accordant to joyride that is designated. E.g. in the screen conquer to the left wing you can see how the tools panels shows with the selection tool (left) and the brushwood tool (reactionary).

Approximately tools are concentrated on height of for each one other, i.e. there are variants of a similar kind. In this shell you can see a little down arrow in the icon. To view variants you must press the left mouse for a while operating room Shift-click. E.g. instead of the Oval creature you could for example exhibit/access the Rectangle tool.

5.1 Merge (shape) vs. object drawing

Flash has ii draught models:

• The merge model volition wipe out shapes below something you draw (but not graphic objects as defined next)
• The object drawing posture draws shapes as separate objects (that you later stern misrepresent like in a typical vector nontextual matter plan).

Commonly, you quite should operate with the aim model since the shape of each object can be easily modified later on. However the meld mould privy be used to puff building complex shapes, e.g. you can draw a circle and so carve off things by drawing over it. The merge mode is also useful when you "rouge" things (atomic number 3 opposed to draft). You tardive can convert "paintings" to objects of course.

By default on, the aim model may be turned off, so turn it on by clicking on the Object drawing button. You can find in the options section of the tools panel after clicking on some drawing tool (e.g. the Pencil). You can escort if it's on when there is a rectangle worn around the button, suchlike this:

You can see the dispute 'tween the 2 kinds of objects created in the Properties Panel:

• Objects are named Drafting Objects
• Simple drawings (from the merge model) are called Shapes.

The behaviour of tools changes according to mode used and it's not then obvious to think what Flash does.

In merge mode

• In conflate mode, when you draw a shape over another shape, it erases the shape underneath by default. You can change this with the control options (see later)

• When you draw another aim (line, pencil, etc.) it will draw o'er the painting, but not erase it.

In object mode

• Shapes drawn in object mode with the copse tool are drawn either within, on top or behind objects depending on how to hardening the controls of the clash tool.

• Shapes drawn in object mode with the pencil, the write out tool around etc. are tired on top of other objects. But in the object mode they seat be moved behind with the powerful-click->Arrange context carte du jour.

If you already tried to trace much complex shapes, you noticed that it is difficult to knead with a unique layer (e.g. to select objects), so you now have to learn how to work with layers.

• If you are non familiar layers, please read the Flash layers instructor like a sho.

Conversions

• To convert an object (exemplify) into its master copy components : Right chatter->Break obscure
• To change over some shapes into a drawing object: Select them first (e.g. with the Lasso), then prize Menubar Qualify->Combine Objects->Wedlock
• To convert more or less shapes into a symbol, Right-dawn; Change over to Symbol

5.2 List of standard tools

Also see the figure "Items of the Flash CS3 tools panel" above in regularise to key the corresponding icons in the tools panel. Some tools are stacked on top of each other. Hold dejected the black eye button for while to undergo the hidden ones.

5.2.1 Selection tool

The extract tool () lets you select elements (shapes, strokes, fills, symbols, bitmaps) in the work orbit by clicking on that (simple click). If you wish to select several objects together appreciation down the SHIFT key or use a the riata or a selection corner (click then drag the mouse).

Advanced uses:

• Double-clicking would put you into objective redaction mode for individual parts (depending on where you cluck). To return from this mode (which we bequeath not explain here), double-click in some void area in the workspace.
• This tool also terminate act as a deformation tool ! See the Gaudy aim transform tutorial. If no targe is selected (e.g. click connected an empty spot in the workspace), past you can use this tool to twist shapes. Act on it approximately an edge in or a corner and pull as shortly every bit the cursor changes. Always make sure that you examine a big "cross-pilus" cursor before you outset moving around anything.

5.2.2 Subselection tool

The subselection tool () allows you to select paths of an object so that you can make more sophisticated modifications. Click on the outlines of objects. You and so can drag out close to the teensy-weensy squares and dots that bequeath appear, i.e. modify portions of shapes. See the Flash physical object transform tutorial for inside information.

If you deprivation to change a symbol (in the properties jury you can see something like-minded "Illustration-of") you have to break it apart: Right-click->Break Apart.

5.2.3 Free Transform and Slope Transform tools

The Liberate Transform tool () will tolerate you to make several kinds of transformations. When you pick out an physical object with this tool and then move the black eye over disparate spots, you will that the mouse cursor changes shapes. Each one will allow you set different transformations:

• Scale an object: duple-all over arrow
• Rotate an object: circle arrow
• Skew (distort an object): double ended double arrow

To do a proportional shell, hold down the SHIFT key and then drag a corner.

In that respect are more options to the free of transform tool, e.g. so-called envelope transubstantiate, see the Flash object transform tutorial if your are curious astir this.

The Gradient Transform tool () is obscure down the stairs the free transform tool (by default) and allows you to change the ways in which color gradients flow. Hold down the mouse for a while and then change the tool. See the Scoot colours tutorial.

5.2.4 Lasso tool

With the lasso tool ( you force out select several objects or parts of a shape.

This tool also includes a "magic wand" mode (see the optional controls) and a polygone lasso ( that allows selection by clicking on several spots.

If you want to edit parts of a shape, either double-click on the object until IT becomes a shape OR break IT apart (right-click menu).

5.2.5 Pen tool

The pen tool () allows you to make the most complex drawings, i.e. defining paths using alleged Bezier curves. Do not confuse this with the many acicular pencil puppet.

Visualize the Flash pen instructor (currently unfinished ...)

5.2.6 School tex tool

MBD schoolbook.

In the properties panel you may define various text properties such as fonts, color and aligning, alignment, etc. If you click on the paragraph symbolization, you can specify indent, line spacing and margins.

5.2.7 Phone line tool

The stemma tool () allows drawing off simple lines (no surprise Hera ...)

5.2.8 Rectangle and other tools

On the same spot of the tools panel you got respective tools. Away nonpayment you will see the rectangle creature. To select another instrument: hold the left mouse button Down for patc and and so choose the combined you want.

• Rectangle tool (by default): Draw simple rectangles. In the parameter's panel you ass define strokes and filling properties.
• Rectangle primitive tool around: Lets you delimit additional properties like rounded corners
• Oval tool: Draw ovals
• Ellipse primitive tool: Define additionally other features, much equally start/end angle, inner wheel spoke etc.
• Polystar tool: Delimitate polygons and stars (there is a small pull-down carte du jour in the properties panel that you should not overlook !)

Down the stairs you can see few drawings. The test capture has been seized with the Polystar joyride activated.

Various drawings with the rectangle, oval, polystar tools (CS3, same principle)

5.2.9 Pencil tool

With the Pencil tool around you make drawings look-alike with a Pen. However, there is nonmandatory support to line heterosexual person operating theater smooth lines since drawing with a mouse isn't very obvious. You can delineate single options.

"Short letter" drawing Options

In the options incision you can select different shipway of drawing support. I.e. the the straight icon looks like this: . Below is a screen-dump that demonstrates the difference between straight, freehand and smooth drawing.

The three pencil drawing modes (CS3, same principle)

Stroke, color and line properties.

In the properties panel you can define various options like stroke (pen) colorise, occupy color, various dashes operating room not, and how the final stage of lines should look.

5.2.10 Brush tool around

The blusher brush tool lets you paint, i.e. create shapes () made of simple fills. There are several special effects and different modes.

Object or merge mode

• In conflate mode you only can key fills
• In object mode you can add a stroke to your painting (by default option it is forth). Deal the properties panel.

The Brush Style

With the "Brush Modality" in the options section (non the properties panel) you arse select the paint mode. Pull in sure to understand these and to verify that the wanted way is on, else you likely run into frustrations ...

• Blusher Normal: paints terminated lines and fills on the same layer. Like painting with a "large" blusher.

• Blusher Fills: Fills empty-handed areas going away lines unaffected.

• Paint Behind: Paints in clean areas of the Stage on the same layer, leaving lines and fills unaffected (this may represent cost default, I am not sure).

• Paint Selection: Applies a new fill to a selection. Therefore, before you get-go painting prize a fill color first, then prize the object with the selection tool, so paint. This is the quickest way to color drawings.

• Rouge Inside: Fills the area inside a "fulfil" (i.e. where you start paining) and does not overpaint lines. If you take off painting in an empty area outside a fill, painting will non affect existing filled areas.

Selection of brushes and size

Select from the options in the options section ....

5.2.11 Ink Bottle joyride

This tool allows you to apply color changes to the strokes of drawings.

• Quality the ink bottle
• Then take either a Stroke color (and/or a Fill Color if the object is a graphic) from controls in the main tools dialog box. If want to piddle more sophisticated changes (e.g. apply a slope) do this through the color panel.
• The click on objects you want to change.

You also tin can modification the color of a fulfill or stroke through the properties panel OR the color panels, but have certainly to quality the object(s) you want to change first.

5.2.12 Paint bucket tool

The rouge bucket tool works like the ink feeding bottle tool around. It has two purposes:

• Change colors of simple shapes (primitive drawings). Tip you can change the color of strokes by editing (double-click)
• Change colourize of fills (inside of a graphics objective)
• Fill in empty areas (insides of drawings successful with the pencil for good example)

Procedure

• First, deselect everything
• Incoming, sink in on the paint bucket tool
• Select fill people of color (and style)
• Click happening shape or fill (inside shape of a graphic physical object)

Filling a closed graphic with paint

Of course, you as wel could variety blusher of shapes and object aside start selecting the matter in the microscope stage, then away making changes in the properties or the colors panels.

Tips:

• If you butt't select a fill tinge, then hear to click on the black and white icon then set the colors once more. I don't know if that is a bug or a feature ....
• If you want to fill an area that is not entirely closed, you can do so by modifying the gap sized by dynamical the "Col size" control in the tool around control board options. E.g. choose "Fine medium gaps". And then mouse click again on the shape surgery inside the sphere you want to fill
• If the paint bucket "won't work" connected the "insides" of a labyrinthian drawing then:
  • Make sure that the expanse is closed (no gaps between the enclosing strokes operating theatre shapes)
  • Also try making the area you want to fill into a single drawing: menu Modify->Unite Objects->Union

5.2.13 Eyedropper tool

You can select a color in from few spot on the workarea. The tool testament then automatically change to the key bucket creature (see above).

5.2.14 Erasor tool

Wipe off stuff. See the Flash object transform teacher for inside information.

6 Option controls and tools configuration

Some option tools are always displayed, some only for certain tools.

6.1 Hand tool

• Go by the stage around (utilitarian for big drawings/small screens Oregon with a toughened zoom)

6.2 Zoom tool

• Zoom in/verboten

6.3 Pen color

• Select the pen (stroke) color

6.4 Fill color

• Choice the fill color

6.5 Swap colorize

• Change fill color to stroke color

6.6 Contour of the Tools panel

The Tools panel can follow configured via Edit->Custom-make Tools Panel (but for now I suggest not to change anything thither).

6.7 Shape of drawing settings

Select Edit->Preferences and past change parameters in the section Drawing. (no need to do this now). Basically you can modify how Flash helps you drawing objects (e.g. connected lines, straight/horizontal) and how it identifies objects when you click on them.

7 Painting simple objects

In this chapter we will she how to make a complete (but simple!) lottery. Disclaimer: Daniel K. Schneider doesn't justified remotely palpate to be graphics intriguer. If you are non acquainted layers, you now real should have a view the Flash layers tutorial

Firstly, you can ascertain lots of free clipart (drawings) happening the Internet. Eastern Samoa a principle information technology is a better idea to research for vector nontextual matter as opposed to bitmaps and for triad reasons:

• Transmitter graphics are smaller
• They can be Re-edited
• They adjust nicely to size up. A smaller or big version still looks as well as the fresh.

To find transmitter objects you can for instance type in Google "free clipart download" or run across the links in the clipart article (determination beneficial and free clipart on the web is not easy).

Nearly a great deal, clipart is sparse in *.wmf arrange (Windows Meta File format). Flash can handle this format. It also can handle Illustrator *.ai format, Enhanced Windows Metafile *.emf, Freehand, Flaunt *.swf, and Autocad *.dxf. It can not hold SVG (but you nates spread ou SVG files with Illustrater and then copy/glue).

You also can import a series of bitmap formats like the "standardized" *.png, *.jpg, *.gif, but besides Photoshop *.psd and a variety of Quicktime formats if it is installed connected your computer.

7.1 Draught fuzzy objects

An apple shoetree careworn in unite mode

The basic principles for key-challenged people like me is the following:

• Create a new layer. It is commonly a good policy to make over a new layer for each drawing. Do not worry around size and position at this stage, since you can later motivate the drawing around and resize it.
• Zoom along in (like 200%), e.g. with Catch->Magnification
• Select merge mode from the Object Drawing tool and set the brush tool to overpaint.
• Livelihood the painting as simple arsenic possible
• Use large Pencils or brushes for starters, past small ones to run on borders if needed.
• Use the eraser to trim off strokes that went also utmost
• Draw stuff that will attend the scop first and so overpaint

E.g. To the right is a simple Malus pumila tree with a green snake (I later erased).

7.2 Drawing off animals and such

A really ugly kat drawn mostly in object mode

• Find a formula to draw these, e.g. on Google type: "how to draw a cat"
• And then multiply if you tin can ;)
• Rather use of goods and services object manner and disable cerebrovascular accident since these models often ask you to overlay ovals. Without stroke you may overlay single geometric shapes of the same color.

E.g. here is a hombre successful Eastern Samoa explained in Creature Features.

As an alternative you also hindquarters first draw the object with the pencil tool (or the pen tool) and then use the Paint Selection or Paint indoors mode of the brush tool to apply colours.

Of course in the same drawings you can commingle pencil, pre-stacked objects like rectangles and paint. E.g. draw the outline of house with the pencil and then draw the roof with the paint tool.

7.3 Keep open each object as symbol

Erstwhile you are happy with a drawing, you should convert it to a (recyclable graphic symbol): Justly-click->Convince to Symbol; Graphic. E.g. phone information technology "cat". You then can remove the layer you used to draw this object, since the peeled drawing is no longer needed.

convert a select object to a symbol

In one case you have IT in the library you can use several times, in versatile sizes and distortions. You also can copy the object and e.g. throw a new one with different colours ... If you are unhappy with the results (as I ought to be), you fanny just break a graphic obscure and re-start again...

When you insert a depository library targe into stage you can pee it smaller. Drag it from your library into the stage (but onto another layer) and so prize the Free Transform tool; Press Duty period (proportional reduction) and make it atomic number 3 small (or bulky) as you like.

7.4 Importing clipart

Flash can handle various vector formats and justified better: you can alter these within Flash. All the same, most self-governing clip art is in the SVG format and that cannot make up directly foreign to Flash (Shame on adobe !)

To import:

• File->Import->Import to Stage Beaver State instead Moment to Library
• If you import information technology to the stage and like IT, past redeem IT to the library with Right-click->Commute to Symbolisation; Computer graphic as explained above.

A cat from www.free-clip-artistic creation.com. Copyright: Individualised and educational use

E.g. here is a cat I imported from Free Clip Graphics. This site has unimprisoned clipart images for personal consumption. You terminate utilise them for school, fun, non-profit Web sites, and other personalized necessarily.

Using SVG Clipart

• Get peerless from http://www.openclipart.org/
• Display the SVG image in your browser, then just File in->Save As the SVG page
• Open the SVG in Adobe brick Illustrator
• Select All
• Copy
• Paste to Flash (exploitation default settings)
• Use right away Altitude-CTL-S to resize.

Scan Sir Thomas More in Clipart

7.5 Adding background and Sky

I suggest to draw background stuff with a new layer You bathroom do this beforehand or afterwards. In consecrate to see either background or objects you can put together all another layers in "lineation modality". Dawn on rectangles near each layer or on the rectangle on top.

Devising use of the "Layer Outline Fashion"

• First of all you can change the background of the stage: Change->Papers; then change the background color.
• If the layer with your background drawings (e.g. sky) is drawn over the objects instead of the other way labialize, just move this level (either to the top or to the bottomland depending on your settings).

7.6 A result (sort of)

Here is the final result of a terzetto times two trees, two of my cats, an foreign cat and a little house.

A flash document with trees and cats

7.7 Using textures

Of course, you may find the grass to be too unnatural. A good solution might be to replace a backdrop color with textures. Search on the net for "unpaid textures grass" and save the file (usually a *.jpg).

You should constitute aware that there are textures and textures meant to be tiled. Kidney-shaped pictures (if smaller than the stage) will produce tiles that you can see (non on the nose what you want). Then instead you can search for something "free tileable grass textures". If you can't get hold good tiles, you English hawthorn learn how to come this with this Photoshop from DadyyCool.

• You then bum resize the image if it is too big and/or crop it.
• After that, deselect all objects (clink in the hoar expanse) or choose the object you want to paint.
• Then open the color panel and select character: Bitmap from the pulldown menu. Import the bitmap and select it (you also will find a copy of the electronic image in your library).
• Then paint the outline of your textured sphere with the brushwood tool (in the "Paint behind mode" (see brush tool above)
• And then fill the eternal sleep with the rouge bucket.
• You can change the room textures are applied with the detached transform tool (see Newsbreak colors tutorial).

A flash lamp document with trees and cats

This result is not exactly wagerer, but IT's different and you fire take in that you can line with bitmaps :). Of course one directly also should repaint the house and the trees. I also revolved the gradient for the sky incidentall.

Of course, one can behave bettor graphics and colors. See much advanced Flash tutorials on drawing, e.g. the Flash object translate tutorial, the Flash transcription objects tutorial or the Flash colors tutorial

7.8 Files to download

You privy download the *.fla files Hera:

• http://tecfa.unige.ch/guides/swank/ex/drawing-intro/
  • flash-cs3-drafting-trees.fla is the i with a simple background
  • flash-cs3-draught-trees3.fla uses gradients and drawings outside the stage are short away (so IT's a clean version of the above and I will practice this one in the Flash bulb motion tweening tutorial).
  • flash-cs3-drawing-trees2.fla is the matchless with the textures.

Drawing Tools in Flash Cs6

Source: http://edutechwiki.unige.ch/en/Flash_drawing_tutorial

Share this post