Drawing in flash lessons. Differences between amateur and professional Wacom tablets

For more than seven years I have been working remotely with foreign customers from the USA, Canada, Australia, Germany and other countries. I draw graphic resources and animation for games Adobe Animate CC. Previously the editor was called Adobe Flash Professional CC.

On the old blog I started a similar series of lessons, but instead of continuing there, I decided to rewrite everything again in order to share new experience.

Why do we need another series of lessons about drawing in Adobe Flash? I have been doing this for many years and believe that my experience can be useful for beginners. Especially for those who have never drawn with graphics tablet. If you are good at drawing on paper, but have never drawn on a computer, then I definitely have something to tell you.

And for those who do not know how to draw on paper, I will try to explain how you can develop this skill in general, without being tied to a graphics editor: building perspective and composition, choosing colors, shading and other topics.

Choosing a graphics tablet

It doesn't matter if you can draw, you will need tools: devices and programs. Let's start with the hardware. You already have a computer, but you still need to connect a graphics tablet to it, which will give us the opportunity to draw on a virtual canvas that exists in RAM. In other words, it is another information input device, like a mouse or trackball. But the tablet has advantages that allow you to draw as if on paper. This is pressure sensitivity and a pen-like shape of the pointing device.

There are many manufacturers of graphics tablets: Wacom, Genius, Huion. I've only encountered the first two. In total, I have already tried four tablets from Wacom and one from Genius when I started. I highly recommend Wacom - it's high quality for a reasonable price.

If you don't have the money, don't buy the Genius, get the most affordable small used Wacom Bamboo Pen. I used almost the same one, the Wacom Bamboo Pen&Touch S CTH-460. There have been no critical problems in seven years of use, a good device to start with. If you can highlight more money, then take a larger model. I use Wacom Bamboo Fun Pen&Touch M CTH-670.

What do the numbers and letters mean in the names of Wacom models?

I’ll explain what some of the numbers and letters in the name mean to make it easier for you to navigate the company’s model park.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

• M— size of the work area. There are S - Small (small), M - Medium (medium), L - Large (large);
• CTH— denotes the model range. There are CTL and CTH - amateur models entry level with optional buttons and touchpad, PTH - professional models, DTH and DTK - professional models with a built-in display;
• 6 — size of the working area in inches. There are 4 - Small (small), 6 - Medium (medium), 8 - Large (large), as well as 13 and more, but this only applies to tablets with a built-in display. Sometimes online stores and advertisements do not indicate the letter index, then you can use the digital one to understand the dimensions of the device;
• 70 - generation and model. It is important to understand that the higher this number, the newer the device. For comparison, my old tablet has the index CTH-460, modern analogue— CTH-490. Generations differ by 10: 460, 470 and so on.

Graphics tablet size

When you draw, the active area of ​​the workspace is very small. In other words, the stylus constantly slides within the radius of a small circle. This circle may move a little. Over time, a stain forms, which is visible as a dense accumulation of microscratches. It shows that you practically do not use the periphery of the device, everything happens in the center.

One might assume that a large graphics tablet is not necessary since you will never use its entire work area and the activity spot will be the same size as on a smaller model. But that's not true.

When you work on a tablet, its work area is projected across the entire width of the monitor. Therefore, the larger the tablet, the more precise you can apply strokes. And vice versa, the larger the monitor and the smaller the tablet, the more difficult and uncomfortable it will be for you to draw. From experience, I can say that after switching from size S to M when working on a 29-inch ultra-wide monitor, my work became 25-30% more comfortable. It takes me less effort to draw a complex outline, and the overall experience feels smoother and more enjoyable.

Larger graphics tablets should provide an even more comfortable working environment, but I haven't worked on L-models, so I can only assume.

Differences between amateur and professional Wacom tablets

By purchasing a pro model, you get a wireless device made of higher quality plastic with 2048 levels of pressure sensitivity versus 1024 for cheaper models, a beautiful design, additional controls in the form of buttons and a touch ring. I am completely satisfied with the younger, outdated models of the Bamboo series, which have been discontinued. The difference in cost between the amateur and pro versions will be more than two times. The table will put everything in order:

