Recently, various kinds of animation of SVG (Scalable Vector Graphics) graphics on websites and applications have become very popular. This is due to the fact that everything latest browsers already support this format. Here's info on browser support for SVG.

This article discusses the simplest example Animate SVG vectors with easy jquery plugin Lazy Line Painter.

source

To complete and fully understand this task, basic knowledge of HTML, CSS, Jquery is desirable, but not required if you just want to animate SVG) Let's get started!

And so the steps we need to follow:

1. Create the correct file structure
2. Download and connect the plugin
3. Draw a Cool Line Art in Adobe Illustrator
4. Convert our picture to Lazy Line Converter
5. Paste the resulting code into main.js
6. Add some CSS to taste

1. Create the correct file structure
The Initializr service will help us with this, where you need to select the parameters as in the picture below.

• Classic H5BP (HTML5 Boiler Plate)
• No Template
• Just HTML5 Shiv
• minified
• .IE Classes
• Chrome frame
• Then click Download it!

2. Download and connect the plugin

Since initializr comes with the latest Jquery library, from the archive that we need to download from the Lazy Line Painter project repository, only 2 files need to be transferred to our project. The first one is ‘jquery.lazylinepainter-1.1.min.js’ (plugin version may differ) it is located in the root of the resulting folder. The second one is example/js/vendor/raphael-min.js.

These 2 files are placed in the js folder. And we include them in our index.html before main.js like this:

3. Draw a cool outline picture in Adobe Illustrator

1. Draw our outline picture in Illustrator (the easiest way to do this is with the Pen Tool)
2. It is necessary that the contours of our drawing do not close, because for our effect we need a beginning and an end
3. Should not have fills
4. The maximum file size is 1000×1000 px, 40kb
5. Let's crop to the borders of the object Object>Artboards>Fit To Artboards Bounds
6. Save as SVG (standard save settings are fine)

For example, you can use the icons in the attachment.

4. Convert our picture to Lazy Line Converter
Just drag and drop your icon into the box below.
The thickness, color of the outline and animation speed can be changed in the code itself that will appear after the conversion!

5. Paste the resulting code into main.js
Now just paste the resulting code into an empty main.js file
Options:
strokeWidth — outline thickness
strokeColor - outline color
You can also change the drawing speed of each vector by changing the value of the duration parameter (default 600)

6. Add some CSS to taste
Remove paragraph from index.html

hello world! This is HTML5 Boilerplate.

And instead of it we insert a block in which our animation will take place

then add some CSS to the main.css file for a nicer look:

Body ( background:#F3B71C; ) #icons ( position: fixed; top:50%; left:50%; margin: -300px 0 0 -400px; )

save all files.
Now just open index.html in a modern browser and enjoy the effect.

P.S. when running on a local machine, the start of the animation may be delayed by a few seconds.

Hi all! Today I will try to make a description of the features of the program Adobe Illustrator, comparing it with the capabilities of the flush. This will not be a global analysis of the program by bones, but rather a description of some interesting chips that I discovered in this program. I collected information piece by piece as I studied it in order to put it all in one post. I must admit right away that I am not a super-experienced illustrator user, only for the last six months I have been using it in drawing (before that, I drew everything in flash). Many complain that the illustrator is complex, not always intuitive. To some extent, I agree that after the flash, this program is difficult. But the main thing here is not to quit, but to continue studying. And after a couple of weeks, the thought arises, how did I manage without it before!

So, what I liked about illustrator, and what I found for myself that is not in flash.
1. I'll start with the simplest, but at the same time necessary. Try to arrange objects in a circle in flash. Previously was Deco Tool, but it was removed, apparently considered unnecessary. We decided that it would be more fun to do it by hand. Illustrator has this function: Effect - Distort&Transform - Transform.

Everything is fast and simple, we set the values ​​(distance between objects, number of copies) ourselves in the settings.

2. Zigzag

Even more simple, but nevertheless useful thing. It would seem a trifle, but in flash you have to draw by hand, in illustrator this is a matter of seconds.

3. Deformation of objects (Warp)

There is nothing like this in Flash. In the example below, I showed only 2 ways to deform simple shapes (Effect - Warp - Arc / Fish). Actually there are 15 of them. latest version programs.

4. Automatic rounding of corners (Round Corners)

It can be done manually: on a graphical object, when selected in a corner (in all corners), a white dot and a rounded line sign appear. Drag the mouse, adjust to your taste.

But this only applies to shapes, with a pencil line a little differently - apply the rounding effect ( Effect - Stylize - Round Corners). At the output we get the same result.

5. Roughen

The effect is applied to simple forms (Effect-Distort&Transform-Roughen). As a result, we get something resembling low-poly 3D models. I think it's cool :) And most importantly - very simple.

6 Pucker&Bloat(Pull in and Inflate)
An example in the picture below:

7. Form extension (Offset Path)

In the flash there is a function Expand Fill (fill extension), it does not work with pencil lines at all, unlike illustrator.

8. Brushes (Art Brush, Pattern Brush, Scatter Brush)
See the picture below for examples:

9.Texture Brush (Texture Brushes)

There are also many texture brushes in illustrator that I wrote about and how they appeared in new version flash - . It has been noticed that the use of brushes in Adobe Animate is terribly slow. That's it:(

10. I'm not sure if this is a trick, but I want to focus on a brush with a funny name blobBrush. Located on the toolbar, a very nice brush to use. It has a bunch of settings, I like it more than usual. It’s hard to explain its benefits in words, it’s better to try it once.

10.Split to Grid

Another useful feature is the Split to Grid (Object-Path-Split to Grid) function. It allows you to cut the form into equal segments. What does this remind us of? That's right - windows in a high-rise building. As for me, a cool thing for drawing, for example, urban landscapes;)

Another useful tool introduced in illustrator, probably since its first release. With it, you can create, for example, wood textures:

12. Move (right - Transform - Move)

Offset an object by a given distance. If desired, you can immediately create a copy that will be placed at the desired distance from the selected object horizontally / or vertically. An earlier version of flash had a plugin that did this function. Unfortunately, I don't remember its name.

It is very convenient to create seamless patterns in illustrator ( Object-Pattern-Make). I remember how I frantically excelled in flash with the creation of . In the illustrator version of CC 2015, everything is automated, a bunch of settings will help you create a pattern in dozens of variations, with just a few graphic elements at hand. In earlier versions of the program, everything had to be done manually, as in flash so far.

(Note - the pattern can be made a vector editable object using the parse function ( Object-Expand Appearance).

14. Object Mosaic (Mosaic)

Create a color palette based on an existing image. Import the picture you like into the illustration (Open), then Object - Create Object Mosaic. In the settings, we specify the division frequency in height and width.

And at the output we get:

15.Blend (Mixing)

Used to create gradients. You can create step-by-step transitions, as, for example, in the picture. I can't say that I use it often, but it might come in handy for someone. It seems to me that it can be used in creating simple background pictures.

The tool can also be used to clone objects. We place two objects at a distance from each other and apply Blend Options, select the number of steps (the number of cloned objects).

16. Build Shape Tool. A very handy thing for working with primitives. In a flash, as it seemed to me, it is less convenient.

Holding Alt and clicking on the selected segments - delete the segments. If we simply drag the mouse over several selected areas - connections.

Addition - a tool that helps to automatically cut, connect, etc. selected forms. As for me, it is not very convenient, I use it more often Buildshapetool.

(artboards)

18.Custom Tool Panel

The ability to create your own toolbar, discarding unnecessary ones, and select only those that you use.

In flash, artboards, namely scenes ( Scene 1,2,3..) are located separately and you need to switch between them (Shift + F2). In illustrator, they can all be positioned before your eyes. It is convenient when you make several versions of the same drawing, so that all options are in front of your eyes for comparison.

19. Isometric with Graphic Styles

And the last thing is the creation of isometry without using 1 click (or rather, 3 clicks, because we have 3 sides;) using graphic styles ( Graphic Styles). How this is done, I will write next time.

What illustrator has in common with flash is the ability to save an object into a symbol (symbol) and this symbol can also be transferred to flash without problems (open an .ai file in flash, by Import - Import to stage).
The symbol in illustrator has the same properties as in flash.
And in the end, I’ll write what in illustrator, in my opinion, is inferior to flash. Yes, yes, and there is. And this is the fill tool ( paint bucket). No matter how hard I try to get used to it in illa, it is more convenient in flash.
If my notes have become useful for you or if you want to add something on your own - wellcome in the comments! Good luck to all;)

The Flash File Format (SWF) is based on vector graphics and is designed for scalable, compact graphics for the web. Since this file format is based on vector graphics, the object retains image quality at any resolution and is ideal for creating animation frames. In Illustrator, you can create individual animation frames on layers and then export the image layers as individual frames for use on the website. You can also define symbols in an Illustrator file to reduce the size of the animation. When exported, each symbol is defined only once in the SWF file.

Export command (SWF)

Provides the most control over animation and bit compression.

Provides more control over the mixture of SWF and bitmap formats in a fragmented layout. This command offers fewer image options than the Export (SWF) command, but uses the most recently used Export command options (see ).

Keep the following guidelines in mind when preparing an object for saving as SWF.

Use the Device Central app to see what an Illustrator graphic will look like in the app Flash Player on various handheld devices.

Inserting an Illustrator graphic

A graphic object created in Illustrator can be quickly, easily and easily copied and pasted into a Flash application.

When you paste an Illustrator graphic into a Flash application, the following attributes are preserved.

Contours and shapes

• Stroke thickness

  Definitions of gradients

  Text (including OpenType fonts)

  Related images

• Blend Modes

In addition, Illustrator and Flash support the following features when pasting a graphic.

When selecting layers in an Illustrator artwork top level Entirely and pasting them into a Flash application, the layers and their properties (visibility and blocking) are preserved.

Illustrator color formats other than RGB (CMYK, grayscale, and custom formats) are converted by Flash to RGB. RGB colors are inserted in the usual way.

When you import or paste Illustrator artwork, you can use various options to save certain effects (such as a shadow cast by text) as Flash filters.

Flash saves Illustrator masks.

Export SWF files from Illustrator

SWF files exported from Illustrator are of the same quality and compression as SWF files exported from Flash.

When exporting, you can choose from a variety of pre-defined styles for optimal output, and specify how multiple artboards are used, how characters, layers, text, and masks are converted. For example, you can choose to export Illustrator symbols as movies or graphic images, as well as creating SWF symbols from Illustrator layers.

Import Illustrator files to the Flash application

To create a complete layout in Illustrator and then import it into Flash in one step, you can save your artwork in Illustrator native (AI) format and import it with high fidelity into Flash using the File > Import To Workspace commands. area" or "File" > "Import to Library".

If the Illustrator file contains multiple artboards, select the artboard to import from the Flash Import dialog box and specify the settings for each layer in that artboard. All objects in the selected artboard are imported into Flash as a single layer. When you import another artboard from the same AI file, objects from that artboard are imported into Flash as a new layer.

When you import Illustrator artwork as AI, EPS, or PDF files, Flash retains the same attributes as when you paste Illustrator artwork. Also, if the Illustrator file you are importing contains layers, you can import them using one of the following methods.

Convert Illustrator layers to Flash layers.

Convert Illustrator layers to Flash frames.

Convert all Illustrator layers to one Flash layer.

Adobe Illustrator and after effects
Import and simple animation

Hello. Today we are reviewing a simple animation in After Effects.

Resources: Adobe Illustrator CC
Adobe After Effects CC

Let's start by drawing in Illustrator.

We draw
1) Draw a yellow Rectangle as a background

