For beginners: where to start learning flash? Learning Macromedia Flash Animation lessons in Adobe Flash for beginners

Recently, more and more often letters have been coming through the site with questions about where to start learning flash. I’ll publish a few, I think it will be interesting for many beginners. The answers are solely my vision and my experience, which does not mean at all that if you do it differently, nothing will work. For those interested, read below (spelling and grammar of messages have been preserved). And if you are not a beginner, then you will definitely be bored and tedious reading this :)

“hi)) my name is Nico, I’m from Tajikistan and I have a great desire to become a flash animator, but I just don’t know where to start, I found your site there are a lot of useful things, but for me, a beginner, they are still difficult. please advise me where to start learning flash animation)) I will be very grateful . and write down how you draw, should I buy a vakom bamboo pen and learn to draw on it”

Niko, you have the main thing - desire. If it does not evaporate in a couple of weeks or months, then the result will be. Where to start - with the materiel.

1. Buy/download a flash tutorial from the Internet. Take one of the latest versions (Flash Cs4-Cs 6), forget about textbooks on Macromedia, FlashMX, this is already the last century in the literal sense. Although much has not changed in flash since then.

If you are planning to learn Action script (and for a flasher, knowing at least the basics of as, I think, is simply necessary) - stop at c As3. As2 is slowly becoming a thing of the past, we will keep up with the times.

Since I studied flash for a long time, I cannot recommend any specific publications because I am not familiar with them.

You will probably be very surprised, but all books on learning flash contain the same information :) This is especially true for books for beginners.

I really liked the books How to Cheat in Adobe Flash in English from flash animator Chris Georgenes (he writes lessons on flash animation for Adobe).

This is a series of books, they are republished for each new version of the flash. If you know English Language is an excellent book, pleasing to the eye with wonderful graphics.

Download How to Cheat in Adobe Flash in Cs5 together with the disk you can.

My study of flash began with a tutorial. What personally helped me in learning Flash was not the textbook itself, but the video course that came with the textbook. Therefore, let's move on to point No. 2.

2. Video lessons.

I think that video lessons are the most effective, since I myself studied Flash using a video course.

3. Another thing about learning flash animation is that you can’t do it without a program like Swf Decompiller. This is a breaker of SVF files, that is, ready-made animations. That's what we're talking about. It allows you to view (not steal:) the work of pros, and is very helpful in learning flash. You take a completed piece of work and look at it on the timeline to see how it was done, and try to repeat it. The animation is not always displayed correctly - masks, twins, but the principle can be understood and taken into account.

4. It is very effective to learn flash using specific examples. Set yourself a goal to make an animation according to an imaginary scenario - for example, an animation of a moving car along a certain trajectory. When there is an end goal, it is easier to teach.

5. If questions arise during the study, you can leave them here or in the community in topic. Or on any other forums where flashers live.

The largest flash forum that I know of is flasher.ru. So, dear beginners, take advantage of the benefits of the Internet and this resource in particular :)

6.And another important point. In order to make good animation, it would be a good idea to refer to textbooks on classical animation (especially if you want to learn how to animate characters, and not just text blocks for banners).

Having mastered flash as a tool, you will become not exactly an animator, but rather a “mover” who knows how to move objects.

There are plenty of books on classical animation - stop first at "Timing in Animation", you can take it.

Regarding where to get Adobe Flash. If you want to find or take something, then there is nothing better than Google. He knows everything :)

Is it possible to learn how to work in Flash on your own? This is quite possible, almost all the good flash animators I know taught themselves flash, without courses or exams. Patience, hard work - and everything is in your hands. I’ll even say this - I don’t know flashers who attended the courses, they taught everything on their own.

“Thank you for the blog, I found a lot of useful things for myself.

I am a pure vector designer, and it was not difficult for me to draw in Flash. The problem started when it came to animation.

Could you make a lesson for the most brainless, crooked noobs)) So that even I would understand))"

( tara )

There will be an animation lesson for beginners. I can’t imagine how to fit everything into one lesson, I think it will be a series of lessons. I was sure that the Internet was full of lessons for beginners, but for some reason they are often asked for. So stay tuned for updates on the website and

Creating Animation– an interesting and exciting process, especially if you have clear and effective lessons. The list of today's instructions is exactly that.

By applying the knowledge gained in practice, following the author’s advice step by step, you will easily learn how to create objects of varying complexity in Adobe After Effects. The lessons are more intended for advanced users who already have some skills in creating animation and are familiar with the functionality and tools of the program. Of course, beginners will also find a lot of useful and unusual things for themselves and will be able to learn even more about the incredible potential of Adobe After Effects!

If you are looking for simple and straightforward lessons, this build is for you. It includes 33 lessons, each of which involves creating animations of varying complexity and type. You will create famous characters, various objects, using program features and various design directions. After completing the course, you will have a wide variety of work to add to your portfolio, which is especially important if you want to pursue commercial animation as your career.

In addition, based on the knowledge gained, you will be able to further develop your skills, because the courses involve familiarization with the basic tools of Adobe After Effects, as well as consolidation of acquired skills. Agree, this is an excellent “foundation” for discovering your talents and further self-development.

Almost every lesson begins with descriptions of the program's workspace, as well as how to properly create a new project and configure it. The author talks in detail about the nuances of setup, tools, life hacks - the information will be appreciated by both beginners and more experienced users.

How to create a Rick and Morty animation?

Adobe After Effects is a great tool for those interested in motion and animation. Its possibilities are endless, and help you create a lot of creative GIFs of any complexity. By joining the course, you will learn how to use Adobe After Effects CC 2017 from the very first lesson.

In the first lesson, the author will show and tell you how to create animated characters Rick and Morty, based on a simple illustration from the Internet. You can find the same one, or sketch your own. From the first lesson you will also learn how to customize the workspace for yourself, what tools you will need at the initial stage, how to create a new project, open files, import them from Photoshop and much more.

How to create an animation with pseudo-3D rotation?