Setting up Wacom Bamboo Pen & Touch M CTH-670

Before connecting the device, download drivers from the official Wacom website.

After connecting the tablet and installing the drivers, launch the application Wacom Preferences, which can be found through Windows search (Win + S) or in the Control Panel.

The basic settings of the company's tablets do not differ; both amateur and professional models are configured in a similar way.

On the tab Tablet you can configure the tablet for right and left hand, and also assign actions to the keys. First, install them in Disabled, over time it will be possible to assign hotkeys.

On the next tab Pen important parameters are found:

• Tip Feel- pressure sensitivity. Leave it in the center. In the process, you will understand what kind of hardness you like and adjust it to your taste;
• Tracking— stylus position tracking mode. Install Pen Mode— the working area of ​​the tablet stretches to fill the entire screen. Mode Mouse used as a replacement for a mouse;
• The remaining settings are not so important. Pen Buttons allows you to assign an action to the stylus buttons. Eraser Feel— sensitivity of the rubber band on the back of the stylus. I don’t use this feature because it’s faster for me to switch using hotkeys.

In the same tab in the section Tracking press the button Mapping... to configure the projection of the tablet's work area onto the monitor screen. A window will open Pen Mode Details.

In chapter Screen Area choose Monitor, if you have several monitors and indicate the main one. If there is only one monitor, then leave it All Screens

In chapter Scaling be sure to check the box next to it Force Proportions so that the work area does not stretch when projected onto the screen. In this case, part of the tablet’s working area will not be used, but we will have normal proportions of 1 to 1. And if you draw a circle, it will appear on the screen as a circle, and not an elongated ellipse.

Be sure to check the box next to it Use Windows Ink for pressure sensitivity to work.

On the next tab Touch Options uncheck the box opposite Enable touch input to switch the tablet to normal mode.

On the remaining tabs I have everything disabled, since I do not use either Touch mode gestures or the proprietary drop-down menu. This completes the graphics tablet setup.

Animate CC or Flash Professional CC?

Adobe Animate CC is a rebranding of Adobe Flash Professional CC; several innovations have been added to the program. Even with the old name, it gained enormous popularity among artists, animators and indie game developers. Vector design principles allow you to create sprites for any resolution. Any version you can get will work for drawing. Drawing tools have remained the same for many years, with only minor improvements. I will use Adobe Animate CC, but everything written will also apply to older versions of Adobe Flash Professional. By the way, Adobe has recently switched to a monthly subscription model to gain access to its products instead of expensive one-time licensing. Adobe Animate CC currently costs $20 per month.

First launch of Adobe Animate CC

After downloading, create a new file and select the type Action Script 3.0. In the same window you can specify scene parameters:

• Width And Height— width and height of the scene in pixels. Let's set it to 1920 x 1024, like the resolution in a modern monitor or smartphone;
• Ruler units— units of measurement, set pixels;
• Frame rate— number of frames per second, leave 24;
• Background color— background color, set to gray.

These settings can be changed after the document is created. To do this you need to select a tool Selection Tool(hotkey V), open window Properties and expand the section Properties. If you cannot find this window, then use the menu Window → Properties or the keyboard shortcut Ctrl + F3.

Setting up hot keys

To increase your work efficiency, you need to use hotkeys to the maximum. In the early stages, this requires getting used to and memorizing new key combinations, but in the future it provides a solid leap in your efficiency. I have redefined most of the hotkeys to be on the right side of the keyboard. Why on the right? The fact is that I am left-handed and, accordingly, it is more convenient for me. If you are right-handed, then you will have to come up with your own scheme. In addition, I use Rapoo E9050 and Apple Wireless Keyboard, which are made in the form factor of laptop keyboards, so if you are using a full-size one, then, again, work hard and come up with your own scheme - it will pay off in a lot of time saved - and consider my scheme, as an example.

Get the idea: group essential commands on the convenient side of the keyboard for quick access without constantly changing your hand position. Most of the time it should lie in one place, only your fingers “walk” in a small radius, pressing buttons. Of course, there will still be teams that demand a change in position, but they are an overwhelming minority. Here's my diagram:

In most cases, new combinations do not replace old ones, but complement them; several new commands are introduced. You need to configure it through the menu Edit → Keyboard Shortcuts.... In the search field, enter the name of the team, in the column Shortcut Click on the empty space opposite the desired command and press the new key combination.

Do not try to understand the commands given in the table, they will all be explained in the following lessons. In the future, when you start actively using them, most likely you will redefine them several times until you find the most convenient option.

Brush settings

Brush Tool(hotkey B) - the brush tool most used when drawing. Settings are concentrated in two windows:

The brush settings are complete, let's paint something.

Drawing with a brush

Select a suitable color using the Color window (Ctrl + Shift + F9), select the Brush Tool (B) and start with one long stroke with a little force to outline the future shape. Then trace the resulting outline to smooth out all the unevenness - the brush is ready.

Please note that in the example above, only three strokes were used. You should aim to make strokes of medium length so that your hand does not leave the tablet. Try to make many small strokes incorrectly, since the resulting contour will not be smooth and big amount extra points.

Adobe Animate CC works on vector principles. All objects are described mathematically and can be scaled without loss of quality, unlike the raster approach. This allows us to manipulate vector objects in a way that we would never be able to do as easily in a raster editor. We can smooth and simplify contours, straighten curved lines, change proportions and deform graphic objects without losing quality. Each stroke is automatically converted into mathematical curves that we can fine-tune and modify.

To verify all of the above, activate the tool Subselection Tool(hotkey A) and select the brush you just drew. Now you can see the points of the vector path and even change them.

Conclusion

Today we've set up Adobe Animate CC and are ready to start drawing. Practice a little before we continue. Learn to draw simple geometric figures without distortion, try different colors and brush settings (experiment with the Smoothing parameter).

Similar materials

In this lesson I will show you how to draw Flash step by step. This fictional hero from the DC Comics universe. This name has been borne by many people with similar abilities. Namely, they knew how to move quickly, read, think and speak. In one episode, one Flash spoke to another Flash so quickly that telepathy stopped working on them. In addition, the Flash is known to move much faster than Superman. This is explained by the fact that Superman is only used to flying, and this requires much less effort than super-fast movement.

How to draw Flash with a pencil step by step

Step one. I'll start drawing with an image of Flash's muscle corset. Like any American super hero, he consists entirely of heavy-duty muscle mass.
Step two. I will connect all the parts and get Flash's body.
Step three. Let's draw his trademark, correct the contours of the muscles and add horns on the head and face.
Step four. All that remains is to add shadows on the costume. Flash's drawing is ready:
Do you want to draw more super heroes? Try it for example.

To create pictures, buttons and other graphics, i.e. realize drawing in Flash You will use forms. Flash CS5 offers a large number of tools for these purposes: “pencil”, “pen”, “line drawing”, “brush”, etc. To create primitive geometric shapes such as a rectangle, circle, oval, square, polygon you will use special tools specifically for these forms.

Flash CS5 has 5 different tools for creating simple shapes: "rectangle" ( rectangle tool), "oval tool", "rectangle primitive", "oval primitive" and "polystar tool". "Rectangle" can create rectangular and square shapes, and "oval" can create oval and round shapes.

Objects created using the Flash drawing tools: rectangle, oval, and polygon are made up of a fill and an outline.

Flash CS5 offers two drawing modes: Merge Drawing model and Object Drawing model. In the case of continuous drawing, the outline and fill of any object, after its creation, will exist separately from each other. If you, for example, move the outline, the fill will remain in place. In addition, all objects located on the same layer will interact with each other. If you place one object on top of another, and then move the lower one to the side, the area of ​​intersection with the upper object will be “cut off” from it.

In the "object drawing" mode, shapes are automatically grouped, so the fill and outline of the object become like a single whole and various shapes, located on the same layer will not interact.

To create polygons and star shapes, use the polystar tool.

Whatever tool you choose while drawing in Flash, the properties panel will display its parameters: corner radius, fill and outline colors, etc.

Drawing forms in Flash

Select the shape drawing tool.

