How to create an animation illustrator and sprites. Creating Animations in Illustrator

Hello everyone! Today I will try to make a description of the program features Adobe Illustrator, comparing it with flash features. It will not be a global sealing of the bone program, but rather a description of some interesting chips that I discovered for myself in this program. The information was collected in pieces as learning to lay out everything in one post. Immediately I confess that I am not a super-experienced illustrator user, only the last six months I use it in drawing (before that everything is drawn in your flash). Many make sure that the illustrator is complex, intuitively not always understandable. To some extent, I agree that after a flash, this program is complicated. But then the main thing is not to quit, but to continue learning. And after a couple of weeks, a thought appears, how I used to do without it!

So what I liked in an illustrator, and that I found for myself such what is not in the flash.
1. I'll start with the most simple, but at the same time you need. Try to place objects in a circle. Earlier was Deco Tool. But it was removed, apparently, counted unnecessary. They decided that the handles do it more fun. In an illustrator, this feature is: Effect - Distort & Transform - TRANSFORM.

All quickly and simple, the values \u200b\u200b(the distance between objects, the number of copies) specify the settings yourself.

2. Zig-Zag

Still more simple, but nevertheless a useful thing. It would seem a trifle, but in flush you need to draw manually, in an illustrator this is a second thing.

3. Deformation of objects (WARP)

There is nothing like that in the flash. On the example below, I showed only 2 ways of deformation of simple forms (EFFECT - WARP - ARC / FISH). In fact, their 15 in latest version programs.

4. Automatic rounding of the corners (Round Corners)

You can manually do: on the graphical object during isolation in the corner (in all the gland) there is a white point and a federal line sign. I pull the mouse, adjust to your taste.

But this concerns only forms, with a pencil line a little differently - apply the effect of rounding ( EFFECT - STYLIZE - ROUND CORNERS). At the output we get the same power.

5. Roughen (Oil)

Effect applies K. simple forms (EFFECT - Distort & Transform - Roughen). At the outlet, we obtain something resembling the low-polyboral 3D models. In my opinion, cool :) and most importantly - very simple.

6. Pucker & Bloat (Pulling and inflating)
An example in the picture below:

7. Form Expansion (Offset Path)

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

8. Brushes (Art Brush, Pattern Brush, Scatter Brush)
We look no image below with examples:

9.Texture Brush (textural brushes)

Also in the illustrator there is a lot of textured brushes, which I wrote about, and how they appeared in new version Flash. It was observed that the use of brushes in Adobe Animate is scary inhibits. That's it:(

10. Not sure that it is a straight trick, but I want to stay at the tassel with a funny name BLOBBrush.. Located on the toolbar, very pleasant to use the brush. He has a bunch of settings, I like more than usual. In words, it is hard to explain about its advantages, it is better to try once.

10.Split to Grid.

Also a useful thing - the SPLIT TO Grid feature (Object-Path-Split to Grid). Locals cut the shape on equal segments. What does this remind us? Right - windows in a high-rise building. As for me, a cool piece for drawing, for example, urban landscapes;)

Especially one useful tool presented in an illustrator, probably since its first release. With it, you can create, for example, wood texture:

12. Move (right - TRANSFORM - MOVE)

Offset object at a predetermined distance. If you wish, you can immediately create a copy that will be placed at the desired distance from the selected horizontal object / or vertical object. In the earlier version of Flash was the plugin that was performed this feature. Unfortunately, I do not remember his name.

In an illustrator, it is very convenient to create seamless patterns ( Object-Pattern-Make). I remember how I frantically sophisticated in a flash with the creation. In the version of the SS 2015 illustr, everything is automated, a lot of settings will help to blind patterns in dozens of variations, having only several graphic elements at hand. In earlier versions of the program, everyone had to do manually, as in flush so far.