The lesson pays a lot of attention to the preparatory stage. The author created his own animation with a pseudo-effect based on the reference, which he then breaks down step by step in the lesson. You will understand why the preparatory stage is important and how it proceeds, how to turn a sketch into a full-fledged object and much more.

In addition, in the process you will use new tools - rulers, proportional grid and magnifying glass. With their help you will learn to determine the center of the sheet. The author will also talk about what an animation step is, how to calculate the number of frames per second, and how to view the parameters of another file in the program.

Thanks to the lesson, you will learn about a new approach to animation and will be able to create original gifs, including for commercial projects.

Creating an animation of a hovering robot.

An excellent tutorial for beginners that will also be useful for experienced users. The peculiarity of the instructions is to create animation completely from scratch, which is especially important for people who see the Adobe After Effects program for the first time, but want to learn animation. As in previous lessons, we work in Adobe After Effects CC 2017, parsing the illustration into layers, which we will then animate.

From the lesson you will also learn what masks are, contours, how to connect objects, what snapping is, a time line, how to enlarge a composition. At the same time, the author shares various tricks for professionals, explains the advantages of hot keys, and develops his own experience to optimize the process of creating animation.

How to create an animation of a tea bag?

An interesting animation that can be used in commercial projects, for example, for a video for a tea shop or cafe. The author will go into detail about the work areas, tell you where and what tools are located, what the work screen looks like, and how to customize it for yourself.

He will dwell in detail on the “Project” window, how to configure it, what each item means. You will learn how to create a new project from scratch and configure it. What points need to be addressed, what settings are important.

What is a “Preset” and which one should I choose? We also look at the Duration parameters and how to calculate them. What is 25 frames per second? Why is this important and what is the secret to smooth animation. We take drawings from the Internet as a basis.

How to create a knight animation?

The peculiarity of the lesson is in creating animation completely from scratch. We consolidate the skills and knowledge acquired in previous lessons, and also improve them. The instructions are perfect for advanced users of the program, but will also be of interest to beginners who want to emphasize something for themselves, expand the theoretical base, and open up more possibilities of the program.

The author reveals the features of the program, helps optimize the process using hotkeys, and also explains in detail why you should use only the English version of the program, and what is its difference from the one translated into Russian. After the lesson, you will have an animation of a knight with arrows, which you can add to your portfolio.

How to create an animation of a laptop taking off?

This time we are creating an unusual animation in an original style. As a source, you can use works from the Web or create your own sketches and draw them in Illustrator. Import the illustrator file into the program for further work. Using the source file as an example, the author will show how to correctly import files into the program and which option to choose - footage or composition.

You'll learn the difference between the two and why you should choose the Composition option (the layers need to be separated for ease of editing). The author will also reveal other tricks and show how to create animation of “flying” objects. Great for a commercial project or as a portfolio project .

How to create an animation with a rabbit on a cloud?

Let's draw a cute animation - a rabbit on a cloud. In addition to complete step-by-step instructions with an analysis of the parameters, nuances and features of the program, you will also learn why it is better to use the English version of the program. Moreover, the speaker will tell you what the differences are between the English and Russian versions, and why professionals install the first option.

You will also learn which windows to pay attention to first, what Project is and what it is needed for. The author will show and tell you what a submenu is and what it includes. Let's talk in detail about composition, creating a new project, importing files and features of the process. You will also learn where to look for recently opened files. The lesson will teach you how to save time while working, optimize the process and other life hacks. The author will also talk about the hidden capabilities of the program.

Other topics: the importance of basic knowledge, hotkeys, coding, groups of tools for navigation, movement, creating objects or texts, retouching. We actively create various geometric objects, and also consolidate skills in navigation tools (magnifying glass, hand, etc.)

How to create a penguin animation?

We pay special attention to the preparatory work, get acquainted with the toolbar in even more detail (as a continuation/addition of the previous lesson). We draw a sketch in the program for future animation. In the learning process we use both simple and more complex tools.

We consolidate our skills and build basic animation using simple geometric shapes. You will also learn how to draw, add details, and create animated elements using the timeline. Let's take a closer look at the timeline - what it is, how to enlarge it, configure it, etc. We discuss layers, their properties (you can hide, leave, block), renaming a layer.

You will also learn how to block objects, what shape objects are, and how to change colors.

How to create a weather switch animation?

The main focus of the lesson is on the capabilities of hotkeys. We draw more complex – polygonal – shapes and elements in the program. Let's get acquainted with related techniques, use the "Grid" tool, and get acquainted with its functions. The author will show you where to look for this tool, works with filling, and creates additional elements that we will use in animation.

We work with the background and effects. As a result, you will get a fairly simple but effective animation, built on the basis of the movement of many identical elements that should appear in the frame smoothly and simultaneously.

Based on the skills acquired, you will be able to create even more complex animation based on similar techniques, which will significantly expand your capabilities.

How to create animation with Gravity Falls characters?

A very cool lesson dedicated to the very popular characters from the cartoon Gravity Falls - Mabel and Dipper Pines. The peculiarity of the lesson is that we need to animate only individual, small elements of the drawing. You can use your own image as a basis or select a source from the Internet.

Let's create a pre-compose. We use points and adjust them to fix certain elements of the picture and thereby make part of the picture motionless. Adding animation to the timeline. Change the settings to get the desired animation effect.

We consider such concepts as energy and smoothness of movement, and set the correct Frame Rate to make the picture smooth. The author will tell you why this is important, as well as what Frame Rate was used in modern games, classic Disney animation and movies.

How to create space animation in Adobe After Effects?

The level of the lesson is a little more complex compared to others, and no less interesting! This time you have to work not just with animation, but learn how to animate the inscription. In this tutorial you will create an animated effect as a lettering element based on a background from the web.

You can choose any “cosmic” background with stars, then create an inscription on it, which we animate, and not the whole word needs to be set in motion, but only some letters. As a result, you will get an unusual and very creative work that can be added to your portfolio.

How to create an animation of a dog?

