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.
Stroke thickness
Definitions of gradients
Text (including OpenType fonts)
Related Images
Blend Modes
Outlines and shapes
In addition, Illustrator and Flash support the following options when inserting a graphic.
When selecting layers in an Illustrator graphic 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 to RGB by Flash. 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 graphics, or create 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 Flash as a 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.
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, not even a tenth of this is implemented in Adobe Illustrator Flash capabilities, because this 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, the image will be saved as a static image, exactly the same as 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. When this parameter is reduced, the quality decreases significantly, especially in the area small parts, but the file size decreases. 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.
Today we have something unusual Adobe lesson Illustrator. Because this time we will not make a static picture, but a real animation. Imagine, it turns out that you can also draw cartoons using Adobe Illustrator :)
And for this we need nothing at all. Proper organization of layers and export 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 the style of a retro movie. The output should be a flash video with this same countdown.
The first thing you need to do is draw all the necessary elements for future animation. To do this, in a separate document, I made two positions of a film frame, 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, we can start creating the animation itself. For convenience, it is better to do this in a new document. In this case, our layers will play the role of animation frames. And in the very first layer you just need to copy a frame of film. Place it in the middle of your work area.
Now create a second layer and copy a frame of film into it, in which the holes along the edges are made with an offset. It also needs to be placed in the center.
From these two layers you can already get animation of moving film. But later we will need many 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 of 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 entirely convenient for work. Therefore, you can turn off some layers by clicking on the icon with an eye 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. By turning layers on and off, you can see exactly what is located in a specific frame of our future animation. And now, in order for us to add slight jitter to the movement of the film, we need to move the resulting frames slightly in different directions. To do this, turn on only the layer you are going to work with. this moment, and then move the frame a couple of pixels in any direction.
Once you've 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 document with the cartoon parts and place it on the first layer on top of the film frame.
If you deselect the circle, it will look like a single whole. This is exactly what we need.
But since it consists of individual sectors, you can create animation very quickly and easily by changing their color. To do this, copy this circle to the second layer and make the first sector lighter. You remember that our film shakes as it moves, so it is not at all necessary to place the circle exactly in the center of the frame. Position it by eye.
In a similar way, you need to copy the circle into each next layer, while painting one sector more with a lighter color than the previous time. Together, these 12 layers form an animation of the film moving with a filling circle.
Next we need to add texture to our layers. Turn on the first layer and copy the texture from the original file with spare parts there.
Then turn on the next layers one by one and copy the same texture there. To make it look different in each frame, simply rotate it 90 degrees. As you may have guessed, we need to add texture to all 12 frames.
If you are already quite tired of copying, then I can please you - there is very little left. The hardest part is over. All that's left is to add vertical scratches and that's almost it. To do this, we again copy the original scratch and place it in an arbitrary place in several layers. In my case, scratches appear in only two layers.
Now that the main cycle with film animation is ready, all that remains is to add the numbers. Since our countdown goes 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 reach the next copy of the layers, where the circle will again be completely filled in, you need to put the number two. In the same way, copy the number one to the desired layers. And when you get to the final layers for the Go!!! inscription, simply delete the circle before copying the inscription to the desired layer.
That's all for the animation. The main thing here is not to get confused. You can give the layers some convenient names, but I was kind of lazy :) And also, when you finish your work, 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 the cyclical animation. Thanks to it, the video will be played in a circle. And the Layer Order: Bottom Up option reproduces illustrator layers from bottom to top in the panel. This is exactly how we built our animation.
The output is a flash video with our animation.
Now you see that making 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, which I dug up at my work.
Also, recently HTML5 and CSS3 are increasingly being used to create animation. This code is supported by modern browsers and does not require the use of a flash player.
Roman aka dacascas especially for the blog Notes of a microstock illustrator
Subscribe to our newsletter so you don't miss anything new:
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 is information on browser support for SVG.
This article discusses simplest example animations SVG vector with help lightweight Jquery Lazy Line Painter plugin.
SourceTo 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.
We place these 2 files in the js folder. And we connect them to our index.html before main.js as follows:
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 we simply 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 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 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.
Import and simple animation Hello. Today we're looking at simple animation in After Effects.
Resources: Adobe Illustrator CC
Adobe After Effects CC
Let's start learning by drawing in Illustrator.
Let's draw
1) Draw a yellow rectangle as the background
Figure 1 - Rectangle
2) Draw a Circle and fill it with a gradient
Let's work a little on the circle:
- delete the bottom 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 rectangle is dark gray
4) Draw a Triangle from an asterisk by setting the number of rays to 3
Figure 3 - 1) rect light; 2) rect dark; 3) triangle
5) Draw a cat using Pen and simple shapes 
Figure 4 - 1) head; 2) neck; 3) body; 4) leg; 5) tail
And now the most IMPORTANT moment
Let's distribute the pictures into layers (what will be animated is on a separate layer) like this: 
Figure 5 - all pics (red mark important layers)
That's it, now let's save.
Let's look at the saving settings
Figure 6 - Save
And now the next stage. Close Adobe Illustrator and open After Effects.
Import into After Effects
File - Import - File - select our saved Illustrator file.
Let's choose to import layers from Illustrator; if we put in footage, we'll get a picture with merged layers, but we don't need that.
Figure 7 - Import As Composition
That's it, imported.
Now let's see what we have. Double click according to the composition, so that it opens and we see the layers (if everything is done correctly, there will be several layers). We get this, see figure
Figure 8 - Open Composition
And now what we are here for today is Animation.
Animation in After Effects
Set the rotation point at the top of the arrow using the Pan Behind Tool ( shortcut key- Y). We just take a point and move it where needed. As a result it will look like this.. 
Figure 9 - Pan tool and Layers
That's it, now let's move on to the layers for animation.
We will need an Arrow and Head_cat layer.
Let's start with arrow.
Let's expand the list, find it and click on the clock. So we set the first point at zero second. The animation will last 2 seconds in total.
So, these are the settings you need to make (we’ll put 3 points in total):
| Second | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figure 10 - Rotation arrow
Now let's animate the cat's head.
Let's expand head_cat and find Position .
There will be 4 dots here.
Only the last coordinate will be changed without affecting the others.
| Second | 0.1 | 0.17 | 1.12 | 2.0 |
| Position | 689.3 | 729.3 | 729.3 | 689.3 |
Figure 11 - Position head
So, the animation principle was like this. The arrow swings from side to side, as soon as it approaches the kitten, it pulls its head in, lingers in this position for a while, 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 will open 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 (just don’t forget to specify the path).
That's all.
Loading...