(Note - pattern can be made by a vector editable object using a function to disassemble ( Object - Expand Appearence).

14. Object Mosaic (Mosaic)

Creating a color palette based on the available picture. Import your favorite picture in Ill (Open), then Object - Create Object Mosaic. In the settings, specify the fission frequency in height and width.

And we get at the exit:

15.blend (mixing)

Used to create gradients. You can create step-by-step transitions, such as in the picture. I will not say that I use it often, but may come in handy to someone. It seems to me that you can use in the creation of simple background pictures.

Also, the tool can 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. The Build Shape Tool tool. Very comfortable thing to work with primitives. In the flash, as it seemed to me, less convenient.

Clicking Alt and click on dedicated segments - delete segments. If you simply stretch the mouse over several dedicated areas - connect.

Supplement - a tool that helps automatically cut off, connect, etc. Selected shapes. As for me, it is not very convenient, I use more often BuildShapeTool.

(mounting areas)

18.Custom Tool Panel.

The ability to create your own toolbar itself, throwing unnecessary, and choose only those that you use.

In flush, mounting areas, namely scenes ( Scene 1,2,3 ..) Located separately and between them you need to switch (SHIFT + F2). In the illustrator, they can be placed in front of their eyes. Conveniently, when you make several options for the same picture so that all the options are before our eyes for comparison.

19. Isometric with Graphic Styles

And the latter is the creation of isometric without use in 1 click (and more precisely, in 3 clicks, because we have 3 sides;) with graphic styles ( Graphic Styles.). How it is done, I will write next time.

Overall with a flash from the illustrator - the ability to save an object into the symbol (Symbol) and also without any problems can be transferred to the flash (open in the flash.AI file by Import - Import to Stage).
The character in the illustrator has the same properties as in the flash.
And at the end I will write that in the illustrator, in my opinion, is inferior to Flash. Yes, yes, and that is. And this is the fill tool ( Paint Bucket.). As I do not try to get used to her in Ille, in a flurity it is more convenient.
If my notes have become useful for you or what you want from yourself to supplement - Velkov in the comments! Good luck to all;)

Recently, the SVG animation (Scalable Vector Graphics) graphics on sites and applications has become very popular. This is due to the fact that all new browsers Already support this format. Here is info for supporting SVG browsers.

This article discusses the simplest example animation SVG. vectors light assistance JQuery plugin Lazy Line Painter.

Source code

To fulfill and complete understanding of this task, the basic knowledge of HTML, CSS, jQuery, but not necessarily if you just want to animate SVG) Let's go up!

And so the steps that we need to perform:

Create the right file structure
Download and connect plugin
Draw a cool contour picture in Adobe Illustrator
Convert our picture in Lazy Line Converter
Insert the resulting code in main.js
Add some CSS to taste

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

Classic H5BP (HTML5 BOILER PLATE)
No Template.
Just Html5 Shiv.
Minified
Ie Casses.
Chrome Frame.
Then click Download IT!

2. Download and connect plugin

Since Initializr comes with the latest Jquery library, from the archive that we need to download from the Lazy Line Painter project repository, you need to transfer only 2 files to our project. The first is 'jQuery.LazylinePainter-1.1.min.js' (the plug-in version may differ) it is in the root of the resulting folder. The second is example / js / vendor / raphael-min.js.

These 2 files are placed in the JS folder. And connect them to our index.html in front of main.js as follows:

3. Draw a steep contour picture in Adobe Illustrator

We draw our contour picture in Illustrator (the easiest way to do with Pen Tool)
It is necessary that the contours of our drawing do not close TC for our effect. Beginning and end
There should be no fill
Maximum file size - 1000 × 1000 px, 40kb
Crop to Object Object\u003e Artboards\u003e Fit to Artboards Bounds
Save in SVG format (standard save settings are suitable)

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

4. Convert our picture in Lazy Line Converter
Just drag your icon in the window that in the figure below.
Thick, the color of the circuit and the animation speed can be changed in the code itself that will appear after conversion!

5. Insert the resulting code in Main.js
Now simply insert the received code in the empty Main.js file
Parameters:
STROKEWIDTH - contour thickness
Strokecolor - contour color
You can also change the drawing speed of each vector by changing the values \u200b\u200bof the Duration parameter (default 600)

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

Hello WORLD! This is html5 boilerplate.

And instead of it insert the block in which our animation will occur

then add some CSS to the Main.css file for more enjoyable design:

