Создадим теперь анимационный эффект в программе Adobe Illustrator путем создания из двух объектов векторной графики, объекта перехода. Причем при этом составные части автоматически будут распределяться по отдельным слоям нашего документа. Выберем для этого какие-либо из символов, которые у нас есть в палитре символов. Возьмем вот эту бабочку с одной стороны и выберем, например, вот эту рыбку. Т. е. попробуем сделать так, чтобы вот эта бабочка при нашем переходе превратилась за несколько шагов, при помощи анимационного эффекта, вот в эту рыбку.

Для этого выделим вот эти оба объекта. Далее щелкнем на пункте Object, далее Blend и щелкнем на пункте Make. Вот можно увидеть, как при этом образовалась целая цепочка промежуточных объектов от нашей бабочки к нашей рыбке. Конечно же, мы можем выбрать пункт Object, Blend и далее Blend Options, задавая различного рода параметры. В частности, количество шагов, за которые мы хотим превратить нашу бабочку в нашу рыбку. Сейчас, согласимся с той установкой, которая у нас есть, 10 шагов перехода, и щелкнем на кнопке ОК.

Теперь же разобьем этот объект перехода, так сказать, который получается превращением из бабочки вот в эту рыбку на отдельные его составляющие. Для этого щелкнем на пункте меню Object и далее Expand. Оставим здесь все установки по умолчанию. Щелкнем на кнопке ОК. И мы превратили наш один объект перехода, который у нас был, в серию вот таких последовательных объектов. А теперь же выделим их все опять, и сгруппируем их в одну группу. Для этого щелкнем на пункте меню Object, далее Group. Щелкнем. А теперь это у нас один объект. Если мы щелкнем на любом месте вот в этом объекте, как мы видим, выделяются сразу все объекты одновременно.

А теперь щелкнем на нашем слое Layer1, выделим вот эту группу, которую мы только что создали. Далее щелкнем на всплывающем меню и выполним пункт Release to Loyers (Sequence) - распределить по слоям. Щелкнем. И как мы видим, наши все бабочки распределились по слоям вместе с переходом в рыбку, по вот этим слоям Loyers. Как мы видим, их у нас 14 штук, что можно убедиться, посмотрев на палитру слоев Loyers. А теперь мы можем приступить непосредственно к созданию нашего анимационного эффекта. Для этого щелкнем на пункте меню File, далее, конечно же, Export. Появляется вот это стандартное окно экспорта, в котором, конечно же, нам нужно выбрать файлы типа Macromedia Flash с расширением SWF. Щелкнем. Теперь выберем название для нашего файла.

Пусть это у нас будет просто-напросто clip2. Щелкнем на кнопке Save. Конечно же, опять появляется вот это стандартное окошко с настройками нашего видео клипа Macromedia Flash. В принципе можем сохранить все эти установки, которые здесь есть. Сохранить каждый из слоев в отдельном фрейме. Взять три фрейма в секунду, частота смена кадров. Установить циклическое отображение эффектов нашего видео клипа. Сформировать HTML файл, и т.д. Теперь же щелкнем на кнопке ОК.

И после этого наш HTML файл с вот этим эффектом перехода полностью готов. Вот мы запустили опять наш браузер обозреватель, в котором мы отобразили сейчас в папку My documents, и в ней можно увидеть наш HTML файл clip2. В принципе, здесь же можно увидеть наш Flash объект с расширением SWF. Сейчас раскроем просто-напросто HTML документ. Щелкнем для этого на нем дважды. И после того, как наш HTML файл загружается, можно увидеть, как вот эта бабочка, последовательно двигаясь вниз, превращается при помощи соответствующего перехода в рыбку. Т.е. наш анимационный эффект достаточно успешно был реализован.

Закроем теперь это окошко. Щелкнем вот на этом крестике и мы вернулись в наше стандартное окно Adobe Illustrator. Еще один вид эффекта, который мы можем реализовать на нашей HTML странице в Adobe Illustrator, так сказать, в виде анимационного клипа, это создание клипа так сказать с наполнением. При котором каждый из последующих фреймов, будет так сказать дополнять предыдущую, а не только целиком его заменять. Попробуем это реализовать. Для этого создадим новый документ, чтобы так сказать очистить наше поле для работы. Закроем сначала вот этот. Щелкнем на вот этом крестике. Сохранять не будем. Щелкнем на кнопке No. Далее щелкнем на пункте меню File. Далее New, новый документ. Согласимся со всеми установками по умолчанию RGB, файл цветового формата, все размеры, которые есть, ориентацию, имя файла, пусть все будет, как и есть в этом окне.

Щелкнем на кнопке ОК. А теперь на нашем чистом документе, который у нас перед глазами последовательно, разбросаем на нем символы. Возьмем, какие-либо из них. В принципе, достаточно все равно, в каком порядке и как мы будем брать. Далее они будут так и появляться на нашем HTML файле в Web документе. Можем в принципе, повторить какие-либо из элементов. В принципе, нам это совсем даже не помешает. А теперь выделим все эти объекты одновременно, чтобы их сгруппировать. Это мы сделали при помощи вот такого прямоугольника выбора. Далее щелкнем на пункте меню Object, далее Group сгруппировать. И после этого, у нас все эти объекты сгруппировались в одну группу. Можем это проверить, щелкнув на каком-либо из этих элементов. Как мы видим, выделились все объекты одновременно. Что как раз и означает, что у нас все объекты сгруппировались в одно целое.

А теперь же выделим эту группу в нашем списке слоев. Для этого щелкнем на вот этом треугольнике в Layers. Далее щелкнем на вот эту группу. Затем щелкнем на кнопку появления контекстного меню и выберем на этот раз не Release to Layers (Sequence), распределить по слоям, а Release to Layers (Build) распределить по слоям с накоплением. Щелкнем. Вот появился список всех наших слоев с соответствующим расположением объектов в них. А теперь сформируем нашу HTML страницу с видео клипом. Для этого щелкнем на пункте меню File, далее Export, выберем имя для нашего файла. Пусть это будет clip3. Щелкнем на кнопке Save, сохранить.

Конечно же, Macromedia Flash у нас уже выбран вид файла. Вот появилось перед нами окошко с настройками нашего Flash файла. Согласимся со всеми его установками, согласимся с тремя кадрами в секунду. В принципе этого вполне достаточно для наших целей и, конечно же, все файлы мы хотим сохранить, каждый из слоев в отдельном фрейме. Щелкнем сейчас на кнопке ОК. И наша цель успешно достигнута. HTML файл создан, и мы вернулись в наш Adobe Illustrator. Вот теперь мы опять открыли наш браузер папку My Documents, в которой можно увидеть наш HTML документ clip3, вместе, конечно же, с соответствующим сопутствующим ему Flash файлом, который мы можем в принципе проиграть на Flash проигрывателе, если у нас он установлен на нашем компьютере. Сейчас опустим нашу HTML страницу.

Щелкнем дважды. И можно увидеть, как на нашей HTML странице последовательно появляются все те объекты, которые мы и зарегистрировали для появления. В принципе, наш эффект полностью соответствует тому, что мы и ожидали. При этом, как мы видим, каждый из вот этих объектов, при появлении не затеряет так сказать предыдущий. Они появляются последовательно, накопляясь на нашей HTML странице. Закроем теперь этот файл. Щелкнем вот на этом крестике и вот мы опять вернулись в наше стандартное окошко Adobe Illustrator.

⇐Создание анимационного клипа. движение объекта | TeachPro WEB-дизайн | Обработка исходного документа.⇒