Figure 1 - Rectangle

2) Draw a Circle and fill it with a gradient
Let's work on the circle a bit:
- remove the lower point on the contour, we get an arc;
- draw a straight line, closing the bottom of the arc, we get a semicircle

Figure 2 - 1) draw circle; 2) gradient; 3) delete point

3) Draw a Rectangle and make a copy of it
- one gray rectangle;
- another dark gray rectangle
4) Draw a Triangle from an asterisk by setting the number of rays - 3

Figure 3 - 1) rect light; 2) rect dark; 3) triangle

5) Draw a cat with Pen and simple shapes

Figure 4 - 1) head; 2) neck; 3) body; 4) leg; 5) tail

And now the most MAIN moment
Let's distribute the pictures into layers (what will be animated - on a separate layer) like this:

Figure 5 - all pics (red mark important layers)

Everything, now we save.
Let's see the save settings

Figure 6 - Save

And now the next stage. CloseAdobe Illustrator and open After Effects.

Import into After Effects
File - Import - File - select our saved file Illustrator.
Let's choose to import layers from Illustrator, if we put footage, we will get an image with merged layers, but we don't need this.

Figure 7 - Import As Composition

All imported.
Now let's see what we have. Double click on composition , what would open and we would see the layers (if everything was done correctly, there will be several layers). We get this, see picture

Figure 8 - Open composition

And now what we are here today for - Animation.

Animation in after effects
Set the pivot point at the top of the arrow using the Pan Behind Tool ( shortcut key- Y). Just take a point and move it where you want. As a result, it will look like this..

Figure 9 - Pan tool and Layers

That's it, now let's move on to layers for animation.
We need an Arrow layer and a Head_cat.
Let's start with arrow.
Expand the list, find and click on the clock. So we put the first point at zero second. In total, the animation will last 2 seconds.
So, these are the settings you need to make (we will put 3 points in total)

Second	0	1	2
	+66	- 70	+66

This is how it will look like:

Figure 10 - Rotation arrow

Now let's animate the cat's head.
Expand head_cat and find position.
There will be 4 points.
It will change only the last coordinate without touching the rest.

Second	0.1	0.17	1.12	2.0
position	689.3	729.3	729.3	689.3

Let's look at the picture.

Figure 11 - Position head

So, the principle of animation was like this. The arrow swings from side to side, as soon as it approaches the kitten, it draws its head into itself, lingers in this position for a little, and then returns it to its place.

The final stage

Production
You need to create a finished product from your work.
Go to the menu - Add to Render Queue
The Render panel opens and in the Output Module (two clicks) select the output format. I took *.mov

