Поиск

Создание вращающегося значка

В этом разделе будет обсуждаться пример изображения, вращающегося в плоско сти, перпендикулярной плоскости экрана. Существует много случаев, когда авто ру Webстраницы требуется оживить свой документ, но нет достаточно времени для создания сложной движущейся картинки. Как быть в таком случае? Самый простой способ — использовать возможности обычных графических редакторов, установленных на большинстве компьютеров. Так, редактор Paint позволяет легко построить вращающееся изображение, основу которого составляет окружность.

Создадим для примера изображение вращающегося вокруг вертикальной оси значка, имеющего форму круга. Вначале следует определить размер будущего изображения и нарисовать в редакторе в режиме увеличения вспомогательную сетку, которая должна обозначать границы рисунка (рис. 7.15, а). Точка пересече ния левой вертикальной и верхней горизонтальной линий требуется для позицио нирования указателя мыши перед началом рисования окружности. Для создания окружности используется инструмент Эллипс. После того как окружность нарисова на, создается изображение значка. Эти этапы показаны на рис. 7.15, б, в. На одной из горизонтальных линий сетки наносятся штрихи, которые будут определять ширину вспомогательных рисунков. Отрезки, расположенные ближе к центру основного рисунка, могут быть несколько шире тех, которые находятся у краев. Затем формируется набор эллипсов разной ширины и создается ряд изображе ний повернутого значка (рис. 7.15, ге). Чтобы получить изображения фигуры, совершающей полный оборот вокруг оси, достаточно создать кадры, соответству ющие фазам поворота фигуры на 90 градусов, то есть от момента, когда изображе ние повернуто к наблюдателю ребром, до момента, когда оно полностью развер нуто в плоскости экрана.

Теперь осталось выбрать воображаемую ось, вокруг которой будет происходить вращение. Можно задать вращение вокруг вертикальной оси, проходящей через центр основного изображения. В этом случае все промежуточные изображения окружностей и эллипсов должны быть отцентрированы относительно границ кадра. Этот способ имеет недостаток: при использовании симметричных фигур трудно определить направление вращения. Кроме того, в данном случае плохо выражена объемность движения. Последняя исправляется созданием тени или прорисовкой боковой поверхности фигуры. Можно также задать вращение во круг оси, проходящей через левый или правый край основного изображения. Далее приступают к созданию отдельных кадров. Все они должны иметь одинако вый размер. Изображения очищаются от вспомогательных линий, вырезаются и сохраняются в виде отдельных файлов (один кадр — один файл). Для сохранения можно использовать форматы BMP, GIF, JPG, PCX, PNG.

На рис. 7.16 показан набор кадров, содержащих изображения значка, у которого на лицевой стороне нарисована стрелка, а обратная сторона закрашена одним цветом. В данном случае вспомогательные изображения выровнены относитель но левой и правой границ кадра так, чтобы создать видимость не вращения, а дви жения вдоль поверхности воображаемого вертикального цилиндра. Это помогло избежать упомянутых выше недостатков.

В данном примере рассмотрен только один вариант использования инструментов графического редактора. Разумеется, существует множество способов создания разнообразных визуальных эффектов. При помощи инструмента Эллипс редактора Paint можно создавать и другие виды анимации: изменение размера круга, вращение вокруг двух осей и т. д.