Body (Background: # F3B71C;) #icons (Position: Fixed; Top: 50%; left: 50%; margin: -300px 0 0 -400px;)

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

P.S. When starting on the local machine, the start of the animation starts for a few seconds is possible.

Web graphics optimization

Graphic information is transmitted much slower than text, and the image loading time is proportional to the size of their graphic files. therefore fast download Web pages involves a small size of graphic images embedded in them, which is achieved through their optimization. Under the optimization of the image, it is understood by its conversion that provides the minimum file size while maintaining the required this case Image quality, which is achieved primarily by reducing the number of colors in graphic images, the use of compressed and special file formats and optimizing compression parameters for individual image fragments.

Illustrator has built-in image optimization tools, providing for various preview methods a quick and efficient implementation of the optimization process. Preview It gives a fairly accurate view of how the optimized image will look like in real time, which helps to estimate the optimization result and successfully select the desired settings. And you can optimize both images created directly in the Illustrator program and other, such as photos that are supposed to be placed on the Web site.

Optimization options are set in the window Save For Web. (Saving for the Web) caused by the command to the menu File (File). The program proposes to use one of the four preview modes, but to assess the quality of optimization the best way Two are suitable:

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: The first version is created based on the installed optimization values, and the other two are options for current optimization settings.

Both modes allow you to significantly save time on finding a better optimization option, as you save from 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 boot time with different connectivity options. For comparison, the 4-UP mode is most convenient (four options), allowing you to visually assess the effect of compression or reduce the palette on the image quality and its size and ultimately determine the best optimization parameters.

Illustrator allows you to optimize Web graphics in formats not only GIF, JPG, PNG-8 and PNG-24, but also in SWF and SVG. Indexed images having a small amount of Colors are saved in GIF format. To preserve full-color and halftone images - photos and color-saturated graphs, such as gradient fills, is used jPG format. For full color images with transparent sites applied pNG formatwhich 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 may have millions of colors, and therefore it looks like jPEG format. The difference between PNG-24 from JPEG is that the compression method is used to optimize images in PNG-24 format does not lead to loss of quality, but as a result, the size of the file is increasing. SVG and SWF formats combine graphic data, text and interactive components and can also be optimized.

Consider a specific example of image optimization. Suppose the ILLUSTRATOR program has developed a website emblem (Fig. 3), originally saved in AI format. An attempt to immediately optimize it for the Web will not lead to anything good, since in this case there will be automatic circumcision of the image in which the true position obtained as a result of the deformation of the inscription will not be taken into account (Fig. 4 and 5).

So let's try to export the emblem in pSD format Team File \u003d\u003e Export (File \u003d\u003e Export) - the size of the created image will be 143 KB. Open the resulting PSD file and use the command File \u003d\u003e Save for Web (File \u003d\u003e Saving for Web). Taking into account the limited number of colors involved in the image in this case, the GIF format is optimal, with the specific settings of which and you need to decide. Experimenting with the settings, you can make sure that the best quality gives the selected compression algorithm selected by the default program Selective (Selective). As for smoothing, considering the presence of gradient fill, it is better to choose an algorithm with noise generation - Noise. (Fig. 6). The size of the resulting file optimization will be 6,729 KB (Fig. 7), while the background transparency will be saved, which is easy to make sure to save the image in the GIF format along with the HTML file (Fig. 8). As a result, in this example, emblem.html and emblem.gif files were received in the Primer1 folder.

Buttons

An indispensable specific design element of any Web pages are graphic controls - buttons. It is simply impossible to imagine a page without them. Drawing buttons today has become a special genre, and Illustrator allows you to create the most intricate options. For example, the buttons decorated as grid objects and (or) with the imposition of masks, look much more effectively ordinary.

Consider the option of creating a circular convex button in the Illustrator program. Draw the vector object in the form of a circle with an arbitrary color (Fig. 9) and convert it to a grid command Object \u003d\u003e Create Gradient Mesh (Object \u003d\u003e Create a gradient grid), specifying four lines and four columns, and in the list Appearance (View) By choosing the option To center. Highlight (Backlight) equal to 60 (Fig. 10). Select a tool Direct Selection and click in the upper left corner of the object by selecting the nodal points there (Fig. 11). Change the color of the corresponding cell on white by choosing it in the palette Swatches. (Fig. 12).

Take the tool Ellipse (Ellipse), set the mouse marker to the center created before this circle and holding down the keys Alt. and Shift., Stretch a new circle on top of the old so that it turns out to be more old on 1-2 pixels from all sides. Do her black border ( Stroke.) 1-2 pixel width and pour the radial gradient towards the red to white (Fig. 13). Drag the created vector object on 1-2 pixels to the right and down, then, without removing the selection, click on it with the right mouse button and select the command from the context menu. Arrange \u003d\u003e Send to back (Sort \u003d\u003e Send back). As a result, it turns out a blank for the button shown in Fig. fourteen.

As a rule, there are several similar buttons on any Web page that differ, for example, only the direction of the arrows drawn on them, meaning the direction of movement along the site. Consider the easiest case of the presence of two buttons, one of which, with the down arrow, will mean moving on next page, And the up arrow button is on the previous one. As a harvesting arrow, we take a conventional triangle drawn by a tool Polygon. (Polygon), painted in black and for greater effect also decorated as a grid object. Move the arrow on the button and adjust the position of all objects to each other relative to each other by using the appropriate palette buttons. Align. (Alignment). The first of the buttons obtained is presented in Fig. 15. We will copy a layer with a button by selecting the command Duplicate Layer. Layers.- As a result, we get two identical layers. Then, on the copies of the layer, select the arrow and turn it 180 ° by selecting the command from the context menu TRANSFORM \u003d\u003e ROTATE - Transformation \u003d\u003e Rotate. We obtain the same button as shown in Fig. 16. Note that it is much more convenient to store all the same project buttons to store in one file on different layers, which in this case is demonstrated.

Now you need to save the optimized options for each of the buttons. At first, make an invisible bottom layer - in this case, the button on the upper layer will be saved. Select Team File \u003d\u003e Save for Web (File \u003d\u003e Save for Web), configure the button optimization options, for example, as shown in Fig. 17 Click on the button Save. (Save) and enter the name of the file. The button saved in the end is presented in Fig. 18. Now return visibility by the bottom layer, and the upper will be invisible and in the same way, save the second button, specifying another name for it. The result is presented in Fig. nineteen.

Now it remains to make sure that the buttons are quite acceptable look at the Web page, and place them on an arbitrary page (Fig. 20). As a result, in this example, the primer2.html files were obtained in two graphic images in the Images folder. Primer2.).

If desired, in the process of optimization, the button is easy to turn into a slice. In this case, after selecting the command File \u003d\u003e Save for Web (File \u003d\u003e Save for Web) and setting optimization options should be selected from the Tool Tool Palette Slice Select.(Slice allocation) and double-click on the image, which will eventually automatically turn into a slide with a sequence number 1 (Fig. 21). Double-click the mouse will lead to the opening of the window Slice Options. (Slace Options), in which it will be necessary to specify the link and, if desired, change the slicer name (Fig. 22), and then save the optimized image. The result in this case will be the PRIMER3.HTML files (Fig. 23) and Primer3.gif (PRIMER3 folder).

Interactive elements

One of the ways to revitalize the page is the introduction of design elements that change their appearance (or condition) depending on the behavior of the mouse or, less likely, in the event of any other situations: scaling, scrolling, loading, error occurrence, etc.

Among such elements, Rollovers received the greatest fame (from the English. Roll Over - roll over) - elements changing the appearance under the influence of the mouse. Examples of typical rolovers are animated buttons. Rollovers are often used and when creating other navigation elements of the site. In fact, any Rollover is not one, but several (up to four) images, each of which corresponds to a specific event. The main events are customary as follows: Normal - normal state, over - hovering the mouse cursor to the element and down - pressing the left mouse button when you hover the cursor. Theoretically, events can be involved as Click - release the left mouse button after pressing, Up - after the button is released, OUT - when exiting the active zone. However, in practice, it is more often limited to changes in the element only on the first three or even two events.

Classic rolver

In classical understanding, the Rollover is a series of graphic images in GIF format and the corresponding HTML code, due to which, depending on the mouse behavior, one image is replaced by another in the browser window.

The Illustrator program is not intended to directly create rolovers in their classical understanding, but it can help when developing the initial elements for them. The idea in this case is that you need to create a layer with an image corresponding to the first event. Then make a copy of the layer and convert the image so that it corresponds to the second event, etc. The resulting multilayer image is exported to the PSD file with the preservation of the layers, on the basis of which the Rolover is created in the Image Ready program. Plus the use of Illustrator program, as in many other cases, is a number of interesting opportunities inaccessible in other software, in conjunction with the convenience of transformation vector graphics.

Let's try to create a rollover in the form of an inscription changing color depending on the behavior of the mouse. Open Illustrator and create a shape in the form of a rounded and black rectangle (Fig. 24), make it a copy and place it in the free part of the screen. Convert the first copy of the rectangle to a grid object with illumination in the center (team Object \u003d\u003e Create Gradient Mesh - Object \u003d\u003e Create a gradient grid), specifying four lines and ten columns (Fig. 25). Activate the second copy of the rectangle and adjust the gradient fill for it as follows as shown in Fig. 26. Verify the gradient object on top of the grid, reduce the opacity of the gradient object to about 80%, and the size is about 1 pixel so that in the end to symotize the effect of bulge. And then print the inscription on top of the objects. In the original form, let it have a white color that will correspond to the state of Normal (Fig. 27), and then when changing the Statution of Rollover, the color of the inscription will change, for example, on green - when you hover the mouse marker on it (Over state) and on blue - When you press the mouse button (state DOWN).