Figure 12 - Render

Click on the RENDER button and get the result (don't forget to specify the path).
That's all.

Today we have not quite the usual Adobe tutorial Illustrator. Because this time we will not make a static picture, but a real animation. Imagine it turns out help from Adobe Illustrator can also draw cartoons :)

And we need nothing for this. Competent organization of layers and export of the final work to swf format, where each layer is converted into an animation frame. In today's tutorial we will draw a countdown animation in retro movie style. The output should be a flash movie with this same countdown.

The first thing to do is draw everything necessary elements for future animation. To do this, I made two film frame positions in a separate document, a circle for reference, which is cut into separate sectors, a texture and a vertical scratch to add the effect of antiquity, as well as all the numbers and inscriptions.

When all the parts of our cartoon are ready, you can start creating the animation itself. For convenience, this is best done in a new document. In this case, the layers will play the role of animation frames. And in the very first layer, you just need to copy the frame of the film. Position it in the middle of the work area.

Now create a second layer and copy the film frame into it, in which the holes at the edges are made with a shift. It also needs to be centered.

From these two layers, you can already get the animation of a moving film. But later we will need a lot more layers. So select the first two layers, go to the panel options and make a copy of the layers.

In a similar way, we need to accumulate 12 layers with film frames that define its movement.

Now we have a whole bunch of layers and they are all visible. In the sense that the upper layers block the lower ones, which is not very convenient for work. Therefore, you can turn off some layers by clicking on the eye icon to the left of the layer name. To turn all layers off or on at once, hold down the Alt key while clicking on the eye icon. Turning layers on and off, you can see exactly what is located in a certain frame of our future animation. And now, in order for us to add a slight shake to the film movement, we need to move the received frames slightly in different directions. To do this, turn on only the layer with which you are going to work in this moment, and then move the frame a couple of pixels to either side.

When you have gone through all the layers and added a little shift, you can start creating the animation of the moving circle. To do this, copy the circle consisting of sectors from the cartoon parts document and place it on the first layer on top of the film frame.

If you remove the selection from the circle, then it will look like a single whole. This is exactly what we need.

But since it consists of separate sectors, it is possible, by changing their color, to create animation very quickly and easily. To do this, copy this circle to the second layer and make the first sector lighter. You remember that the film shakes during movement, so it is not necessary to put the circle exactly in the center of the frame. Place it on the eye.

Similarly, you need to copy the circle to each next layer, while painting with a lighter color one sector more than the previous time. Together, these 12 layers form an animation of the movement of the film with a filling circle.

Next we need to add texture to our layers. Turn on the first layer and copy the texture from there. source file with spare parts.

Then turn on the next layers in turn and copy the same texture there. To make it look different on every frame, just rotate it 90 degrees. As you may have guessed, we need to add texture to all 12 frames.

If you are already rather tired of copying, then I can please you - there is very little left. The hardest part is over. It remains to add vertical scratches, and almost everything. To do this, again, copy the original scratch and put it in an arbitrary place in several layers. In my case, scratches appear in just two layers.

Now that the main cycle with the film animation is ready, it remains to add the numbers. Since we are counting from 3 to 1 plus the word Go!!!, we need even more layers. Not 12, but as many as 48. To do this, you need to make three more copies of ready-made layers with film animation.

And then everything is simple. Turn on the very first layer and put the number three there.

Then you need to copy this figure to the next layers until the circle animation ends. When you get to the next copy of the layers, where the circle will again be completely filled, you need to put the number two. In the same way, copy the number one into the desired layers. And when you get to the final layers for the Go!!! label, simply delete the circle before copying the label onto the desired layer.

That's all with animation. The main thing here is not to get confused. You can give the layers some convenient names, but I was somehow too lazy :) And yet, when you are done, be sure to turn all the layers back on by clicking on the eye icon.

In the export settings window, be sure to set Export As: AI Layers to SWF Frames. It is this option that turns Illustrator layers into animation frames. Next, click the Advanced button.

Will open additional settings. Here you need to set the Frame Rate. I have 12 frames per second. The Looping checkbox is responsible for cycling the animation. Thanks to her, the video will play in a circle. And the option Layer Order: Bottom Up renders the illustrator layers from bottom to top in the panel. This is exactly how we built our animation.

As a result, we get a flash movie with our animation.

Now you see that making a simple animation in Adobe Illustrator is not as difficult as it seems at first glance.

But for creating long videos or interactive applications, it is still better to use Adobe Flash or other flash editors. For example, I made this cat in an old Macromedia Flash that I dug up at work.

Also recently, HTML5 and CSS3 are increasingly used to create animation. Given code supported modern browsers and does not require the use of a flash player.

Roman aka dacascas especially for the blog

Subscribe to our newsletter so you don't miss anything new: