Мастер-класс по видео и анимации на Web. Часть II Анимируйся!*
Flash-анимация
Учитывая, какие маленькие файлы генерирует формат Flash, его можно считать идеальным средством для создания анимированных интерфейсов. Мы покажем вам, как скомбинировать анимацию с интерактивностью и в результате создать раскрывающееся меню, не похожее ни на что другое…
- Если нажать на кнопку нашего меню, на экране запускается анимация, по ходу которой разворачивается навигационная полоса нашего сайта (navigation bar). Начнем с создания картинки самой кнопки — кадра номер 1 на слое 1. Затем выделим и сгруппируем все изображение и выберем команду Insert>Symbol.
- В качестве типа символа укажите вариант «Button». Затем щелкните на кнопке Edit и вставьте в Timeline ключевые кадры для каждого состояния кнопки. Чтобы закончить процесс редактирования символа, щелкните на значке «стрелка» в правом верхнем углу рабочей области.
- Щелкните на кнопке, чтобы выделить ее, затем из основного меню выберите команду Modify>Instance. В разделе Actions включите опцию Go To и выберите Frame 2 (кадр 2). Закройте диалоговое окно и выберите ключевой кадр на слое 1. Выберите команду Modify Frame и включите режим Stop в разделе Actions.
- Вставьте в шкалу Timeline новый слой и разместите на ней ключевые кадры номер 1 и номер 10. При помощи инструмента Rectangular Drawing (нарисовать прямоугольник) постройте полоску и залейте ее линейным градиентом. Постройте из этой полоски символ — для этого снова выберите команду Insert>Symbol и укажите опцию Graphic. Выделите кадр номер 10 и поместите в него полоску так, как показано на этой картинке.
- После этого выделите первый ключевой кадр на слое 2 и выберите команду Properties>Tweening. Теперь выберите из разворачивающегося меню команду Motion и убедитесь, что в данный момент включен режим Scale. Теперь отмасштабируйте полоску-символ таким образом, чтобы он скрылся под кнопкой на слое 1.
- Включите режим Stop для кадра номер 10 в слое 1, после чего попробуйте прокрутить свою анимацию при помощи команды Control>Test Movie. Действуя таким образом, вы можете построить целую серию анимированных эпизодов, которые будут включаться в ответ на какие-либо действия пользователя — включая отправку запроса к Web-серверу загрузить новую HTML-страницу.