Pay attention to the palette Layers. - At this stage there is only a single layer in it. Make two copies of this layer by applying the command. Duplicate Layer. (Duplicate layer) from the palette menu Layers.- Three layers will become in the palette (Fig. 28). Then in the first copy of the layer, change the color of the inscription on the green, and in the second - on the blue (Fig. 29). As a result, the necessary workpiece for Rollover will be obtained.

Export the created image into PSD format with preservation of layers using the command File \u003d\u003e Export (File \u003d\u003e Export) and selecting the RGB color model (Fig. 30). Open the created PSD file in the ImageReady program (Figure 31 and 32). Create frames based on layers by selecting the command Make Frames from Layers (Create frames from the layers) from the palette menu Animation.. The Animation window will take a look as in Fig. 33. At the same time in the palette Rollovers Initially, one-sole state of Normal will be created.

Then in the window Animation.select the frame corresponding to the induced state, while in the palette Layers. Automatically stand out the layer Layer 1 Copy (Fig. 34). Go to the palette Rolloversand click on the button Create Rollover State (Create a rollover-condition) - Fig. 35, which will lead to the appearance of a state Over Statein the palette Rollovers(Fig. 36). Similarly, create a state Down State. Activate the Condition Normal In the palette Rollovers And remove in the palette Animation. All frames, in addition, which must correspond to the state Normal. As a result, for each state of Rolovover in the palette Animation.there will be only one frame (Fig. 37, 38 and 39).

Fig. 38. View image, Animation windows and Layers and Rollovers palettes for OVER state status

Check the result by clicking on the button PREVIEW IN DEFAULT BROWSER (Preview in the browser) on the toolbar and turning into the browser window (Fig. 40). After that, save the file by applying the command. File \u003d\u003e Save Optimized (File \u003d\u003e Save with optimization) and specifying the option HTML AND IMAGES (* .html). As a result, in this example, the primer4.html file and a series of graphic images in the Images folder were obtained.

Fig. 40. Browser window with Rollover element

SVG Rolovier

Popular SVG format (Scalable Vector Graphics - Scalable vector graphics), created on the basis of the XML standard, also allows you to get a variety of interactive elements, in particular Rolovers, only in practice it is implemented completely differently. It is worth noting that the creation of interactive SVG-rollovers, in contrast to the classic, when the corresponding HTML code is generated fully automatically, requires knowledge javaScript language and understanding the basic principles of object-oriented programming.

Special palette is designed to work with SVG objects. SVG interactivitywhich is easy to open with the help of the team Window \u003d\u003e SVG Interactivity (Window \u003d\u003e SVG Interactivity) - Fig. 41.

Consider this option for creating Rollover on an example of an interactive button, the color of the inscription will change from black to blue when you hover the mouse and again convert into black when the mouse is out of the active zone.

Create a rectangular button with rounded edges and pick up a suitable gradient fill for it, for example, as shown in Fig. 42. Adjust the transparency of the button in the palette Transparence (Transparency) - In this example, the value of the parameter Opacity (Opacity) set to 50%. Make a copy of the buttons, fill it with dark green (Fig. 43), and then convert it to the grid object command Object \u003d\u003e Create Gradient Mesh(Object \u003d\u003e Create a gradient grid), specifying four lines and ten columns, and in the list Appearance(View) By choosing the option To center. (To the center) and setting the value Highlight (Backlight) equal to 100. Reduce the opacity of the layer with a grid object about yes 40% (Fig. 44). Place the grid object over the gradient, and the button will be reminded in fig. 45.

Fig. 44. Turning a copy of the button to the grid object

Complete the button of the proposed inscription and adjust its position using the appropriate palette buttons. Align. (Alignment). The resulting image will contain one layer with three objects superimposed on each other (Fig. 46). The scheduled events will relate to the text object, so for convenience, change his name on TEXT.By double-clicking on the object and entering a new name. Similarly change the name of the layer with Layer 1 on Layer (Fig. 47).

Event processing involves using JavaScript procedures, so you need to connect a file with a description of these procedures. It is called Events.js and saved on the disk in the Sample Files \\ Sample Art \\ SVG \\ SVG folder when installing adobe Programs Illustrator. To connect the EVENTS.JS file, use the command JavaScript Files. SVG interactivity (Fig. 48). Next you need to click Add. (Add) and find the desired file on the hard disk. When his name appears in the field URL (Fig. 49), click on the button Done (Go out).