We transform a vector image of a dog, previously found on the Internet, into animation. To implement the lesson, you can use your own drawings from. The author describes in detail the main tools and work areas of the program, dwelling on each point. Thanks to this, you will learn about the features of the toolkit.

In addition, from the lesson you will learn what an Anchor Point or anchor point (a selected frame point) is, what it is for and how it works. We will use the pen as the main tool throughout the lesson to acquire and consolidate a new, important skill.

Let's sort out the homework.

The lesson will be useful for those who want to evaluate the homework of other participants in the course, learn something new, and learn from mistakes and examples of work. The author of the course analyzes the work of sections of the course, pointing out inaccuracies, shortcomings and errors.

While watching the video, you will hear a lot of useful tips, tricks in design, styles, and also learn to evaluate your own work based on the quality of execution, creativity, and from a technical point of view. An excellent skill for further development, which will definitely be useful to you in the future - on the way to improving your skills and gaining new knowledge.

How to create an animation of a children's flower pot?

Let's animate a cute and fairly simple illustration. You can pre-draw the design in Abode Illustrator or create a sketch in the Adobe After Effects window. We take any drawing as a basis - ours or from the Internet, selecting one or more sources.

Thanks to the lesson, we will learn how to animate not only individual details of the drawing, but also additional elements, for example, gusts of wind, which will add unusualness and “freshness” to the animation. In the future, such a feature can be used in a wide variety of projects.

How to create an animation with morphing?

The purpose of the lesson is to introduce students to such an effect as morphing, show examples, and also learn how to implement a similar effect in work. In short, morphing is a technology in animation or the visual effect of transforming one object into another.

It is necessary that the object transforms smoothly, does not “harm” the eye, and looks stylish and interesting. A similar feature can later be used in television films or feature films, as well as in TV commercials. Morphing is often used in superhero movies or science fiction films. The author will show how to create such a visualization based on simple objects.

How to create an animation with a lighthouse?

We work with a drawing created in Adobe After Effects. We take our own ideas or references as a basis. You can also draw a picture in Illustrator and then import it into our program. We create a project with several animation elements.

The main element is a lighthouse that illuminates the shore with a lamp that moves in a circle. The second element of the animation is the twinkling stars. The author will also tell you what keys are and how to use them when creating animation to get exactly the effect you need. At the same time, he gives various tips, talks about practice, and shares tricks.

How to create a fish animation?

The lesson is devoted to two important topics - using the pen and animating an object such as a fish. The object was not chosen in vain: the fish move smoothly, carefully moving their body and fins. This is what needs to be conveyed in the lesson. The lesson will also allow us to improve and consolidate the skill of using the pen by drawing an object directly in the Adobe After Effects window.

How to create a rugby themed animation?

Original animation with a unique perspective on a sports theme is a great option for those planning to design for games or create graphics for commercial use, specializing in sports events. The lesson will be appreciated by both beginners and experienced users who want to add “freshness” to their work or find a new approach.

The author shows how to create animation from scratch, and also talks about the basics - tools. For animation, we use a ready-made illustration; you can create it from scratch or find references on the Internet and draw it in Illustrator. It is also necessary to break the illustration into layers so that you can work with each of them separately.

How to create an animation of a chef cat?

Cute animation based on a drawing. You can use your own illustration or references from the Internet. You can also create the base in or After Effects. The lesson is devoted to the step-by-step creation of an animation of a chef cat. The author also analyzes the timeline in detail, explaining each function and feature. For example, you will learn how to change the line size, what layer transparency is and other tricks.

The author will also focus on the basics, and therefore the listener will have the opportunity to refresh his knowledge and supplement it. In addition to theory, we consolidate all acquired skills in practice. After the lesson, you will have an animated cat in your portfolio, which will be an ideal character for a commercial project (designing a restaurant website or a cafe commercial).

How to create an animation from the cartoon “The Other Side of the Hedge”?

This time, the basis for our animation will be the heroes of the fairly famous animated series “On the Other Side of the Fence.” We use a GIF from the Internet as a basis. The lesson is aimed at consolidating the skills acquired in previous lessons, as well as gaining new theoretical knowledge. Particular attention is paid to the timeline and the use of keys. In addition, we actively use the concept of movement speed, adjust it and change it as necessary.

We will work on the background animation and position parameters. The author will also tell you how an experienced master differs from a beginner, and analyzes in detail the animation taken as a basis. You will also learn how to complete the elements of a gif, how to convert it into shapes and outlines, what a mask is, how to draw it, and why it is needed. How to correct errors and shortcomings.

How to create an animation with a burger and Japanese chopsticks?

We diversify our portfolio with original work. This time we set the burger and Japanese chopsticks in motion. We create the drawing immediately in the program window. It is quite simple, and therefore preparation will not take much time. After that, we proceed to animation. We create a new project and configure it taking into account the features of the options. Change the background as desired.

We actively use hotkeys, adjust the position, and can change the Frame Rate. The author talks in more detail about such a concept as shapes. What are they, how to create and use them. Review of selection tools, keys, careful study of the movement of objects. In addition, you will learn why it is better to use an English-language program.

How to create a scared roll animation?

Today we are creating a funny animation with a scared roll. Unusual work with a wow effect that will appeal to both professionals and beginners, especially if you are working on a portfolio and want to add something very original. Animation is based on cyclic movement, that is, the repetition of a series of combinations of movements. We work with prepared drawings in Abode Illustrator.

You can also draw characters directly in After Effects. We import the file, pay attention to the settings. We also create a new document taking into account the settings. We actively use the timeline, and also work with layers, studying submenus and layer options. You'll learn what paths are, vertices, how to work with fills, and much more.

How to create animation of candles?

Dynamic and funny animation of two candles, one of which is burning, and the other is extinguishing it. The peculiarity is not only in the dynamics, but also in the change of background during movement. The author begins with the basic parameters and working window of the program, and then moves on to creating animation.

He talks about presets, composition and other basic settings. From the lesson you will learn about many practical tips and life hacks, and also create a beautiful and bright GIF for your portfolio.

How to create a pseudo-3D midi keyboard animation in After Effects?

The topic for the lesson was an interesting computer technology called pseudo-three-dimensionality. Pseudo 3D is graphics that try to imitate a three-dimensional gaming space, but it is not one. A similar effect is often used in computer games. One example of this approach is the famous game Doom.

This is exactly what we will study! The author will tell and show how to create keyboard animation using pseudo-3D. The lesson will be especially interesting for those who plan to connect their future work with gaming technologies or computer games. In the future, you will be able to create more complex animations using this feature.

How to create an astronaut animation?

We create a GIF with an astronaut in a spacesuit moving in outer space against the backdrop of the planet. We work with the background and small details, creating a smooth picture with several moving elements. We continue to work with the timeline, consolidating our skills.

We also begin to take a closer look at layers and settings. The author shows and tells in detail how to work with the program, what needs to be done to get this or that effect. He also simultaneously answers questions from webinar participants.

How to create an animation of a saxophonist?

The topic of the lesson is creating collage-style animation with sound. First, we need to prepare the materials from which we will create a collage. You also need to choose a photo as a basis for the illustration. It is also necessary to find a video of saxophonists performing in order to repeat their movements and make the animation more natural.

We draw in Abode After Effects, creating many layers. This will make it easier for us to animate the collage. You can also use Photoshop files. All this and much more is clearly demonstrated by the author of the course. He also answers questions from course participants at the same time.

How to create an animation with a mouse and a refrigerator?

“How the mouse hanged itself in the refrigerator” - we create a complex animation with a characteristic dangling mouse and a pop-up refrigerator based on vector graphics. We work with space, draw additional elements (refrigerator, floor, walls). You can add more detail, or leave it as in the example.

Then we get down to details, while at the same time remembering the hot keys and basic tools. You will also learn how to create compositions, customize them, work with the layer and its settings. In terms of complexity, the lesson is more suitable for advanced users or those who take this course from the first lesson.

How to create an animation with jellyfish?

As an idea for the lesson, we use a gif - a frame from a movie, which we turn into vector graphics. The most difficult element is the jellyfish; we are also working on other elements: part of the room and characters. The main functions, features and tools of the program are briefly covered, as in previous lessons. The peculiarity of the lesson is to show the movement of jellyfish along a certain trajectory.

The author will show and tell you how to implement this idea so that the movements are as natural and smooth as possible. You will also see exactly which keys the webinar author uses, thereby strengthening your hotkey skills.

How to animate an airplane?

We start with an overview of basic things - we work through the basic tools, creating a new project (new document), working windows. We draw the base from scratch in the program. You can also use Illustrator and then import it into After Effects. We set up a new document and start drawing so that we can animate the image.

We pay special attention to the smooth movement of the gif, adjusting the Rate parameters to achieve the desired effect. Today we work with 14 frames per second, similar to films. We look at the result, correct shortcomings and make adjustments to the project. We also work with the flight path, with objects that go beyond the sheet. We use a pen and other tools.

How to animate a car?

As a basis for animation, we choose a complex element - a car. We use a three-dimensional image with tones and halftones, which we will then set in motion. The drawing can be created in Illustrator or directly in the After Effects window. We take any sketch or photograph from the Internet as a basis. We will also need several textures during the process, such as glass and pattern.

Let's form a general picture. As we work, we “bind” the elements to each other, and also work with anchor points, setting them up and checking them, adjusting the number of frames per second. We perform almost all commands using hot keys to remember them and speed up the work process.

How to create an animation with isometrics?

Isometrics is an original technique on the basis of which you can create not only illustrations, but also animation. It is the latter that you will do, learning how to create elements of the banking sector (plastic card and coins) using this technique.

Such animation can be used in commercial projects, for example, to design the website of a bank or any financial organization. So why not diversify your portfolio with this example! Image in isometric projection is a great option to show your skills and work on your skills.

How to create an animation of a shameless cat?

At the same time, the author answers questions from webinar listeners, for example, about why the English version of the program is necessary for work, as well as how relevant animation itself is, including as a professional employment.

How to create an animation with a UFO?

The final lesson of the course, in which you will create a flying saucer with a beam. We start with an overview of the working screen and the main functions of the program, then move on to creating a GIF. We consolidate all the skills and knowledge acquired in previous lessons, namely, we work with layers and their capabilities, edit the background, set up animation and adjust the speed of movement using the timeline.

We also set up the composition, draw in the program using a pen and other tools, and install various effects in animation. After the entire course on Abode After Effects, your portfolio will have 30+ full-fledged examples of work, animation with a UFO is one of them.

Purpose and structure of the Flash program

Recently, Flash has become fashionable. Many people believe that Flash is a new product, but this is not the case. Back in 1995, a small program called Future Splash Animator for vector animation of Web graphics appeared, and two years later, in 1997, Macromedia acquired it and began developing the product under the new name Flash.

Today, Flash is a universal, integrated application that combines an editor for graphics and sound, an animation tool, and allows you to create unique interactive multimedia products. Using Flash, you can create cost-effective, vibrant animations for the Web, interactive forms, games, interactive presentations, and much more. Knowledge of Flash is useful not only for Web designers, but also for teachers, artists and many others who want to express their ideas in the language of animation. Today, you don’t need a special studio for this; just a personal computer, Flash software and a little patience.

Basic Elements of the Flash Workbench

Before we begin describing the drawing tools, we need to talk about the interface elements. Let’s make a reservation that we will not bombard the reader with all the information about the interface at once and force him to remember all the details. We will provide just enough information about the program's interface to complete the current lesson. In each lesson we will examine new interface elements, explaining their purpose using specific examples.

When you first launch the program, you will see something like the one shown in Fig. 1.

Rice. 1. Basic elements of the Flash 5.0 program interface

Each newly opened file has its own desktop. On the desktop there is a frame, or Stage, a rectangular area on the screen in which a Flash movie is played.

