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 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.
Web Graphics Optimization
Graphic information is transmitted much slower than text, and the loading time for images is proportional to their size graphic files. That's why fast loading Web pages assume small size embedded in them graphic images, which is achieved through their optimization. Image optimization refers to its transformation, ensuring a minimum file size while maintaining the image quality required in this case, which is achieved primarily by reducing the number of colors in graphic images, using compressed and special file formats, and optimizing compression parameters for individual image fragments.
Illustrator has built-in image optimization tools that make the optimization process quick and efficient with a variety of preview methods. The preview gives a fairly accurate idea of what the optimized image will look like in real time, which helps you evaluate the optimization result and successfully select the right settings. And you can optimize both images created directly in Illustrator, and others, for example, photographs that are supposed to be placed on a Web site.
Optimization parameters are set in the Save for Web window, called by the command of the same name from the File menu. The program offers you to use one of four preview modes, but two are best suited for assessing the quality of optimization:
- 2-Up (two options) simultaneous viewing of the original and optimized image in accordance with the specified settings (Fig. 1);
- 4-Up (four options) In this mode, the viewport is divided into four windows (Fig. 2) to display the original image and three versions of the optimized one: the first version is created based on the set optimization values, and the other two are variations of the current optimization settings.
Both modes allow you to significantly save time on searching best option optimization, as they eliminate the need to save images from different settings optimization and their subsequent visual comparison. In addition, it is possible to evaluate not only the quality of the optimized image, but also its size and loading time under different connection options. For comparison, the most convenient mode is 4-Up (four options), which allows you to visually evaluate the effect of compression or palette reduction on image quality and its size and ultimately determine the best optimization parameters.
Illustrator allows you to optimize Web graphics in not only GIF, JPG, PNG-8 and PNG-24 formats, but also SWF and SVG. Indexed images that have a small number of colors are saved in GIF format. To save full-color and grayscale images of photographs and color-saturated graphics, such as gradient fills, use JPG format. For full-color images with transparent areas, use PNG format, which allows you to save both indexed and full-color images, while in the PNG-8 format the maximum possible number of colors of the optimized image is 256, and in the PNG-24 format the image can have millions of colors, and therefore it is similar to JPEG format. The difference between PNG-24 and JPEG is that the compression method used to optimize images in the PNG-24 format does not lead to loss of quality, but as a result the file size increases. SVG and SWF formats combine graphics, text, and interactive components and can also be optimized.
Let's consider specific example image optimization. Let's say a website logo was developed in Illustrator (Fig. 3), initially saved in AI format. An attempt to immediately optimize it for the Web will not lead to anything good, since in this case the image will be automatically cropped, which will not take into account the true position of the resulting inscription as a result of deformation (Fig. 4 and 5).
Therefore, let’s try to export the logo to PSD format with the command File=>Export (File=>Export) the size of the created image will be 143 KB. Open the resulting PSD file and use the File=>Save for Web command. Taking into account the limited number of colors involved in the image, in this case the GIF format is optimal, the specific settings of which need to be decided. By experimenting with the settings, you can make sure that best quality gives the program's default compression algorithm, Selective. As for smoothing, given the presence of a gradient fill, it is better to choose an algorithm with noise generation Noise (Fig. 6). The size of the resulting optimization file will be 6.729 KB (Fig. 7), while the transparency of the background will be preserved, which is easy to verify by saving the image in GIF format along with the HTML file (Fig. 8). As a result, in in this example The files emblem.html and emblem.gif were received in the Primer1 folder.
An indispensable specific element of the design of any Web pages are graphical controls buttons. It’s simply impossible to imagine a page without them. Button drawing has become a special genre today, and Illustrator allows you to create the most intricate options. For example, buttons designed as mesh objects and/or with overlay masks look much more impressive than regular ones.
Consider the option of creating a round, convex button in Illustrator. Draw a vector object in the form of a circle filled with an arbitrary color (Fig. 9) and convert it to a mesh with the command Object => Create Gradient Mesh (Object => Create a gradient mesh), specifying four rows and four columns, and in the Appearance list, selecting option To Center Highlight equal to 60 (Fig. 10). Select the Direct Selection tool and click in the upper left corner of the object, selecting the anchor points located there (Fig. 11). Change the color of the corresponding cell to white by selecting it in the Swatches palette (Fig. 12).
Take the Ellipse tool, place the mouse marker in the center of the circle created before and, holding down the Alt and Shift keys, stretch the new circle over the old one so that it is 1-2 pixels larger than the old one on all sides. Give it a black border (Stroke) 1-2 pixels wide and fill it with a radial gradient in the direction from red to white (Fig. 13). Drag the created vector object 1-2 pixels to the right and down, then, without removing the selection, click on it right click mouse in and out context menu select Arrange=>Send To Back. The result will be a blank for the button, shown in Fig. 14.
As a rule, on any Web page there are several buttons of the same type, differing, for example, only in the direction of the arrows drawn on them, indicating the direction of movement around the site. Let's consider the simplest case of having two buttons, one of which, with a down arrow, will mean moving to the next page, and a button with an up arrow will mean moving to the previous one. As an arrow template, let's take a regular triangle, drawn with the Polygon tool, painted black and, for greater effect, also designed as a mesh object. Move the arrow to the button and adjust the position of all objects relative to each other using the corresponding buttons in the Align palette. The first of the resulting buttons is shown in Fig. 15. Let's make a copy of the layer with the button by selecting the command Duplicate Layer Layers, as a result we will get two identical layers. Then select the arrow on the copy of the layer and rotate it 180° by selecting the command Transform=>Rotate Transformation=>Rotate from the context menu. We will get the same button as shown in Fig. 16. Please note that it is much more convenient to store all the same type of buttons for one project in one file on different layers, which is demonstrated in this case.
Now you need to save the optimized versions of each button. First make the bottom layer invisible in this case the button on the top layer will be preserved. Select the File=>Save for Web command, configure the button optimization parameters, for example, as shown in Fig. 17, click the Save button and enter a file name. The ultimately saved button is shown in Fig. 18. Now return visibility to the bottom layer, make the top layer invisible and save the second button in the same way, giving it a different name. The result is shown in Fig. 19.
Now all that remains is to make sure that the buttons look quite acceptable on the Web page and place them on a custom page (Fig. 20). As a result, in this example, the file Primer2.html and two graphic images were obtained in the images folder (Primer2 folder).
If desired, it is easy to turn a button into a slice during the optimization process. In this case, after selecting the command File=>Save for Web (File=>Save for Web) and setting the optimization parameters, you should select the Slice Select tool from the tool palette and double-click on the image, which will eventually automatically turn into a slice with serial number 1 (Fig. 21). Repeated double click with the mouse will open the Slice Options window, in which you will need to specify a link and, if desired, change the name of the slice (Fig. 22), and then save the optimized image. The result in this case will be the files Primer3.html (Fig. 23) and Primer3.gif (Primer3 folder).
One way to bring a page to life is to introduce design elements that change its appearance(or state) depending on the behavior of the mouse or, less often, in the event of any other situations: scaling, scrolling, loading, errors, etc.
Among such elements, the most famous are rollovers (from the English roll over roll over, turn over) elements that change appearance under the influence of the mouse. Examples of typical rollovers are animated buttons. Rollovers are often used when creating other website navigation elements. In reality, any rollover is not one, but several (up to four) images, each of which corresponds to a specific event. The main events are considered to be the following: Normal normal state, Over hovering the mouse cursor over an element and Down pressing the left mouse button when hovering the cursor over it. Theoretically, events such as Click releasing the left mouse button after clicking, Up after releasing the button, Out when leaving the active zone can be involved. However, in practice, they are often limited to changing the element only for the first three or even two events.
Classic rolloversIn the classical sense, a rollover is a series of graphic images in GIF format and the corresponding HTML code, thanks to which, depending on mouse behavior, one image replaces another in the browser window.
Illustrator is not intended for directly creating rollovers in the classical sense, but it can help in developing the initial elements for them. The idea in this case is to create a layer with the image corresponding to the first event. Then make a copy of the layer and transform the image to match the second event, and so on. The resulting multilayer image is exported to a PSD file with the layers preserved, on the basis of which a rollover is created in Image program Ready. The advantage of using the Illustrator program, as in many other cases, is a number of its interesting opportunities, not available in others software, combined with the convenience of transforming vector graphics.
Let's try to create a rollover in the form of an inscription that changes color depending on mouse behavior. Open Illustrator and create a shape in the form of a rounded rectangle filled with black (Fig. 24), make a copy of it and place it in a free part of the screen. Convert the first copy of the rectangle into a mesh object with a highlight in the center (command Object=>Create Gradient Mesh Object=>Create Gradient Mesh), specifying four rows and ten columns (Fig. 25). Activate the second copy of the rectangle and set it to a gradient fill approximately as shown in Fig. 26. Overlay the gradient object on top of the mesh one, reduce the opacity of the gradient object to about 80%, and the size by about 1 pixel to eventually simulate the effect of a bump. And then print the inscription on top of the objects. In its original form, let it have a white color, which will correspond to the Normal state (Fig. 27), and then when the rollover state changes, the color of the inscription will change, for example, to green when the mouse marker is hovered over it (Over state) and to blue when the mouse button is pressed (Down state).
Pay attention to the Layers palette on at this stage it has only one single layer. Make two copies of this layer by using the Duplicate Layer command from the Layers palette menu; there will be three layers in the palette (Fig. 28). Then in the first copy of the layer change the color of the inscription to green, and in the second copy to blue (Fig. 29). As a result, the necessary blank for the rollover will be obtained.
Export the created image to PSD format, preserving the layers, using the File=>Export command and selecting the RGB color model (Fig. 30). Open the created PSD file in the ImageReady program (Fig. 31 and 32). Create frames based on layers by selecting the Make Frames From Layers command from the Animation palette menu. The Animation window will look like in Fig. 33. In this case, a single Normal state will initially be created in the Rollovers palette.
Then, in the Animation window, select the frame corresponding to the induced state, and the Layer 1 Copy layer will automatically be selected in the Layers palette (Fig. 34). Go to the Rollovers palette and click on the Create Rollover state button (Create a rollover state) fig. 35, which will cause the Over State state to appear in the Rollovers palette (Fig. 36). Create a Down State in the same way. Activate the Normal state in the Rollovers palette and delete all frames in the Animation palette except the one that should correspond to the Normal state. As a result, for each rollover state there will be only one frame in the Animation palette (Fig. 37, 38 and 39).
Rice. 38. View of the image, the Animation window and the Layers and Rollovers palettes for the Over State state
Check the result by clicking the Preview in Default Browser button on the toolbar and going to the browser window (Figure 40). After that, save the file by using the command File=>Save Optimized and specifying HTML option and Images (*.html) . As a result, in this example, the file Primer4.html and a series of graphic images were obtained in the images folder.
Rice. 40. Browser window with Rollover element
SVG rolloversThe increasingly popular SVG (Scalable Vector Graphics) format, created based on the XML standard, also allows you to get a variety of interactive elements, in particular rollovers, but in practice this is implemented completely differently. It is worth noting that creating interactive SVG rollovers, unlike classic ones, when the corresponding HTML code is generated completely automatically, requires knowledge JavaScript language and understanding the basic principles of object-oriented programming.
To work with SVG objects there is a special palette SVG Interactivity, which can be easily opened using the command Window => SVG Interactivity (Window => SVG interactivity) fig. 41.
Let's consider this option creating a rollover using the example of an interactive button, the color of the inscription on which will change from black to blue when hovering the mouse and again transform into black when the mouse leaves the active zone.
Create a rectangular button with rounded edges and select a suitable gradient fill for it, for example as shown in Fig. 42. Adjust the transparency of the button in the Transparence palette. In this example, the Opacity value is set to 50%. Make a copy of the button, fill it with dark green (Figure 43), and then convert it to a mesh object with the command Object => Create Gradient Mesh, specifying four rows and ten columns, and in the Appearance list (View) by selecting the To Center option and setting the Highlight value to 100. Reduce the opacity of the layer with the mesh object to about 40% (Fig. 44). Place a mesh object on top of a gradient one, and the button will resemble the one shown in Fig. 45.
Rice. 44. Turn a copy of a button into a mesh object
Complete the button with the intended inscription and adjust its position using the corresponding buttons in the Align palette. The resulting image will contain one layer with three objects superimposed on each other (Fig. 46). Scheduled events will be relative to a text object, so for convenience, change its name to Text by double-clicking the object and entering a new name. Similarly, change the layer name from Layer 1 to Layer (Fig. 47).
Event processing involves the use of JavaScript procedures, so you need to include a file describing these procedures. It's called Events.js and is saved to disk in the Sample Files\Sample Art\SVG\SVG folder upon installation Adobe programs Illustrator. To connect the Events.js file, use the JavaScript Files SVG Interactivity command (Fig. 48). Next, you need to click the Add button and find required file on your hard drive. When his name appears in the URL field (Figure 49), click the Done button.
Rice. 48. Selecting the JavaScript Files Command
Next, you need to define a response to mouse events for the Text object. Select the Text object, in the Event field of the SVG Interactivity palette, select the event onmouseover elemColor(evt, "Text", "#3333FF") this will mean that when the mouse is over the Text object, its color will change to blue (Fig. 50 ). In order for the text color to change to black after the mouse leaves the active area, you will need to create another onmouseout event select it in the Event field of the SVG Interactivity palette. Then in the action line enter the text elemColor(evt, "Text", "#000000") this will return the color to black (Figure 51).
Rice. 51. Final look of the SVG Interactivity palette for the Text object
Save the created rollover as an SVG file with the command File=>Save as (File=>File type SVG format, and then setting the options for saving the SVG file as shown in Fig. 52. After saving, you will receive only one single file with the extension SVG, and not two, as in the case of a classic rollover, in this case the file Primer5.svg (Primer5 folder) was received. However, in order for the rollover to really work, you must additionally copy the Events.js file from description of JavaScript procedures.After this, you can check the functionality of the rollover - the result will look like shown in Fig. 53.
The SVG format can also be used to convey animation. Let's try to create a simple animated element (in this case it will be information about the company), which will appear on the screen when you hover the mouse over the corresponding graphic object and disappear when you remove the mouse from the interactive element.
Let's create approximately the following series of graphic and text objects, as shown in Fig. 54. Let's rename all created objects in a convenient way by sequentially clicking on the name of the next object in the Layers palette and entering desired name(Fig. 55). Please note that those highlighted in Fig. 56 objects Text1, Text2, Text3 and Path1 will always be visible, and all others only when you hover the mouse over the Text1 object.
Rice. 54. Original view of the image
Include the Events.js file with a description of JavaScript procedures using the JavaScript Files command ( JavaScript files) from the SVG Interactivity palette by clicking the Add button, pointing to the desired file on your hard drive and clicking the Done button.
Define a response to mouse events for the Text1 object. Select the Text object, in the Event field of the SVG Interactivity palette, select the onmouseover event and in the line below enter the text elemShow(evt, "Text4"); elemShow(evt, "Path2") . As a result, when the mouse is over the Text1 object, the Text4 and Path2 objects will become visible. Please note that if several actions must be performed when an event occurs, they must be specified using the “;” sign. Then perform a similar operation for the onmouseout event, entering the text for it, which will mean hiding objects (Fig. 57).
Save the result as an SVG file using the File=>Save as command, specifying the file name, selecting the SVG format in the File type field, and then setting the options for saving the SVG file in accordance with Fig. 58. After saving, the Primer6.svg file will be received (Primer6 folder). Don't forget to copy the Events.js file to the folder with this file. If after this you run coz this file, then you will see the result shown in Fig. 59. This is almost what you need. The only thing that was not included in our plans was the initial appearance of Text 4 and Path 2 objects upon loading. To get rid of this shortcoming, select both object data at once and create an action for them elemHide(evt, "Text4"); elemHide(evt, "Path2") at the onload event (Fig. 60). Save the file again and make sure that the Text4 and Path2 objects are now only visible when you hover over the Text1 object.
Any Web page is unthinkable without Web animation, including animated gifs. One of the options for their creation application Adobe applications ImageReady, which allows, among other things, to create animation from layers. In this case, the multilayer image itself can be prepared in different applications, including Adobe Illustrator.
It's very easy to create an animation based on elements from the Symbols palette, opened with the Window=>Symbols command, or from one of the symbol libraries that can be opened using the Window=>Symbol Libraries command. ).
For example, we will try to increase the size of any symbol object; the key stages of the process of increasing the object must be set on separate layers. First, simply place the symbol objects one above the other, and then increase the size of each subsequent object, for example as shown in Fig. 61. As a result, one layer with many objects will be created in the Layers palette (Fig. 62). If you directly export this image to PSD format, it will not give anything, since there is only one layer, and naturally, when you open the PSD file in the ImageReady program, there will also be only one layer. Therefore, you must first place objects on different layers. This can be done different ways The easiest way is to first select Layer 1 in the Layers palette and use the Release to Layer command. The result will be that each of the objects will be moved to its own layer, but they will all be nested in Layer 1. Therefore, you will then have to manually drag all the nested layers to the top of the Layers palette so that they are above the Layer 1 layer, and then simply delete the now empty Layer 1 layer (Fig. 63). Export the image to PSD format using the File=>Export command with settings as in Fig. 64.
Load the created PSD file in the ImageReady program (Fig. 65 and 66). Open the Animation Make Frames From Layers palette menu. As a result, five frames will be created, each of which will correspond to its own layer, and the Animation palette window will look like in Fig. 67.
After this, set the duration of each of the created frames in this case, the duration for all frames is set to 0.2 s. And then save the animation with optimization using the command File=>Save Optimized (File=>Save with optimization). The resulting result may resemble Fig. 68.
It’s even more convenient to obtain blanks that can then be easily converted into animation in ImageReady to use the Live Blends functions of Illustrator. This combined use of Illustrator and ImageReady significantly speeds up the process of creating GIF animations.
For example, draw two arbitrary multi-colored objects, and then connect them with a blend link with the appropriate parameters (Fig. 69). It is impossible to use this file directly to create animation, since the image is on a single layer (Fig. 70). Therefore, you will first need to place each element of the blend object on a separate layer. To do this, in the Layers window, select the line, activate the palette menu by clicking on the black arrow in its upper right corner, and select the Release to Layers Sequence command (Fig. 71). Holding Shift key, select the created layers and place them above the Layer 1 layer, and then delete the Layer 1 layer itself, moving it to the trash bin as a result, the layers palette will take the same form as in Fig. 72.
Rice. 70. Initial state of the Layers window
Export the created file to PSD format using the File=>Export command. Open the created PSD file in the ImageReady program (Fig. 73). Please note that all layers created in Illustrator will appear in the layers window (Fig. 74), and in the Animation window there will be only one frame for now.
Activate the Animation palette menu by clicking on the black arrow in the upper right corner of the palette and select the Make Frames From Layers command. As a result, in this example, five frames will be created, and the Animation palette window will take the form in accordance with Fig. 75. Select all frames while holding down the Shift key and set the appropriate frame duration in this example, the same time of 0.2 s is taken for each frame. Then save the file with optimization using the command File=>Save Optimized (File=>Save with optimization), setting the option Images Only (*.gif) in the File type list. The animation will resemble Fig. 76.
What looks much more interesting is not the movement, but the smooth resizing of blend objects. For example, you can use the already created blend transition. In this case, after creating separate layers for each blend transition element, place all objects on top of each other using the Horizontal Align Center and Vertical Align Center buttons of the Align palette (Fig. 77) .
Export the created file to PSD format (File=>Export File=>Export) and open the created PSD file in the ImageReady program (Fig. 78). Create animation frames based on layers (Make Frames From Layers Create frames from layers) and select a suitable duration for them (Fig. 79). And then, to make the animation more effective, copy the existing frames, but in reverse order so that the image first increases and then decreases, and so on in a circle (Fig. 80). Then save the optimization file (File=>Save Optimized File=>Save with optimization). The resulting animation is shown in Fig. 81.
Rice. 80. State of the Animation window after duplicating frames
Rice. 81. Finished animation
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 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 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 Alt key when you click 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 simple animation doing it 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 supported 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:
The Flash (SWF) file format is based on vector graphics and is designed for scalable, compact graphics for the Web. 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 importing or inserting an Illustrator graphic, you can use various parameters 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.
You have one or two icons that you'd like to bring to life with animation. Where would you start? Let's say you have SVG files, Illustrator CC programs and After Effects CC, but the solution eludes you.
In this article, I'm going to demonstrate how you can easily animate an SVG file, including preparing the SVG file in Illustrator and importing it into After Effects CC. I'll also explain how you can convert it to Shape Layers and add movement. Finally, let's talk about exporting and rendering.
The final result of the work.
Now let's get to the fun part - learning how to bring images to life.
Preparing an SVG File in IllustratorLet's start by opening your SVG file in Adobe Illustrator CC. I'll be animating a small car icon that is available for free on Week Of Icons.
After opening the file, we need to ungroup and divide all objects into layers. You can do this manually or use Release to Layers (Sequence) to speed up the process. Before we import the file into After Effects, we need to save it as an Illustrator file format.
We can ungroup objects using Release to Layers (Sequence) so as not to waste precious time. Import and organize a file in After Effects CC Now you're ready to import into After Effects CC. Let's use the keyboard shortcut Ctrl+I (Windows) or Command+I (Mac) to load the Import File dialog box, or go to File > Import > File... From there, select the Illustrator CC file we prepared and click Import. A small dialog box should appear with the name of the selected file. Select Composition from the drop-down list called Import Kind.
More quick way importing a file - double-click on the column location in the project panel. In the Timeline Panel we will see a new composition. Double click on it. We should now see the Illustrator CC layers with orange icons to the left of their names.
Before we get started, we need to convert all these layers to Shape Layers. We need to select them all using Ctrl+A/Command+A, or manually using Shift + Left Mouse. After that, right-click on the layer and select Create > Create Shapes from Vector Layer.
Now that the new layers are selected, drag them to the top of the panel above the Illustrator CC layers, and then delete the Illustrator CC layers so they are out of the way.
Convert Illustrator CC Layers to Shape Layers in After Effects CC Although this is not necessary, it is important that we give each layer an appropriate name and/or color code it. This will allow us to work more efficiently as we focus on key personnel. In the example below, the colors of the labels more or less match the fill of their corresponding layers.
Labeling Shape Layers with appropriate names, colors, text, and placement is very practical. To configure the parameters, use the keyboard shortcut Ctrl+K/Command+K or Composition > Composition Settings... From Composition Settings, we need to select Width, Height, Frame Rate, and Duration. For this project I chose 60 frames per second to keep the animation smooth.
At this point everything seems to be ready to go, but there is one more thing that needs to be done. We need to group certain layers together so that their movements are in sync with the main layer, which we can control. This method is called Parenting.
Use Pick Whip to assign a parent layer to multiple layers. In our example, I have assigned less significant layers (child layers) such as Windshield, body parts, wood and ropes to the primary body layer (parent layer). This allowed me to control the position and rotation of the entire car (except the wheels) using the parent layer.
Creating AnimationI wanted the car to hit a rock and hang in the air for a bit. I also wanted the tree to move up and down and open the trunk. I started by creating a stone, a car and wheels. Then it's time to overcome the biggest hurdle - putting the action on the tree. Having finished this, I started small details such as trunk and ropes.
Sketch describing the animation The first step was to make a rock element or layer, but instead of going back to Illustrator CC to add another layer, I just used the Pen Tool in After Effects CC. This allowed me to quickly design a small stone.
Oh, the mighty Pen Tool! The trunk was a relatively simple task. I mounted it to the back of the car and made an anchor point at the bottom left vertex. Using Pick Whip I assigned it to the parent body layer. The penultimate step was to give the effect of rotation, which in turn made the moment the car bounces more realistic. Bodymovin in combination with the Lottie mobile library.
P.S. you can find my Illustrator CC and After Effects CC files.
The icon set is available for download for free on .
Loading...