Fig. 48. Selecting JavaScript Files Team

After that, determine the reaction to the mouse events for the object TEXT.. Select the Text object in the field Event (Event) Palettes SVG interactivity Select Event onmouseover elemcolor (EVT, "Text", "# 3333FF") - It will mean that when you find a mouse over the object TEXT.its color will change to blue (Fig. 50). In order to make the text of the text after entering the active zone, the text color has changed on black, it will be necessary to create another event. onmouseout.- select it in the field Event (Event) Palettes SVG interactivity. Then enter the text in the row elemcolor (EVT, "Text", "# 000000")- This will lead to the return of black colors (Fig. 51).

Fig. 51. Final view of the SVG Interactivity palette for the object Text

Save the created Rollover as a SVG file command File \u003d\u003e Save As (File \u003d\u003e File type format SVG.And then configuring the SVG file saving option as shown in Fig. 52. After saving, only one single file with the extension SVG will be received, and not two, as in the case of a classic rollover, - in this case, the primer5.svg file was obtained (PRIMER5 folder). However, in order for the Rollover to really work, it is necessary to copy the EVENTS.JS file with the description of JavaScript in the folder with the SVG file. After that, you can check the performance of the Rollover - the result will look like shown in Fig. 53.

SVG animation

SVG format can be used to transmit animation. Let's try to create the simplest animation element (in this case it will be information about the company), which will appear on the screen when you hover the mouse to the corresponding graphic object and disappear when removing the mouse from the interactive element.

Create an approximately such series of graphic and text objects, as shown in Fig. 54. We will rename all the created objects that are consistently clicking on the name of the next object in the palette. Layers. and introducing the desired name (Fig. 55). Please note that highlighted in Fig. 56 Objects - Text1, Text2, Text3 and Path1 - will always be visible, and all the others - only when you hover the mouse Text1.

Fig. 54. Original image type

Connect the Events.js file with the description of JavaScript procedures by applying the command. JavaScript Files. (JavaScript files) from palette SVG interactivityBy pressing the button Add.(Add) by specifying the desired file on the hard disk and clicking on the button Done (Go out).

Determine the reaction to the mouse events for the object Text1. Select object TEXT., in field Event (Event) Palettes SVG interactivityselect Event onmouseover and in the line below enter the text elemShow (EVT, "Text4"); ElemShow (EVT, "Path2"). As a result, when finding a mouse over the object Text1 will become visible objects Text4. and Path2.. Note that if when an event occurs, several actions must be executed, then they must be indicated through the sign ";". Then a similar operation, regard the event. onmouseout.By entering the text for it, which will mean hiding objects (Fig. 57).

Save the result as a SVG file command File \u003d\u003e Save As (File \u003d\u003e Save as) by specifying the name of the file by selecting in the field File type SVG format, and then configuring the SVG file saving option according to Fig. 58. After saving, the primer6.svg file will be received (PRIMER6 folder). Do not forget to copy the EVENTS.JS file to the folder with this file. If you then run POPs this fileYou will see the result presented in Fig. 59. This is almost what you need. The only thing that was not included in our plans is the initial appearance of objects. TEXT.4 I. Path.2 when 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 an event onLoad. (Fig. 60). Save the file again and make sure that now objects Text4. and Path2 visible only when hovering mouse on the object Text1.

Gif animation

Any Web page is unthinkable without web animation, including without animation Gif'ov. One of the options for their creation is to apply the Adobe ImageReady application that allows you to create animation from the layers. At the same time, the multilayer image itself can be prepared in different applications, including Adobe Illustrator.

Very easy to create an animation based on elements from the palette Symbols. (Symbols) opened by the command Window \u003d\u003e Symbols (Window \u003d\u003e characters) or from one of the symbol libraries that can be opened by applying the command Window \u003d\u003e Symbol Libraries (Window \u003d\u003e symbol libraries).

For example, we will try to increase the size of any symbol object, the key steps of the object to increase the object must be set on separate layers. At first, simply place object-symbols one over the other, and then increase the size of each following object, for example, as shown in Fig. 61. As a result, in the palette Layers. One layer with a variety of objects will be created (Fig. 62). If you directly export this image to PSD format, it will not give anything, since the layer is one, and naturally, when opening the PSD file in the ImageReady program there will also be only one layer. Therefore, it is preliminarily necessary to place objects on different layers. This can be done different ways - The easiest way is first to highlight the layer Layer 1. in the Layers palette and use the team Release to Layer. (Release into layers). The result will be the movement of each of the objects on your layer, but they will all be nested in the layer Layer 1.. Therefore, you will have to manually drag all the invested layers into the upper part of the Layers palette so that they are above the layer Layer 1.and then became an empty layer Layer 1. Just remove (Fig. 63). Export the image to PSD format by applying the command File \u003d\u003e Export (File \u003d\u003e Export) with installations as in Fig. 64.

Upload the created PSD file in the ImageReady program (Fig. 65 and 66). Open the palette menu Animation. Make Frames from Layers (Create frames from the layers). As a result, five frames will be created, each of which will fit their layer, and the palette window Animation. will take a look as in Fig. 67.

After that, set the duration of each of the frames created - in this case, the duration of 0.2 s is installed for all frames. And then save the animation with the optimization using the command. File \u003d\u003e Save Optimized (File \u003d\u003e Save with optimization). The result obtained can resemble Fig. 68.

Even more convenient to obtain billets that are easy to turn into animation in ImageReady, use functions Live Blends. Illustrator programs. Such a combined application of Illustrator and ImageReady programs significantly speeds up the process of creating GIF animations.

For example, draw two arbitrary multi-colored objects, and then tie their Blend-bond with suitable parameters (Fig. 69). It is impossible to directly use this file to create an animation, since the image is on a single layer (Fig. 70). Therefore, it will be pre-needed each element of the Blend object to be placed on a separate layer. To do this in the window Layers. Highlight the string , activate the palette menu by clicking on the black arrow in its upper right corner, and select the command Release to Layers Sequence (Transform into layers sequentially) (Fig. 71). Hold down Shift., highlight the created layers and place them above the layer. Layer 1.and then remove the layer Layer 1., moving it to the basket - as a result, the palette of the layers will take the same appearance as in Fig. 72.

Fig. 70. The initial state of the Layers window

Export created file to PSD command format File \u003d\u003e Export (File \u003d\u003e Export). Open the created PSD file in the ImageReady program (Fig. 73). Note that in the layers window all the layers created in the program will appear (Fig. 74), and in the window Animation. There will be one-only frame.

Activate the palette menu Animation.By clicking on a black arrow in the upper right corner of the palette and select the command Make Frames from Layers (Create frames from layers) - As a result, five frames will be created in this example, and the palette window will be created. Animation. takes a view in accordance with Fig. 75. Highlight all frames while holding down the key. Shift., and set the appropriate duration of frames - in this example, for each frames taken the same time at 0.2 s. Then save the file with the command optimization. File \u003d\u003e Save Optimized(File \u003d\u003e Save with optimization) by installing in the list File type Option Images only (* .gif). Animation will resemble rice. 76.

It does not look much more interesting to move, but a smooth change in the size of Blend objects. For example, you can use the Blend transition already created. In this case, after creating separate layers for each Blend transition element, place all objects on each other, using the buttons Horizontal Align Center.(Alignment relative to the center horizontal) and Vertical Align Center. (Alignment relative to the center vertical) palette Align. (Fig. 77).

Export the created file to PSD format ( File \u003d\u003e Export- File \u003d\u003e Export) and open the created PSD file in the ImageReady program (Fig. 78). Create on the basis of layers of the animation frames ( Make Frames from Layers - Create frames from the layers) and select a suitable duration for them (Fig. 79). And then, to make the animation more spectacular, copy the existing frames, but in the reverse order so that the image first increases, and then decreased, and so in a circle (Fig. 80). Then save the optimization file ( File \u003d\u003e Save Optimized- File \u003d\u003e Save with optimization). The resulting animation is presented in Fig. 81.

Fig. 80. The status of the Animation window after duplication of frames

Fig. 81. Finished animation

Today we do not quite ordinary lesson Adobe. Illustrator. Because this time we will not do a static picture, but the most real animation. Imagine, turns out to be with using Adobe. Illustrator You can also draw cartoons :)