Drawing tools are provided for drawing on the desktop (see the toolbar in Fig. 1). These are the ones we will talk about first of all.

The creation of any animation begins with drawing static images. The rapid change of one image to another, as a result of which the impression of movement of the image is created, is animation. To control the duration of display of images (animation control), use the timeline, or Timeline.

In Fig. 1 also presents floating panels (floating, dockable panels) panels designed to configure the Flash working environment. So, let's look at the basic drawing tools in Flash.

Drawing

Outline, stroke, fill

Before you start working with drawing tools, you should introduce the concepts of outline, stroke, and fill. Let's look at them using a simple example.

Select the Oval editing tool from the toolbar (Fig. 2) and draw an oval. The shape will automatically be filled with color. (If you hold down the Shift key while drawing an oval, the shape you draw will be in the shape of a circle.)

Rice. 2. The drawing consists of an outline, a stroke and a fill.

The drawing consists of an outline, a stroke of the outline and a fill (Fig. 2). To select the outline of a figure, click on the button shown in Fig. 3 red arrow. As a result, the stroke line and fill will disappear, only the outline will remain (Fig. 4).

Rice. 3. Remove fill and stroke button

Rice. 4. By removing the fill and stroke, we get a contour line

service line (not displayed when printing). Pressing the button shown in Fig. 3, returns deleted elements. The color of the outline stroke and fill is easy to change. The fill color can be changed using the Fill color button (Fig. 5). After you select a new color in the palette (Fig. 5), the drawn figure will not change, but when drawing a new ellipse, the outline will be filled with the newly selected color.

Rice. 5. Fill and Stroke Color Tools

In order to change the fill color in the current shape, you need to select a new color and use the Paint Bucket tool - it is highlighted in Fig. 6.

Rice. 6. The fill color of a drawn shape can be changed using the Paint Bucket tool

The stroke color can also be changed. To do this, select the Stroke color tool (Change stroke color) - in Fig. 7 the red arrow points to it. After this, a palette will open in which you can select the desired color, then you need to select the Ink Bottle Tool (it is highlighted in Fig. 7) and click it on the stroke line. As a result, it will be filled with the selected color.

Rice. 7. Change the color of the stroke line

In Fig. 6 the oval we drew is shown on a larger scale. Changing the scale, by the way, is set in the same way as in Photoshop, by using the key combination Ctrl and “+” or Ctrl and “-”.

The thickness and style of the stroke lines can also be changed. To do this you need to command Window > Panels > Stroke call the Stroke panel. In it you can customize the style of the stroke line, its thickness and color (Fig. 8).

Rice. 8. From the Stroke panel menu you can change the stroke line parameters

If you select the Hardline line style (Fig. 8) and apply the Ink Bottle Tool, you will get a one-pixel line. The Hardline line has no thickness, so no value appears in the line thickness box. The thickness of other lines, such as the dotted line, can be changed (Fig. 9).

Rice. 9. Example of changing the type and thickness of the stroke line

More fine-tuning of line parameters is done in the Line Style panel. You can call it by clicking on the button indicated by the red arrow in Fig. 10. In the Line Style panel, you can, for example, change the length of the stroke and the distance between strokes of the dotted line. If in Fig. 8, the default values were accepted - 6 points for the stroke and the distance between strokes, then by selecting the values 10 and 12 points respectively and again using the Ink Bottle Tool, you can get a stroke, as in Fig. 10.

Rice. 10. Fine-tuning line parameters

So, we looked at the basic concepts - outline, fill and stroke line - using the example of drawing an oval. Now let's talk directly about drawing tools.

Rectangle tool

The Rectangle tool is located next to the Oval tool (Fig. 11).

In addition to the traditional rectangle, you can draw rectangles with rounded edges. To set this mode, select the icon shown in Fig. 11 is indicated by the red arrow. As a result, the Rectangle Settings panel will appear, where you define the radius of the fillet, after which when drawing a rectangle, the corners will be rounded. Editing the fill and stroke of a rectangle outline is done in the same way as in the case of an oval.

Rice. 11. Working with the Rectangle tool

Line Tool

The Line tool allows you to draw straight lines (Fig. 12). By holding down the Shift key, you can draw vertical, horizontal, or 45° lines.

Rice. 12. Working with the Line tool

In some cases, if, for example, you need to draw an isosceles triangle, it is useful to use a grid. You can make grid lines visible using the command View > Grid > Show Grid(Fig. 13).

Rice. 13. When drawing regular geometric shapes, you can use a grid

Pencil tool

Rice. 14. The result of working with the Pencil tool with different settings (the top row of triangles is Straighten mode, the bottom row is Ink)

The Pencil tool is located below the Oval tool. In Fig. Figure 14 shows the result of working with a pencil with different options for setting it up, of which three are offered in total. With the Straighten setting, the tool turns the shaky lines of a hand-drawn contour into straight lines; with the Smooth setting, it smoothes out the lines, and in the Ink mode, it practically does not change the original contour.

Line editing, Arrow and Subselect tools

To explain how the Arrow tool works, we need to take a closer look at the structure of a contour line.

Let's draw a line using the Pencil tool, as shown in Fig. 15. It consists of a contour and a line stroke.

Rice. 15. Using the Subselect tool, you can select anchor points and contour line segments

Rice. 16. Example of moving a corner point

Rice. 17. Example of changing the curvature of a contour

Rice. 18. The stroke line follows the outline line

Until now, speaking about the circuit, we have not mentioned its structure. In order to explain the structure of the contour line, we will use the Subselect tool, activated in Fig. 15, and click it along the outline of the line. As a result, we will see that the contour line consists of segments and reference points (Fig. 15). When you use the Pencil tool, segments and anchor points are created automatically. When we edit the outline line, the stroke line automatically changes. Let's show how you can edit a contour line using the Arrow tool - it is highlighted in Fig. 16.

Anchor points can be angular or smooth. When we bring the Arrow tool closer to a line, its appearance changes. When it approaches a corner point, a corner will appear next to the arrow image - in this mode you can move the corner points (Fig. 16), and when approaching a segment or a smooth point, an arc image will appear - in this mode you can change the curvature of the contour (Fig. 17 ). When changing the contour line, the stroke line follows the contour line (Fig. 18).

Draw an ellipse and use the Arrow tool to select its fill with one click (the color of the selected fill will be lightened with white dots) and move it using drag-and-drop mode, as shown in Fig. 19. If you double-click, the stroke line adjacent to the fill will also be selected. Double-clicking also allows you to select intersecting lines.

Rice. 19. An example of moving a selected object with the Arrow tool

Rice. 20. Original image

Let's consider other types of modification of the selected image. Using the Pencil tool, draw a certain outline, for example a leaf (Fig. 20). Select the Arrow tool and select the drawn leaf into a rectangular frame. You can now process the selected object with the available modifiers.

In the Options panel, select the Smooth button and click on it several times - the outline of the leaf will acquire a smoother outline (Fig. 21a).

Rice. 21. Using modifiers from the Options panel: a) Smooth allows you to smooth out the contours of the image; b) Strighten makes it possible to straighten the contours of the image

The contour changes after several clicks on the Strighten button are shown in Fig. 21b.

Using the Lasso tool, you can select an area of any shape (Fig. 22).

Rice. 22. Example of a selection using the Lasso tool

Brush tool

Rice. 23. Example of working with the Brush tool

The Brush tool creates a vector path and fills it with the selected color, but, unlike the previously discussed tools, it does not form a stroke line (Fig. 23). To understand what kind of path the Brush tool creates, look at Fig. 24, where the Subselect tool is used.

Rice. 24. Example of a contour line created with the Brush tool

Rice. 25. Brush Tool Customization Options

The Options panel provides three options for customizing the Brush tool: modes (top button), brush sizes (middle button) and brush shape (bottom button) (Fig. 25).

The modes determine the nature of the interaction of the drawn line with the already drawn object (Fig. 26). As can be seen from the figure, when drawing the same type of horizontal lines in different modes, painting occurs in different ways:

Paint Normal the frame space is painted over, the stroke line and fill of the object being painted;

Paint Fills the space of the frame is painted over and the object being painted is filled. The stroke line is not painted over;

Paint Behind only the free space of the frame is painted;

Paint Selection only the selected area is painted;

Paint Inside only the fill that started painting is painted over.

Rice. 26. Different modes of interaction of brush strokes with a previously drawn object

It is necessary to explain the effect of the Lock Fill parameter - the button corresponding to this command with a lock icon is shown pressed in Fig. 27.

Rice. 27. Example of the Lock Fill parameter

When the Lock Fill parameter is activated (the button is pressed), the gradient applies to the entire working field (Fig. 27), and when it is not activated, the transition from one color to another is carried out based on a brush stroke (Fig. 28).

Rice. 28. Lock Fill option is not activated

Eraser

The eraser allows you to erase lines and fill and has a number of different settings. In the Options panel, you can configure the size and shape of the eraser, and also select the erasing mode (Fig. 29):

Erase Normal erases the stroke line and fill of the object;

Erase Fills the fill of the object is erased (the stroke line is not erased);

Erase Lines only lines are erased;

Erase Selected Fills Only the selected area is erased.

Erase Inside only the fill is erased, and when you draw a line with an eraser, erasing is done only inside the contour in which the line was started.

The Faucet modifier allows you to completely remove a fill or line.

Rice. 29. Different eraser modes

Pen tool

So far we've looked at tools that automatically create outlines. The Pen tool allows you to work directly with paths. With it, you can create straight and curved segments, adjust the length of straight lines and the inclination of curved segments.

Linear reference point

Select the Pen tool, click (you've placed the first anchor point), move the cursor, click (this is the second anchor point). The result will be a broken line, as in Fig. 30. The reference points shown in Fig. 30 are called linear, since the segments converging in them are linear. A linear point has no guides.

Rice. 30. An example of constructing a polyline using the Pen tool

Smooth anchor point

Rice. 31. An example of creating a smooth curve using the Pen tool

In order to place a smooth anchor point, select the Pen tool, press the left mouse button and, without releasing it, move the mouse slightly, as a result a smooth anchor point and a guide line emerging from it will appear (Fig. 31). By rotating and lengthening the guide line, you can change the curvature of the next segment.

To create an open contour, double-click on the last point. Release the mouse button, move the cursor and place the next anchor point; By repeating this procedure, you can get a smooth line, as in Fig. 31.

To close a path, move the cursor closer to the starting anchor point or path line. After the cursor changes to a pen with a circle, click the mouse and the outline will close.

If two independent segments connect at a point, then it is a corner point. For example, if you connect straight and curved segments, a corner point will appear at their intersection (Fig. 32).

Rice. 32. At the intersection of straight and curved segments, a corner point is formed

Anchor points can be transformed, moved, and deleted.

To convert a corner point to a smooth one, select the Subselection tool. Click on the corner point and, holding down the Alt key, drag the point - it will become smooth, and a guide line will appear, allowing you to change the curvature of the segments connecting at this smooth point (Fig. 33).

Rice. 33. An example of converting a corner point to a smooth one

By default, selected smooth curve points are displayed as hollow points, and selected corner points are displayed as hollow squares.

Using the Pen and Subselection Tools to Manipulate Anchor Points

Similarly, you can create points on lines drawn by other Flash drawing tools: Pencil, Brush, Line, Oval, Rectangle, and adjust these lines.

In particular, in Fig. Figure 34 shows a path made using the Oval tool by turning one smooth point into a corner point (using the Pen tool) and dragging the corner point using the Subselection tool.

Rice. 34. A path made with the Oval tool by turning one smooth point into a corner point and dragging it

Dropper tool

The Dropper tool is used to copy the color and style of pencil lines, brush mode and fills. When you move the pipette to the line, the cursor changes - a mini pencil icon appears under the pipette. When you click the eyedropper on a line, all the line parameters (color, thickness, style) are copied and the eyedropper is replaced with the Ink Bottle tool, which allows you to apply all these settings to another line.

Similarly, when the cursor is over a fill, a scoop image appears below the eyedropper, and when the cursor is over a brush stroke, a brush image appears below the eyedropper. These icons indicate which attributes you are copying with the Dropper tool.

Paint Bucket Tool

We have already mentioned the Paint Bucket tool - it is highlighted in Fig. 35, now let's look at its capabilities in more detail. This tool is used to fill closed (and partially closed) areas with color, gradient and raster fills.

If you have worked with filling raster images in Photoshop, then you are probably familiar with the situation when the fill “pouring out” over the edge of not very neatly drawn contours in those places where there are “holes”. In Flash, several modes of setting the fill tool are possible, allowing you to avoid the defect described above.

There are four options for configuring this tool:

Don’t Close Gaps do not close gaps;

Close Small Gaps close small gaps;

Close Medium Gaps close medium gaps;

Close Large Gaps close large gaps.

Select the Pencil tool and draw an open path (Fig. 35). Select Close Large Gaps mode and fill the outline. As can be seen from Fig. 35, the fill remains inside the outline, even though the original outline was open.

Rice. 35. Example of closing a contour in the Close Large Gaps mode

Now let's look at gradient fill and operations with it. In the Fill panel, select the filling option in the Fill tab - Linear Gradient. Then draw a rectangle, fill it with a linear fill with a linear gradient, and inside the large rectangle draw a smaller rectangle (Fig. 36). As you can see in this figure, in a small rectangle the transition from white to blue is realized on a smaller gradient. If you use the Lock Fill function and fill both rectangles, you will get a picture like in Fig. 37. That is, the gradient in the inner and outer rectangle will be the same.

Rice. 36. Gradient fill in mode when the Lock Fill parameter is not activated

Rice. 37. Gradient fill in the mode when the Lock Fill parameter is activated

In order to change the direction of the fill gradient, you need to click on the Transform Fill button in the Options panel (it is clicked in Fig. 38), and then click on the fill, as a result markers will appear (Fig. 38).

Rice. 38. Example of modifying a gradient fill

The top round marker is used to rotate the gradient fill, the rectangular one is used to increase (decrease) the gradient of the transition from one color to another, and the central round one is used to move the center of the gradient fill.

The Paint Bucket tool also allows you to fill a closed path with a raster image. Let us demonstrate how this procedure is performed using a simple example. Using the Rectangle tool, draw an image of the monitor into the screen of which the raster image will be inserted (Fig. 39).

Rice. 39. Vector image of the monitor into which the raster image of the photo will be placed

Then import a bitmap image that will fill the screen. You can import a bitmap by running the command File > Import and selecting the required file. Next, go to the Fill panel and change the fill method to raster - Bitmap (Fig. 40).

Rice. 40. Fill panel, Fill tab

Thus, if you fill a closed contour inside a drawn monitor screen, the fill will be done with a raster, as shown in Fig. 41.

Rice. 41. Example of raster fill

In order to edit a raster fill, you need to click on the Transform Fill button in the Options panel (it is clicked in Fig. 42), and then click on the raster fill; as a result, a frame with markers will appear (Fig. 42).

Using the central marker, the raster image can be dragged so that the desired part of the photo is displayed on the drawn monitor (Fig. 43).

Rice. 42. Raster fill modification frame

Rice. 43. By moving the center marker, you can crop the bitmap

Other markers allow you to scale the raster image, rotate it and deform it (Fig. 44).

Rice. 44. Example of raster fill deformation

After importing several photos, you can set up a palette from which you can select a raster to fill (Fig. 45), just like a color palette.

Rice. 45. Example of a palette with several bitmaps

Adding and subtracting shapes

When two shapes overlap each other, Flash either merges or segments them. Draw two same-color shapes - a circle and a rectangle (Fig. 46), select the rectangle (by clicking on it with the Arrow tool), and then overlay the rectangle on the circle and remove the selection from it (by clicking on it again with the Arrow tool).

Rice. 46. Initial figures

As a result, the two figures will merge into one. By clicking on the outline of the resulting shape with the Subselect tool, you can make sure that the inner outline has disappeared (Fig. 47).

Rice. 47. An example of combining two same-color shapes

Now do the same procedure with shapes of different colors. In this case, the internal border will not disappear (Fig. 48).

Rice. 48. When overlapping shapes of different colors, the inner contour does not disappear

Now if you select a rectangle and move it using the Arrow tool, a part will be cut out of the circle, as shown in Fig. 49.

Rice. 49. Part of the circle is cut out into a rectangle

Sometimes it is useful to use combining and subtracting the outlines of shapes to obtain a complex outline.

Adobe Flash Professional is a large, multifunctional program that is difficult to learn and use.

Adobe, as is its usual habit, doesn't care much about simplifying its programs. If other programmers, for the sake of simplicity, discard all intermediate options, then nothing is wasted in Adobe. All intermediate options for working on the program will be included in the final version in the form of some kind of button, panel or line in the menu. As a result, the weight of programs (in MB) increases and the program becomes overcomplicated. In addition, many tools completely or partially duplicate each other.

Adobe Flash Professional was no exception to this rule. The program has three different drawing modes, three different animation creation modes, and many other confusing features that can scare potential users away from the program.

Note: The authors of Adobe Flash Professional have somewhat simplified the latest versions of the program - functions such as creating classic motion animation , no Motion Editor, only one programming language is used: ActionScript 3.0, etc.

Program settings

Adobe Flash Professional is configured by default, but you can change these settings if necessary.

From the Edit menu, choose Preferences (Windows) or Flash > Preferences (Mac OS).
Among the many settings YOU can disable the Welcome Screen - No Document.
In the latest versions of the program, you can select the color of the program window ("General" tab - User Interface - Dark, Light).
You can change the number of possible cancellations of operations (“Undo”) - the default is 100.
Flash supports up to 9999 undoes, but you don't need to select the maximum because... this will slow down the program.

Highlight colors - You can change the default colors used for the displayed bounding boxes around a drawing of objects, groups, or symbols.

And other.

Creating a new document

You can create and open documents using the Welcome Screen or the File menu.
The "Welcome" screen is a launching pad for creating and opening files, including built-in standard Flash animation templates, banners, and animations for mobile phones.

In the Create New column of the Welcome window, select ActionScript 3.0.

Or: From the File menu, select New.
The New Document window opens.

On the General tab, select the type of Flash file you want to create (ActionScript 2.0 or 3.0).
The default language is ActionScript 2.0, but you can select ActionScript 3.0. Using ActionScript 3.0 allows you to use all the functions of the latest versions of the program (CS5 and CS6). For example, if you want to apply 3D rotation to objects when creating animation, then you need to select ActionScript 3.0 (ActionScript 2.0 does not support this function).
ActionScript 3.0 also requires visitors to have the latest version of Flash Player.

Notes:
In the latest versions of the program
1. ActionScript 2.0 is not supported.
2. It is possible to create animation in HTML5 format.

On the tab Create from template You can select a template to open it for editing.

You can always change the properties of your project - from the Modify menu, select Document, or use the keyboard shortcut Ctrl+J (Windows) or Command+J (Mac OS).

In the Dimensions section, set the width and height of your movie in pixels.
In the Ruler units section, the ruler units of measurement are set - centimeters. mm, pixels, etc. Typically, the unit of measurement for rulers is pixels.
In the Background Color section, select the background color of the animation.
In the Frame rate section, the speed is set - frames per second. Usually the default speed is 24 frames per second.
Auto-Save option - setting the frequency of auto-saving of your work.
The Printer option forces your new document to match your printer's paper size.

Saving a document

Your new document must be saved before starting any work or adding any content.

By default, documents are saved in Flash CS6 format - .fla
1 From the File menu, select Save.
2 Select a folder to save the project. Give the project your name.
Always include the .fla extension at the end of the project name.

Note: You can save the project in Flash CS5 format (this feature is not available in the latest versions of the program).
Documents created in Flash CS6 will not open in Flash CS5 or earlier versions.
Documents created in Flash CS5 and earlier will open in Flash CS6.

Opening a document

Select File menu > Open
Command File > Open Recent - to open the last 10 files.
You can also use the Welcome screen to open documents.

When you install Adobe Flash Professional on your computer, the Adobe Bridge file manager will be installed at the same time, which can be used when working with files.
From the File menu, select View in Bridge or Go to the program Bridge (Browse in Bridge).
Select the .fla file format in Adobe Bridge. When you double-click on a file, it opens in Adobe Flash.

Interface setup
If necessary, configure the workspace -

Animation creation

Templates
Adobe Flash includes many standard templates.
Templates come pre-set with dimensions and ActionScript version.
Select File > New and click on the Templates tab.
Review the included flash templates.

Drawing
Adobe Flash Professional has a built-in graphic editor for vector images that are used to create animation.

There are several drawing modes in Adobe Flash, the work in which has its own differences - see Drawing modes

Check out the range of drawing tools available in Adobe Flash - see Toolbar .
It is not difficult to create such simple objects as a rectangle (square), ellipse (circle), or line.
To create more complex objects, you will have to familiarize yourself with all the functionality of the program in the drawing area - see Drawing.

To create frame-by-frame hand-drawn animation, you will have to use a graphics tablet for drawing, because... Without this, it is extremely difficult to create high-quality animation.
About graphics tablets

Creating a simple animation

There are two main ways to create animation in Adobe Flash - frame-by-frame animation and tweens animation. In turn, tweens animation has several varieties -.

With any method of creating animation, you need to study the work
Timeline (Time Graphics). If you understand how the Timeline works, consider that half the work of studying the program is done.
Particular attention should be paid to working with layers and on work with personnel .

Having mastered all of the above, you will be able to create Flash elements (for example, banners, slides, etc.) to insert into your HTML pages.

You can create all the elements for your animation in Adobe Flash Professional. Or you can import elements created in Adobe Illustrator, Adobe Photoshop, Adobe After Effects, etc. programs.

The other half of the success in mastering Adobe Flash Professional is learning the ActionScript 3.0 language. In this case, you will be able to use all the functionality of the program, including creating interactive Flash sites.
An inferior alternative is to use the code snippets that come with the program (Window menu - Code Snippets).

This overview does not contain ActionScript tutorials, but such materials are available online.

Flash animation management

If you want to create something more complex than simple animated banners or slides, you will need:
A. Learn to create buttons
b. Learn to use ActionScript code.

Buttons (graphic or text) are needed so that a visitor to your site can control the animation - see Buttons.

Animation in Adobe Flash is created using ActionScript code. Earlier versions of the program used ActionScript 2.0, the latest versions use ActionScript 3.0. These versions have serious differences and are partially compatible.

When creating Flash animation, you don't have to manually write code, because... In Adobe Flash, most work is done in visual mode. However, in some cases you may need to insert ActionScript code. You can use the code snippets that come with the program or write the code yourself.

ActionScript code is used to give navigation buttons the correct actions - jumping to a specific frame of animation or to a specific page on a site, to control and synchronize audio and video, and much more.

For a quick introduction to ActionScript, see ActionScript.

Creation of a flash website

Preview

Local View

You can quickly preview your animation by moving the red playhead back and forth on the Frame Timeline (see below). Timeline).

To see how the animation will look online (that is, with all the animations nested), choose Control > Test the video(Test Movie) > in Flash Professional (in Flash Professional).
In this case, the created animation is viewed in the built-in Flash Player.

To test Flash for mobile phones, use the Control menu > Test the video(Test Movie) > in Device Central.

Publication

When you publish, the editor creates HTML files, a SWF file, and other files necessary for Flash to work properly.
For publishing settings, from the File menu, select Publishing options(Publish Settings).
To publish, select Publish from the File menu.

See additional details.