How to create gif animation in illustrator. How to make animation in Adobe Illustrator. Importing Illustrator files into a Flash application

The Flash (SWF) file format is based on vector graphics and is designed for scalable, compact graphics for the Internet. Because this file format is based on vector graphics, the object maintains 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 your website. You can also define symbols in the Illustrator file to reduce the size of the animation. When exporting, 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 mix of SWF and bitmap formats in a fragmented layout. This command offers fewer image options than the Export (SWF) command, but uses the last used Export command options (see ).

When preparing an object for saving in SWF format, keep the following guidelines in mind.

Using the Device Central app, you can see what an Illustrator graphic will look like in the app Flash Player on various handheld devices.

Inserting an Illustrator graphic

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

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

Outlines and shapes

• Stroke thickness

  Definitions of gradients

  Text (including OpenType fonts)

  Related Images

• Blend Modes

In addition, Illustrator and Flash support the following options when inserting a graphic.

When selected in graphic object Illustrator layers top level entirely and pasting them into a Flash application, the layers and their properties (visibility and locking) are preserved.

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

When you import or insert an Illustrator graphic, you can use various options to save certain effects (such as text shadows) as Flash filters.

Flash retains Illustrator masks.

Export SWF files from Illustrator

SWF files exported from Illustrator match the quality and compression ratio of SWF files exported from Flash.

When you export, you can choose from a variety of predefined styles for optimal output, and specify how you want to use multiple artboards and how you want to transform symbols, layers, text, and masks. For example, you can choose to export Illustrator symbols as movies or graphic images, and creating SWF symbols from Illustrator layers.

Importing Illustrator files into a Flash application

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

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

When importing Illustrator artwork as AI, EPS, or PDF application Flash retains the same attributes as when pasted graphic objects Illustrator. Additionally, 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.

IN Lately 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 is information on browser support for SVG.

This article discusses simplest example Animate SVG vectors using easy Jquery plugin Lazy Line Painter.

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 these are the steps we need to follow:

1. Create the correct file structure
The Initializr service will help us with this, where we need to select 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 which we need to download from the Lazy Line Painter project repository, we only need to transfer 2 files to our project. The first is ‘jquery.lazylinepainter-1.1.min.js’ (the 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 connect them to our index.html before main.js in the following way:

3. Draw a cool outline picture in Adobe Illustrator

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

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

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

6. Add some CSS to taste
Removing a 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 we add some CSS to the main.css file to make it look nicer:

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 for several seconds.

Now let's complicate the task a little - let's create an animated Flash banner. Of course, there is no need to talk about full-fledged Flash animation in this case - there are specialized packages for this. But to create a simple, amateur video, you can also use Illustrator.

There are no special tools or interface features, such as a timeline, that are typical for animation development programs in Adobe Illustrator. But there is one subtlety - you can use layers as frames.

Create a banner with only text.

Rice. 8.11. Layers palette menu

In this menu, we are interested in the Release to Layer (Sequence) command, which transfers each individual object to a new layer. Please note that when applying the command, it is the Group group that must be selected, and not the Layer 1 layer.

How the Layers palette should look after performing Release to Layer (Sequence) is shown in Fig. 8.12.

Rice. 8.12. Layers palette after executing Release to Layer (Sequence)

At this point the preparation is complete, you can save using Save for Web in SWF. SWF is the main graphics format based on Flash technologies. It would be more accurate to say that this is the Flash format (Fig. 8.13).

Probably, today all users are already familiar with Flash to one degree or another. Currently, this is the most common animation format on the Internet, with the help of which the vast majority of multimedia Internet pages are built.

Of course, Adobe Illustrator does not implement even a tenth of the capabilities of Flash, because that is not what the program is designed for. However, in it you can make either a static picture or a simple animation.

Rice. 8.13. Optimization settings for SWF format

The following settings are available.

• Read Only. If you check this box, the file will be written in such a way that it can no longer be opened for editing in any program. This, on the one hand, reduces the file size, and on the other hand, protects your copyright.
• The setting indicated by 1. The parameter that specifies the type of saving - image or animation.
• If you select the AI ​​File to SWF File option SWF file), the image will be saved as a static image, completely replicating what you see on the screen when working in Illustrator.
• Layers to SWF Frames allows you to create animations based on existing layers, which will be represented as frames. We need to choose this option.
• Curve Quality. The accuracy of the curves repeating the curves file of the original image. Reducing this parameter significantly reduces quality, especially in the area of ​​small details, but also reduces the file size. For our case, the optimal value is “7”.
• Frame Rate. Frame rate and, as a result, animation speed. For the effect to be correct, set it to no more than 4 frames per second.
• Loop (Repeat). Play the animation repeatedly. Suitable for animation where a repeating loop is important. The banner belongs to this type.

A transparent GIF in Adobe Illustrator is made as follows. Go to the menu File > Save for Web & Devices (Alt+Ctrl+Shift+S).

In the window that opens, in the Optimized file format field, you must first go to the Image size tab. The fact is that by default the entire page is included in the optimization window, and this is usually not necessary.

Therefore, in the Image Size tab, uncheck the Clip to Artboard checkbox and click the Apply button.

Then select GIF from the format selection list and check the Transparency checkbox. After this, we will determine which colors will be transparent. All colors present in the image are contained in the Color Table tab and are displayed as colored squares. Select the Eyedropper tool from the toolbar on the left side of the window.(or Ctrl). After choosing a color, you need to instruct the program to make it transparent. To do this, click the Maps selected colors to Transparent icon. In the picture, this button is circled and the red color is set to transparent. A transparent area will appear in the image, and the square on the color table will change its appearance - part of it will become a white triangle. To cancel the selected color, you need to select it in the Color Table, and then click the Maps selected colors to Transparent icon again.

A few words about the method of setting transparency. It is responsible for the drop-down menu Specify Transparency Dither Algorithm, in Russian - Algorithm for simulating transparency (Fig. below). There are four choices: No Transparency Dither, Diffusion Transparency Dither, Pattern Transparency Dither, and Noise Transparency Dither. In the diffuse algorithm mode, the Amount slider becomes active, allowing you to change the diffusion value. What to apply in practice? Depending on the purpose and image. I don't use this option and always leave it at the default - No Transparency Dither.

Click Save - transparent GIF ready. The work was carried out in Adobe Illustrator version CS4 (v.14), but all actions and keyboard shortcuts are also relevant for the earlier version CS3 (v. 13).

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

So, what did I like about the illustrator, and what did I find that was not in flash?
1. I’ll start with the simplest, but at the same time necessary. Try arranging objects in a circle in Flash. Previously there was a Deco Tool, but it was removed, apparently considered unnecessary. We decided that it would be more fun to do it with hands. Illustrator has this function: Effect – Distort&Transform – Transform.

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

2. Zig-zag

An even simpler, but nonetheless useful thing. It would seem like a small thing, but in Flash you have to draw by hand, in Illustrator it’s 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). In fact there are 15 of them in latest version programs.

4. Automatic rounding of corners (Round Corners)

You can do it manually: on a graphic object, when selected, a white dot and a rounded line sign appear in the corner (in all corners). We drag with the mouse and adjust it to your taste.

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

5. Roughen

The effect is applied to simple shapes (Effect – Distort&Transform – Roughen). The output is something resembling low-poly 3D models. I think it’s cool :) And most importantly, it’s very simple.

6. Pucker&Bloat (Pulling and Bloating)
Example in the picture below:

7. Form expansion (Offset Path)

Flash has an Expand Fill function; it doesn’t work with pencil lines at all, unlike Illustrator.

8. Brushes (Art Brush, Pattern Brush, Scatter Brush)
Look at the picture below with examples:

9.Texture Brush

Illustrator also features many texture brushes, which I wrote about and how they appeared in new version flash - . It has been observed that the use of brushes in Adobe Animate It slows down terribly. That's it:(

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

10.Split to Grid

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

Another useful tool presented in Illustrator, probably since its first release. With its help you can create, for example, wood textures:

12. Move (right – Transform - Move)

Displaces an object by a specified 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.

Illustrator is very convenient for creating seamless patterns (Object-Pattern-Make). I remember how furiously I developed sophistication in flash with the creation of . In the SS 2015 version of Illustrator, everything is automated; a bunch of settings will help you create a pattern in dozens of variations, having only a few at hand graphic elements. In more earlier versions All programs had to be done manually, just like in Flash until now.

(Note – the pattern can be made into a vector editable object using the Object – Expand Appearance function.

14. Object Mosaic

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

And at the output we get:

15.Blend

Used to create gradients. You can create step-by-step transitions, such as in the picture. I won’t say that I use it often, but it might be useful to someone. It seems to me that it can be used to create simple background images.

The tool can also be used to clone objects. 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 convenient thing for working with primitives. In flash, it seemed to me, it was less convenient.

Hold Alt and click on the selected segments to delete the segments. If we simply drag the mouse over several selected areas - connections.

Add-on is a tool that helps automatically cut, connect, etc. highlighted forms. As for me, it is not very convenient; I often use the Build Shape Tool.

(artboards)

18.Custom Tool Panel

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 placed before your eyes. It’s convenient when you make several versions of the same drawing, so that all the options are before your eyes for comparison.

19.Isometrics using Graphic Styles

And the last thing is creating isometry without using it in 1 click (or more precisely, in 3 clicks, because we have 3 sides;) using graphic styles (Graphic Styles). I’ll describe how this is done next time.

What the illustrator has in common with flash is the ability to save an object into a symbol, and just as easily this symbol can be transferred to flash (open the file in flash.ai using Import – Import to stage).
The symbol in Illustrator has the same properties as in Flash.
And in conclusion, I will write that in Illustrator, in my opinion, it is inferior to flash. Yes, yes, there is such a thing. And this is the fill tool (Paint Bucket). No matter how hard I try to get used to it in Illa, it’s more convenient in Flash.
If my notes have become useful for you or if you want to add anything of your own, welcome in the comments! Good luck to all;)