Аниматор 4

Аниматор 4 на основе некоторой исходной картинки генерирует анимационный ролик, в котором исходная картинка через определенный промежуток времени поворачивается на 90° по- или против часовой стрелки. Предлагаются две версии программы. Версия B раскрывается на весь экран, тогда как Версия А работает в стандартном окне броузера. Аниматор 5 также осуществляет вращение исходной картинки, но несколько по другому, чем Аниматор 4. Различия между Аниматорами 4 и 5 обсуждаются в конце данной страницы.

Чтобы анимация протекала в более-менее реальном режиме времени, подбирайте для нее небольшие "по весу" исходные картинки. Желательно — не более 15 - 20 кб (хотя, впрочем, все напрямую зависит от мощности вашего процессора). Для первоначальных экспериментов вы можете взять какой-нибудь фрагмент со Страницы 3.1 или же какую-нибудь абстракционистскую картину. Последние являются очень легкими по "весу" (несмотря на то, что могут занимать собой весь экран) и в этом смысле идеально подходят для анимирования.

Итак, откройте выбранный фрагмент в броузере, затем по методу, изложенному на Странице 2.1.3, захватите с экрана его код и вставьте его в аниматор. Вставка производится так же, как и в основной программе. Т. е. для того, чтобы вставить код картины, находящийся в буфере обмена, нажмите кнопку "Загрузить файл картины", расположенную в левом верхнем углу окна аниматора. В ответ на это действие посредине экрана откроется поле ввода для загрузки кода картины. Щелкните по этому полю правой кнопкой мыши и в выехавшем меню выберите пункт "Вставить". Код картины вставится в поле ввода. Нажмите кнопку "Загрузить", расположенную непосредственно над полем ввода. Через некоторое время (в случае больших картин доходящее до 1 мин.) код картины исчезнет и вместо него появится сама картина.

Теперь определитесь с тем, в каком направлении в анимационном ролике будет вращаться загруженная картина. По умолчанию предполагается, что она будет вращаться по часовой стрелке. Если это не так, то выберите нужное значение из выпадающего списка вверху окна аниматора.

Затем определитесь со временем задержки. По умолчанию оно установлено равным 50-ти миллисекундам. Следует понимать, что время задержки не означает времени одного поворота исходной картины в будущем анимационном ролике. Оно означает только лишь промежуток времени, через который вызывается программа, осуществляющая один поворот. Время работы этой программы заранее предугадать невозможно, поскольку оно зависит от мощности вашего компьютера.

Таким образом в каждом конкретном случае вам придется экспериментировать со временем задержки, чтобы достичь желаемой скорости протекания анимации. При этом совсем не факт, что если она, по вашему мнению, протекает слишком медленно, то вам следует уменьшить время задержки. Проблема, как уже отмечалось, может заключаться в недостаточной мощности вашего процессора, и если вы будете бепрерывно "пинать" его с требованием произвести новый поворот, в то время, как он все еще никак не может закончить предыдущий, то такими действиями вы только усугубите ситуацию. Более разумным в данном случае будет выбор более "легкой" исходной картинки для анимации.

Чтобы установить свое время задержки, отличное от предустановленного по умолчанию, введите его в соответствующее поле и обязательно нажмите кнопку "Задержка" над этим полем, чтобы новое значение установилось.

Теперь все готово для генерации анимационного ролика. Нажмите на кнопку "Создать анимацию". В ответ на это действие откроется окно на весь экран, в котором перерисуется исходная картина и начнется процесс ее движения. Код этой движущейся картины представляет собой "чистый" HTML/CSS - документ, в который вставлен небольшой скрипт, реализующий динамическое преобразование параметров его тэгов (что и создает иллюзию движения).

Теперь объясним отличие рассматриваемого здесь Аниматора 4 от Аниматора 5, который также реализует вращение исходной картинки. При создании анимации, Аниматор 4 прежде всего определяет параметры воображаемого прямоугольника, в котором заключена исходная картина. Левая сторона этого прямоугольника совпадает с левой стороной самого левого квадрата исходной картины, верхняя сторона — с верхней стороной самого верхнего квадрата исходной картины и т. д.