And we will need nothing for this. The competent organization of the layers and the export of final work in the SWF format, where each layer is converted into the frame of the animation. In today's lesson, we draw an animation of the countdown in retro style. At the output, a flash movie with this is the very countdown.

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

When all parts of our cartoon are ready, you can start creating the animation itself. For convenience, it is better to do in a new document. At the same time, the layers will play the role of the animation frames. And in the very first layer just need to copy the frame of the film. Place it in the middle of the workspace.

Now create a second layer and copy a frame of film pictures into it, in which the holes around the edges are made with a shift. It also needs to be located in the center.

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

Similarly, we need to accumulate 12 layers with frames of the film, asking her movement.

Now we have a whole bunch of layers and all of them are visible. In the sense that the upper layers are blocked by the lower, which is not entirely convenient for work. Therefore, you can turn off some layers by clicking on the icon with the eye to the left of the layer name. To turn off or enable all the layers at once, keep the alt key pressed when you click on the Glazik icon. Including and turning off the layers, you can see exactly what is located in a certain frame of our future animation. And now, to add light jitter to the film moving, you need to put the received frames a little bit in different directions. To do this, turn on only the layer with which you are going to work in this momentAnd then shift the frame on a pair of pixels in any direction.

When you went over all the layers and added a small shift, you can start creating the animation of a moving circle. To do this, copy the circle consisting of sectors, from a document with a cartoon spare parts and put it on the first layer over the frame of the film.

