Flash animation lessons. For beginners: where to start learning flash? Animation tutorials in adobe flash for beginners
Purpose and structure of the Flash program
Recently, the Flash program has become fashionable. Many people think that Flash is a new product, but it is not. Back in 1995, a small program Future Splash Animator appeared for vector animation of Web graphics, 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. With Flash, you can create cost-effective, vibrant animations for the Web, interactive forms, games, interactive presentations, and 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, this does not require a special studio a personal computer, Flash programs and a little patience are enough.
Basic elements of the Flash workspace
Before proceeding to the description of the drawing tools, we need to talk about the interface elements. We will make a reservation that we will not bring down on the reader all the information about the interface at once and force me to remember all the details. We will talk about the interface of the program just enough to be able to complete the current lesson. In each lesson, we will analyze new interface elements, explaining their purpose with specific examples.
When you first start the program, you will see something like this picture, as shown in Fig. one.
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 (Stage), - a rectangular area on the screen in which a Flash movie is played.
Drawing tools are intended for drawing on the desktop (see the toolbar in Fig. 1). It is about them that we will talk first of all.
The creation of any animation begins with the rendering of static images. A quick change from one image to another, as a result of which the impression of movement of the image is created, and there is animation. To control the duration of displaying images (animation control) is the timeline, or timeline (Timeline).
On fig. Figure 1 also presents floating panels (floating, dockable panels) panels designed to customize the Flash working environment. So, let's look at the basic drawing tools in Flash.
Drawing
Outline, stroke, fill
Before you start working with the drawing tools, you should introduce the concepts of outline, stroke, and fill. Let's take a look at a simple example.
Select the editing tool Oval (Oval) on 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, then the drawn figure will have the shape of a circle.)
Rice. 2. A drawing consists of an outline, an outline stroke, and a fill
A drawing consists of an outline, an outline stroke, and a fill (Fig. 2). To select the contour of the 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. Delete fill and stroke button
Rice. 4. Removing the fill and stroke, we get the contour line
service line (not displayed when printed). Pressing the button shown in fig. 3 returns the removed elements. The stroke and fill color is easy to change. The fill color is 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 you draw a new ellipse, the outline will be filled with the newly selected color.
Rice. 5. Color Picker Tools for Fill and Stroke Line
In order to change the fill color in the current figure, you must select a new color and use the Paint Bucket tool - it is highlighted in fig. 6.
Rice. 6. The fill color in the drawn shape can be changed using the Paint Bucket tool
The stroke color can also be changed. To do this, select the tool Stroke color (Change the color of the stroke) - in fig. 7 is indicated by a red arrow. After that, 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 along the stroke line. As a result, it will be filled with the selected color.
Rice. 7. Change the color of the stroke line
On fig. 6, the oval we have drawn is shown on a larger scale. Zooming, by the way, is set in the same way as in Photoshop, by using the key combination Ctrl and "+" or Ctrl and "-".
You can also change the thickness and style of the stroke lines. To do this, you need to command Window > Panels > Stroke call the Stroke panel. In it, you can adjust the style of the stroke line, its thickness and color (Fig. 8).
Rice. 8. From the Stroke panel menu, you can change the parameters of the stroke line
If we select the Hardline line style (Fig. 8) and apply the Ink Bottle Tool, we will get a line of one pixel. The Hardline has no thickness, so no value appears in the line thickness box. The thickness of other lines, such as a dotted line, can be changed (Fig. 9).
Rice. 9. An example of changing the type and thickness of the stroke line
More fine-tuning of the line parameters is performed on 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 stroke length and distance between strokes of a dotted line. If in fig. 8, the default values were taken - 6 points for the stroke and the distance between the strokes, then by selecting the values of 10 and 12 points, respectively, and again applying the Ink Bottle Tool, you can get a stroke, as in fig. ten.
Rice. ten. Fine tuning line parameters
So, we have considered the basic concepts - outline, fill and stroke line - using the example of drawing an oval. Now let's talk directly about the drawing tools.
Rectangle Tool
Tool Rectangle (Rectangle) is located next to the Oval tool (Fig. 11).
In addition to the traditional rectangle, you can draw rectangles with rounded edges. In order to set such a mode, select the icon on which in fig. 11 is indicated by a red arrow. As a result, the Rectangle Settings panel will appear, where you define the rounding radius, after which, when drawing a rectangle, the corners will be rounded. Editing the fill and stroke of the rectangle outline is done in the same way as in the case of an oval.
Rice. 11. Working with the Rectangle Tool
Line Tool
Tool Line (Line) 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 you, for example, need to draw an isosceles triangle, it is useful to use a grid. You can make grid lines visible by command View > Grid > Show Grid(Fig. 13).
Rice. 13. When drawing regular geometric shapes, you can use the grid
Pencil Tool
Rice. 14. The result of working with the Pencil tool with different settings (upper row of triangles - Straighten mode, bottom row - Ink)
The Pencil tool is located under the Oval tool. On fig. 14 shows the result of working with a pencil with different options for its settings, of which there are three in total. With the Straighten setting option, the tool turns the trembling lines of a contour drawn by hand into straight lines, with the Smooth setting option, it smoothes the lines, and in Ink mode, it practically does not change the original contour.
Line editing, Arrow and Subselect tools
In order to talk about how the Arrow tool functions, let's take a closer look at the structure of the contour line.
Let's draw a line with the Pencil tool, as shown in fig. 15. It consists of a path and a line stroke.
Rice. 15. Using the Subselect tool, you can select anchor points and contour line segments
Rice. 16. An example of moving a corner point
Rice. 17. An example of changing the curvature of the contour
Rice. 18. The stroke line follows the outline line
Until now, speaking about the contour, we did not mention its structure. In order to explain the structure of the contour line, we will use the tool Subselect (Partial selection), activated in Fig. 15, and click it along the line outline. As a result, we will see that the contour line consists of segments and anchor points (Fig. 15). When using 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 the contour line using the tool Arrow (Arrow) - it is highlighted in fig. 16.
Anchor points are angular and smooth. When we move the Arrow tool to a line, its appearance changes. When approaching a corner point, an angle 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 - 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 drag-and-drop it, as shown in fig. 19. If you double click, the stroke 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. Draw a contour using the Pencil tool, for example, a leaf (Fig. 20). Select the Arrow tool and select the drawn leaf in a rectangular frame. Now you can process the selected object with available modifiers.
On the Options panel, select the Smooth button and click on it several times - the leaf outline will become smoother (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 arbitrary shape (Fig. 22).
Rice. 22. Selection example with the Lasso tool
Brush Tool
Rice. 23. An example of working with the Brush tool
Tool Brush (Brush) creates a vector contour and fills it with the selected color, but, unlike the tools discussed earlier, it does not form a stroke line (Fig. 23). In order to understand what kind of path the Brush tool creates, look at fig. 24, where the Subselect tool is used.
Rice. 24. An example of a contour line created with the Brush tool
Rice. 25. Brush Tool Options
The Options panel provides three options for setting 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, shading occurs in different ways:
Paint Normal the frame space is filled with the stroke line and the fill of the object being painted;
Paint Fills fills the frame space and fills the object being painted. The stroke line is not filled;
Paint Behind only the free space of the frame is painted over;
Paint Selection only the selected area is painted;
Paint Inside only the fill from which the painting was started is painted over.
Rice. 26. Different modes of interaction of brush strokes with a previously drawn object
The effect of the Lock Fill parameter should be explained - the button corresponding to this command with the lock icon is shown pressed in fig. 27.
Rice. 27. An example of the action 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 on the basis of a brush stroke (Fig. 28).
Rice. 28. Lock Fill option not activated
Eraser
The eraser lets you erase lines and fills and has a number of different settings. In the Options panel, you can adjust the size and shape of the eraser, as well as select the erasing mode (Fig. 29):
Erase Normal the stroke line and object fill are erased;
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 the eraser, the erase is performed only inside the contour in which the line was started.
Modifier Faucet (Crane) allows you to completely remove the fill or line.
Rice. 29. Different modes of the eraser
Pen Tool
So far, we've looked at tools that automatically create paths. Tool Pen (Pen) allows you to work directly with the contours. With it, you can create straight and curved segments, adjust the length of straight lines and the slope of curved segments.
Linear anchor point
Select the Pen tool, click (you have placed the first anchor point), move the cursor, click (this is the second anchor point). The result is a broken line, as in Fig. 30. Reference points shown in fig. 30 are called linear, since the segments converging in them are linear. The line point has no guides.
Rice. 30. An example of building a polyline using the Pen tool
Smooth anchor point
Rice. 31. An example of drawing a smooth curve using the Pen tool
In order to set 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. Releasing 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 the path, move the cursor to the starting anchor point or to the path line. After the cursor changes to a pen with a circle, click the mouse to close the outline.
If two independent segments join at a point, then it is a corner. For example, if you connect straight and curved segments, then 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 Work with 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 created with the Oval tool by turning one smooth point into a corner point (using the Pen tool) and dragging the corner point with the Subselection tool.
Rice. 34. Path obtained with the Oval tool by turning one smooth point into a corner and dragging it
Dropper tool
Tool Dropper (Pipette) is used to copy the color and style of pencil lines, brush mode and fills. When you move the eyedropper to the line, the cursor changes - a mini-pencil icon appears under the eyedropper. When you click on a line with the eyedropper, all 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 bucket icon appears below the eyedropper, and when the cursor is over a brushstroke, a brush icon appears below the eyedropper. These icons show 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 consider its capabilities in more detail. This tool is used to fill closed (and not completely closed) areas with color, gradient and bitmap fills.
If you have worked with bitmap fills in Photoshop, then you are probably familiar with the situation when the fill "poured" over the edge of not very neatly drawn contours in those places where there are "holes". In Flash, there are several ways to customize the fill tool to avoid the above defect.
There are four settings for 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 path, even though the original path was open.
Rice. 35. An example of loop closure in Close Large Gaps mode
And now let's look at the gradient fill and operations with it. In the Fill panel, in the Fill tab, select the fill option - Linear Gradient (Linear gradient). Then draw a rectangle, fill it with a linear fill with a linear gradient, and draw a smaller rectangle inside the large rectangle (Figure 36). As you can see in this figure, in a small rectangle, the transition from white to blue is implemented on a smaller gradient. If you apply the Lock Fill function and fill both rectangles, you will get a picture, as in Fig. 37. That is, the gradient in the inner and outer rectangle will be the same.
Rice. 36. Gradient fill in the mode when the Lock Fill parameter is not activated
Rice. 37. Gradient fill in mode when the Lock Fill option 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 pressed in Fig. 38), and then on the fill, as a result, markers will appear (Fig. 38).
Rice. 38. An example of modifying a gradient fill
The top round marker is used to rotate the gradient fill, the rectangular one is to increase (decrease) the gradient of the transition from one color to another, and the central round one is to move the center of the gradient fill.
The Paint Bucket tool also allows you to fill a closed path with a bitmap. We will demonstrate how this procedure is performed using a simple example. Use the Rectangle tool to draw an image of the monitor into which the bitmap will be inserted (Fig. 39).
Rice. 39. Vector image of the monitor, in which the bitmap image of the photo will be placed
Then import a bitmap that will fill the screen. You can import a bitmap by running the command File > Import and selecting the desired file. Next, go to the panel Fill (Fill) and change the fill method to bitmap - Bitmap (Fig. 40).
Rice. 40. Fill panel, Fill tab
Thus, if you fill a closed contour inside the drawn monitor screen, then a raster fill will be performed, as shown in Fig. 41.
Rice. 41. An example of a raster fill
To edit a bitmap fill, you need to click on the Transform Fill button in the Options panel (it is pressed in Fig. 42), and then on the bitmap 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. Bitmap Fill Modification Frame
Rice. 43. By moving the center marker, you can crop the bitmap
Other markers allow you to scale the bitmap, rotate it and deform it (Fig. 44).
Rice. 44. An example of deformation of a bitmap fill
After importing several photos, you can set up a palette from which you can select a raster to fill (Fig. 45), just like the color palette.
Rice. 45. An example of a palette with several bitmaps
Addition and subtraction of figures
When two shapes overlap, Flash either merges or segments them. Draw two one-color shapes - a circle and a rectangle (Fig. 46), select the rectangle (by clicking on it with the Arrow tool), and then place the rectangle on the circle and deselect 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 contour of the resulting figure with the Subselect tool, you can make sure that the inner contour has disappeared (Fig. 47).
Rice. 47. An example of combining two one-color shapes
Now do the same procedure with shapes of different colors. In this case, the inner border will not disappear (Fig. 48).
Rice. 48. When overlaying shapes of different colors, the inner contour does not disappear
Now if you select a rectangle and move it with the Arrow tool, then a part will be cut out of the circle, as shown in Fig. 49.
Rice. 49. Part of the circle is cut out by a rectangle
Sometimes, to obtain a complex path, it is useful to use the union and subtraction of the contours of shapes.
Adobe Flash Professional is a large multifunctional program that is difficult to learn and use.
Adobe, in its unchanging habit, cares little about simplifying its programs. If other programmers for the sake of simplicity discard all intermediate options, then nothing is lost 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) grows and the program becomes overcomplicated. In addition, many instruments completely or partially duplicate each other.
Was no exception to this rule and Adobe Flash Professional. The program has three different drawing modes, three different animation 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 - such functions as creating classic motion tween , no Motion Editor , only one ActionScript 3.0 programming language is used, etc.
Program settings
Adobe Flash Professional is configured by default, but you can change these settings as needed.
From the Edit menu, choose Preferences (Windows) or Flash > Preferences (Mac OS).
From a variety of settings, YOU can turn off the Welcome Screen - No Document.
In the latest versions of the program, you can select the color of the program window (tab "General" - User Interface - Dark, light).
You can change the number of possible undo operations ("Undo" - Undo) - by default 100.
Flash supports up to 9999 undoes, but you don't have 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 drawing objects, groups, or symbols.
And other.
Create 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 templates for Flash animations, banners, animations for mobile phones.
In the Create New column of the Welcome window, select ActionScript 3.0.
Or: From the File menu, choose New.
The New Document window will open.
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 also select ActionScript 3.0. Using ActionScript 3.0 allows you to use all the features of the program latest versions(CS5 and CS6). For example, if you want to apply 3D rotation to objects when creating an animation, then you need to select ActionScript 3.0 (ActionScript 2.0 does not support this feature).
ActionScript 3.0 also requires visitors to have the latest version of the 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, choose 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 are set - centimeters. mm, pixels, etc. Usually the unit of measure for rulers is pixels.
In the Background Color section, the background color of the animation is selected.
In the Frame rate section, the speed is set - frames per second. Usually take the default speed - 24 frames per second.
Option Auto-Save - setting the frequency of auto-save your work.
The Printer option makes your new document match the paper size of your printer.
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, choose Save.
2 Select a folder to save the project. give the project a name.
Always include the .fla extension at the end of the project name.
Note: You can save the project in Flash CS5 format (this option is not available in the latest versions of the program).
Documents created in Flash CS6 will not open in Flash CS5 or earlier.
Documents created in Flash CS5 and earlier will open in Flash CS6.
Opening a document
Select menu File (File) > Open (Open)
Command File > Open Recent - to open the last 10 files.
You can also use the Welcome screen to open documents.
When installed on your computer, Adobe Flash Professional will be installed at the same time and file manager Adobe Bridge , which can be used when working with files.
From the File menu, choose View in Bridge, or Go to program Bridge (Browse in Bridge).
Select the .fla format file in Adobe Bridge . Double-clicking on a file opens it in Adobe Flash.
Interface customization
Customize your workspace as needed -
Animation creation
Templates
Adobe Flash includes many generic templates.
The templates come pre-set with sizes and an ActionScript version.
Select the File > New menu and click on the Templates tab.
Consider the included flash templates.
Drawing
Adobe Flash Professional has a built-in graphics editor for vector images that are used to create animations.
There are several drawing modes in Adobe Flash that work differently - see Drawing Modes
Check out the set of drawing tools that Adobe Flash has - see. Toolbar .
It is not difficult to create such simple objects as a rectangle (square), an ellipse (circle), a line.
To create more complex objects, you will have to familiarize yourself with the entire functionality of the program in the drawing area - see Drawing.
To create a 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
In Adobe Flash, there are two main ways to create animation - frame-by-frame animation and animation of smooth changes (tweens). In turn, tweens animation has several varieties -.
With any method of creating animation, you need to study the work
Timeline (Timeline). If you understand the work of the Timeline - consider that half the job of learning 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 already be able to create Flash-elements (for example, banners, slides, etc.) to be inserted 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.
As an inferior alternative, use the code snippets that come with the program (menu Window (Windows) - Code snippets).
This overview does not include ActionScript tutorials, but such tutorials 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 your site visitor 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.
You don't have to write code manually when creating a flash animation, because. in Adobe Flash, most of the work is done in visual mode. However, in some cases, you need to paste ActionScript code. In this case, you can use the code snippets that come with the program, or write the code yourself.
ActionScript code is used to give the navigation buttons the right actions - jumping to a specific frame of animation or to a specific page on a site, to control and synchronize sound and image, and much more.
For a brief introduction to ActionScript, see ActionScript .
Creation of a flash site
Preview
local view
You can quickly preview your animation by moving the red playhead back and forth on the Frame Bar (see below). Timeline).
To see how the animation will look on the web (i.e. with all nested animations), choose menu Control (Control) > Test video(Test Movie) > in Flash Professional (in Flash Professional).
In this case, the created animation is viewed in the built-in Flash Player (Flash Player).
To test Flash for mobile phones, use the menu Control (Control) > Test video(Test Movie) > in Device Central .
Publication
When publishing, the editor creates HTML files, a SWF file, and other files required for Flash to function properly.
For publish settings, from the File menu, select Publish Options(Publish Settings).
To publish, choose Publish from the File menu.
See more.
Recently, more and more letters come through the site with questions about where to start learning flash. I will 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, then nothing will work out. Who cares, read below (spelling and grammar of messages saved). And if you are not a beginner, then you will definitely be bored and tedious to read this :)
“hello)) my name is Nico, I am from Tajikistan and now I have a great desire to become a flash animator, but I just don’t know where to start, I found your site here 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 how do you draw, write, if I buy a wakom 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.Purchase/download a flash tutorial from the web. Take one of the latest versions (Flash Cs4-Cs 6), forget about Macromedia tutorials, FlashMX, it's already the last century in the truest sense. Although much has not changed in the flash since those times.
If you plan to study 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 reprinted for each new version flush. If you know English language is a great book, pleasing to the eye with wonderful graphics.
Download How to Cheat in Adobe Flash in Cs5 along with the disc is possible.
My study of the flush began with a tutorial. In studying flash, it was not the textbook itself that helped me personally, but the video course that came with the textbook. So let's move on to point #2.
2. Video tutorials.
I think that video lessons are the most effective, because I myself studied flash in a video course.
3. Another thing in learning flash animation is indispensable without such a program as Swf Decompiler. This is a breaker for svf files, that is, ready-made animations. Here's what she's talking about. It allows you to view (not swipe :) the work of a pro, it helps a lot in learning the flush. You take an already finished work and look at the timeline, how it was done, and try to repeat it. 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 on specific examples. Set yourself the goal of making an animation according to an invented scenario - for example, an animation of a car driving along a certain trajectory. When there is an end goal, it is easier to teach.
5. If questions arise during the study, they can be left here on or in the community in topic. Or on any other forums where flashers live.
The biggest flash forum I know of is - flasher.ru. So, dear newcomers - use the benefits of the Internet and this resource in particular :)
6. And another important point. In order to make good animation, it's a good idea to turn to classic animation tutorials (especially if you want to learn how to animate characters, not just text blocks for banners).
Having mastered flash as a tool, you will become not quite an animator, but rather a "wiggler" who knows how to move objects.
There are plenty of books on classical animation - stop at "Timing in Animation", you can take .
About 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? It's quite real, almost all the good flash animators I know have learned flash themselves, without courses and exams. Patience, diligence - and everything is in your hands. I’ll even say this - I don’t know the flashers who attended the courses, they all taught on their own.
“Thanks for the blog, I found a lot of useful things for myself.
I'm a pure vector artist, 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 wry-handed noobs)) So that even I would understand)) "
( tara )
There will be a lesson on animation for beginners. I have no idea how to fit everything into one lesson, I think it will be a series of lessons. I was sure that there are a lot of lessons for beginners on the Internet, but for some reason they often ask for them. So stay tuned for updates on the site and in
Animation creation– an interesting and exciting process, especially if clear and effective lessons. The list of today's instructions is just that.
Applying the knowledge gained in practice, following the author's advice step by step, you can easily learn how to create varying degrees of 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, they will be able to learn even more about the incredible potential of Adobe After Effects!
If you are looking for simple and clear lessons, this assembly 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 chips 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 do commercial animation and make it your job.
In addition, based on the knowledge gained, you will be able to further develop your skills, because the courses involve familiarity with the basic tools of Adobe After Effects, as well as consolidating the acquired skills. Agree, an excellent "foundation" for revealing 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 set it up. The author talks in detail about the nuances of settings, tools, life hacks - the information will be appreciated by both beginners and more experienced users.
See also:
- How to create a knight animation?
- How to create a dog animation?
- We understand homework.
- How to create fish animation?
- How to create candle animation?
- How to animate an airplane?
- How to animate a car?
- How to create an animation with a UFO?
How to create Rick and Morty animation?
Adobe After Effects is a great tool for anyone interested in motion and animation. Its possibilities are endless, and help to create a lot of creative GIFs of any complexity. By joining the course, you will learn from the very first lesson how to learn how to work in Adobe After Effects CC 2017.
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 Web. You can find the same one, or sketch your own. In the first lesson, you'll also learn how to customize your workspace, what tools you'll need to get started, how to create a new project, open files, import them from Photoshop, and more.
How to create an animation with pseudo-3D rotation?
In the lesson, a lot of attention is paid to the preparatory stage. Based on the reference, the author created his own animation with a pseudo-effect, which he then analyzes 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, a proportional grid and a magnifying glass. With their help, you will learn how 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, how to view the parameters of another file in the program.
Thanks to the lesson, you will learn about a new approach to animation, you will be able to create original GIFs, including those for commercial projects.
Creating an animation of a hovering robot.
A great tutorial for beginners, which will also be useful for experienced users. The peculiarity of the instruction is to create animation completely from scratch, which is especially true for people who see the Adobe After Effects program for the first time, but want to learn animation. As in the previous lessons, we are working 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, contours are, how to connect objects, what is snapping, timeline, how to increase the composition. At the same time, the author shares various tricks for professionals, explains the advantages of hotkeys, and makes his own developments that allow you to optimize the process of creating animation.
How to create tea bag animation?
An interesting animation that can be used in commercial projects, for example, for a tea shop or cafe video. The author will dwell on the workspaces in detail, tell where and what tools are located, what the work screen looks like, how to adjust the weight for yourself.
In detail, he dwells on the “Project” window, how to set it up, which means each item. You will learn how to create a new project from scratch, customize it. At what points you need to stop, what settings are important.
What is a "Preset" and which one to 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 of smooth animation. We take pictures from the web 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 gained in previous lessons, as well as improve them. The instruction is perfect for advanced users of the program, but it will also be of interest to beginners who want to emphasize something for themselves, expand the theoretical base, open up more program features.
The author reveals the features of the program, helps to optimize the process using hot keys, and also tells in detail why it is worth using only the English version of the program, and how it differs from the one translated into Russian. After the tutorial, you will have an animation of a knight with arrows, which you can add to your portfolio.
How to create an animation of a flying laptop?
This time we create an unusual animation in the original style. As a source, you can use work 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, which option to choose - footage or composition.
You will learn what is the difference between them and why it is worth choosing the "Composition" option (it is necessary that the layers be separated for ease of editing). The author will also reveal other tricks, and show how to create animation of "flying" objects. Great option for a commercial project, or as a portfolio project .
How to create an animation with a rabbit on a cloud?
We draw a cute animation - a rabbit on a cloud. In addition to a full 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 are the differences between the English and Russian versions, and why professionals choose the first option.
You will also learn which windows to pay attention to first of all, what Project is and what it is for. The author will show and tell what a submenu is and what it includes. Let's talk in detail about composition, creating a new project, importing files and process features. Also you will know where to look recently open 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 features of the program.
Other topics: the importance of basic knowledge, hotkeys, encoding, groups of tools for navigation, movement, creating objects or texts, retouching. We actively create various geometric objects, as well as 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 to the previous lesson). We draw a sketch in the program for future animation. In the learning process, we use both simple tools and more complex ones.
We consolidate skills and build basic animation using simple geometric shapes. You will also learn how to draw, add details, create animated elements using the timeline. We dwell in more detail on the timeline - what it is, how to increase, adjust, and so on. 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, how to change colors.
How to create weather switch animation?
The main focus of the lesson is on the possibilities of hotkeys. We draw in the program more complex - polygonal - shapes and elements. We get acquainted with related techniques, use the Mesh tool, get acquainted with its functions. The author will show where to look for this tool, work with fill, create additional elements that we will use in animation.
Working with background and effects. As a result, you get a fairly simple but effective animation, built on the basis of the movement of many identical elements, which should appear in the frame smoothly and simultaneously.
Based on the acquired skills, 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 cartoon characters Gravity Falls - Mabel and Dipper Pines. The peculiarity of the lesson is that we need to animate only individual, small elements of the picture. As a basis, you can take your own image or choose a source from the Web.
We create pre-compose. We use points and adjust them to fix certain elements of the picture and due to this make part of the picture stationary. Adding animation to the timeline. Change the settings to get the desired animation effect.
We consider such concepts as energy and smoothness of movement, set the correct Frame Rate to make the picture smooth. The author will explain why this is important, as well as what frame rate was used in modern games, classic Disney animation and in movies.
How to create space animation in Adobe After Effects?
Lesson level is a little more difficult 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 the tutorial, you will create an animation effect as a caption element based on a background from the web.
You can choose any "space" background with stars, then create an inscription on it, which we animate, and not the whole word, but only some letters, needs to be set in motion. As a result, you will get an unusual and very creative work that you can add to your portfolio.
How to create a dog animation?
We turn into animation a vector image of a dog, preliminary found on the Web. 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 item. Thanks to this, you will learn about the features of the toolkit.
In addition, from the lesson you will learn what Anchor Point or anchor point (selected frame point) is, what it is for and how it works. As the main tool throughout the lesson, we will use the pen to acquire and consolidate a new, important skill.
We understand homework.
The lesson will be useful for those who want to evaluate the homework of other participants within the course, learn something new, learn from mistakes and examples of work. The author of the course analyzes the work of the sections of the course, pointing out inaccuracies, shortcomings and errors.
Watching the video, you will hear a lot of useful tips, tricks in design, styles, and also learn how to evaluate your own work on the quality of execution, creativity, from a technical point of view. An excellent skill for further development, which will definitely come in handy in the future - on the way to improving skills and gaining new knowledge.
How to create an animation of a children's flower pot?
Animating a cute and fairly simple illustration. You can predraw your drawing in Abode Illustrator, or you can sketch in the Adobe After Effects window. We take any drawing as a basis - our own or from the Web, choosing one or more sources.
Thanks to the lesson, we will learn how to animate not only individual details of the picture, but also additional elements, for example, gusts of wind, which will add unusualness and “freshness” to the animation. In the future, such a chip 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 such an effect in work. In short, morphing is a technology in animation or the visual effect of turning one object into another.
It is necessary that the object transforms smoothly, does not “cut” the eye, looks stylish and interesting. A similar chip can later be used in television movies or feature films, as well as in commercials for TV. 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?
Working 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. Twinkling stars act as the second element of animation. The author will also explain what keys are and how to use them when creating animation to get exactly the effect you need. In parallel, he gives various tips, talks about practice, shares chips.
How to create fish animation?
The lesson is devoted to two important topics - the use of the pen and the animation of such an object as a fish. The object was not chosen in vain: the fish move smoothly, gently moving the 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 thanks to the image of the object right in the Adobe After Effects window.
How to create a rugby themed animation?
Original animation with an unusual angle on the theme of sports is a great option for those who plan 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 basic basics - tools. For animation, we use a ready-made illustration, you can create it from scratch or find references on the Internet, draw it in Illustrator. You also need to break the illustration into layers so that you can work with each of them separately.
How to create a cook cat animation?
Cute animation based on a drawing. You can use your own illustration or references from the web. You can also create a base in or After Effects. The lesson is devoted to the phased creation of the animation of the cat-cook. The author also analyzes the timeline in detail, explaining each function and possibility. For example, you will learn how to change the size of the line, what is the transparency of the layer, and other features.
Also, the author will dwell on the basics, and therefore the listener will have the opportunity to refresh knowledge and supplement them. In addition to theory, all the acquired skills are consolidated in practice. After the lesson, an animated cat will appear in your portfolio, which will become an ideal character for a commercial project (the design of a restaurant website or a cafe commercial).
How to create an animation from the cartoon "Beyond the fence"?
This time the basis for our animation will be the characters of the well-known animated series "On the other side of the fence". As a basis, we use a GIF from the Web. 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 such a concept as the speed of movement, adjust it and change it as necessary.
We will work on the background animation, position parameters. The author will also tell you how an experienced master differs from a beginner, analyzes in detail the animation taken as a basis. You will also learn how to draw GIF elements, how to convert them into shapes, contours, what a mask is, how to draw it, and why it is needed. How to correct mistakes and shortcomings.
How to create an animation with a burger and Japanese chopsticks?
Diversify our portfolio with original work. This time we set in motion a burger and Japanese chopsticks. The drawing is created immediately in the program window. It is quite simple, and therefore the preparation will not take much time. After that, let's move on to animation. We create a new project, configure it taking into account the features of the options. Change the background as desired.
We actively use hot keys, adjust the position, we can change the Frame Rate. The author talks in more detail about such a concept as shapes. What is it, how to create and use them. Overview 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. An unusual work with a wow effect that will appeal to both the professional and the beginner, 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. 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, study submenus and layer options. You'll learn what paths are, vertices, how to work with fills, and more.
How to create candle animation?
Dynamic and funny animation of two candles, one of which burns and the other extinguishes it. The peculiarity is not only in the dynamics, but also in the change of the background in the process of movement. The author starts with the main parameters and the working window of the program, and then proceeds 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, as well as 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, which is called pseudo-three-dimensionality. Pseudo 3D is graphics that try to mimic a 3D game space, but it is not. A similar effect is often used in computer games. One example of this approach is the well-known game Doom.
That is what we will study! The author will tell and show how to create keyboard animation using pseudo-3D. The lesson will be of particular interest to those who plan to link 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 background 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 skills.
We also begin to consider layers and settings in more detail. The author shows and tells in detail how to work with the program, what needs to be done to get this or me effect. He also answers the questions of the webinar participants in parallel.
How to create an animation of a saxophonist?
The topic of the lesson is creating a collage-style animation with sound. First we need to prepare the materials from which we will create a collage. You also need to select a photo as the basis for the illustration. It is also necessary to find a video with the performance of saxophonists in order to repeat their movements, to make the animation more natural.
We draw in Abode After Effects, creating many layers. Thanks to this, it will be easier for us to animate the collage. You can also use Photoshop files. All this and much more is clearly shown by the author of the course. He also answers the questions of the course participants in parallel.
How to create animation with mouse and refrigerator?
“How a mouse hanged itself in a refrigerator” - we create a complex animation with a characteristic dangling mouse and a drop-down 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 proceed to the details, 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 the 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 highlighted, 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 is using, so you can reinforce your hotkey skills.
How to animate an airplane?
We start with an overview of the basic things - we are working on the main 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. Set up a new document and start drawing, then animate the image.
We pay special attention to the smoothness of the gif movement, adjust the Rate parameters to achieve the desired effect. Today we work with 14 frames per second, by analogy with films. We look at the result, correct the shortcomings, 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. You can create a drawing in Illustrator or directly in the After Effects window. We take any sketch or photo from the Web as a basis. Also in the process we will need some textures, for example, glass and a pattern.
We form a common picture. In the process of work, we “bind” the elements to each other, and also work with anchor points, setting them up and checking, adjusting the number of frames per second. We execute almost all commands with hot keys to remember them and speed up the work process.
How to create animation with isometry?
Isometry 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, having learned 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, for designing the website of a bank, any financial organization. So why not diversify your portfolio with such an example! An isometric view is a great way to show off your skills and work on your skills.
How to create a shameless cat animation?
At the same time, the author answers the questions of the webinar listeners, for example, why the English version of the program is needed for work, and also how relevant animation itself is, including as a professional employment.
How to create an animation with a UFO?
The final lesson of the course, thanks to 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 GIFs. We consolidate all the skills and knowledge gained 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, set various effects in the animation. After the whole Abode After Effects course, you will have 30+ full-fledged examples of work in your portfolio, UFO animation is one of them.