Click on the rectangle tool to draw a rectangle or square.

Click on "oval" to draw an oval or circle.

Click on the "rectangle primitive" to draw a rectangle in outline and fill mode.

Click on the "oval primitive" to draw an oval in combined outline and fill mode.

Click on the polystar tool to draw a polygon.
Note that Flash CS5 always shows the active button for the tool you last used.

Click on the stroke color tool.

Choose a color.

Click on the fill color tool.

Choose a color.

Click the mouse button anywhere in the Stage and drag while holding it down. Release the button.

You have created a figure.

Additional Information

In order to create a rectangle or oval with exact dimensions while drawing in Flash, you need to call the “rectangle settings” or “oval settings” dialog box. In the "rectangle dimensions" window, you can set the corner radius if you need a rectangle with rounded corners. To open this dialog box, press the Alt key and click anywhere on the Stage. A dialog box will open. Enter the width, height, and radius where applicable in the appropriate fields. Click OK. Flash will place the created rectangle or oval at the location on the stage where you clicked.

The rectangle primitive tool draws a rectangle with small dots at the corners to draw rounded rectangles. Using the selection tool you can click on one of these points and drag to round the corner.

In the case of an oval, where there are also such points, you will delete a certain sector in it.

Brush

The last two buttons are used to select the shape and size of the brush. Also, please note that the size of the brush depends on the display scale.

At the same time, if you look at the Properties panel, you can find a color selection button and a Smoothing slider, which is responsible for smoothing the lines when drawing. It's a vector, after all.

If you are the proud owner of a graphics tablet, then on the Tools panel an additional button will appear to enable pressure sensitivity, which is good news.

There is more information in the Properties panel this time:

Now here you can select the line thickness, its style, as well as various other parameters.

Drawing figures

Rectangle Tool- A regular rectangle. After selecting this tool and before you start drawing, you can select the fill and stroke color, as well as additional properties in the Properties panel. Among the new properties, I would note the possibility of rounding corners, moreover, for each corner you can assign its own rounding. Try it, it's very interesting. And as usual, you can draw squares while holding down the Shift button. Oval Tool- Ovals and circles. Here you can set additional properties in the Properties panel, such as start and end angles and inner radius, which allows you to draw arc segments of a circle. This is also worth a try. I only found out about this now when I started writing about it and looked at the Properties panel :) Rectangle Primitive Tool- Procedural rectangular primitive. It differs from a regular rectangle in that additional properties can be set and changed later, after the figure is drawn. Oval Primitive Tool- Procedural oval primitive. It is also possible to set additional properties after its creation. PolyStar Tool- Tool for drawing polygons or stars. It has additional properties in the Properties panel; when you click the Options button, the following window opens:

Here you can select the type of object (polygon or star), the number of corners and the radius of their internal points.

Draw a rectangle with fill and stroke, with Object Drawing mode not enabled. Now click on an empty area of ​​the workspace to deselect it. Then, you can draw a circle on top of the shape and also deselect it. Now take the selection tool (" V") and draw a frame from the empty area, to the middle of all objects, it will look something like this:

This is the raster selection mode. This way you can select and remove unnecessary rectangular areas of the drawn graphics. Also, I want to note that after drawing a circle on top of the rectangle, the part of it that is located under the circle disappeared without a trace. This is also one of the features of drawing on one layer.

To prevent this from happening, you need to enable Object Drawing mode when creating objects. Then you can edit objects separately and they won't bite off parts of each other. You can also draw different parts of an object in different layers. This method is possible both on the main timeline and inside symbols of any type.

To select an object with a fill and stroke, click on its fill with the Selection Tool. The fill will be highlighted. if you click on the stroke, it will be selected, but not the whole thing, but only the segment between the two points. To select the entire stroke, double-click on it. To select an entire object, draw a frame around it, if possible. If not, double-click on the fill. The entire shape will be selected, along with its fill and stroke.

	Indent- First line indent.
	Line spacing- Line spacing.
	Left margin- Left paragraph border.
	Right margin- Right paragraph border.

7. Edit orientation of text- Changes the text orientation between horizontal and vertical.

Setting up gradients

