Macromedia Dreamweaver MX

Анимация графических изображений

Выше мы с вами рассмотрели анимацию свободно позиционируемых эле­ментов. По идее только их и можно анимировать, ведь только они могут позиционироваться где угодно и иметь какие угодно размеры. А значит, только их можно двигать по странице, изменять их размеры и делать неви­димыми. С обычными, фиксированными элементами такого не сделать.

Правда, у этого правила есть одно исключение. Можно анимировать графи­ческие изображения, и Dreamweaver предоставляет такую возможность. Но изменяться в процессе анимации может только имя отображаемого файла (атрибут src тега <img>).

Однако даже этого часто бывает достаточно. В самом деле, изменяя имя графического файла, можно создавать анимации с быстро сменяющимися кадрами. (Фактически, таким образом можно проигрывать на Web-странице
настоящий фильм, не прибегая к созданию видеофайла, даже в формате "анимированный GIF".) Нужно будет только запастись необходимым коли­чеством графических файлов, содержащих разные фазы анимации, но это уже проблема Web-художника.

Как же анимировать графическое изображение? Очень просто. Давайте соз­дадим новую страничку и назовем ее 12.l. htm. Она не будет иметь отноше­ния к сайту Sample site 1, но позаимствует из него графические файлы.

Поместите на эту страницу графическое изображение. В качестве отобра­жаемого файла задайте Email. gif, находящийся в папке Pics, вложенной в папку Sample! (в ней расположены файлы сайта Sample site 1). Это совсем просто, поэтому нет смысла пускаться в длительные объяснения.

Теперь создадим новую дорожку анимации для вновь созданного изображе­ния. Выделим его и выберем пункт Add Object в контекстном меню панели Timelines (в контекстном меню графического изображения такого пункта нет). После этого Dreamweaver выведет очередное сообщение, предупреж­дающее, что он может управлять только параметром имени отображаемого файла (рис. 12.14). Закройте его, нажав кнопку ОК.

Внешне созданная для графического изображения дорожка анимации не отличается от таковой для свободно позиционируемого элемента. Поэтому автор советует задавать для каждого анимируемого элемента страницы уни­кальное имя. Имя графического изображения можно задать в поле ввода Image редактора свойств.

Установим продолжительность анимации в пять секунд или 75 кадров (5 се­кунд умножить на 15 кадров в секунду). Для этого перетащим влево правую границу (вторую ключевую точку) дорожки до отметки "75" на шкале вре­мени. И зададим новый графический файл, который отобразится во время достижения второй ключевой точки. Для этого проверим, выделена ли вто­рая точка, и изменим содержимое поля ввода Src редактора свойств так, чтобы оно указывало на файл Email2.gif, также находящийся в папке Pics, вложенной в папку Sample!. Данный файл будет отображен при достижении конца... нет, не траектории, а дорожки (ведь изображение не движется).

Осталось включить флажок Autoplay и загрузить страницу 12. l. htm в Web - обозревателе. Через пять секунд после окончания загрузки страницы изо­бражение, отображаемое в ней, изменится, — наша анимация работает.

Если вам нужно последовательно сменить несколько изображений (фаз анимации), создайте соответствующее количество ключевых точек на до­рожке. В каждой из этих ключевых точек установите нужное значение поля ввода Src.