If you remove the selection from the circle, it will look like a single integer. That is what we need.

But since it consists of separate sectors, you can, changing their color, very quickly and easily create animation. To do this, copy this circle in the second layer and make the first sector lighter. You remember that the film is trembling while driving, 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 paint the brushing line to one sector more than the previous time. All together, these 12 layers form an animation of the movement of the film with a filling circle.

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

Then, in turn, turn on the following layers and copy the same texture there. So that she looked different on every frame, simply turn it on an angle of 90 degrees. As you already guessed, we need to add texture to all 12 frames.

If you already tired of coping, then I can deliver you - it remains very little. The most difficult already behind. 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 only in two layers.

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

And then everything is simple. We turn on the very first layer and put three numbers there.

Then you need to copy this figure in the following layers until the animation of the circle is completed. When you reach the next copy of the layer, where the circle will be filled completely completely, you need to put two numbers two. Similarly, copy the number one to the desired layers. And when you get to the final layers, designed to inscribe Go !!!, just remove the circle before copying the inscription in the desired layer.

On this with the animation everything. The main thing here is not to get confused. You can give layers some convenient names, but I was somehow lazy :) And even when you finish work, be sure to turn back all the layers by clicking on the glazing icon.

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

Advanced settings will open. Here you need to set the frame rate of Frame Rate. I have 12 frames per second. A check mark Looping is responsible for cyclical animation. Thanks to her, the video will be played in a circle. And the Layer Order option: Bottom Up plays the illustrator layers from the bottom up in the panel. Just that we built our animation.

At the output we get a flash movie with our animation.

Now you see that the simple animation to do in Adobe Illustrator is not so difficult as it seems at first glance.

But to create long rollers or interactive applications, it is still better to use Adobe Flash. either other flash editors. For example, this cat I did in the old Macromedia Flash, who dug off at work.

Last time, HTML5 and CSS3 is used more and more often to create animation. This code is supported modern browsers And does not require the use of a flash player.

Roman Aka Dacascas. Especially for blog

Subscribe to our newsletter so as not to miss anything new:

Today we have not exactly the usual Adobe Illustrator lesson. Because this time we will not do a static picture, but the most real animation. Imagine, it turns out that you can also draw cartoons with Adobe Illustrator :)

Now create a second layer and copy a frame of film pictures into it, in which the holes around the edges are made with a shift. It also needs to be located in the center.

Similarly, we need to accumulate 12 layers with frames of the film, asking her movement.

Now we have a whole bunch of layers and all of them are visible. In the sense that the upper layers are blocked by the lower, which is not entirely convenient for work. Therefore, you can turn off some layers by clicking on the icon with the eye to the left of the layer name. To turn off or enable all the layers at once, keep the alt key pressed when you click on the Glazik icon. Including and turning off the layers, you can see exactly what is located in a certain frame of our future animation. And now, to add light jitter to the film moving, you need to put the received frames a little bit in different directions. To do this, turn on only the layer with which you are going to work at the moment, and then shift the frame on a pair of pixels to any side.

If you remove the selection from the circle, it will look like a single integer. That is what we need.

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

And then everything is simple. We turn on the very first layer and put three numbers there.

At the output we get a flash movie with our animation.

Now you see that the simple animation to do in Adobe Illustrator is not so difficult as it seems at first glance.

But to create long rollers or interactive applications, it is still better to use Adobe Flash or other flash editors. For example, this cat I did in the old Macromedia Flash, who dug off at work.

Last time, HTML5 and CSS3 is used more and more often 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 note microstrum illustrator