There are two types of gradient in Adobe Flash CS3: linear and radial. Enabling a gradient fill and selecting its type is done in the Color panel. The Type parameter is responsible for this. When you select one of the modes, a gradient immediately appears on the color indicator.

At its edges you can see two extreme points. By clicking on one of them, you can set its color. You can also set transparency using the Alpha parameter. To add points, simply click in the desired place, between extreme points. To remove an extra dot, drag it down.

A gradient can be assigned for both filling and stroke of objects.

	1. Triangle- Gradient center. If you move it to the side, the center point of the gradient will change its position, but the gradient itself will remain in place. This is important when you want the edges of the gradient to match the edges of the object.
	1. Point- Common center of the gradient. If you move it, the gradient will move along with the borders.
	2. Horizontal gradient distortion. The wording is a little incorrect, since it is not distorted vertically. The term “perspective bias” would be more appropriate.
	3. Gradient radius.
	4. Gradient rotation.

I've intentionally left out the explanation of the linear gradient adjustments because they are similar except there are fewer controls.

So, general review We have programs, you learned how to draw. Time to move on to more important things...

When you make your photorealistic drawings, get ready for the fact that you will need to spend much more time on them than on ordinary drawings, but you don’t need to improvise and come up with, and such a drawing can be printed on a very, very large format and it will look great (unlike the photo)

the drawing technique described here can be used not only in flash but also in other graphic
editors, I will show you using the example of a wheel how to create photorealistic drawings (of course you can do this
draw both people and landscapes in a way). Why did I choose the wheel? It’s just that the work was incredibly difficult.
The lighting was so difficult that I almost moved. In other words, this article is not the easiest to start drawing, but it covers everything you need to know to create a photorealistic drawing.

so, let's begin. The first thing you need to do is create 4 additional layers, you won’t need more.

The first thing I start drawing with is imagining a model of the object being drawn. of course if I need it
photorealistic display. I for a long time I look at the photo very carefully. trying to plan every step I'm going to take. for me it's like playing chess. if you rush, you will most likely lose, but if you think ahead, reflect, then the game is yours. So let me advise you on what it's worth
concentrate your thought processes.

Before you actually do anything, you should understand the importance of the original photo. In fact,
The bigger it is, the better! why is this so important, well, at least because you want to get highly detailed
vector graphics at the end, and for this you need to see a lot of details. All you need is clean, crisp
high resolution photo. start with at least a photo in 1024x768 (no less)
Additionally, try to find a photo with studio lighting. Shadows and highlights that clearly
are viewed, the picture as a whole is also clearly visible. The more important thing, I think, is the absence
some strange reflections environment in the picture (you can, of course, deal with them, but first it’s better to avoid them).

Once you have found a suitable photo, import it into flash, take a break, and just look carefully. I like to immediately try to imagine a model of the object, I try to look at the photograph as if the light is drawn on it, this allows you to understand where the lighting is located in layers (higher or lower) now I will illustrate what I mean

red lines indicate the main figure. Or, in other words, they show the area that will be located on the very first layer (below all the other layers). The rest of the shadows and highlights will be superimposed on it

this part of the main lighting

An example of shadows lying on the third layer. They are added to the second layer and create a more complex shape.

and finally, various parts lighting. Everything that I couldn’t cover with the third layer will lie here (on 4m). This means that the fourth layer is not so necessary, because the lighting is usually not so complex, and the second and third layers will be enough to create a model with different lighting.

Just for clarification. Here are the outlines of all the layers. In the end, you will have something similar.

base layer:

layer with basic shadows and highlights:

additional lighting (creating mixed lighting of a photorealistic drawing)

and here are some additional minor details

as I said, the base layer is the most important. Errors on it will ruin the whole work and that’s why I always pay Special attention smart to this layer

The first thing to do is create outlines using the line tool or pencil (I prefer the former). Now the outlines separate the different colors from each other.

I start from the outside of the disk

There are a lot of different color segments in this part, and I'm going to separate them from each other (so that I can paint them with a gradient later). You don't really have to do this since you can assign up to 8 gradient transition colors, but it takes a lot of time to fine-tune the space between the different colors. It just clutters up my work and I decided not to use a gradient with more than two colors.
With that in mind, my outline breakdown looks like this:

From now on you have two options: either you continue to make outlines separating the colors from each other, or you start painting over everything right now
I always do the painting next, but there is no reason for this. I just prefer to paint over it right away.

Coloring process:
The first thing I do is clear everything from the color palette panel (color swatches). I still don’t need the standard colors anymore, without them my color palette will be more organized.
Then I start collecting colors from the photo (as shown below). and try to paint over my main layer with these colors.

The colors should now appear in the Color Picker panel. From there I switch to the color mixing panel to create a gradient based on them. Because my colors move from one to another, I choose a linear gradient.

I don't need to adjust anything in the gradient, as I separated all the color transitions by hand, now I just need colors to fill the corresponding areas.

Right now, the gradient is painting in the wrong direction and the color transition is not what I intended. To change this I need to use the gradient transform tool. There is probably no need to explain what this tool does, its name speaks for itself. when you select this tool and click on the gradient, two blue lines appear - for now it is a linear gradient - two controls. The circle changes the direction of the gradient, and the square changes the width.

all you have to do now is change the gradient as you please. I personally change the gradient like this until one of blue lines will not be tangent to the fill contour. To get a good result, constantly check the original image, looking at how the colors are distributed on it.

Now you need to decorate the rest. Starting from this point, I need to select colors for each new gradient, because the next gradient starts with the color where the previous one ends. While you're at it, you may have started to handle the color palette panel with care, not saving unnecessary palettes in it, because you always need to keep track of the color that was used most recently
Set your gradient and fill in the outlines with it. When you're done, delete all the outlines and continue doing this. Every time, check if everything is in order with your colors (I already talked about the importance of the base layer, so pay more attention to it)

Depending on how the light falls on the surface, you need to apply a curved gradient. The way to control it is exactly the same as for a linear gradient.
When you're done with the base layer, you should end up with something like this:

If you have any problems finding the contours, I’ll show you what they look like for me:

one more detail. As you may have noticed, in the central part of the disk there is a Mercedes Benz emblem and some text on it, too. You have two options to deal with the text: you can type the text manually, break it into parts (Modify - Break Apart or Ctrl + B), and align it with the text on the photo and at the end simply apply a gradient or normal fill to each letter, or you can also just outline them, and so on as with the rest of the image. I prefer the latter. It may take a little more time and effort, but I can be sure that the result will be really close to the original.

In any case, it's up to you. I know some people prefer to just type the text and that's it and they usually get good results.

When you look at the base layer, it will be obvious that there are still no defined details in the drawing - such as lighting.
As you can see, the shadows in our photo are not simple at all. look at the example below

It's hard to describe what the shape of the shadow looks like - and I think you can see it yourself.
let's draw the outlines of this shadow

select two colors and make a linear gradient fill for the outline.

or a circular gradient fill, it doesn’t matter, it won’t look much like the original anyway

What we do now is separate out the different parts of the shadow. It seems to me that our shadow consists of 3 parts.

In the main part there are two semi-circles, going from the center to the right, and a small ellipse on the left, pointing to another part of the disk. This means that we must place these parts on different layers.
On the second layer, we can place the main shape (two half circles) and on the third layer, put a small ellipse pointing upward. There is one problem: we already have the main part located on the main layer.
We basically want one gradient color and that doesn't really exist. we can just take the color and paint the shape with it, but the color should appear smoothly, painting the base layer. And for this, Flash has one great thing for such things - using a transparent gradient.
So change the outlines of the second layer. We can actually make them even bigger. the edges will still not be visible.

select a color and return to the color mixer panel. Make a radial gradient with the color you chose and a second color with the transparency set to 0%. Fill both parts of the contours with this gradient.

Now adjust the gradient using the gradient transformation tool. you should get something like this

switch to the third layer, and repeat all these steps for the small ellipse. With this you will have completed your first fairly complex shadow and sometimes it takes a lot of patience to get the gradient just right, but in the end it will be worth it as you will be able to do some amazing things using this technique.